【THE THOR】ブログ記事に少しだけインパクトを出してみる!【コピペOK】

記事の見た目にインパクトを出したいけど、いいアイデアないかな?

そんな風に思ったことありませんか?

そこで本記事では、他サイトと少しだけ違いの出せる効果の付け方をご紹介します。

この記事の内容:
挿入画像に影を付けて、インパクトある記事に仕上げる方法を説明します。

もちろんコピペOKです!

ブログ記事にインパクトを足すとこうなる

どんな風に違いを出すかというと、記事の挿入画像に影を付けることで立体感を出しインパクトを付けてみました。

特にお料理ブログなんかにはいいかもしれません。

どんな感じなるのか、下の比較画像をご覧ください()。

影ありの方が見た目が華やかになった気がしませんか?

影の付け方

では、実際の影の付け方をお伝えします。

以下のコードを追加CSSに貼り付ければOKです。

画像の影追加CSS

といってもこれだけでは不親切なので、以下で実際のコードを説明します。

実際のCSSコード

コードには3パターン(画像左寄せ、画像中央揃え、画像右寄せ)があります。

場合により使い分けるか、3パターンをすべて追加CSSに貼り付けるかのいずれかを選択して下さい。

【左寄せの画像の場合】

img.alignleft{
	filter: drop-shadow(5.5px 4.5px 4.5px rgba(0,0,0,0.48));
	border-radius: 4.5px;
}

中央寄せの画像の場合

img.aligncenter{
	filter: drop-shadow(5.5px 4.5px 4.5px rgba(0,0,0,0.48));
	border-radius: 4.5px;
}

右寄せの画像の場合

img.alignright{
	filter: drop-shadow(5.5px 4.5px 4.5px rgba(0,0,0,0.48));
	border-radius: 4.5px;
}

コードの簡単な解説

少しだけですが、上記のコードを解説します。

img~の部分

最初に出てくる、img.alignrightimg.aligncenterimg.alignrightはクラス名と言われているものです。

詳しいことは省略します。気にせずそのままコピペしてください。

filter: drop-shadowの部分

ここが影を設定している本体部分です。

今回の例ではfilter: drop-shadow(5.5px 4.5px 4.5px rgba(0,0,0,0.48));と指定しています。この数値を調整してお好みの影を演出して下さい。

数値の説明は以下のとおりです。

記事の影CSS

以下、それぞれの数値の部分を説明します。

最初はピンとこないかもしれませんが、色々と変えてコツをつかんでみて下さい。

  1. (1)の数値
    水平方向に伸びる影の長さを定義します。数字が大きくなるにつれて、影が右方向に伸びていきます。
  2. (2)の数値
    垂直方向に伸びる影の長さを定義します。数字が大きくなるにつれて、影が下方向に伸びていきます。
  3. (3)の数値
    影のぼかし具合を定義します。
  4. (4)の数値
    影の色を定義します。お好きな色をrgba形式で指定してください。そして、最後の『0.48』はopacityといって透過度を示します。0~1の範囲で定義し、0が透明、1が不透明になります。

border-radius:の部分

実は、影以外にも画像の角に丸みを付けています。

数値が大きくなるほど丸みが出ます。数字を変化させて、お好きな丸みを見つけてみて下さい。

丸みを付けたくない場合は、この部分を削除しても構いません。

ブログ記事にインパクトを足す:まとめ

以上にご紹介した方法で、少しは記事にインパクトを出せたのではないでしょうか。

ちょっとした工夫で花のある記事になりそうですね。

当サイトではこの他にもTHE THORの色んな問題点やカスタマイズについて記事にしています。よければ、こちらの記事もご覧ください。

ではまた、次の記事でお会いしましょう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

Web解析士。Web業界歴9年。GAIQ保有。元・インフラ系SEで元・外資系社畜リーマンです。

趣味が高じてブログ飯に挑戦中です。

今日もブログを書きながら自己満足的にフカボリしていきます。

コメント

コメントする

CAPTCHA