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


賢威のトップページに行くと投稿記事が並んでいると思います。

1

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

サムネイル(アイキャッチ)画像のサイズを変更

ここの画像サイズを変更するには、テーマのための関数(functions.php)の編集が必要です。

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

2

他のPHPファイルを見たことがある方は分かると思いますが、ちょっと他のとは様子が違いますよね。

ここはワードプレスの動きを管理するPHPファイルで、最も初心者が嫌うファイルでもあります。他のPHPファイルは多少記述が間違っていても表示自体は問題なくできたりしますが、テーマのための関数(functions.php)はちょっと記述が違うだけで、サイトの全ての表示が「Fatal Error〜」という文字だけが表示された真っ白な画面になってしまいます。

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

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

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

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

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

3

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

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

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

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

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

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

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

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

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

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

次ページ

12次

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ