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

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

hatena-wikiblog

スポンサーリンク

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

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

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

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


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

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

細かな修正

タイトル画像は使えない

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

hatena-wikiblog-4

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

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

hatena-wikiblog-5

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

<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ブログ

タイトルが切れる

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

hatena-wikiblog-8

以下の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;
}

スポンサーリンク

シェア:
フォロー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です