シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法

テーマ設定

Cocoonの以下の部分では、大小のサムネイル画像が利用されています。

  1. インデックスページのカード
  2. 新着記事
  3. 人気記事
  4. 関連記事
  5. カルーセルカード
  6. ページ送りナビ(デフォルト)
  7. ブログカード

これらの部分の画像サイズ(縦横比)を変更するには、PHPによる変更が必要でした。

ただCocoonフォーラムではこれまで、このカスタマイズ方法についての問い合わせが結構多かったので、機能化しました。

以下ではその設定方法を説明した。

スポンサーリンク

サムネイル画像の縦横比を変更する主な手順

pexels-photo-296649

以下の2手順で、サムネイル画像サイズを変更することが可能になりました。

  1. Cocoon設定でサイズ変更
  2. Regenerate Thumbnailsプラグインで画像の再生成

プラグインにより、画像の再生性が必要になるので、既に投稿されている記事数によっては、実行時間はかかるかもしれません。

けれど、操作時間のみで言えば、1分くらいで終わるくらい簡単です。

プラグインによる一括処理が必要になるので、一応念のためサーバーのWordPressファイルのバックアップをしておくことをおすすめします。MixHostやカラフルボックス(復元無料)、エックスサーバー(復元有料)のような自動バックアップ機能のあるサーバーであれば不要かもしれません。

Cocoon設定でサイズ変更

サムネイルサイズの縦横比を変更するには、まずテーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「画像」タブにある「全体画像設定」項目中の「サムネイル画像」の設定を変更します。

ンデックス等で使われるサムネイル画像のアスペクト比(縦横比率)を変更します。

サムネイル画像の縦横比の変更

ちなみに変更できるサムネイル画像の縦横比はこちら。

  1. 9:16, 1:1.777..(ワイド)
  2. 約5:8, 1:1.618..(黄金比)
  3. 約5:7, 1:1.414..(白銀比)
  4. 3:4, 1:1.333..(スタンダード)
  5. 1:1(正方形)

縦横比率はこんな感じ。

9:16, 1:1.777..(ワイド)

テレビ(地デジ)画面や、YouTube動画の縦横比率です。

wide

YouTube等でも利用されている比率なので、ネットと親和性の良さからデフォルトにしています。

約5:8, 1:1.618..(黄金比)

古代ギリシャ時代から使われており、人間が最も美しいと感じる比率とされています。

golden

美しさを追求するならこれなのかも。デフォルトよりも縦幅が広くなるので、アイキャッチの文字列が切れたりする可能性も低くなります。

約5:7, 1:1.414..(白銀比)

日本の木造建築に古くから使われている比率。大和比とも呼ばれています。

silver

和風サイトとかにも良いのかもしれない。縦幅が広いので、アイキャッチの画像に書かれた文字も楽々入ると思います。

3:4, 1:1.333..(スタンダード)

アナログテレビやPowerPointのスライドと同じ比率。

standard

ちょっとレトロ感があります。縦幅は広くなるので、この比率の画像を用いている写真サイトやイラストサイトなどには良いかも。

1:1(正方形)

単なる正方形です。

square

横より縦を優先したい場合。この比率は結構Cocoonを利用したイラストサイトに利用されているのを見ます。

Regenerate Thumbnailsプラグインで画像の再生成

Cocoon設定で、これらの設定を終えただけでは画像自体には反映されていません。

画像自体に反映させるには、Regenerate Thumbnailsプラグインを利用して「画像の再生成」を行う必要があります。

プラグインの利用方法は、以下に詳しく書かれているので参照してください。

テーマが利用しているサムネイルを再生成して最適化する方法
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

設定が変更されるサムネイル部分

このサムネイル画像の縦横比変更で、変更が適用されるテーマ部分はこちら。

インデックスカード

index

新着記事ウィジェット

new

人気記事ウィジェット

popular

関連記事(ウィジェット)

related

カルーセルカード

carousel

ページ送りナビ(デフォルトのみ)

page-navi

ブログカード

ブログカード

設定が反映されないケース

以下のケースでは画像を縦横比日変更が適用されないのでご注意ください。

大きなカード

インデックスリストのカードタイプで「大きなカード」を利用している場合。

インデクスリストのカードタイプ

「大きなカード」は、WordPress設定の「メディア」で設定されている「画像サイズ(大サイズ)」のサイズが適用されます。

画像サイズの大サイズ

タイルカード

インデックスリストのカードタイプで「タイルカード」を利用している場合。

インデックスリストのタイルカード

タイルカードは「アイキャッチ画像本来のアスペクト比で表示するための機能」であるため、縦横比率を変更すると機能としての意味が無くなってしまいます。

まとめ

こんな感じで、テーマで利用されているほとんどのサムネイル画像サイズ(縦横比)を手軽に変更できるようになりました。

サイトによっては、最適なサムネイルサイズはまた違ってくる場合もあるので、機能化された意味はあると思います。

また、Cocoon設定から画像比を変更した場合は、プラグインにより「画像の再生成」はお忘れなく。

テーマが利用しているサムネイルを再生成して最適化する方法
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。
テーマ設定
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon

コメント

タイトルとURLをコピーしました