何をしてあげられるという訳じゃないBlog微かな戸惑いをそっと吐きだすまりーのブログ。itAN(tcd014)では、投稿記事の記事タイトル下にアイキャッチが挿入できるようになっていますが、このアイキャッチには下図のようなシンプルなグレーの枠がついています。この枠の色を変えたり、枠に影をつけたりい、などといったカスタマイズ方法を紹介します。変更するファイルは、style_pc.cssです。書かれている部分が、記事の始めに挿入されるアイキャッチのCSSです。バックアップを取って自己責任でお願いします。何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。枠の色を変えるまず、枠の色を変えてみます。正確には枠の色ではなくアイキャッチ画像の背景色です。デフォルトのグレーですので、ここを好きな色のコードに変えます。}アイキャッチの枠の色を変えた状態また、色ではなく、画像にすることもできます。paddingで指定されている値を変えれば、枠の太さが変わります。枠を角丸にする枠を角丸にしてみます。角を丸くするのは、border-radiusプロパティを使います。指定する値は、角を”4分の1の円”として見た時の半径です。角丸にするための値の指定方法は、左上から時計回りに指定します。対応させるために、ベンダープレフィックスをつけた指定をしています。枠をつけずに影をつけるアイキャッチに枠をつけずに、影をつける方法です。影をつけるには、box-shadowプロパティを使います。移動距離」「ぼかす範囲」と、影の色です。#999;ぼかす範囲の次に「影を拡張させる距離」の値を書くと、影の部分が拡張されます。対応させるために、ベンダープレフィックスをつけた指定をしています。アイキャッチの枠をやめて影をつけた状態カテゴリ・アーカイブページのアイキャッチの枠をカスタマイズするカテゴリページやアーカイブページに表示されるアイキャッチも、同じ要領でカスタマイズできます。