スマホ版をカスタマイズしよう!! ブログ上部にオススメ記事を表示するカスタマイズ

この記事は

特別にはてなブログカスタマイズ記事です。

モバイルファースト

前にも書きましたが、スマホからの流入は全体の7割超とパソコンからの流入を大きく上回っております。
そんな中で、レスポンシブデザインなのを良いことにガシガシとカスタマイズしちゃうと、スマホ版のページ読み込み速度が目も当てられない状況になります。

という訳で、レスポンシブデザインを解除。
カスタマイズしているのですが、なかなか個性を出せません。

せめてもということで、スマホ画面の上部にオススメ記事を表示させようと思います。
僕はこどみずさんの記事を参考にカスタマイズしています。
hitsuzi.hatenablog.com
このカスタマイズの特徴の1つであるスライダーを無くしました。

無くした理由は1つ。
格好良い画像を用意出来なかったからです。

こどみずさんの所は、ビシッと決まった格好良い画像がはめ込まれてますが、これを作るのは中々難解。
しょぼい画像を格好良くスライドさせても、いまいち決まりません。

んで、その代わりに、ここにオススメ記事を表示させます。

これを

こうですね。

基本構造

構造としては、rssファイルを読み込んで、記事のカテゴリーと同一の記事をランダムで数件表示するというものです。
基本コピペだけで済むようにしてますが、リストのCSSなどご自分でブログに合うように弄ってみて下さい。

記述場所

デザイン⇒スマートフォン⇒ヘッダ⇒タイトル下の位置に今回記述します。

コード

では、コードになります。

<style type="text/css"> 
.recent-menu{
  border: solid 2px #ffb03f;
  padding: 0.5em;
  position: relative;
  margin-top: 2em;
}

.recent-menu  li{
  font-size:14px;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

.recent-menu li:last-of-type{
  border-bottom: none;
}
.recent-menu li:before {/*リスト内のアイコン*/
  	font-family: FontAwesome;
  	content: "\f138";/*アイコン種類*/
  	position: absolute;
  	left : 0.5em; /*左端からのアイコンまで*/
  	color: #ffb03f; /*アイコン色*/
}
.recent-menu li:after {/*タイトルタブ*/
  	background: #ffb03f;
  	color: #fff;
  	font-weight: bold;
  	position: absolute;
  	left: -2px;
  	bottom: 100%;
  	padding: 1px 7px;
  	content: "CHECK!";/*タブの文字*/
  	letter-spacing: 0.05em;/*字間*/
  }
</style>

<div id="osusume">
</div>

<script>
$(function(){
$.ajax({
	//はてなrssファイルを読み込む
	url:'【ブログのURL】/rss',
	success: function(data){
		var htmlstr = "";
		var x=0;
		var m=0;
		var eurl = [];
		var etxt = [];
		var presentCategory = $("div.categories a:nth-child(3)").text();
		var rss_url = '【ブログURL】/rss/category/' + presentCategory;	

		htmlstr += '<ul class="recent-menu">';
		$.get(rss_url, function(data) {
			$(data).find("item").each(function (i) {
				var el = $(this);
				eurl[x] = el.find("link").text();
				etxt[x] = el.find("title").text();
				x++;
			});
			   
			var href = window.location.href;

			while(eurl.length > 0){
				mx=Math.floor(Math.random() * eurl.length);
				if (href != eurl[mx]) {
					htmlstr += '<li>';
					htmlstr += '<a href="' + eurl[mx] + '">' + etxt[mx] + '</a>';
					htmlstr += '</li>';
					m=m+1;
				}
				eurl.splice(mx,1);
				etxt.splice(mx,1);

				if (m==5){    //ここの数字を変えると表示記事数が変更できる
					break;
				}
			}
			htmlstr += '</ul>';
			document.getElementById("osusume").innerHTML += htmlstr;
		});
	}
});
});
</script>

コードの中の

div.categories a:nth-child(3)

に着目。

カテゴリーの何番目を読み込むかを指定しています。
カテゴリーが指定されて無かった場合、全記事からランダムで記事を選びます。
上手くいってない様でしたら、この数字を1とか2に変更してみて下さい。

終わりに

基本サブブログ用の記事ですが、このブログに施したカスタマイズなので、こちらに記事にしてみました。
なにかありましたら、コメント欄でお知らせください。