ブロガーデビューを果たし忙しい日々に追われております。
毎日何か記事を書きたい。少なくとも3日に1つはあげたいですね。
ブログを書く場所が決まったので現在はカスタマイズに取組んでいます。
これも記事にできるので私的にはネタに困らず一石二鳥なんです。
また仕上がったら後日まとめ記事にしていきたいと思いますが、あれこれ試行錯誤しながらすすめていきたいと思います。
さて、ブログのカスタマイズについですが、「はてなブログ」の使いやすさと先人の皆さまのおかげで、私でもここまで簡単にカスタマイズできました。
備忘録がわりにここまでの設定を残しておこうと思います。
デザインテンプレートと変更箇所について
デザインテンプレート
まず、デザインテンプレートですが、色々と試して、テキストが大きく見出しのバランスも良い「Brooklyn」を使用するとこにしました。
テーマストアでも人気ランキングも1位となっており採用しているブログも多いようですが、皆さんカスタマイズして使われるので、同じテンプレートでも個性が出るので問題ないと思います。
特徴ですが、全体的にモノトーンで文字が読みやすいことと、タイトルの文字が大きくてこれもいいですね。いかにも「俺のブログ！」といった主張を感じることができます。
記事が増えてきたら、ヘッダーにイメージを作りたいと思います。
その時はプロの方にお願いして絵を描いてもらおうかなと企んでおります。
目次の表示
はてなブログを使うと自動で見出しから目次を作成してくれます。これを使わない手はないので前回から採用しています。
目次があることで記事全体の構成のバランスがとれているかといったことが整理できるので、目次の使い勝手もありがたいですが、何が記事に不足しているかとか起承転結も把握することができるので是非導入されたほうが良いと思います。
目次の各項目については番号が付くほうが見やすいので自動で番号を振ってくれるようにスタイルを変更しました。
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
細かいですが「目次」とタイトルが打ってあるほうが視認性が良いので文字が入るようにこちらも変更しました。
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold;
}
背景色や罫線は「Brooklyn」オリジナルのままです。
簡単ですがスッキリとまとまりました。
フォローボタン
デフォルトではツイッターとフェイスブックしかありませんが、自分もよく使っている「feedly」をフォローリストに載せたいことと、デザイン的にもスッキリまとめたいため以下を参考に変更させていただきました。
ボタンですがこちらのデザインを使わせていただきました。
シンプルなデザインでボタンも押しやすくサイドメニューにぴったりのデザインだと思います。
一度押してもらえれば役目は終わりなのであまり主張せず、さり気なさも必要だと思うので非常に気に入りました。
ソーシャルメディアのシェアボタン
これもデフォルトだとデザインに統一感がなかったのでキレイなデザインの以下に変更させていただきました。
jQueryを使っているのでページを表示してからフォローワー数を読みにいくので表示が早くてよいです。
純正のボタンだとデザインが不揃いなのと読み込みが遅いそうなので。
ボタンも押しやすく沢山拡散してもらえるように良い記事を書かねばと身が引き締まる思いです。
ところで、じつはデザインテンプレートに「Brooklyn」を使用しているので、スマホ用デサインは使わずレスポンシブデザインを採用していることになっています。レスポンシブデザインとは、PCでもスマホでも画面の大きさに応じてレイアウトが変化することで、同じデザインテンプレートを使用できるものです。
しかし、こういったシェアボタンなどを張り込む際ははみ出したりする可能性があるので注意が必要です。例として、今回採用させていただいたシェアボタンだとAndroidで確認したところ表示が歪んでしまいました。
こちらの問題も以下より解決策を参考にさせていただきました。
CSSコードにあった「widht 15%;」を「widht 13%;」へ変更することできちんと横一列綺麗に整列できました。
SNSシェアボタンがズレた時の対処方法 - はいからの空に
転載先では「13%」に変更とありますが、私のデザインテンプレートの場合、Androidは解決しましたが、iPhone7で確認したところまだ表示が崩れていました。
結果的に幅を「12%」に設定することで解決することができました。
ページトップに戻るボタン
最後にブログの記事が長くなると欲しくなるトップへ戻るアンカーのボタン。こちらもアクセントで入れてみることにしました。
大きめのデザインであまり邪魔にならないようなものを探していたところ以下がちょうど良かったので採用させていただきました。
なかなか様になってきましたね。
- 作者: 鈴木利典
- 出版社/メーカー: 翔泳社
- 発売日: 2016/04/15
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
まとめ
既に多くの方が研究されデザインされテストされたテンプレートやモジュールを使うことで殆どコピペでデザイン作業が完了してしまう簡単さには驚きです。
デザイン編集作業をすすめながら、「これ、自分のブログ？」というぐらいイメージが変わってみえます。
「はてなブログ」にして正解でしたね。
とても満足しています。
いちおう色々と触ったポイントとしては、HTMLやCSSをいじった時は後から分かるようにコメントアウトをしっかり入力しておくことです。
デザインの違うコードを入れたいときに一時的に削除したり、どの部分が干渉するか分かりづらいと最初からリセットして作業することになります。
大きくデザインテンプレートを変更したり、モジュールを変更したい場合はありだとは思いますが、これから永く付き合っていくブログですのでソース管理はしっかりおくにこしたことはないはずです。
是非、皆さんもトライしてみてください。
この場をかりて、テンプレートを使わせていただいたブロガーの方に感謝いたします。
