はてなブログ「あわせて読みたい」機能を追加するAlso readのCSSカスタマイズ

関連エントリーを表示させる機能の「見た目」を変更する方法を解説します。

psn.hatenablog.jp

data-user-css="true"

カスタマイズ用のCSSを利用する設定です。あらかじめ用意されたCSSを利用せず、ご自身でデザインをカスタマイズしたい場合はtrueにします。

基本的な構造
- iframe版
- リスト表示版
例：操作パネルの表示を変更する
よくある質問

基本的な構造

以下の通りとなります。
※変更されることがあります。

iframe版

div .js-htnpsne-awasete-module

Also readの表示設定などが含まれるDiv要素です。

この中に操作パネルや一覧表示等が生成されます。

div .js-htnpsne-awasete-control-outer

操作パネルや一覧表示等が含まれる外枠となるDiv要素です。

span .js-htnpsne-awasete-title

この一覧表示のタイトルとなるSpan要素です。

span .js-htnpsne-awasete-control

一覧表示の操作パネルが含まれるSpan要素です。

a #Htn-psne-Awasete-Link-(識別子)

Also readへのリンクです。

select .js-htnpsne-awasete-select

一覧表示を切り替えるためのSelect要素です。

button .js-htnpsne-awasete-btn-reload

一覧表示を再読み込みするためのButton要素です。

button .js-htnpsne-awasete-btn-readmore

一覧表示を含むカテゴリー一覧などのリンクとなるButton要素です。

button .js-htnpsne-awasete-btn-subscribe

表示されている一覧表示をfeedlyで購読するためのButton要素です。

div .js-htnpsne-awasete-entrys

一覧表示の外枠となるDiv要素です。

iframe

.embed-card .embed-blogcard

一覧表示本体のiFrame要素です。

　…

リスト表示版

(共通部分を省略)

div .js-htnpsne-awasete-entrys

一覧表示の外枠となるDiv要素です。

ul

li

a

記事へのリンクとなるa要素です。

(記事タイトル)

img.bookmark-count

はてなブックマークのブックマーク数を表示するimg要素です。

　li

　…

同一ページ内で複数の一覧表示を利用できるよう、内部で利用するための識別子を付与していますが、リロード・生成される毎に変更されます。

見た目の変更を行う際は、要素のIDではなくclassを指定します。

例：操作パネルの表示を変更する

操作パネルの「再読み込み」などの文字を常に表示させるCSSとなります。

常に説明文を表示させる

.js-htnpsne-awasete-module {
	padding: 0.2em 0;
}

.js-htnpsne-awasete-control {
	float: right;
}

	.js-htnpsne-awasete-control:after {
		content: '';
		clear: both;
		height: 0;
		display: block;
		visibility: hidden;
	}

	.js-htnpsne-awasete-control > a {
		font-size: 1.2em;
		text-decoration: none;
	}

span.js-htnpsne-awasete-title {
	font-size: 1.2em;
	padding-left: 0.3em;
	border-left: solid 3px #888;
}

.js-htnpsne-awasete-control select {
	margin: 0 1px;
	border-width: 0 0 1px 0;
}

.js-htnpsne-awasete-control button {
	background: #FFFFFF;
	border: solid 1px #D8D8D8;
	border-radius: 3px;
	margin: 0 1px;
	padding: 2px .6em;
}

.js-htnpsne-awasete-control i {
	font-size: 85%;
}

	.js-htnpsne-awasete-control i:after {
		padding-left: 0.3em;
	}

.js-htnpsne-awasete-btn-reload i:after {
	content: '再読み込み';
}

.js-htnpsne-awasete-btn-readmore i:after {
	content: 'もっと見る';
}

.js-htnpsne-awasete-btn-subscribe i:after {
	content: '購読する';
}

.js-htnpsne-awasete-entrys ul {
	padding: .5em;
}

.js-htnpsne-awasete-entrys li {
	padding: .2em;
	list-style: none;
	border-bottom: solid 1px;
}

	.js-htnpsne-awasete-entrys li:first-child {
		border-top: solid 1px;
	}

	.js-htnpsne-awasete-entrys li a {
		text-decoration: none;
	}

.js-htnpsne-awasete-entrys .bookmark-count {
	vertical-align: text-bottom;
}