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

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

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

はてなブログおすすめ記事モジュール

おすすめの記事のURLを入力するだけで、おすすめ記事リストを表示させるモジュールを開発しました。
URLから記事情報を取得するScriptと、モジュール(HTMLコード)をコピペするだけで表示することができます。(jQuery必須)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

IT the Best