あっぷりノート

Fix the Bits | あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる

はてなブログの箇条書き(リスト)をおしゃれにする

先日、中見出し(h4)を最近よく使うという理由でデザインを変えました


でも"最近よくつかう"以前に、むかしからよく使うレイアウトにもっと手を加えるべきでは?と気づいたのです。


箇条書き」です。


箇条書きをもっとオシャレにしてみませんか?



箇条書きのメリット


当ブログでは箇条書きを多用します。


箇条書きを多用する理由はいくつかあって、個人的に好きだというのもありますが、文章より視覚的にとらえやすいし、目線をたくさん動かさなくてもいいし、文字数も減らせてシンプルな文章になるからです。


もっと構造的なことをいうと、箇条書きでならんでいるものは同等の重要度であるということを暗黙的に示していることにもなります。


これはベンリですよね。


論拠!


論より証拠。


さきほどの「箇条書きの利点」を箇条書きで書いてみます。

箇条書きの利点

  • 文章より視覚的にとらえやすい
  • 目線をたくさん動かさなくてもいい
  • 文字数が減らせてシンプルになる
  • 同列であるということが示せる
  • 個人的に好きだ

いまさら確認するまでもありませんが、やっぱり箇条書きのほうがスッと入ってきやすいですよね。


上記のような理由で箇条書きを多用するワケですが、よく使うものほど考慮すべきコトがおります。


目へのやさしさです。


目の保養にCSS!


よく目にするモノこそ、目にやさしいデザインであるべきです。


じゃあ目にやさしい箇条書きへ、どのようにデザインするのか。


"見出し"のときと同じようにCSSを編集します。

参考サイト


まず、具体的なイメージやCSSは、下記のページを参考にしてみてください。



上記サイトでめぼしいCSSをコピーしておきましょう。


はてなブログへの反映方法


詳細は「はてなブログ CSS 編集」でググってもらっても結構ですが、

ダッシュボード > デザイン > カスタマイズ > デザインCSS

上記手順で、先ほどコピーしたCSSをぶち込んでいただければOK。


事前設定はこれだけです。


本文にHTMLを直書きする


CSSをコピーした際にHTMLも併記されていたとおもいます。


f:id:you_key69:20190706151143j:plain

そのHTMLをコピーし、箇条書きしたい場所に挿入しましょう。


変更した結果


劇的ビフォア・アフターはこのとおり。


f:id:you_key69:20190706150444j:plain

変更前(左)、変更後(右)です。


編集モード


ちなみにはてなブログでの編集モードは

  • はてな記法
  • Markdown
  • HTML

のどれでも有効でした。


「見たまま」編集モードではつかえないのでご注意されたし。


単語登録


スマホで下書き、投稿される方はHTMLを辞書に単語登録しておくことをオススメします。


たとえば、こんな風に──


f:id:you_key69:20190706152120j:plain


下書きする時点で、すばやくレイアウトの整形もできるのでかなりはかどりますよ。


※同じ方法でよく使う[: contents]や[: embed]も単語登録しています


CSSについて


ベンリな世の中なので、たいていのテンプレートはコピペでそこそこおしゃれなものができます。


その後、オリジナリティを出していきたいのであれば、CSSをいじれたほうが有利です。


引きつづき当ブログでは、囲い枠(box)や引用文(blockquote)にもデザイン要素を入れて、読みやすく伝えやすいブログに進化させていきたいとおもいます。


乞うご期待!


あっぷりへんしょん ~継続性は見た目から~


お気に入りのデザインになると愛着が増します。


ランニングもお気に入りのウェアを手に入れると、ますます走るのが楽しくなります。


やはり見た目は大事ですね。


とくに継続力がもとめられるコトについては。


ブログが書きたくても筆がすすまないというときは、ためしにデザインをいじってみることをオススメします。