はてなブログがウィキペディアになる非公式テーマ「百科事典的な何か」

2016年12月6日

はてなブログをウィキペディア風にできる非公式テーマ「百科事典的な何か」のご紹介です。

「百科事典的な何か」について

百科事典的な何かは、「シロマティ（id:shiromatakumi)」さんが作成したウィキペディア風のはてなブログテーマです。

はてなブログを少々強引に？ウィキペディア風にするCSSで、GitHub にて公開されています。

今回このテーマをサブブログに導入しましたので、その導入過程をご紹介します。

---

「百科事典的な何か」のインストール

1. GitHubにアクセスし、右上にある Raw をクリック
   
2. 表示されたCSSを丸ごと選択し、右クリック→コピー
   
3. はてなブログの「設定」　→　「カスタマイズ」にあるデザインCSSに貼り付け（元々のスタイルは削除）
   
4. 「変更を保存する」をクリックすれば、インストールは完了です。

---

細かな修正

タイトル画像は使えない

レイアウトが崩れるため「百科事典的な何か」ではタイトル画像が使用できません。ご利用中の方は画像を外しておく必要があります。

上部のレイアウトが崩れる

「百科事典的な何か」では右上に検索ボックスを置かないとレイアウトが崩れます。検索ボックスは次の方法で追加できます。

「設定」　→　「カスタマイズ」にある「ヘッダ」のタイトル下に次のコードを追加する。

<div class="hatena-module-search-box">
<div class="hatena-module-body">
<form class="search-form" role="search" action="http://【サイトURL】/search" method="get">
<input type="text" name="q" class="search-module-input" value="" placeholder="ブログ内検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>

（参考：はてなブログのブログ内検索をヘッダーに移動する小技を紹介 – 文系プログラマによるTIPSブログ）

タイトルが切れる

「百科事典的な何か」ではタイトルが長いと途中で切れてしまいます。スタイルに横幅を追加して改行させましょう。

以下の587行部分を追加します。

#blog-title-inner {
 position: absolute;
 top: -40px;
 left: 0;
 width: 136px;
}

タイトルを改行すると、その下にあるサイドバーに重なる場合があります。その場合は #box2 の margin-top の値を調節してください。

#box2 {
 position: relative;
 z-index: 2;
 width: 136px;
 margin-top: 160px;
 float: left;
}