はてなブログ Brooklyn カスタマイズ覚書

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 10 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

はてなブログのデザインをカスタマイズしてみようと思い、いろいろと触っているうちにいくつか気づくことがあり、それを忘れないように覚書として記事にすることにしました。
アメブロを自由にカスタマイズできるようになるまで5つくらいのブログを触りました。
はてなブログは、1つしか触ってないのでネットでググりながらソースとにらめっこしながらですが・・・
それを忘れないようにしておきたいと思います。

 

 目 次 

 

 

デザインのカスタマイズ

登録したばかりのはてなブログ
はてなブログに登録したばかりの状態を上記画像のような状態です。
ちょっとシンプルすぎてイヤですね。
ここからカスタマイズしていく方法について書いていきます。

テーマを決める

デザイン テーマ
管理画面の左のサイドバーのデザインをクリックすると上記の画面です。
はてなブログのテーマには公式テーマとテーマストアで選ぶテーマがあります。
標準では、Smoothが設定されています。
はてなブログについて詳しくないのでまずは多くの方が使っているであろうBrooklynを選択してみました。

テーマ Brooklyn

テーマストアBrooklyn
はてなブログの中では人気テーマの2位でした。
設定は、上記画像右のサイドバーの「プレビューしてインストール」というボタンをクリックするだけでテーマを変更できます。
ここまでは簡単なので初心者の方でもできると思います。

ヘッダー画像

はてなブログ ヘッダー画像
まずは、ヘッダー画像を入れてみようと思います。
標準では、1100px X 200px というサイズがはてなブログでは設定されているようです。
上記画像は、1500px X 414px になってますが入れてみたらどうなるでしょう。
はてなブログに設定してみました。
設置するのは、「デザイン」→「管理(スパナのアイコン)」→「ヘッダ」→「タイトル画像」です。
下記より確認してみてください。

グローバルメニュー

アメブロではこのグローバルメニューが設置に失敗したという方がかなり多かったのですが・・・
はてなブログBrooklynでは、作者のページに親切に解説付きで掲載されています。
HTMLは、以下の通りです。
設置するのは、「デザイン」→「管理(スパナのアイコン)」→「ヘッダ」→「タイトル下」です。

スタイルシートは、以下の通りです。
「デザイン」→「管理(スパナのアイコン)」→「デザインCSS」に追記してください。

グルーバルメニューは、5つで設定しないといけないようです。
数字を変えるとスタイルが崩れる原因になります。

記事上下のカスタマイズ

記事上
記事上には、ソーシャルブックマークと「読者になる」のボタンですね。

ソーシャルブックマーク
Brooklynでは、複数のソーシャルブックマークがありますがダブらないように注意が必要です。
HTMLでの追加可能です。

サイドバー

サイドバー
サイドバーではまず、何を表示して何を表示しないかを決めます。
決めたらあとは、スタイルシートを決めていきます。
どのようなデザインにするのか?
よく紹介されているのは、タイトルの先頭にアイコンフォントを入れる方法ですね。
アイコンフォントもいろいろ種類があるので混同しないように気をつけて入れる必要があります。
はてなブログで用意されたアイコンフォントもあるのでそれを使うのもいいですね。

その他カスタマイズ

はてなブログでは、TOPに戻るボタンがありません。
ただ、設置は可能です。
TOPに戻るボタン

フッター
無料ではフッタークレジットの削除は、違反になりますが、カスタマイズはHTMLにて可能です。

パンくずリスト

パンくずリスト設定
ブログの中でパンくずリストを表示してない人気サイトないってくらいパンくずリストは表示されています。
デフォルトでは表示されていないので表示しておきます。

 

ブログの設定

設定
ブログ設定の中で迷ったのは、WordPressでいうパーマリンクの設定です。はてなブログでは、詳細設定→フォーマットで設定するのですが、タイトルをそのままパーマリンクにするかしないかです。
そうなると当然日本語の入ったアドレスになるわけですが、変換されるとやたら長いアドレスになるのでやめました。
WordPressであればプラグインJetpackを使って短縮アドレスがあるので日本語アドレスもいいでしょうが、はてなブログではbufferを使うくらいしかないので標準のままにしました。

 

カテゴリー設定

カテゴリー
無料だとカテゴリーを作成することができるだけで説明文などは、Proのみ使用できるようになっています。
WordPressのように親カテゴリー子カテゴリーと入れ子にすることはできないようです。

 

アカウント設定

アカウント設定
はてなブログでは、アカウント設定にてFacebookTwitterInstagram以外にも連携できる機能があります。

 

開閉式目次をつける設定

目次 閉
WordPressアメブロでは開閉式にしてないのですが、はてなブログは、HTMLとスタイルシートだけで開閉式にしてみました。
上記画像は、閉じている状態です。

目次 開
上記画像が開いた状態の目次です。
サンプルなので短い目次ですが、時折長くなることもあるので開閉式にすると邪魔にならず便利です。

設置したページ

参考にさせていただいた記事

ちなみにアメブロは、この方法ではinputタグが禁止タグになっているので応用できません。WordPressには流用できますが、プラグインで簡単にできることといくつかのテーマでは、機能としてあるものがあります。
いずれ記事テンプレートとしてメルマガの特典として配布する予定にしています。

 

記事内でアイコンフォントを使う

Font Awesome Icon
アイコンフォントという言葉を聞いたことがある方も多いと思いますが、WordPressなどが出回る前は、gif画像を工夫して使っていたのですが今は、アイコンフォントが便利に使えるのです。
その代表格とも言えるのが、Font AwesomeGoogle Fontなどです。
はてなブログでは、事前に用意されたアイコンフォントも存在しますが・・・
はてなブログでの使い方は、基本はてなで用意されているアイコンフォント以外は、「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」でコードを記載しておく必要があります。

head内タグの追加
Font Awesomeの場合は、今は登録が必要になります。

登録後にメールが来るので使い方については参考にしてください。
基本的には、使いたい図柄のコード例えば下記のように

挿入するだけですが、はてなブログで表示しない場合があります。
そういった場合は、下記を参考にしてほしいと思います。
iタグの間にスペース( )を入力するだけですが・・・

入力は、上記のようにしますが勝手にはてなブログ側で変換されてしまいます。ただそれでも正常に表示できているのでヨシとしているのですが・・・
ちなみに変換された後は、下記のようになります。

ちょっとはてなブログの場合は、アイコンフォントを使う際に注意が必要だと思いました。

 

まとめ

はてなブログ Brooklyn
はてなブログBrooklynのテーマカスタマイズについて書かせていただきました。新たなことがわかれば追記していく予定でいます。
こういったカスタマイズはできるところからやるというのがいいようです。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!