パパパッとパパ

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

パパパッとパパ

パパ目線で伝える子育てのこと

トップページとサイドバーの記事を2段組にしました【はてなブログカスタマイズ】

スポンサーリンク

このブログを始めて2年半余り。その間何度もデザインを変えたり、カスタマイズをしたり。カスタマイズってやってもやっても終わりがないですよね。

最近このテーマを設定しているブログをちらほらと見かけ、とてもかっこいいなぁと思っていたのです。

トップページが記事一覧のような感じで、しかも2段組になってるんですよ。なんてスタイリッシュ。

ただ、導入するには記事の1段落目に画像が必要だったり、そもそも今このブログで使っているシンプルなテーマも好みだったりでテーマ変更には躊躇していました。

というわけでテーマは変えずにカスタマイズでこの2段組をやってしまおうと色々調べたのでした。

完成形

やりたかったのは

  • トップページを記事一覧にする
  • 記事一覧を2段組にする
  • サイドバーの注目記事も2段組にして統一性を持たせたい

の3点です。

完成したデザインがこちらです。

f:id:Pikky:20170510001344p:plain

f:id:Pikky:20170510001340p:plain

記事一覧の途中にはアドセンスも挟んでいます(モザイクのところ)。

なかなか思っていた通りにできました。といっても基本は先人達のコピペです。以下にそれぞれやり方を紹介します。

1)トップページを記事一覧に

はてなブログのトップページって最新記事が丸ごと出る仕様になっています。

トップページに最新記事がどーんと載っていても読む気がしないんですよね。違う記事を読もうにもスクロールを延々しないといけないし、使い勝手が悪いなと思ってました。

「続きを読む」を設定すれば記事を端折ることはできますが、私はこれまで「続きを読む」を設定しておらず一からやり直すのは面倒くさかったです。

そういうわけで記事一覧をトップページにできたらなぁと思って調べてみたらありました。

Javascriptを使って「もしトップページにアクセスしたら記事一覧に転送します」という条件を追加しているようです。

上記の記事に記載のコードをその通りに設定したら簡単に記事一覧をトップページにできました。

なお、上記の記事のデメリットのところに書いてありますが、これやるとGoogleからの評価が下がる可能性があるようです。私は特に気にしませんでした。

2)記事一覧を2段組に

トップページを記事一覧にできたら、次はその記事一覧を2段組にする方法です。これも上記記事のコピペでいけます。

2段組みになるだけで何だかスタイリッシュに見える気がします。一段のときと比べてサムネイルが大きくなるのが良いのかな。

また、画面の小さいiphoneSEで見ても一度に四つの記事のタイトルとサムネイルが確認できるので、お目当ての記事が見つけやすくなったと思います。

3)記事一覧の2段組の途中にアドセンスを挟む

記事一覧の記事の間にアドセンスを挟むこともできます。上記の記事は通常の記事一覧が対象ですが、2段組にしても自然にアドセンスを表示することができました。

f:id:Pikky:20170509235650j:plain

モザイクをかけているところがアドセンスです。記事一覧の2行目と3行目に表示するようにしています。

4)サイドバーの注目記事を2段組に

最後にサイドバーのカスタマイズです。ここも2段組にできました。

これも2段組にすることで一度に多くの記事情報を見てもらえます。まだこのカスタマイズをして日が浅いので何とも言えませんが、2段組にした後にこの注目記事へのアクセスが1割程度増えています。

上記の記事は「最新記事のモジュールに対し、サムネイルにリボンを表示し、2段組みをする」カスタマイズについて書かれていますが、単にサイドバーのモジュールを2段組みにするだけであればCSSの編集だけで可能です。

なお、最新記事と注目記事(ブックマーク上位の記事やアクセス数上位の記事)ではCSSのクラスが違うようなので、上記の記事のコードを少し編集する必要があります。注目記事の場合のCSSはこちらです(なお、私はCSSの知識がほとんどなく雰囲気だけでやってますので、その点ご留意ください)。

/* サイドバーのカスタマイズ */
/* 2列表示 */
.hatena-module-entries-access-ranking ul.hatena-urllist {
	width: 100%;
}
.hatena-module-entries-access-ranking .urllist-with-thumbnails li .urllist-image {
	margin: 0;
	float: none;
}
.hatena-module-entries-access-ranking li.urllist-item {
	float: left;
	width: 50%;
      height: 250px;/* 高さは調整して下さい */
	padding: 4px;
      margin: 5px auto;
	box-sizing: border-box;
	font-size: 90%;
	border-top: none;
	border-bottom: 1px solid #ddd;
}
.hatena-module-entries-access-ranking .urllist-title-link {
	margin: 0;
}
.hatena-module-entries-access-ranking li.urllist-item a {
	margin: 0!important;
}
.hatena-urllist::after {
	content: "";
	display: block;
	clear: both;
}

おわりに

はてなブログのカスタマイズで、トップページとサイドバーの記事表示を2段組にしたいって方の参考になれば嬉しいです。

☑あわせて読みたい