WordPress(賢威6.1) アイキャッチ画像の装飾方法

この記事は約2分で読めます。

こんにちはFPヒデです。
今回はアイキャッチ画像に影や枠線をつけて装飾する方法をお伝えしますね。

たくさんの装飾がありますが、その中でも比較的使えそうな6種類をピックアップしました。

それでは早速お伝えしていきます。※直接下記コードをコピーして使用できます。

アイキャッチ画像を装飾する

管理画面の『外観』⇒『テーマ編集』⇒『design.css』に下記ソースコードを記述していきます。
 
sousyoku7
 

アイキャッチ画像に枠線をつける

sousyoku0
 

   div.left img {
    border: #08088A 5pt solid;
}

 

アイキャッチ画像にドット線をつける

sousyoku1
 

div.left img {
    border: #08088A 10pt dotted;
}

 

アイキャッチ画像の角を丸くする

 
sousyoku2
 

div.left img {
    border-radius: 8px;
}

 

アイキャッチ画像を楕円にする

sousyoku3
 

div.left img {
    border-radius: 50%;
}

 

アイキャッチ画像下に影をつける

 
sousyoku4
 

div.left img {
    box-shadow: 0 10px 6px -6px #777;
}

 

アイキャッチ画像右と下に影をつける

 
sousyoku5
 

div.left img {
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

 

アイキャッチ画像を丸くして、さらに右と下に影をつける

 
sousyoku6
 

div.left img {
    border: #c6c6c6 5pt solid;
    border-radius: 8px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

 
以上になります^^。上記のように簡単に装飾できるので是非やってみて下さいね。

コメントを残す

サブコンテンツ

このページの先頭へ