はてなブログ Brooklyn カスタマイズ覚書
この記事を読むのに必要な時間は約 10 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
はてなブログのデザインをカスタマイズしてみようと思い、いろいろと触っているうちにいくつか気づくことがあり、それを忘れないように覚書として記事にすることにしました。
アメブロを自由にカスタマイズできるようになるまで５つくらいのブログを触りました。
はてなブログは、１つしか触ってないのでネットでググりながらソースとにらめっこしながらですが・・・
それを忘れないようにしておきたいと思います。
デザインのカスタマイズ
はてなブログに登録したばかりの状態を上記画像のような状態です。
ちょっとシンプルすぎてイヤですね。
ここからカスタマイズしていく方法について書いていきます。
テーマを決める
管理画面の左のサイドバーのデザインをクリックすると上記の画面です。
はてなブログのテーマには公式テーマとテーマストアで選ぶテーマがあります。
標準では、Smoothが設定されています。
はてなブログについて詳しくないのでまずは多くの方が使っているであろうBrooklynを選択してみました。
テーマ Brooklyn
はてなブログの中では人気テーマの2位でした。
設定は、上記画像右のサイドバーの「プレビューしてインストール」というボタンをクリックするだけでテーマを変更できます。
ここまでは簡単なので初心者の方でもできると思います。
ヘッダー画像
まずは、ヘッダー画像を入れてみようと思います。
標準では、1100px X 200px というサイズがはてなブログでは設定されているようです。
上記画像は、1500px X 414px になってますが入れてみたらどうなるでしょう。
はてなブログに設定してみました。
設置するのは、「デザイン」→「管理(スパナのアイコン)」→「ヘッダ」→「タイトル画像」です。
下記より確認してみてください。
グローバルメニュー
アメブロではこのグローバルメニューが設置に失敗したという方がかなり多かったのですが・・・
はてなブログのBrooklynでは、作者のページに親切に解説付きで掲載されています。
HTMLは、以下の通りです。
設置するのは、「デザイン」→「管理(スパナのアイコン)」→「ヘッダ」→「タイトル下」です。
|
1 2 3 4 5 6 7 8 9 10 |
/* グローバルメニュー */ <div id="global-menu"> <ul class="global-menu-list"> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> </ul> </div> |
スタイルシートは、以下の通りです。
「デザイン」→「管理(スパナのアイコン)」→「デザインCSS」に追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*ナビメニューの色変更*/ #global-menu { background-color: #06285B; /*ナビメニューの両サイド背景の色変更*/ border-bottom: 2px solid #ffffff; /*ナビメニュー下部のラインカラー変更*/ } .global-menu-list li a { color: #fff; /*ナビメニューの文字色変更*/ background-color: #06285B; /*ナビメニューの背景色変更*/ } #mobile-head { background-color: #06285B; /*スマホ版 ナビメニューの背景色変更*/ } #blog-title { border-bottom: 1px solid #ffffff; /*ナビメニュー上部のラインカラー変更*/ } |
グルーバルメニューは、５つで設定しないといけないようです。
数字を変えるとスタイルが崩れる原因になります。
記事上下のカスタマイズ
記事上には、ソーシャルブックマークと「読者になる」のボタンですね。
Brooklynでは、複数のソーシャルブックマークがありますがダブらないように注意が必要です。
HTMLでの追加可能です。
サイドバー
決めたらあとは、スタイルシートを決めていきます。
どのようなデザインにするのか？
よく紹介されているのは、タイトルの先頭にアイコンフォントを入れる方法ですね。
アイコンフォントもいろいろ種類があるので混同しないように気をつけて入れる必要があります。
はてなブログで用意されたアイコンフォントもあるのでそれを使うのもいいですね。
その他カスタマイズ
ただ、設置は可能です。
無料ではフッタークレジットの削除は、違反になりますが、カスタマイズはHTMLにて可能です。
デフォルトでは表示されていないので表示しておきます。
ブログの設定
ブログ設定の中で迷ったのは、WordPressでいうパーマリンクの設定です。はてなブログでは、詳細設定→フォーマットで設定するのですが、タイトルをそのままパーマリンクにするかしないかです。
そうなると当然日本語の入ったアドレスになるわけですが、変換されるとやたら長いアドレスになるのでやめました。
WordPressであればプラグインのJetpackを使って短縮アドレスがあるので日本語アドレスもいいでしょうが、はてなブログではbufferを使うくらいしかないので標準のままにしました。
カテゴリー設定
無料だとカテゴリーを作成することができるだけで説明文などは、Proのみ使用できるようになっています。
WordPressのように親カテゴリー子カテゴリーと入れ子にすることはできないようです。
アカウント設定
はてなブログでは、アカウント設定にてFacebookやTwitter・Instagram以外にも連携できる機能があります。
開閉式目次をつける設定
WordPressやアメブロでは開閉式にしてないのですが、はてなブログは、HTMLとスタイルシートだけで開閉式にしてみました。
上記画像は、閉じている状態です。
上記画像が開いた状態の目次です。
サンプルなので短い目次ですが、時折長くなることもあるので開閉式にすると邪魔にならず便利です。
設置したページ
参考にさせていただいた記事
いずれ記事テンプレートとしてメルマガの特典として配布する予定にしています。
記事内でアイコンフォントを使う
アイコンフォントという言葉を聞いたことがある方も多いと思いますが、WordPressなどが出回る前は、gif画像を工夫して使っていたのですが今は、アイコンフォントが便利に使えるのです。
その代表格とも言えるのが、Font AwesomeやGoogle Fontなどです。
はてなブログでは、事前に用意されたアイコンフォントも存在しますが・・・
はてなブログでの使い方は、基本はてなで用意されているアイコンフォント以外は、「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」でコードを記載しておく必要があります。
Font Awesomeの場合は、今は登録が必要になります。
|
1 |
<script src="https://kit.fontawesome.com/f1d90adbdd.js" crossorigin="anonymous"></script> |
登録後にメールが来るので使い方については参考にしてください。
基本的には、使いたい図柄のコード例えば下記のように
|
1 |
<i class="fas fa-phone"></i> |
挿入するだけですが、はてなブログで表示しない場合があります。
そういった場合は、下記を参考にしてほしいと思います。
iタグの間にスペース( )を入力するだけですが・・・
|
1 |
<i class="fas fa-phone"> </i> |
入力は、上記のようにしますが勝手にはてなブログ側で変換されてしまいます。ただそれでも正常に表示できているのでヨシとしているのですが・・・
ちなみに変換された後は、下記のようになります。
|
1 |
<em class="fas fa-phone"> </em> |
ちょっとはてなブログの場合は、アイコンフォントを使う際に注意が必要だと思いました。
まとめ
はてなブログのBrooklynのテーマカスタマイズについて書かせていただきました。新たなことがわかれば追記していく予定でいます。
こういったカスタマイズはできるところからやるというのがいいようです。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存