賢威6.2トップ画面記事のアイキャッチ画像に影をつけてみました!


最近ブログのカスタマイズでトップ画面を
ちょくちょく変更しています。

シンプルでサッラっとしているのが良いものか

はたまた、コテコテで油ギッシュなほうが
インパクトがあって良いものなのか?

もちろん記事の内容が大切なのは当然なのですが・・

 

訪問して頂いた方がまず目にするトップ画面は
非常に大切です。

 

オリジナルのヘッダー画像に作り変えることなども
ブログの与える第一印象を大きく変化させます

 

しかし、好印象をあたえる画像を作るのは
パソコン初心者にはハードルがちょっと高い
かも知れませんね。

 

 

そこで、今回は簡単にできてトップ画面の
印象も変えれる方法として

 

記事のアイキャッチ画像に影をつけて
トップ画面の印象を変えてみましょう!

 

できあがりはこんな感じです。

 

kage1
 

では、さっそく作業に掛かりましょう!
と、言ってもタグをコピペするだけです (*^。^*)

管理画面の外観からテーマの編集をクリック

kage2
 

画面右側下の方にある
desing.css
(でざいん どっと しーえすえす)
をクリックして

kage3
 

ず~と、ずぅ~とスクロールして

一番最後に

kage4
 

div.left img {
box-shadow: 0 8px 8px 2px rgba(0,0,0,0.75);
}

これをコピペしてファイルを更新をクリック

 

コレで出来上がりです。

 

簡単な作業ですがdesing.cssをメモ帳などに
コピーしてバックアップをとってから作業して下さいね!
box-shadow: 0  8px  8px  2px  rgba(0,0,0,0.75)
この         の部分が

水平面のぼかし垂直面のぼかしぼかしの距離
影の広がり 色の指定、になっているので

自分で数値を変えてお気に入りを探してみて下さい。

 

ちなみに、rgba(0,0,0,0.75)は色を
指定しているのですが
R値、G値、B値、に透明度の0.75が指定されています。

少し難しいですが、
HTMLを学びたいかたはこのページを参考にして下さい。

 

カスタマイズをやり始めると、あれもこれもと
出来ることすべてやりたくなってしまうのですが

 

あまりやり過ぎるとかえって見づらいブログに
なってしまうので

やり過ぎにはご注意を! (^^ゞ

 

最後まで読んで頂きありがとうございました。
いつもあなたを応援しています!でゎでゎ♪

 

 

Sponsored Link



コメントを残す

サブコンテンツ

プロフィール

285_150916222240_3509ミニ

 

はじめましてパパトコです。

簡単にお小遣い稼ぎや副業の

楽しさを学び経済的自由を目指します!


詳しくはコチラ→

ランキング応援お願いします♪

 

 

皆様のおかげで1位

頂くことができました!

ありがとうございました

タグクラウド

このページの先頭へ