【8/14】はてなブログのテンプレートを作ろう Part1
ブログを始めるにあたって大事なことが1つある。
それは手間にならないこと。
続けることが大事なのに、めんどくさくなってしまえば続かなくなってしまう。
では続けられるためには、少ない労力でブログを書くためにはどうするべきか。
僕はテンプレートを作ることだと考えている。
デザインのこだわりは最小限におさえ、極論を言えば、文章を書くだけで終わるような、そんなブログが自分には適しているのだと僕は思う。
そんな訳で、今回はブログデザインのテンプレート化に向けて学んでいこうと思う。
目次のカスタマイズ
目次もテンプレート化しておきたい。
だがそこまで手間を書けたくないため、CSSコードをコピペするだけでできるものを探した。
僕は「Minimal Green」さんのブログで紹介されていた目次のデザインを取り入れた。
シンプルでかわいいため採用した。
いじるところはカラーくらいだが、それはブログを書きながらブログに合ったカラーを探していこうと思う。
見出しのカスタマイズ
見出しも分かりやすいかつ使いやすいものを探す必要がある。
見出しは「サルワカ」さんのブログで紹介されていたものを採用した。
大見出し、中見出し、小見出しはデフォルトのメニューからすぐ付けることができるため、少なくともこの3つの見出しのデザインは考えておくといいだろう。
ちなみに上のようなリンクの貼り方は、メニューのリンクボタンを押し、URLを貼り付け、プレビュー内の埋め込みを選択することでできる。
冒頭文の作成 (定型文の貼り付け、囲い枠の作成）
本文の冒頭に目標を毎回書くようにしたい。
はてなブログでは定型文の保存と貼り付けが可能ということだったのでやってみた。
定型文の保存は、本文の編集画面の編集サイドバーの一番下の「定型文貼り付け」からできる。
貼り付けは、保存した定型文をクリックし、下にある「選択した定型文を貼り付け」から貼り付けることができる。
定型文をよく使う場合は、「定型文貼り付け」の右側のスイッチをオンすることで編集サイドバーのタブにショートカットとして追加できるためやっておくとよい。
また囲い枠も作成しておきたかったため、囲い枠の作り方も調べてみた。
僕は先ほどと同じく「サルワカ」さんのブログを参考にした。
好きなデザインのCSSコードを自分のブログのデザインCSSに貼り付け、本文編集画面のHTML編集にHTMLコードと文を書くことでできる。
枠の色は、CSSコードの#○○○○○○を2ヶ所変更するだけで変えることができる。
これらを活用して、
<div class="box18"> <p>「5分で分かるアフィリエイト」でも全然分からないような僕が、アフィリエイトを学びながら、<span style="color: #ff0000;">『「5分で分かるアフィリエイト」で分からない人でも分かるアフィリエイト』</span>のブログを作るまでの日記。</p> </div>
という定型文で保存した。
今日の日記の冒頭にあったのがこれだ。
他にしたこと
- パンくずリスト
- 行間の編集
- タグとカテゴリー
