261_1

 

 

賢威のトップページのアイキャッチ画像を装飾する

トップページの投稿記事一覧のアイキャッチ画像は、その名のとおり記事の内容を一目で伝える役割がありますが、デフォルトの状態では指定された画像が指定されたサイズでそのまま表示されるようになっています。

そのままでもアイキャッチの効果はあるのですが、使用する画像の背景が、サイトの背景色と同色だった場合、画像の境界線がなくなり、なんだかスカスカ感が出てきてしまいます↓↓↓

261_2

このような場合、アイキャッチ画像に枠線などを付け加えていくと、アイキャッチが締まり非常に見やすくなりますし、画像をさらに目立たせるよう演出することも可能です。

アイキャッチ画像の枠線をつけるには、「design.css」を編集していきます。

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

このファイルの一番下に、次のようにコードを記述します。


div.left img {
  border: [カラーコード] [太さ] [線の種類];
}

この dev.left img 要素のカッコの内容を変えることで、様々な装飾を描画していきたいと思います。

 

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

普通の線

それでは、まずアイキャッチ画像に実線をつけてみましょう。

261_3
太さ1ptの実線は 1pt solid と記述します。

div.left img {
border: #696969 1pt solid;
}

 


実線を太くして、カラーを変更してみました。

261_5

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

 

点線

枠線は点線でも描画することができます。

261_7
太さ3ptの点線は 3pt dotted と記述します。

div.left img {
border: #ff6347 3pt dotted;
}

 

二重線

枠線を二重線にしてみましょう。

261_19
border-styleプロパティにdoubleを記述すると、二重線が描かれます。

div.left img {
border: #DB4C9D 5pt solid;
border-style: double;
}

 


異なる色の二重線。

261_9
異なる色の二重線にする場合は、borderプロパティとoutlineプロパティで記述します。

div.left img {
border: solid 3px #a5b8c0;
outline: solid 3px #147e7e;
}

 

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

次に、アイキャッチ画像に影をつける記述をご説明します。
アイキャッチ画像に影をつけるには box-shadowプロパティを指定します。

261_15

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

 

box-shadow の値の意味は次のようになります。

box-shadow: [1番目] [2番目] [3番目] [4番目] [5番目] ([6番目])

1番目: 水平方向のぼかし →1pxで右方向 -1pxで左方向
2番目: 垂直方向のぼかし →1pxで下方向 -1pxで上方向
3番目: ぼかしの距離 →値が大きいほどぼかしが強くなる
4番目: 影の広がり →値を大きいほど影の範囲が広くなる
5番目: 色の指定 →カラーコード
(6番目): 影の向き

これらの数字を少しずつ変えてみると雰囲気が変わりますのでいろいろ試してみてくださいね。

 


画像が画面から浮き出るような影の付け方。

261_17

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

 

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

アイキャッチ画像の角を丸くすると、柔らかいイメージになりますね。
border-radiusプロパティを使って角を丸めていきます。

261_11
border-radiusの値は、px % で指定します。
値が大きいほど、丸まり具合が深くなっていきます。

div.left img {
border: #696969 1pt solid;
border-radius: 20px;
}

 


さらに丸くして楕円形に。

261_13
border-radiusの値を大きくすれば角がとれて楕円形になりますね。

div.left img {
border: #696969 1pt solid;
border-radius: 50%;
}

 

複合技

いろいろなアイキャッチの装飾のやり方がありましたが、これらを合わせてみましょう。
枠線は二重線、角は20pxで丸め、さらに影をつけてみました。

261_21
複合テク!

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

いろいろ試すととても楽しいですが、あまりにもCSSの記述の量が多いと、データ読み込みが重くなり、表示が遅くなってしまうことがあるので、ほどほどにしておいてくださいね^^