＃044　Cocoonのエントリーカードの表示比率変更

イントロダクション

本日はエントリーカード等のサムネイルの比率の修正をしようと思います。

まあ、普通の人には特に必要のない事なんですけど、私の場合はアイキャッチ画像に縁取りをしているので通常の比率だと↓下の画像の赤枠部分のように変な場所でトリミングされちゃうんですよね。

地味にずっと気になっていた部分なので、休養期間中に直してしまおうという事になりました。

エントリーカードの表示比率の変更方法

私の場合はアイキャッチを1200×630pixelのサイズで作られているので、大体1.904:1の比率に調整しないといけないわけですね。

で、具体的な修正方法ですが、Cocoonの子テーマのfunctions.phpにコードを追記する事で問題解消できるようです。

似たような事をされていた方がいましたので、↑上記サイト様の記事を参考にコードを追記していきます。

と、いう訳で修正したものが↑こちらとなります。

おお、ちゃんと全部の枠が表示されるようになりましたね。

ず～っと、気になってましたので今回の記事で解消できて良かったです。

では、もののついでにエントリーカードの背景色とボーダーの色もかえておきますか。

↑上記サイト様の記事を参考に↓下記のCSSを追記します。

/* エントリーカード枠色 */
.entry-card-wrap {
background-color: #f0f8ff; /*背景色*/
border: solid 1px #4169e1; /*枠線形状・色*/
}

最終的なエントリーカードの見た目は↓こんな感じの青基調にしてみました。

その内にまた改修すると思いますが、とりあえずは暫くコレを使っていこうと思います。

今回使用したfunctions.phpのコード

//インデックスサムネイルサイズ
add_image_size('index_thumb', 205, 108, true);
add_filter('get_entry_card_thumbnail_size', function (){
  return 'index_thumb';
});

//内部ブログカードサムネイルサイズ
add_image_size('internal_blogcard_thumb', 174, 91, true);
add_filter('get_internal_blogcard_thumbnail_size', function (){
  return 'internal_blogcard_thumb';
});

//関連記事ウィジェットサムネイルサイズ
add_image_size('related_entries_thumb', 196, 103, true);
add_filter('get_related_entries_thumbnail_size', function (){
  return 'related_entries_thumb';
});

//ページ送りナビサムネイルサイズ
add_image_size('post_navi_thumb', 120, 63, true);
add_filter('get_post_navi_thumbnail_size', function (){
  return 'post_navi_thumb';
});

//新着記事ウィジェットサムネイルサイズ
add_image_size('new_entries_thumb', 120, 63, true);
add_filter('get_new_entries_thumbnail_size', function (){
  return 'new_entries_thumb';
});

//人気記事ウィジェットサムネイルサイズ
add_image_size('popular_entries_thumb', 120, 63, true);
add_filter('get_popular_entries_thumbnail_size', function (){
  return 'popular_entries_thumb';
});

今回の経費＆記事作成時間

今回はエントリーカードの修正となりましたが、他にも細々としたものが気になっていますので、時間を見つけて順次改修していこうと思います。

ああ、あとは＃002の記事↓をリライトしてみましたので、お時間のある方は読んでいって頂けると嬉しいです。

では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。