IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【はてなブログカスタマイズ】ホーム画面におすすめ記事を表示させる

今回のはてなブログカスタマイズはコチラ

ホーム画面に独自のおすすめ記事を表示させる

 良い記事が書けたけどなかなか発信しきれていない。そんな記事は誰にでもあるとおもいます。そんなときは、ホーム画面だったりでアピールしたりと対策をしましょう。

記事一覧要素(HTML)をコピーする

 サイドバーに表示できる注目記事や最新記事の要素をまねして、おすすめ記事を表示させます。それらの記事の要素の中には、アイキャッチ画像のURLや記事へのリンクURL、ブックマークの数などの情報があります。

コチラの記事は要素取得の仕方が書かれています。

www.it-the-best.com

表示させたい記事に入れ替える

 コピーしたHTMLを、おすすめとして表示させたい記事の情報だけにします。

この時、クラス名などを変更していないとサイドバーように設定されているCSSが適用されてしまう恐れがあります。独自のCSSだけを適用させたい場合はクラス名の変更を行いましょう。

HTML記述欄に記入

 完成したおすすめ記事一覧の要素をHTML記述欄に記入します。

ホーム画面の記事一覧の上(#main-inner中の一番上)に表示させたい場合は、ヘッダのタイトル下に書くことをお勧めします。

このとき、ホーム画面の記事一覧と同じCSS(表示形式)ではないのでdisplay:noneなどで非表示にしておきます。

JavaScriptで要素を操作

 ホーム画面の記事一覧の中にはまだ含まれていないので、JavaScriptで#main-inner内におすすめ記事一覧を移動させます。

var main_inner=document.getElementById("main-inner")

//main-innerの最初の子要素として追加
main_inner.insertBefore(要素, main_inner.firstChild);

 移動させた後、非表示になっている場合は表示させます。

画面別動作

 ホーム画面だけで表示させたい場合は、JavaScriptで処理をさせます。

www.it-the-best.com

 

私は、ホーム画面時は#main-innerの一番最初の子要素、それ以外は最後の子要素として追加させる処理をさせています。

 

それでは、良いプログラミングライフを。