• 2015.2.12
• TCDANカスタマイズ
• コメントを書く

AN(tcd014)で記事内に表示されるアイキャッチの枠をカスタマイズする

AN(tcd014)では、投稿記事の記事タイトル下にアイキャッチが挿入できるようになっていますが、このアイキャッチには下図のようなシンプルなグレーの枠がついています。

この枠の色を変えたり、枠に影をつけたりい、などといったカスタマイズ方法を紹介します。

変更するファイルは、style_pc.cssです。/* — single post page — */ の /* post eyecatch */ と書かれている部分が、記事の始めに挿入されるアイキャッチのCSSです。

枠の色を変える

まず、枠の色を変えてみます。正確には枠の色ではなくアイキャッチ画像の背景色です。background:#ebebeb; がデフォルトのグレーですので、ここを好きな色のコードに変えます。

変更前

/* post eyecatch */
#post_image { margin:0 0 15px 0; text-align:center; }
#post_image img { background:#ebebeb; padding:10px; max-width:618px; }

アイキャッチデフォルト状態

変更後

/* post eyecatch */
#post_image { margin:0 0 15px 0; text-align:center; }
#post_image img { background:#bee0c2; padding:10px; max-width:618px; }

アイキャッチの枠の色を変えた状態

また、色ではなく、画像にすることもできます。paddingで指定されている値を変えれば、枠の太さが変わります。

変更後

/* post eyecatch */
#post_image { margin:0 0 15px 0; text-align:center; }
#post_image img { background:url(img/common/ec-bg2.gif); padding:20px; max-width:618px; }

アイキャッチの枠を画像にした状態

枠を角丸にする

枠を角丸にしてみます。角を丸くするのは、border-radiusプロパティを使います。指定する値は、角を”4分の1の円”として見た時の半径です。

角丸にするための値の指定方法は、左上から時計回りに指定します。

値の適用場所	指定例
4つの角すべて	border-radius:10px;
左上 右上 右下 左下	border-radiusu:10px 15px 20px 25px;
左上 右上と左下 右下	border-radius:10px 15px 20px;
左上と右下 右上と左下	border-radius:10px 20px;

変更後

/* post eyecatch */
#post_image { margin:0 0 15px 0; text-align:center; }
#post_image img { background:#ebebeb; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; max-width:618px; }

古いバージョンの FireFox や Safari にも対応させるために、ベンダープレフィックスをつけた指定をしています。

アイキャッチの枠を角丸にした状態

枠をつけずに影をつける

アイキャッチに枠をつけずに、影をつける方法です。

影をつけるには、box-shadowプロパティを使います。今回、指定する値は、「水平方向の移動距離」「垂直方向の移動距離」「ぼかす範囲」と、影の色です。

値の適用場所	指定例
水平方向 垂直方向 影の色	box-shadow:5px 5px #999;
水平方向 垂直方向 ぼかす範囲 影の色	box-shadow:5px 5px 10px #999;

ぼかす範囲の次に「影を拡張させる距離」の値を書くと、影の部分が拡張されます。

変更後

/* post eyecatch */
#post_image { margin:0 0 15px 0; text-align:center; }
#post_image img { -webkit-box-shodow:5px 5px 10px #999; -moz-box-shadow:5px 5px 10px #999; box-shadow:5px 5px 10px #999;  max-width:618px; }

古いバージョンの FireFox や Safari にも対応させるために、ベンダープレフィックスをつけた指定をしています。

アイキャッチの枠をやめて影をつけた状態

カテゴリ・アーカイブページのアイキャッチの枠をカスタマイズする

カテゴリページやアーカイブページに表示されるアイキャッチも、同じ要領でカスタマイズできます。

変更するファイルは、style_pc.css です。

/*– archive –*/ の中にある #post_list .image を変更して下さい。

#post_list .image { background:#ebebeb; padding:10px; display:inline-block; float:left; margin:0 0 15px 15px; }

応用

#post_image img に、border-radiusプロパティやbox-shadowプロパティを全部書けば、枠が角丸になり影もつきます。

いろいろなお好みのパターンでカスタマイズしてみてくださいね。

また、スマホで表示されるアイキャッチも変更する場合は、style_sp.css で変更してください。