【Luxeritas】個別記事のアイキャッチ画像の左右の空白を取り除く

2019年7月21日2019年12月28日Luxeritas

前回の記事で個別記事にアイキャッチ画像を自動表示させるカスタマイズをしましたが、このアイキャッチは記事の幅と同じなので左右に空白ができます。これを取り除いてメインカラムの幅一杯に表示させるようにしてみます。

ビフォー＆アフター

まずは、カスタマイズ前とカスタマイズ後をみてください。

あまり大差ないと突っ込まないでね。hatenaとしてはトレンドを取り入れたつもりなので。

マイナスマージンで打ち消すが、レスポンシブだと結構大変

まずこの空白は何かというのを調べます。hatenaの場合はChomeのデベロッパーツールを使って調べます。詳細は説明しませんので興味のある方はWEB検索してください。

gridクラスのブロックの左右paddingと分かりました。このpadding量を0にすればいいかというとそうは簡単にはいきません。 gridブロック内には記事のタイトル、記事本文、記事内画像などが含まれていますのでそれがすべてメインカラム枠一杯に拡がってしまいます。拡げたいのはアイキャッチだけですので。

このpadding量のマイナスのmarginをアイキャッチ画像ブロックに設定して無理矢理打ち消すという方法を使いました。

ところがLuxeritasは完全レスポンシブなので画面幅でpadding量が変わります。この変化する画面幅を デベロッパーツール を駆使して調べます。それが下記の表です。

余白を取り除くCSSカスタマイズ

ダッシュボードから Luxeritas→カスタマイズ(外観)→追加CSS または 子テーマの編集→ style.css に下記のCSSを追加します。

/* 個別記事アイキャッチ画像 左右余白除去 */

#post-top-thumbnail {
    margin: 0px -7px 40px;
}

@media (min-width: 576px) {
    #post-top-thumbnail {
        margin: 0px -20px 40px;
    }
}

@media (min-width: 992px) {
    #post-top-thumbnail {
        margin: 0px -25px 40px;
    }
}

@media (min-width: 1310px) {
    #post-top-thumbnail {
        text-align: center;
        margin: 0px -68px 40px;
    }
}

このように @media を使って画面サイズでCSSを切り替える方法をメディアクエリといいます。上記のように先に小さい画面サイズ（モバイル用）のCSSを決めて、大きい画面サイズのCSSを後から上書きしていく方法をモバイルファーストといいます。今はこの書き方がトレンドらしいです。

まとめ

今回は個別記事のアイキャッチ画像の左右の空白を取り除くテクニックを紹介しました。

paddingとmargin、メディアクエリ、モバイルファーストとかの解説はきりがないのでしませんでしたが、興味かあったらWEB検索して調べてみてください。

大して変わり映えしないというご意見をあるかもしれませんが、こういったちょっとしたこだわりの積み重ねがブログの個性となっていくと信じて少しずつカスタマイズを楽しんでいこうと思ってます。