賢威のトップページのサムネイル(アイキャッチ)画像のサイズを変更する方法


賢威のテンプレートで作られたブログのトップページを開くと、以下のように投稿記事が並んでいます。

<賢威7>賢威7 サムネイル

<賢威6.2>1

これですね。そこのサムネイル(アイキャッチ)画像の大きさを変更したいと思うことがあると思いますので、その変更方法について解説していきます。

賢威7と賢威6.2でそれぞれ変更方法が違いますので、それぞれについて解説します。

賢威のサムネイル(アイキャッチ)画像のサイズを変更する前の注意点

賢威のサムネイル(アイキャッチ)画像を変更するには、『テーマのための関数(functions.php)』の編集が必要です。

以下の画面は賢威7の画面ですが、賢威7も賢威6.2も『テーマのための関数(functions.php)』の編集をすることで、サムネイル(アイキャッチ)画像のサイズを変更できます。

賢威7 テーマのための関数 (functions.php)

ただ、ここのphpファイルは他のphpファイルとは違って、ちょっと記述を間違うだけでサイトの全ての表示が、「Fatal Error〜」という文字だけが表示された真っ白な画面になってしまいます。phpに慣れていない人が最も嫌うファイルでもあります。

なので、テーマのための関数(functions.php)を編集する時はバックアップを取ることを強く推奨します。

更に編集時は、テーマのための関数(functions.php)を編集する画面と、それとは別のタブにサイトのトップページなどを表示させて更新するなどして、編集が上手く行ったかどうかを見図りながら作業をするといいです。

万が一、更新したトップページに「Fatal Error〜」がでたら、直前に編集していたテーマのための関数(functions.php)の箇所を元に戻すなどして対処できます。

また、基本的にワードプレスの管理画面には「Fatal Error〜」は表示されないと思いますが、編集している管理画面にも出るようなら、FTPまたはお使いのサーバーからファイルマネージャーにアクセスして、そこからテーマのための関数(functions.php)を編集します。

賢威7でサムネイル(アイキャッチ)画像のサイズを変更する方法

賢威7でサムネイル(アイキャッチ)画像のサイズを変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→テーマのための関数(functions.php)

の順にクリックし、以下の画面を開きます。

%e8%b3%a2%e5%a8%817%e3%80%80%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81%e7%94%bb%e5%83%8f%e3%80%80%e3%82%b5%e3%82%a4%e3%82%ba%e5%a4%89%e6%9b%b4

テーマのための関数(functions.php)を開いたら、以下の一文を探します。(上記画像で青くマークした箇所)

set_post_thumbnail_size( 246, 200, true );

このコードの「 246, 200, true」の部分が、サムネイル(アイキャッチ)画像に表示されるサイズを定義しています。

それぞれ、

「246」の部分→画像の横幅

「200」の部分→画像の高さ

という具合に、画像のサイズを定義しています。

最後の「true」というのは、ここでは「定義したサイズにする」ということだと思ってください。

なので、賢威7のトップページに表示されるサムネイル(アイキャッチ)画像のサイズを変更する場合は、上記の「246, 200」部分を好みの数値に書き換えます。

数値を書き換えたら、画面を下までスクロールし、「ファイルを更新」のボタンをクリックします。

例えば、「246, 200」部分を「100, 100」に書き換えると以下のようになります。

賢威7 サムネイル サイズ変更

このように、「246, 200」の数値を大きくしたり、小さくしたりすることで、サムネイル(アイキャッチ)画像の大きさを変更することができます。

賢威6.2でサムネイル(アイキャッチ)画像のサイズを変更する方法

続いて、賢威6.2でサムネイル(アイキャッチ)画像のサイズを変更する方法について解説します。

まず最初に、テーマのための関数(functions.php)に行きます。

ワードプレスのダッシュボード→外観→エディター→テーマのための関数(functions.php)と進みます。

2

 

そしたら、次の赤枠の部分を探して下さい。

3

ここがサムネイル画像の出力を管理しているコードです。

そしたら、ここに次のコードを追加します。

add_image_size( ‘top_thumbnail’, 100, 100, true );

このコードは何かというと、サムネイルに使う画像のトリミング(切り取り)サイズを定義する部分です。

()内について説明すると、まず「’top_thumbnail’」はこの定義の名前です。便宜上この名前にしただけで、半角英数字であればどんな名前でも問題ありませんが、後で使いますので管理しやすいものにしておきましょう。

続いて、「100, 100」というのは、左側が画像の横幅、右側が画像の高さを定義しています。こちらもお好みで設定して下さい。

追加するとこうなります。

4

追加できたら、「ファイルを更新」ボタンをクリックして保存し、今度は同じ画面内にあるメインインデックスのテンプレート(index.php)に移動します。

そしたら、次の箇所を探して下さい。

5

ここの今青いラインで示した()内に、先ほどの名前「top_thumbnail」を入力して下さい。

<?php echo the_post_thumbnail(top_thumbnail); ?>

コードはこのようになります。

「<?php echo the_post_thumbnail(); ?>」はサムネイル画像を読み込むコードで、()内に名前を入れると、その名前で定義されている数字に従って命令を実行することになります。

つまりここでいう命令というのが、「( ‘top_thumbnail’, 100, 100, true )」つまり「top_thumbnailという名前では、横幅100、高さ100のサイズで画像を表示する」という定義です。

6

このように出来たら、「ファイルを更新」ボタンをクリックして保存し、トップページに戻ってみます。

7

冒頭の画像に比べてサイズが小さくなりましたよね。このようにしてサムネイル(アイキャッチ)画像のサイズを変更してみてください。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

著者:ヒデアキ
現在は、ネット集客のスキルを活かして既に起業されている方やこれから起業を真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら

このページの先頭へ