効率165センチメートル

ちいさな体で効率的に生きていく

【コピペOK】はてなブログの記事一覧に影を付け立体的に見せる【カスタマイズ】

f:id:k07_20:20191011233443j:plain

 今日はカスタマイズ記事をお届けします。

 

はてなブログの記事一覧に影をつけておしゃれに見せるカスタマイズです。

探していたけどなかなかなかったので、自分で作ってみました。

 

あっという間にできて簡単だったので、みなさんもぜひやってみてください。

カスタマイズ

さっそくカスタマイズしていきます。

 

コードは以下の3行で終わり。

.archive-entry {

box-shadow:5px 10px;

color:#999999;

}

 

 

カスタマイズ場所

上のコードを下の場所に貼り付けてください。

 

ダッシュボード→デザイン→スパナマーク→デザインCSS

 

ダッシュボード→デザイン

f:id:k07_20:20191019092610p:plain

 

カスタマイズ(スパナマーク)

f:id:k07_20:20191005180656p:plain

  

 デザインCSS

f:id:k07_20:20191019092600p:plain

 

この赤枠にコードをペーストします。

カスタマイズ結果

カスタマイズ結果はこんな感じ。

 

記事の一つ一つに影を付けて立体的に見えるようになりました。

 

グッと存在感がまして見やすくなりましたね。

Before

f:id:k07_20:20191011232211p:plain

After

f:id:k07_20:20191011232216p:plain

 

使用しているテーマ

当ブログでは、テーマ【UnderShirt】を使用しています。

blog.hatena.ne.jp

コード解説

はてなブログでは、記事のclassは「.archive-entry」となっています。

 

.archive-entry{}

 

の{}内にコードを書いていくことになります。

影を付ける

以下の部分が影を付けるコードになります。

 

box-shadow:5px 10px;

 

box-shadowで影を付けることを指定し、それ以降でどんな影を付けるかを指定しています。

 

  • 5px水平の陰(記事の横)
  • 10px垂直の陰(記事の下)

 

こうなっています。

 

影の色を変える

影の色もお好みで簡単にかえていただけます。

 

color:#999999;

 

#999999を好きな色に変えてください。

 

カラーコードは以下のサイトが秀逸です。

www.colordic.org

 

 

カスタマイズで見やすいTOPページを

以上が記事一覧のカスタマイズです。

 

おしゃれでなおかつ、みやすいTOPページを心掛けたいですね。

 

それでは。