もくもく最近、変更の頻度多くない？
yunicoでも今回めっちゃ頑張ったからもう一生このデザイン使うくらいの気持ちでいるよ！たぶん…！
1つ前の記事で「新しいパソコン買ったらブログデザインを1から作ってみよう云々」と書いていた。
が！デザインCSSを編集していけば好きなようにデザインが作れるということを知ったので、さっそく取り掛かっていました。
今回は、テンプレートデザインを使わずに、はてなブログをフルカスタムしてみたお話です。
サンプルテーマでブログ作り
前回「新しいパソコンを買ったら云々」と言っていたのはコードの組み立てにzipファイルをたくさん使ったり、HTMLエディタなどが必要だと思っていたから。そうだったら完全にスペック不足で絶対に手間取るだろうな〜と。
でも、現状の弱々ウェブ環境でも無事にデザインを完成させることができました！
お世話になったのは、はてなブログ公式さんが公開してくれているサンプルコード「boilerplate」です。
はてなブログのHTML構造
はてなブログのデザインの骨組み（HTML）は決まっていてこれは基本的に変更できないようです。
なので骨組みの表面をCSSで装飾していけば良いわけです。
…なんて簡単に書いていますが、実際には真っ白なデザインCSSを前にすると何から手を付ければいいのかサッパリわからず思考停止。
頭を抱えていた時に手を差し伸べてくれたのが前述のサンプルコードです。boilerplateには問題なく動作する最低限の骨組みコードが入っているので、それを自分好みに飾り付けていくことで形を作っていくことができます。
ほぼ1からデザインを作るメリット
コード管理のしやすさ向上
公開されているテンプレートデザインは無料／pro問わず、全てのユーザーが使用できるようにはてなブログ内に備わっているほぼ全てのHTMLに対してのCSSが含まれています。
私はproを利用しているので、はてなブログが用意しているヘッダとフッタを非表示にしています。なのでこの部分のCSSを書き込む必要はありません。作ったデザインを公開する予定もないため。
このように使用しないHTMLに関連するコードをバッサリとカットできるため、コード管理がだいぶ楽になったような気がします。
手順の簡略化ができる
テンプレートデザインをカスタマイズするには以下のような手順が必要になります。
- 元のデザインを基準に、位置などを微調整していく。
- コードを使って元のデザインを一旦リセットしてから、希望のデザインになるように再構築する。
元のデザインに新しいデザインを重ねていくことになるので、どうしてもコードが複雑化しやすかった印象があります。
☝︎このようにHTML構成はクラス分けされています。このentryやbox2は#contentという大きな箱の中に入っています。
.entryだけ／#box2だけをカスタマイズしたくても、それらが入っている#contentから調整しないと希望通りのデザインに仕上げられない…なんてことも度々あります。
ほぼ1から作っていくことで、記事をカスタムしたいなら.entryだけ／サイドバーなら#box2だけを作業すれば良くて、作業する上でこの恩恵はかなり大きかったです。
ページの軽量化ができるかも
テンプレデザインをカスタマイズして使用すると、以下のような二段階の読み込みが発生しています。
- 設定しているテンプレートのデザイン情報が読み込まれる。
- それをカスタマイズしているため、新しいカスタマイズ情報が読み込まれて①に上書きされてから表示される。
テンプレートのコード情報がなくなったことで、読み込むのは自分で入力したもののみになります。これにより多少の軽量化が見込めるかなと思っています。
実際、やりたい放題コードを詰め込んだ割には読み込みスピードが極端にダウンした感じもないので効果はあるような気がします。
おわりに┃秘密のメッセージ
作業期間は約2週間。それなりに大変だったけど、初めてのフルカスタム作業はとっても楽しかったです。
ブログを始めたばかりの頃に作った、超思い入れのあるヘッダー画像を再び活用できるデザインに着地できたのが個人的にアツイ！
ファイル保存できるメモ帳やエディタを使って作業を進めて、それを外部ファイルで引っ張って来れたらもっと効率は上がった気もするけど、そんな環境が作れなくてもブログ内で完結できるのは手軽で良き。
でね、デザイン作りが一通り終わったあと「なんか面白いことしたいなぁ」って思ってこのブログのどこかに秘密のメッセージを隠しておいたの。
それが実際に面白いことかはさて置くけど！
メッセージを見つけたら、ぜひ「見つけたよ！」って教えてね。
もくもくyunicoタブレットPCが使えなくなってから…また検討するかな…
