HacoLife

シンプルなデザインが好き。中古で購入した平屋をリフォームして暮らす「はこ生活」しています。

関連記事の導入にZenbackを採用!CSSを修正してデザインも変更してみました。

f:id:mr58n:20141030184237j:plain

ブログの記事を読み終わった後に、よく関連記事のリストを見かけます。
このブログでもやってみたい!と思い、テスト的に関連記事を導入してみました。

今回導入するにあたって採用したサービスはZenbackです。
単に導入するだけでなく、オリジナリティーを出すためにCSSでデザインをカスタマイズした内容を紹介します。

 まず、はてなブログにZenbackの導入

f:id:mr58n:20141030184915j:plain

デザインの設定画面で、記事の項目の設定を変更します。

その時、

  1. Zenbackのチェックは入れない
  2. 記事下の入力枠にZenbackにログインして生成したコードを貼り付ける

上記2点を厳守して設定を保存します。

はてなブログ側の設定でチェックを外したのは、次のZenback側のカスタマイズができないからです。(確か・・・)

Zenback側の設定

Zenbackにログインして、ウィジェットテーマにsmokeを選択して保存します。理由はデザイン的に一番シンプルで後からカスタマイズしやすいからです。

f:id:mr58n:20141030185222j:plain

あとは、関連する記事は「画像+テキスト」を選択しました。

f:id:mr58n:20141030185824j:plain

 

すると・・・・・

f:id:mr58n:20141030194949j:plain

こんな感じで、とりあえず関連記事は表示されました!

もうちょっと体裁を整えたいので、ここからCSSでカスタマイズしていきます。

CSSを追加

次にデザインの設定からデザインCSSに下記のソースコードを追加します。

.zenback-module-label {

	text-align: center;

	position: relative !important;

}

.zenback-module-label:after {

	content: "";

	display: block !important;

	position: absolute;

	top: 50%;

	width: 100%;

	margin-top: -3px;

	border-top: 1px solid #ddd;

	border-bottom: 1px solid #ddd;

	height: 2px;

}

#zenback-widget .zenback-module-label a, #zenback-widget .zenback-module-label span {

	padding: 0.3em 0;

	color:#1b1b1b;

	text-decoration: none;

	font-weight: bold;

}

.zenback-module-label span, .zenback-module-label a {

	display: inline-block;

	padding: 5px 10px !important;

	background-color: #fff !important;

	position: relative;

	z-index: 3;

}

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb,

#zenback-widget #zenback-news-hasimage .zenback-module-item {

	height: 100px !important;

	margin: 0 0 20px !important;

	padding: 0 2% !important;

	font-size: 16px !important;

	background-color:transparent !important;

}

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb {

	width:46% !important;

}

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail,

#zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail,

#zenback-widget #zenback-news-hasimage .zenback-module-item-image,

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-image {

	width:100px !important;

	height: 100px !important;

}

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail,

#zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail {

	float:left;

	margin-right:10px;

}

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title {

	width:auto !important;

	margin-top: 0 !important;

	overflow:hidden;

}

#zenback-widget #zenback-news-hasimage .zenback-module-item-content {

	overflow:hidden;

}

#zenback-widget #zenback-news-hasimage .zenback-module-item-text a {

	color:#999;

}

[id="zenback-news-hasimage"] .zenback-module-list {

	border-bottom: 1px dotted #ddd !important;

	padding-bottom: 10px !important;

}

.logly-lift-ad:first-child {

	margin-bottom:10px;

}

#logly-lift-869470 .logly-lift-ad-image {

	width: 100px !important;

	height: auto !important; 

	padding: 0 10px !important;

}

#logly-lift-869470 .logly-lift-ad-image-inner,

#logly-lift-869470 .logly-lift-ad-image-inner img {

	position: static !important;

	width:100px !important;

	height:auto !important;

}

@media (max-width: 767px) {

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb,

#zenback-widget #zenback-news-hasimage .zenback-module-item {

	overflow:hidden;

	float:none !important;

	width: 100% !important;

	height: auto !important;

	padding: 0 !important;

}

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail,

#zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail,

#zenback-widget #zenback-news-hasimage .zenback-module-item-image,

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-image {

	width:60px !important;

	height: 60px !important;

}

#logly-lift-869470 .logly-lift-ad-image,

#logly-lift-869470 .logly-lift-ad-image-inner,

#logly-lift-869470 .logly-lift-ad-image-inner img {

	width:60px !important;

}

#logly-lift-869470 .logly-lift-ad-image {

	padding: 0 10px 0 0 !important;

}

}

これで保存します。

f:id:mr58n:20141030195901j:plain

見出しとレイアウトが変更になりました。

画像の縦横比が強制的に1:1になっており、つぶれた感じになってしまいますが、ある程度ユーザーに雰囲気が伝われば構わないので今回はこれでOKとしました。
(他の対応も検討の余地有りです。)

ZenbackのCSSが、はてなブログCSSよりも後で読み込まれるため、「!important」の処理が多いのが反省点です。

「Zenback」以外のサービスでも時間があればカスタマイズにチャレンジしてみたいと思います。

さいごに

「Simple Gray」のテーマを使っていなくても、多分それなりにデザインが変わると思います。興味があれば試してみてくださいー!!