WordPressテーマ”Stinger3”のアイキャッチ画像のサイズと周辺デザインを変えてみた。

    

medium_10443708943

Stinger3のテーマを使うひとが、自分も含めてとにかく多い。だからカブるのはある意味しょうがないのですが、なんとかできないだろうかと試行錯誤。

今回は、投稿画面一覧のアイキャッチ画像の位置とかサイズを変えて差別化を図ります。

サイトを開いた時に、他のブログと似たような印象になってしまうのは、投稿画面一覧のアイキャッチ画像一覧のデザインのせいなんですよね。

これをなんとかしましょう。

photo credit: Matthieu Luna via photopin cc

スポンサーリンク



アイキャッチ画像のサイズを追加

参考にしたサイトは「西沢直木のWebサイト」というサイト。

Stinger3の投稿一覧で使うアイキャッチ画像のサイズを変更する
http://www.nishi2002.com/6820.html

まずは、大きなアイキャッチ画像を使えるようにします。

”管理画面”の”外観”

”テーマ編集”

”functions.php”に以下のコードを追加。
add_image_size(‘thumb500’,500,200,true);

【変更前】
//アイキャッチサムネイル
add_theme_support(‘post-thumbnails’);
add_image_size(‘thumb100’,100,100,true);
add_image_size(‘thumb110’,110,110,true);

【変更後】
//アイキャッチサムネイル
add_theme_support(‘post-thumbnails’);
add_image_size(‘thumb100’,100,100,true);
add_image_size(‘thumb110’,110,110,true);
add_image_size(‘thumb500’,546,100,true);

細長いアイキャッチ画像にしたかったので横サイズ546px,縦サイズ100pxとしました。

追加したサイズのアイキャッチ画像を表示させる

  • index.php
  • home.php
  • archive.php
  • search.php

以上4つのテンプレートのコード書き換えが必要です。

それぞれ、以下の該当するコードを探して書き換えましょう。

【変更前】
the_post_thumbnail(array( 150,150 ),

【変更前】
the_post_thumbnail(‘thumb500’,

スタイルシートを変更してデザインを整える

そのままでは少しおかしな表示になってしまうので、スタイルシートでデザインを整えます。

コメントアウトで回り込みとか、画像のサイズ指定を解除しています。

【変更前】

.sumbox {
float: left;
height: 150px;
width: 150px;
}
.post .entry .entry-content {
float: right;
width: 380px;
padding-left: 20px;
}
.entry {
margin-bottom: 20px;
padding-top: 10px;
}
.entry .sumbox {
float: left;
height: 150px;
width: 150px;
}

【変更後】

.sumbox {
/*———————————————————
float: left;
height: 150px;
width: 150px;
———————————————————*/
}
.post .entry .entry-content {
/*———————————————————
float: right;
width: 380px;
padding-left: 20px;
———————————————————*/
}
.entry {
margin-bottom: 20px;
padding-top: 10px;
}
.entry .sumbox {
/*———————————————————
float: left;
height: 150px;
width: 150px;
———————————————————*/
}

アイキャッチ画像を変更する。

232423

アイキャッチ画像、つまりサムネイルを記事ごとに設定しなおさなければなりません。このアイキャッチ画像を設定し直す作業はとても大変なのでプラグインを使ってサッと終わらせてしまいましょう。

”Regenerate Thumbnails”というプラグインを管理画面のプラグイン検索で探しましょう。

インストールして有効化したら、管理画面のツールから”Regen.Thumbnails”を選択。

”Regenerate All Thumbnails”を実行。



まとめ

アイキャッチ画像をつけるとかつけないとか記事ごとに設定できたら良いのになぁ。その辺りの知識に乏しいので今回は実現できなかった。

アイキャッチって、そもそも見た目でクリックしたくなるような、仕掛けなんだろうけど、どちらかというと隙間がなくて文字で埋め尽くされているようなサイトが今の気分。

私は隙間があるとなぜか、不安になってしまうのです。

シンプルで魅力的なタイトルを考えられたら、そんなことないのだろうけど。。


スポンサーリンク



関連記事

このページの先頭へ