はてブロのデザインを「Naked」に変えたので感想とか細かいカスタマイズの仕方とか
あけましておめでとうございます。
自分は新年早々、というより年越しオールでブログのカスタマイズに勤しんでおります。
新年なので心機一転、ブログの大改造に踏み出すのです。
独自ドメインには先日変えたので次はブログデザインですね。
ブログデザインを変えたい理由
さっき心機一転と言いましたが、前々からブログデザインを変えたいなとは思っていました。
だけど、参考にしているブログ運営者さん曰く、「ブログデザインを凝るぐらいならまずは多くの記事を書け。書いた記事でブログのデザインは決まるから最初からデザインなんて考えるな。」らしいです。
だからまずはたくさんの記事を書くことを目標にしてました。
今では50記事ほど書いて、メニューバーで「グミ」「アニメ」などメインカテゴリーをまとめたいなと思ってきたのでカスタマイズに踏み出しました。
デザインの理想
デザインの理想ですがだいたい考えていたのは、
- メニューバーを付ける
- 見出しを目立たせる
- 文字はゴシック体のような読みやすい文字
- すっきりして読みやすいレイアウト
といったところでした。
正直、自分でCSSをいじったりするのはからきしダメなのでテンプレート頼りです。
そこでテーマストアで自分の理想に近いものを人気順の上から見ていって決めました。
テーマ「Naked」を導入
決めたのは「Naked」というテーマでした。
テーマストアで見るのだからまあ5000円ぐらいなら出していいかなと思っていたのですがなんと無料！
世の中にはいい人もいたもんだ…
公式の概要を引用すると…
概要
オシャレ・レスポンシブ対応・カスタマイズ可能なテーマです。
- 記事部分を白・黒・灰色のみでつくることで、多くの背景色・背景画像とマッチ
- 簡単にカスタマイズできるナビ・フッター機能
- 初期状態でデザインされた目次・カエレバ・ヨメレバ・アプリーチ
これ導入すれば自分何もしなくてよくない！？
ということで導入しました。
とてもおしゃれで読みやすいブログになりました。ちゃんちゃん。
とは、さすがにここまでうまくいかずにメニューバー（ナビゲーションバーというらしい）は最初からはついていませんでした。
あと字体を変えたいなとか。見出しも変えられるなら変えたいとか。
そんなわがままボーイのためにこのテーマの作成者様は「Naked」用のカスタマイズ法を準備してくださっていました。マジで感謝。
まずはナビゲーションバーを作る
よーし頑張るぞ。
とにかくテーマ作成者様のブログに従っていじろう。
これに従っていたら簡単にできた。
もしカテゴリーを5つ以上作りたいときは…
<li>
<a href="URL6">リンク６</a>
<ul class="second-level">
<li><a href="URL6-1">リンク６ー１</a></li>
<li><a href="URL6-2">リンク６ー２</a></li>
<li><a href="URL6-3">リンク６ー３</a></li>
</ul>
</li>
というコードをペーストして増やせばいいだけです。
もし子カテゴリーをなくして親カテゴリーだけにしたいときは…
<ul class="second-level">
<li><a href="URL6-1">リンク６ー１</a></li>
<li><a href="URL6-2">リンク６ー２</a></li>
<li><a href="URL6-3">リンク６ー３</a></li>
</ul>
というコードを消せばいいだけです。
ナビゲーションバーのタイトル変更などは作成者様の指示に従ってくださいね。
ついでに言うと、URLの部分は自分のカテゴリー別のページのURLを貼ればそのカテゴリーの記事が全部表示されます。
一方、「ブログトップ」とかを表示したいときは自分のブログトップのURLを貼ればOK。「プロフィール」など１記事だけを表示したいときはその記事のURLで大丈夫。
以上、ナビゲーションバーはこんな感じで簡単に作れました！
字体の変え方
字体（フォント） の変え方はさらに簡単。
作成者様の紹介してくれているフォント以外の場合は次のものとかも参考になります。
かなり簡単でした。にっこり。
あとがき
ブログカスタマイズ、意外と簡単でした。
テンプレートを作成し配布してくれている方々に感謝。
これからもメニューバーの項目を少しずついじったりカテゴリーの見直しとかはあるけど大枠はできたかな。
今日はここまで！じゃあね！