アイキャッチ画像でサムネイルを正方形化する

アイキャッチ画像とは、「人目を引く画像」という意味でもあり、ブログなどの記事に注目してもらったり、文章ばかりの記事も心理的に読みやすくなる効果を狙ったもです。

WordPressには、この「アイキャッチ画像」を投稿ページや固定ページに設定できます。

設定すると、記事一覧を表示したときなどに写真が表示され、見栄えがよくなります。

たとえば、こんな感じ。

で、アイキャッチ画像のサイズは、テーマによっていろいろですが、正方形の画像を使うことが多いです。このサイトのlighingテーマも正方形を使っています。しかも、アイキャッチ画像のサイズは見るからに大きいですね。

で、このアイキャッチ画像がまちまちだと、一覧表示したときの画像サイズがちぐはぐになり、きれいに表示されないこともよくあります。

といって、正方形の画像を用意することもまた、割と手がかかると思われがちです。

実際私は、この正方形の画像をアイキャッチ用に作成していたわけですが、そんなことしなくても、普通にアップした写真などの画像を、自動的に正方形のサムネイルとしてアイキャッチが画像として設定できる方法がありました。

調べて見るものですね。これからは楽ちんです。

※下記の方法は、WordPressの裏技で紹介されているやり方なのですが、lightningの最新バージョンで試したら、サイトが表示されなくなりました。
このようなトラブルがありますので、情報として参考にしてください。作業をするときは自己責任でお願いします。

function.phpに1行追加するだけで、アイキャッチ画像が正方形になる!

WordPress初心者の方には、ちょっと難しく感じるかもしれませんが、作業としては簡単です。

「外観」ー「テーマの編集」を開いて、function.phpのファイルを開きます。

 

で、最後の行に、下記を1行コピペするだけです。そして、「ファイルを更新」をクリックして保存すればOK。

add_image_size( ‘eyecatch’, 150, 150, true );

これで、縦横150pxの正方形の画像が切り取られます。

パラメータとしては、次のようになります。


add_image_size (‘適当な名前‘,サイズ(横),サイズ(高),切り抜き方);

  • 新しい画像サイズの名前:適当でOK
  • サイズ(横)、サイズ(高さ):サムネイルの幅や高さをピクセル数で表すので、数値を入れる。
  • 画像の切り抜き:指定したサイズにリサイズしたい場合は true を指定。指定した大きさで画像を切り抜きたい場合は false を指定。

元の画像が長方形の場合は、画像の切りぬき指定でtrueを指定してしまうと、画像が強制的に正方形にリサイズされますのでおすすめできません。falseを指定して、正方形として切り抜きます。

だからといって、元の画像が実際に切り取られるわけではありませんので安心てください。


ただし、この設定が有効になるのは、新しい投稿から。過去の投稿のアイキャッチ画像には反映されません。

過去の投稿のアイキャッチ画像のサムネイルを新しいものに置き換えるには別のプラグインが必要です。その話はまた今度。

投稿者プロフィール

sobaco
sobaco文章で魅力表現コンサルタント
ITテクニカルライター、IT講師業などの経験と実績を活かし、2013年に電子書籍出版でんでんむし出版を設立。本の企画とコンテンツを作る部分を支援することを得意とし、本の執筆支援コンサルティングを行う。
2018年を迎える今の時代に求められるWeb戦略のターゲット戦略やコンテンツの絞り方などは、本の出版での考え方や見せ方がほとんど共通していることから、ビジネスユーザー向けに、本格的にWordPressを使った魅力発信を支援するために、教室体制を作った。特に、形のないビジネスを展開する人の情報発信におすすめ。文章であなたをデザインしてみませんか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です