初心者でも簡単!WPでSEO対策

無料で利用できるWordPressを使って、SEO初心者でも簡単に検索エンジン上位表示できる情報をお届けします。

【Twenty Twelve】アイキャッチの位置を変更する方法・ソースコード

 

アイキャッチ画像は、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のソース編集画面が表示されます。

アイキャッチ画像位置変更/content.phph編集画面  
 

投稿ページのアイキャッチ画像を表示するためのソースは下記です。

<?php if ( ! post_password_required() &amp;&amp; ! is_attachment() ) :
				the_post_thumbnail();
			endif; ?>
 
 

20行目〜22行目辺りの
<?php if ( ! post_password_required() && ! is_attachment() ) : the_post_thumbnail(); endif; ?>”を選択して、切り取り(カット)します。

アイキャッチ画像位置変更/content.phpの削除コード  
 

下図のようになればOKです。

アイキャッチ画像位置変更/content.phpのコード削除完了画像  
 

アイキャッチをタイトルと本文の間に表示させたいので、41行目辺りの
<div class=”entry-content”>”の前に記述します。
※先のソースを切り取り(カット)する前は、43行目です。

アイキャッチ画像位置変更/content.phpのコード貼付け位置画像  
 

下図のようになればOKです。

アイキャッチ画像位置変更/content.phpのコード貼付け完了画像  
 

ソースの貼付が終わったら[ファイルを更新]をクリックして編集を保存して下さい。

テーマ編集後の保存ボタン  
 

これで、投稿ページのアイキャッチが、タイトルと本文の間に表示されるようになります。

アイキャッチ画像位置変更後の表示  
 

簡単ですね。ヽ(*´∀`)/

ついでに、個別ページのアイキャッチ位置も変更してみましょうか?

個別ページのアイキャッチ位置変更

固定ページのアイコン位置変更は、content-page.phpの記述を変更します。

 

アイキャッチ画像位置変更前は、こんな感じです。

個別ページのアイキャッチ画像位置変更

※アイキャッチ画像は、縦250px横960pxを使用しています。

 
 

右側メニューのcontent-page.phpをクリックすると編集画面が表示されます。

個別ページのアイキャッチ画像位置変更/content-page.phpのコード編集画面  
 

下記コードを変更します。

<?php the_post_thumbnail(); ?>
 
 

14行目辺り
<?php the_post_thumbnail(); ?>”の記述を選択して切り取り(カット)します。

個別ページのアイキャッチ画像位置変更/content-page.phpのコード削除位置  
 

下図のようになればOK。

個別ページのアイキャッチ画像位置変更/content-page.phpのコード削除後  
 

投稿ページと同じように、タイトルと本文の間に表示させたいので
<div class=”entry-content”>”の前に貼り付けます。

個別ページのアイキャッチ画像位置変更/content-page.phpのコード貼付け位置  
 

下図のようになればOK。

個別ページのアイキャッチ画像位置変更/content-page.phpのコード貼付け後  
 

貼付が終わったら[ファイルを更新]をクリックして編集を保存して下さい。

テーマ編集後の保存ボタン  
 

これで、個別ページのアイキャッチがタイトルと本文の間に表示されるようになります。

個別ページのアイキャッチ画像位置変更後の表示  
 

個別ページのアイキャッチ画像位置は、変更しない方がレイアウト的に良いように思ったり思わなかったりします。
テヘヘ…(*´д゚*)ゞ

 

まぁ、好みの問題ですね。

もひとつおまけに、アイキャッチの表示サイズも調整して見栄えを良くしましょう。

アイキャッチ画像の表示サイズ変更

アイキャッチ画像の表示サイズは、予め設定された画像サイズをパラメータで指定します。

画像サイズを変更したい方は、参考にして下さい。

メディア画像サイズの設定方法

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”を修正します。

アイキャッチ画像位置変更/content.phph編集画面  
 

アイキャッチ画像のコードを
<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 スタイルシートエディター画面を開きます。

アイキャッチ画像のレイアウト変更/CSS(スタイルシート)の編集画面  
 

下記のコードを貼付けます。

/* サムネイル画像 */
div.entry-post-thumbnail {
  float: left;
  margin: 0 10px 10px 0;
}
 
 

下図のように貼り付ければOKです。

アイキャッチ画像レイアウト変更/CSS(スタイルシート)の記述  
 

[プレビュー]をクリックして確認してみましょう。

下図のように表示されれば成功です。

アイキャッチ画像位置変更のレイアウト変更後(文字の回り込み)  
 

ロリポップを利用している方はプレビューや保存する際に、セキュリティの関係で403エラーが表示されることがあります。

アイキャッチ画像レイアウト変更/CSS(スタイルシート)プレビューまたは、保存時の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;
}
 
 

お疲れさまでした♪

以上で、アイキャッチの位置変更方法の解説は終了です。

 

お好みの設定でお楽しみ下さい。(´-ω-`)) ペコリ

   
 

 - SEO カスタムテンプレ, SEO 内部対策, WordPressカスタマイズ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,