アイキャッチ画像は、WordPressの便利な機能です。アイキャッチの意味は“人目を引く”と言った意味があるそうですが、それならばもっとレイアウトを考えてよ…と思ってしまいました。いや、無料で使っているのに文句はいけません。と言う訳で、初心者でも出来るアイキャッチ画像の位置を変更する簡単な方法をご紹介しましょう。
アイキャッチ画像の位置を変更するには、コードを編集します。
初心者の方は躊躇するかもしれませんが、意外と簡単に位置変更できますよ。
注意事項
テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。
失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。
▼バックアップするファイル
- content.php
- content-page.php
環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。
▼この記事の環境
- WordPress 3.9-ja
- Twenty Twelve 1.3
- Google Chrom
タイトルと本文の間に表示変更
デフォルトでは、アイキャッチ、タイトル、本文の順に表示されます。
今回は、タイトル、アイキャッチ、本文の順に表示するように変更します。
条件分岐タグを使うとページのテンプレートによって自動的に変更することができるのですが、ここでは初心者でも簡単に！を目標に解説します。
WordPressの編集画面にログインして［外観］−［テーマ編集］で、テーマ編集画面を開いて下さい。
投稿ページのアイキャッチ画像位置変更
投稿ページのアイコン画像位置変更は、content.phpの記述を変更します。
デフォルトの表示は、こんな感じですね。
※アイキャッチ画像は、縦150px横150pxを使用しています。
WordPress管理画面で［外観］-［テーマの編集］の順にクリックして進み、テーマの編集画面を表示します。
右側のテンプレートメニューから、content.phpをクリックするとcontent.phpのソース編集画面が表示されます。
投稿ページのアイキャッチ画像を表示するためのソースは下記です。
<?php if ( ! post_password_required() && ! is_attachment() ) : the_post_thumbnail(); endif; ?>
20行目〜22行目辺りの
“<?php if ( ! post_password_required() && ! is_attachment() ) : the_post_thumbnail(); endif; ?>”を選択して、切り取り（カット）します。
下図のようになればOKです。
アイキャッチをタイトルと本文の間に表示させたいので、41行目辺りの
“<div class="entry-content">”の前に記述します。
※先のソースを切り取り（カット）する前は、43行目です。
下図のようになればOKです。
ソースの貼付が終わったら［ファイルを更新］をクリックして編集を保存して下さい。
これで、投稿ページのアイキャッチが、タイトルと本文の間に表示されるようになります。
簡単ですね。ヽ(*´∀`)/
ついでに、個別ページのアイキャッチ位置も変更してみましょうか？
個別ページのアイキャッチ位置変更
固定ページのアイコン位置変更は、content-page.phpの記述を変更します。
アイキャッチ画像位置変更前は、こんな感じです。
※アイキャッチ画像は、縦250px横960pxを使用しています。
右側メニューのcontent-page.phpをクリックすると編集画面が表示されます。
下記コードを変更します。
<?php the_post_thumbnail(); ?>
14行目辺り
“<?php the_post_thumbnail(); ?>”の記述を選択して切り取り（カット）します。
下図のようになればOK。
投稿ページと同じように、タイトルと本文の間に表示させたいので
“<div class="entry-content">”の前に貼り付けます。
下図のようになればOK。
貼付が終わったら［ファイルを更新］をクリックして編集を保存して下さい。
これで、個別ページのアイキャッチがタイトルと本文の間に表示されるようになります。
個別ページのアイキャッチ画像位置は、変更しない方がレイアウト的に良いように思ったり思わなかったりします。
ﾃﾍﾍ…(*´дﾟ*)ゞ
まぁ、好みの問題ですね。
もひとつおまけに、アイキャッチの表示サイズも調整して見栄えを良くしましょう。
アイキャッチ画像の表示サイズ変更
アイキャッチ画像の表示サイズは、予め設定された画像サイズをパラメータで指定します。
画像サイズを変更したい方は、参考にして下さい。
メディア画像サイズの設定方法
WordPressの管理画面から［設定］−［メディア］をクリックするとメディア設定画面が開きます。
サムネイルのサイズ、中サイズ、大サイズの設定が可能です。
サムネイルは幅と高さ設定、中サイズと大サイズは幅と高さの上限を設定します。
※元の画像サイズが設定より小さい場合は、元の画像サイズのまま表示されます。
変更したいサイズを半角数字で入力し［変更を保存］をクリックすると変更できます。
また、アップロードしたファイルを年月ベースのフォルダに整理したくない場合は、ファイルアップロードのチェックを外して保存します。
メディア画像サイズのパラメータ
何度も同じことを言いますが、条件分岐タグを使うとページのテンプレートによって自動的に変更することができるのですが、あーだこーだとややこしいので、今回は直接コードに記述する方法をご紹介します。
個別ページのアイキャッチでサイズ変更してみましょう。
下記のパラメータを“the_post_thumbnail();”の“()"内に記述することで変更できます。
| サムネイルのサイズ | thumbnail |
| 中サイズ | midium |
| 大サイズ | large |
| フルサイズ | 'full' |
▼ サムネイルのサイズの記述例
<?php the_post_thumbnail('thumbnail'); ?>
▼ 中サイズの記述例
<?php the_post_thumbnail('midium'); ?>
▼ 大サイズの記述例
<?php the_post_thumbnail('large'); ?>
▼ フルサイズの記述例
<?php the_post_thumbnail('full'); ?>
例えば、サムネイルのサイズで表示させたい場合は、下図のように記述します。
すると、下図のように表示されます。
このままだとブサイクですね。(；´∀｀)
本文の回り込み設定をして、レイアウトを整えましょう。
アイキャッチのレイアウト変更
レイアウト変更は、CSS（スタイルシート）で指定します。
今回は、サムネイルの右側に文字が回り込むように設定する方法を解説します。
投稿ページのレイアウトを下図のようにカスタマイズします。
content.phpの記述追加
最初に、CSSを適用させるため“content.php”を修正します。
アイキャッチ画像のコードを
“<div class="entry-post-thumbnail">”と
“</div><!-- .entry-post-thumbnail -->”で囲みます。
<div class="entry-post-thumbnail"> <?php if ( ! post_password_required() && ! is_attachment() ) : the_post_thumbnail(); endif; ?> </div><!-- .entry-post-thumbnail -->
下図のようになればOK。
［変更を保存］をクリックして保存して下さい。
ちなみに、固定ページのレイアウトを変更させたい場合は、content-page.phpのアイキャッチ画像のコードを下記のように書き換えます。
<div class="entry-post-thumbnail"> <?php the_post_thumbnail(); ?> </div><!-- .entry-post-thumbnail -->
編集後に保存することを忘れないで下さいね。
最後に、CSSを追加します。
style.cssの記述追加
直接“style.css”を編集しても良いのですが、アップデートで消されるとイヤなので“CSS編集”で追加することにしましょう。
CSS編集は、WordPressの便利なプラグインの“Jetpack（ジェットパック）”をインストールしてWordPress.comに連携すると利用できます。
CSS編集に記述したコードは、style.cssを編集しなくても反映され、テンプレートをバージョンアップしても書き換えされることがありません。
※直接編集したコードは書き換えられることがあります。
また、同じセレクタ名があった場合には、CSS編集で記述したコードが優先されます。
Jetpackをインストールしていない方は、“多機能でちょー便利なプラグイン“Jetpack by WordPress 2.9.3””を参考にして連携しておいて下さい。他にも便利な機能が満載ですので必ず役立ちますよ。
Jetpackをインストールし、連携しているのに“CSS編集”が表示されていない方は［Jetpack］の画面から“カスタム CSS”を有効化して下さい。
WordPressの編集画面から［外観］−［CSS編集］をクリックして、CSS スタイルシートエディター画面を開きます。
下記のコードを貼付けます。
/* サムネイル画像 */
div.entry-post-thumbnail {
float: left;
margin: 0 10px 10px 0;
}
下図のように貼り付ければOKです。
［プレビュー］をクリックして確認してみましょう。
下図のように表示されれば成功です。
ロリポップを利用している方はプレビューや保存する際に、セキュリティの関係で403エラーが表示されることがあります。
その場合は、“Master Post Advert”広告表示できない！エラー対処方法と同じ対処法で改善できます。
うまく表示されていたら［スタイルシートを保存］をクリックして保存します。
ちなみに
div.entry-post-thumbnailは、セレクタ名でCSSの設定を指定しています。
float:は、画像の左右位置を指定しています。
画像を右に表示したい場合は、“right”と記述します。
▼ 画像を右側に表示したい場合の記述
/* サムネイル画像 */
div.entry-post-thumbnail {
float: right;
margin: 0 10px 10px 0;
}
margin:は、画像の外側のスペースです。
上、右、下、左の順に数値で指定します。
▼ 画像左で、画像と文字のスペースを広げたい場合の記述例
/* サムネイル画像 */
div.entry-post-thumbnail {
float: left;
margin: 0 20px 10px 0;
}
お疲れさまでした♪
以上で、アイキャッチの位置変更方法の解説は終了です。
お好みの設定でお楽しみ下さい。(´-ω-`)) ﾍﾟｺﾘ