【ブログカスタマイズ】レスポンシブ設定でスマホのトップページをすっきり見せるためのtips

こんにちは、レスポンシブ設定大好きなえむしです。

はじめに
- メディアクエリとは
コピペする場所
非表示にしていく場所
コメント欄を非表示にする
星とアップロードした時間、続きを読むとカテゴリーも非表示に
画像を縮小表示
さいごに

はじめに

PCとスマホ用に設定を分けている方は沢山おられるかと思いますが、僕はPCに設定したテーマの雰囲気がそのまま引き継げるレスポンシブ設定が好きなので、今回はそれにこだわったカスタマイズを幾つか紹介していこうと思います。
liginc.co.jp

通常のページをそのままレスポンシブにすると、問題になってくるのはトップページの視認性。
一記事がものすごく長くなりますよね。

例えば、こんな感じに。

f:id:mshimfujin:20161001160352p:plain

次の記事に行くまでとてもとても長いです…。

これをスッキリさせていくために幾つかの設定を紹介しようかと思います。アーカイブのページを表示させて一発で解決する方法もありますが、 SEO的にあまり良くないそうですし、少し大味過ぎる解決方法だと思うのでメディアクエリを使ってスマホ用のページを設定していく事にします。

メディアクエリとは

allabout.co.jp 簡単に言うと、画面の横幅に応じた特別な設定をしますよって事です。
今回は、スマホで一般的な480pxを横幅に設定して、CSSを書いて行きます。

コピペする場所

まずはコピペ場所を開きます。場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。ここをクリックして

今から紹介するコードを一番下なんかにペーストして行って下さい。

非表示にしていく場所

f:id:mshimfujin:20161001162601p:plain

f:id:mshimfujin:20161001161229p:plain

こんな感じです。

消すと言っても消え去ってしまうワケではありません。

あくまでトップページからは見えないようにする、非表示にすると言う小技です。

各エントリーに飛ぶと、非表示された部分はすべて見えます。

コメント欄を非表示にする

georges.hatenablog.jp
やり方は、僕からの紹介ではなく、「急がば急いで回れ」さんから。個人的には、トップページから各エントリーのコメントは見えなくても良いと思うので、これはそのまま設定されると良いと思います。
もしも、スマホでアクセスした場合だけコメントを非表示にしたい、と言うのであれば以下のコードを「急がば急いで回れ」さんのものの代わりにコピペして下さい。

@media screen and (max-width: 480px) {
.page-index .comment-box {
   display: none;
}
}

星とアップロードした時間、続きを読むとカテゴリーも非表示に

次は「エントリーをアップロードした時間は〜だよ」って情報と「星」、

さらに、カテゴリーと、続きを読む、も非表示に。

/エントリフッター続きを読むカテゴリーを非表示に/
@media screen and (max-width: 480px) {
 .page-index .entry-footer,
 .page-index .entry-see-more,
 .page-index .entry-categories {
  display: none;
}
}

ここまでの設定でどうなるかというと、こんな感じです。

f:id:mshimfujin:20161001163216p:plain

少し短くなりましたね。
でも、まだまだ長いです。
これでまだ1記事でスマホの画面一つ占領している感じだと思います。

画像を縮小表示

そこで次は画像を縮小します。Innocentを制作して下さったMoonNoteさんのこちら。

moonnote.hateblo.jp

本当は、こちらで紹介されている方法の方が綺麗に収まりますが
トップに貼っている画像一つ一つの<p>〜</p>を<p class="post-thumbnail">〜</p>にするのは少し骨が折れます。

そこでご紹介するのがこちらのコード

/ トップページの画像を縮小表示 /
@media screen and (max-width: 480px) {
 .page-index .entry-content img {
 border: 1px solid #ccc;
 padding: 2px;
 margin-bottom: 2px;
 margin-right: 10px;
 border-radius: 3px;
 float: left;
 display: block;
 width: 120px;
 height: auto;
}
}

画像を真四角には出来ませんが、スマホの表示の方では、縦を120pxにして、横幅は比率を守ったままで画像を縮小します。
とりあえずの応急処置としては十分ではないでしょうか。
しないよりはマシ？程度かもしれませんがトップページに貼った画像の大きさが気になっていた方はやってしまいましょう。
比率が崩れても画像を真四角に収めたい！という方は、最後のheight: auto;の部分をheight: 120pxに変えてください。四角に収まりますよ。

スマホからだけではなく、普段でもトップページの画像を縮小表示したい人は、以下をコピペして下さい。今度は画像の縦幅を120pxに設定しています。2016年10月1日現在、当サイトで採用している方式となります。

/ トップページの画像を縮小表示 /
 .page-index .entry-content img {
 border: 1px solid #ccc;
 padding: 2px;
 margin-bottom: 2px;
 margin-right: 10px;
 border-radius: 3px;
 float: left;
 display: block;
 width: auto;
 height: 130px;
}
@media screen and (max-width: 480px) {
 .page-index .entry-content img {
 border: 1px solid #ccc;
 padding: 2px;
 margin-bottom: 2px;
 margin-right: 10px;
 border-radius: 3px;
 float: left;
 display: block;
 width: 120px;
 height: auto;
}
}