「賢威6.2」アイキャッチ画像のカスタマイズ方法
AllAnd / Pixabay
AllAnd / Pixabay

アイキャッチ画像に枠線をつけたり影をつけたりと

カスタマイズする方法をご紹介いたします。

 

通常アイキャッチ画像の設定は

「投稿の編集」のページから設定します。

 

この場合、アイキャッチ画像には枠線などが付いていません。

自分なりにカスタマイズし少しでも目立たせ

差別化をはかりましょう。

 

アイキャッチ画像とは？

トップページで投稿した記事タイトルの下に表示される

画像のことです。

 

アイキャッチ画像01
これがアイキャッチ画像です。

 

 

アイキャッチ画像の設定は

「投稿の編集」ページの右下から始めます。

 

アイキャッチ画像02

赤枠の部分をクリックして頂き

アイキャッチに使用する画像を選択してください。

 

 

アイキャッチ画像03

投稿を更新すると画像が表示されます。

 

カスタマイズの方法

今回、ご紹介しますカスタマイズは

・画像に枠をつける

・画像の角を丸くする

・画像に影をつける

以上の3点です。

 

何処をどう変更するのかが分かれば

あとで好きなデザインにカスタマイズできるようになります。

凄く簡単なので安心して下さいね。

※必ずメモなどにバックアップを取りましょう。

 

 

設定方法

管理画面から

【外観】→【テーマの編集】→【design.css】

下記のコードを貼り付けるだけです。

貼り付ける場所は【design.css】内の一番下です。

 

 

コード

/*アイキャッチ画像カスタマイズ*/
div.left img {
border: #3300ff 2pt outset;
border-radius: 8px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

 

アイキャッチ画像04

するとこんな感じになりました。

画像に影もつき立体感が出ましたね＾＾

それでは、先程貼り付けたコードの説明をしていきます。

 

 

3行目

border: #3300ff 2pt outset;

 

「#3300ff」この部分が枠の色になります。

他の色に変更する場合は、この色番号を変更して下さい。

コピペでOKです。

 

カラーコード一覧表

 

 
「2pt」この部分が枠の太さです。

数字を大きくすれば太く、小さくすれば細くなります.

 

 

「outset」この部分が枠のデザインの種類です。

他のデザインにする場合は、こちらをご参考にして下さい。

 

ボーダースタイル

 

4行目

border-radius: 8px;

 

「8px」数字を大きくすれば角がドンドン丸くなり、

小さくすれば四角くなります。

 

5行目

box-shadow: 10px 10px 10px rgba(0,0,0,0.4);

 

画像に影をつけるコードで

数字を変更すれば影の方向、大きさが変わります。

 

以上で今回のカスタマイズは終了です。

何処を変更すればいいのか理解できましたか？

カラーコード一覧表やボーダースタイルを参考に

自分の好きなスタイルに変更して下さいね。

 

 

最後までありがとうございました。

 

ヒロ