読者です 読者をやめる 読者になる 読者になる

Code Lab

CakePHP/Python/Swiftを勉強中... 好きなことで生きて行く!

はてなブログに関連記事を表示させてみた

CSS はてなブログカスタマイズ jQuery

f:id:natuta:20170204012227p:plain

ブログに関連記事って必須なような気がしたので作ってみた。

 

記事のサムネイルが正常に表示されていません。

いつかなおします。

 

はじめに

よく「関連記事」とか 「合わせて読みたい」とか見るからブログには必須なんだね。

と思って調べてみたらコピペで簡単!っていろいろ紹介されていたんだけど、なんかダサい?というかブログにデザインが合ってない感じがしたので、もういっそのこと自分で作ってしまおうと。

あ、デザインは合ってないけどSEOとかいろいろ考えた結果かもしれないので実装する場合は自分にあったものを使ってね

 

今回作るものはタイトル下に表示されているカテゴリの一つ目を取得して、そのカテゴリのものを表示するというものです。

 

コード 「コピペOK

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

$(function() {

	var num = 5; // 記事表数
	var category = $('.entry-categories.categories a:first-child').text(); //カテゴリー名を取得
	var categoriUrl = "http://" + location.host + "/feed/category/" + category; //カテゴリーfeed取得

	// feedから記事を取得
	$.get(categoriUrl, function (data) {
		$(data).find("entry").each(function (i) {
			if (i < num) {
		        var el = $(this);

		    	var title = el.find('title').text(); //ブログタイトル
		    	var articleLink = el.find('link').attr('href'); //ブログタイトル
		    	var overview = el.find('summary').text(); //ブログ概要
		    	var html = '<div class="embed-wrapper"><div class="embed-wrapper-inner"><div class="embed-content with-thumb"><div class="thumb-wrapper"><a href="' + articleLink + '" class="thumb" style="background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/natuta/20170204/20170204012227.png);background-size: cover;background-position: center center;"></a></div><div class="entry-body"><h2 class="entry-title"><a href="' + articleLink + '">' + title + '</a></h2><div class="entry-content">' + overview + '</div></div></div></div></div>';

		    	$('#related_article').append(html);
			} else {
				return false;
			}
		});
	});
});

</script>

<style type="text/css">
#related_article .title {
    margin: 28px -16px 20px -16px;
    padding: 0 12px;
    border-bottom: 10px solid #f6f6f6;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 1px;
}
#related_article .embed-content .entry-title a {
    font-size: 17px;
    margin: 0 0 2px;
    line-height: 1.4;
    max-height: 47px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#related_article .embed-content .entry-content {
    line-height: 1.5;
    font-size: 12px;
    max-height: 72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
#related_article a.thumb {
    width: 100px;
    height: 100px;
    display: block;
}
#related_article .thumb-wrapper {
	position: absolute;
    top: 0;
    right: 0;
}
#related_article .embed-wrapper * {
	word-wrap: break-word;
    word-break: break-all;
}
#related_article .entry-body {
	margin-right: 110px
}
#related_article .embed-wrapper-inner {
	padding: 12px;
}
#related_article .embed-content {
    position: relative;
    height: 100px;
    overflow: hidden;
}
#related_article .embed-wrapper {
	margin: 15px 0;
    background-color: #fff;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,.1);
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-radius: 3px;
    background-clip: padding-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
</style>

 これが、「jQuery」と「CSS」が一緒になってますが、これを全部デザインの編集からフッタにズボンと突っ込んでください。

f:id:natuta:20170205022232p:plain

 

次にこれ。

<div id="related_article" class="embed-content">
<div class="title">関連記事</div>
</div>

 これは関連記事のコンテンツを流し込むやつ。

好きなところに突っ込んでください。

僕は記事の下につけてます。

 

完成!

f:id:natuta:20170205021420p:plain

 

完成系はこんな感じ。

はてな標準の記事リンクっていうのかな?あれに近づけています。

フッタに追加したCSSでデザインしているので、好きなものに変えて自由に使ってください!

以上。