効率165センチメートル

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

はてなブログで選択した記事を下にスライドさせる【コピペカスタマイズ】

f:id:k07_20:20191022190955j:plain

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

 

選択した記事を下に動かせるカスタマイズです。

シンプルなコードですが、動きの出るカスタマイズなのでおススメですよ。

 

 

今回もコピペで簡単にできます。みなさんもぜひやってみてください。

 

カスタマイズ

それではカスタマイズをしていきます。

 

まずはカスタマイズ完成図から。

カスタマイズ結果

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

 Before

f:id:k07_20:20191022185701p:plain

After

f:id:k07_20:20191022185706p:plainAfterでは、マウスカーソルを乗せた記事が下へ下がっていますね。

動きがついているのがわかります。

 

コード【コピペOK】

コードは以下の通り。

 

コピペOKです。

 

.archive-entry:hover {
padding-top:30px;
}

 

カスタマイズ場所

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

 

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

 

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

f:id:k07_20:20191019092610p:plain

 

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

f:id:k07_20:20191005180656p:plain

 

デザインCSS

f:id:k07_20:20191019092600p:plain

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

使用しているテーマ

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

blog.hatena.ne.jp

コード解説

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

 

.archive-entry の{}内にコードを書いていっています。

記事を選択した時

1行目のコードでは、記事を選択した時、マウスカーソルを記事に乗せたときを意味します。

 

.archive-entry:hover{

記事を下へ下げる

そして2行目のコードで、記事は記事を下に下げるということを書いています。

 

padding-top:30px;

 

30pxは下がる度合いを示しています。

5pxずつくらいでお好みに調整してください。

動きのある記事で目立たそう

以上が、記事一覧で選択した記事を下に動かすカスタマイズです。

 

簡単ですが、ちょっと動きがあるだけで目立ちやすくなりますね。

 

滞在率を上げるためにもおすすめのカスタマイズです。

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

 はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

 記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

 サイドバーをカスタマイズ

サイドバーを見やすくする

www.165-cm.com