前からWordPressのブログなんかでよく見かけ「いいなぁ～やってみたいなぁ〜」と思ってはいたものの、カスタマイズには難易度がかなり高そうで、まして”Blogger“じゃ無理だよね…とやる前から諦めていましたが、いざやってみたら意外と簡単に出来ました。
記事一覧のラベルをアイキャッチ（サムネイル）に表示させる方法です。
ご紹介いたします。
アイキャッチにラベルを表示させる
何度も言うようですが今回やろうとしていることは、記事一覧画面のアイキャッチ部にラベルを表示させることです。
アイキャッチ部にプロポーズの言葉を表示させて恋人をサプライズさせたりする方法ではありませんのでご注意ください。（別にやっても構わない）
ちなみに元々はこんな感じで記事タイトルの下に表示されてました。
これはこれでいいんですが、画像と一緒に表示された方が絶対かっこいいじゃないですか！
やり方
HTMLを編集しますので必ずバックアップをとってからやりましょう。まずは新たにCSS部に下記を追加します。
.i-label {
position: relative;
}
.i-label p {
position: absolute;
top: 0;/*画像の左上に配置*/
left: 0;
margin: 0; /*余計な隙間を除く*/
background: rgba(255, 255, 255, 0.7);/*背景を半透明に*/
}
"i-label" はアイキャッチのラベルって意味で付けただけなので、気に入らない人は好きな名前にして下さい。
その他、配置や透明度なども好みで変更してください。
続いてCtrl＋Fで検索ウィンドウを出し<img expr:src='data:post.firstImageUrl'/>を検索します。
ここが記事一覧画面のhtml部分です。
ここからさらに下に行くとラベルのコードが出てきます。
この赤枠の部分を一式切り取ります。
切り取ったラベルコード一式を<img expr:src='data:post.firstImageUrl'/>の下に貼り付けます。
最後に上記の位置に<div class='i-label'>～</div>を記載して囲ってやれば完成です。
すると下のようにアイキャッチにラベルが表示されているはずです。
やってみると意外と簡単でしょ？
ラベルの文字調整等はCSSの「.post-tag」部で調整してください。
参考サイト：
画像の上におしゃれに文字やボタンをのせる方法（CSS）
まとめ
こんな感じでラベルがアイキャッチに表示されるだけで、見た目が一気におしゃれでかっこよくなるのでオススメです！（そう思ってるのは自分だけかもしれんが…）
ちなみに自分はvaster2のテンプレートを使用しているので、もしかしたら他のテンプレートだと表記が違ったりするかもしれませんのでご注意ください。
それから「ここはどうやるの？」とか「なんかエラーになっちゃうんだけど！」等、小難しい質問をされてもたぶん答えられませんのでご注意ください。
ちなみに自分はvaster2のテンプレートを使用しているので、もしかしたら他のテンプレートだと表記が違ったりするかもしれませんのでご注意ください。
それから「ここはどうやるの？」とか「なんかエラーになっちゃうんだけど！」等、小難しい質問をされてもたぶん答えられませんのでご注意ください。
スポンサーリンク
スポンサーリンク
コメントを投稿