WordPressテーマ「CUBEY (tcd023)」
 

【賢威6.1】アイキャッチ画像のサイズを変更する方法

賢威6.1アイキャッチ画像サイズ変更1

賢威6.1のトップページ記事一覧のアイキャッチ画像のサイズを変更する方法をご紹介します。

この方法は2通りあります。

メディア設定のサイズを利用する方法

ダッシュボード>設定>メディアを選択

賢威WordPressメディア設定

サムネイルサイズ、中サイズ、大サイズがあります。予めサイズの幅を設定しておきましょう。このサイズをアイキャッチ画像サイズに適用させます。

次に、ダッシュボード>外観>テーマ編集>index.php を選択
85行目付近のコードを修正します。

【変更前】

<!--アイキャッチ画像-->
<!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="left"></div>
<pre>
    <!--?php } ?-->
<!--/アイキャッチ画像-->



【変更後】

<!--アイキャッチ画像-->
    <!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="left"></div>
<pre>
    <!--?php } ?-->
<!--/アイキャッチ画像-->

サムネイルサイズを適用させた場合

賢威61通常のアイキャッチサイズ

まず↑の画像はデフォルト設定のアイキャッチ画像サイズです。これをメディア設定のサムネイルサイズ(150x150px)にします。

【変更後】

<!--アイキャッチ画像-->
    <!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="left"></div>
<pre>
    <!--?php } ?-->
<!--/アイキャッチ画像-->

賢威6.1アイキャッチがサムネイルの場合

medium(中)サイズを適用させた場合

【変更後】

<!--アイキャッチ画像-->
    <!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="left"></div>
<pre>
    <!--?php } ?-->
<!--/アイキャッチ画像-->

賢威6.1アイキャッチが中サイズの場合

こちらが中サイズ 300x300pxの場合です。
WordPressでサムネイルサイズや中サイズを利用する事が無い人は、この方法で十分だと思います。

large(大)サイズを適用させた場合

【変更後】

<!--アイキャッチ画像-->
    <!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="center"></div>
<pre>
    <!--?php } ?-->
<!--/アイキャッチ画像-->

賢威6.1アイキャッチが大サイズの場合

画像が左回り込みになっているので、classをcenterにしておきます。
すると画像の下に記事抜粋が表示されます。

トップページの記事一覧ではこの見せ方も良いかもしれません。ただし画像サイズが大きい分、読み込みに時間がかかるのがネックです。

full(フルサイズ)適用させた場合

【変更後】

<!--アイキャッチ画像-->
    <!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="center"></div>
<pre>
    <!--?php } ?-->

フルサイズだと予めリサイズしてアップロードする必要があります。
カラム幅より大きいサイズの場合、はみ出してしまうので注意が必要です。

メディア設定を全部使っている場合

もしメディアのサイズ設定を全て使用していて、サイズ変更はしたくない方は、function.phpにコードを追記します。

【追加コード】

add_image_size(‘small’,64,64,true);

【追記コードの説明】

add_image_size(‘サイズ名称’,横幅,縦,トリミングするかしないか);

トリミングする場合は「true」、トリミングしない場合は「false」と記入します。

賢威6.1functionにコード追加

上記をfunction.phpに追記したうえで、次にindex.phpの記載を変更します。

【変更後】

<!--アイキャッチ画像-->
    <!--?php if(has_post_thumbnail()){ ?--></pre>
<div class="left"></div>
<pre>
    <!--?php } ?-->
<!--/アイキャッチ画像-->

賢威アイキャッチオリジナルサムネイル

このようにメディア設定のサムネイルサイズ3種類を変更することなく、4種類目のサムネイルサイズを作成してアイキャッチに反映させることができます。

賢威6.1でアイキャッチ画像のリサイズをしたい方はご活用下さい。

Pocket

WordPressテーマ「CUBEY (tcd023)」 
 

Sponsored Link

WordPressテーマ「BlogPress (TCD010)」

コメントを残す

このページの先頭へ