【はてなブログ】カスタマイズ！ヘッダー下オススメ記事の追加とうしぞう流アレンジ♪

アニメーション

今回は、はてなブログでヘッダー下にオススメ記事一覧を表示する方法です(^^)v

ヘッダー下オススメ記事とは？

紹介するからには当然、私のブログのヘッダー下にもあるアレでございます。記事一覧やカテゴリー以外で、自分のオススメしたい記事をピックアップする方法です！

一応はてなブログでは記事管理のところの『編集』から、『トップページの先頭に表示する』で1つだけならオススメっていうか読んでほしい記事をピックアップできます。

でもしばらくブログをやっていると、身を粉にしながら手塩にかけた自慢のかわいい記事ちゃんたちがいくつもありますよね？

読んで！？ってやつ♪

どうせならいっちばん上の目立つところにドーンといきましょう！

スマホでは横スクロールができてオシャレ感も◎！

基本的な設置については、リンク先にて詳しく紹介されています(^^)b

まず、細かい配置はCSS内のmargin(マージン)やpadding(パディング)の値をいじって調節しましょう。

次にカラーチェンジです！

全項目が同じ色だと少し地味な印象だったので、それぞれ個別に配色しました♪

『nth-child』というセレクタは、要素の〇番目を〇〇するという意味です。

.recommend-box:nth-child(数字) {background: #好きな色;}

例えば数字の部分を『3』にして、好きな色を『#000000』(赤字だけど黒のカラーコード)とすれば、左から3番目のオススメ記事が黒背景になります！

またカラーコードは基本的に数字6ケタですが、続けて2ケタの数字を追記すればその色の透明度も設定することができます！

#00000080ならちょい透けの黒(青字だけどry)、#ff000020ならうっすい赤、みたいな感じです。

私はパステルカラーっぽくしたかったので各色を50にして半透明に設定してます(^^)

動くんだぜ、コレ。

こちらもとっても簡単です！

私はオススメ記事にのみ適用しましたが、コードのコピペだけでなんでも動かせます！

なんでもござれ！！ただどうしてもアニメーションなので、あまりにも手当たり次第に動かしまくると・・・サイトが重くなるのでご注意を！

ページの読み込み時に、ただ普通にパッと表示されるよりは、左側からのスライドインにしたほうが目を引きます♪

え？別にあざとくないよね？？(笑)

オススメ記事自体がスマホでは横にスライドできるので、動くことを印象付けるためにもこの装飾は相性が良いかと思います(^^)v

アニメーター

今回はヘッダー下オススメ記事の設置方法と、コンテンツのふんわりアニメーション表示方法のご紹介でした！

参考にしたどちらのサイト様も、他にも色々なカスタマイズ法を掲載しているので、ぜひぜひご覧になってみてください！

ブログカスタムトップ

ありがとうございました！