増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

WordPressのレスポンシブ対応について少し

   

このブログはWordPressを使っています。

今の時代、サイトやブログのスマートフォン対応は欠かせないものとなりました。電車の中を見てもスマートフォンをいじっていない人がいないのではないかというくらいにスマートフォンは普及しています。

今日はWordPressで作ったブログをスマートフォンで見た時に綺麗に見えるよう最適化するレスポンシブ対応について少し書きたいと思います。

レスポンシブ・・・急に専門用語出されてもわからないよ!って人もいるかと思いますが、ようするにスマートフォンから見た時もパソコンから見た時にも綺麗に見えるようにするデザインの事です。

世の中には「WordPress レスポンシブ」で検索すると、無料や有料のテーマがたくさんでてきます。

ただ、その中でどれを選んでよいかわからないという方いませんか?僕もその一人です。

このブログで結局使っているのは、WordPressに標準で付いているテーマ「twentyfourteen」をカスタマイズして使っています。

カスタマイズといっても、ほとんど大したことはしておらず、Google Adsenseを入れたりしているだけです。

スマートフォンでこのブログを見てみると、気になる箇所が1つだけあり、ブログ記事の内容が記事一覧に出てこないことでした。

たしかに記事の内容を表示すると、表示が騒がしくなる感はあるのですが、僕のようなめんどくさがりがこのブログに来て、そんなページを見せられたらそこでさよならします。

やっぱり一覧にも続きを読むまでは出したいということで、下記のようなcssを追加しました。

 

通常だと、entry-contentというクラスはdisplay:noneになっており、表示されません。上記cssを追加することによって、表示させるよう変更しました。

また、コンテンツによっては横に伸びてしまう場合があり、その時に横スクロールが出てしまうのを防ぐためにoverflowをnoneにしてはみ出てしまったコンテンツは非表示にする記述も追加してあります。

これでブログ記事一覧に行くと本文が表示されるようになりました。

これくらいなら、phpわからないからテーマのカスタマイズなんてできないよって人もできますね。

 - wordpress