はてなブログのはてな記法モードでのメリットをもっと有効活用しようよ!
はてなブログでは、編集モードとして
- 見たままモード
- はてな記法モード
- Markdownモード
の3つを選べるようになってるけど、自分としては絶対に「はてな記法モード」をお勧めしたい!
はてな記法については「何を今さら」というレベルなので説明については省略するけど
自分がこのエントリ記事でいいたいことは2つ。
はてな記法モードでもHTMLを直接記述できる!
まず1つ目の件。
「見たままモード」を使っている人の中には「自分はHTMLを直接編集&記述したいから」という理由で使っている人もいるかもしれない。
しかーし、それは「はてな記法モード」でも、めちゃ普通にHTML直接記述はできるんですよ。しかも圧倒的に楽に。
「見たままモード」だと、HTMLを編集したい場合は「HTML編集」タブに切り替えなきゃならないでしょ?
それが「はてな記法モード」だと、そのままHTMLを直接記述できるんですよ。
これを「見たままモード」で例えた言い方をすると
- 「HTML編集」タブに切り替えなくとも「見たまま編集」の状態で、HTMLを直接記述&編集できる
これならどういうことか、すぐわかってもらえると思う。
ね。これってすごくいいことでしょ?
これ知ったら、絶対「はてな記法モード」を使ってみたいと思ってくれるに違いない!
これで1つ目に言いたかったことは終わり。
もっとHTML記述を有効活用しようよ!
2つ目の「もっとHTML記述を有効活用しようよ!」ってのは、以下の例で説明させてもらいます。
これは知ってる人は何を今さら、と思うだろうけど、もし知らない人がいれば、ぜひこのエントリ記事が何かの参考になれば。
まず、自分がHTML記述を使う場面は、画像を表示させるとき。
自分は画像をアップするときに
- 画像の上には「画像に関するコメント」
- 画像の下には「撮影した機器の名前」
を入れるようにしてて
しかも画像はセンタリングさせつつ、コメントはその画像の右側に寄せて表示という凝ったやり方してます。
これって普通に記述しようとすると、とてもめんどくさいってのはわかってもらえると思います。
だから自分はCSSに"img-desc"という独自に作成したクラスを定義しているんだけど、それの指定の際にHTML記述を有効活用してる。
ちなみに、そのimg-descクラスのCSS定義ってのは、これ↓。
.entry-content .img-desc { text-align: right; font-size: 80%; margin-left:auto; margin-right:auto; max-width: 800px; min-width: 0px; width:100%; }
このクラスを使って、はてな記法モードでこのように↓記述(画面幅の関係で2行で表示されるかもしれないけど、実際は1行で記述してます)すると
<div class="img-desc" style="max-width: 400px;">すごくいい青空だ<br/>[f:id:BNorider:20130517130724j:plain:w400]<br/>DMC-LX3 RAW現像</div>
こんな感じ↓にちゃんと表示されてくれる。
もしこのクラスを指定しないで、普通に記述しちゃうと
すごくいい青空だ [f:id:BNorider:20130517130724j:plain:w400] DMC-LX3 RAW現像
すごくいい青空だ
DMC-LX3 RAW現像
こんな感じに、画像はセンタリングされないし、コメントも右寄せされない。
#ちなみに「見たままモード」で同じことをやろうとすると、まず「見たまま編集」タブで記述した後「HTML編集」タブに切り替えてHTMLを直接編集して、という感じになるよね?
あとはページ内リンクを箇条書きするときとか。
↓こういうふうに記述すると
メニュー -<a href="#menu1" id="menu1-rtn">メニュー1へ移動</a> -<a href="#menu2" id="menu2-rtn">メニュー2へ移動</a> ・ ・ ・ <a href="#menu1-rtn" id="menu1">メニュー1</a> ・ ・ ・ <a href="#menu2-rtn" id="menu2">メニュー2</a> ・ ・ ・
↓このように表示されます。
※上記のページ内リンクをクリックすると、スムーズスクロール移動してますが、その方法はこちら(はてなブログでページ内スムーズスクロールを実現させる)で紹介しています。
この箇条書きをHTML記述しようとするとulタグと、uiタグを組み合わせて記述する必要があるけど、その手間を省きつつaタグはHTML記述することによってid名を付与できるわけです。
※ここで1点注意です。はてな記法の場合、リンクは通常は[ ]で記述しますが、リンク先がidの場合は使えないので、aタグで記述しないとだめです。
(例)↓このように記述しても
[#menu1:title=メニュー1へ移動]
↓このようにリンクにならない
[#menu1:title=メニュー1へ移動]