たまには部屋をかたづけようよ

部屋を片付けせなあかんと思いつついつも放置プレイ。そんな自分の日々の想いをつづった日記系ブログですよ?

最近書いた記事

はてなブログのはてな記法モードでのメリットをもっと有効活用しようよ!

 はてなブログでは、編集モードとして

 の3つを選べるようになってるけど、自分としては絶対に「はてな記法モード」をお勧めしたい!

 はてな記法については「何を今さら」というレベルなので説明については省略するけど
 自分がこのエントリ記事でいいたいことは2つ。

  1. HTMLを直接編集したいから「見たままモード」を使っている人に言いたい。「はてな記法モードでもHTMLを直接記述できる!
  2. はてな記法モードでも「もっとHTML記述を有効活用しようよ!

はてな記法モードでも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現像


 もしこのクラスを指定しないで、普通に記述しちゃうと

すごくいい青空だ
[f:id:BNorider:20130517130724j:plain:w400]
DMC-LX3 RAW現像

こうなっちゃう↓

すごくいい青空だ
f:id:BNorider:20130517130724j:plain:w400
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>
    ・
    ・
    ・

↓このように表示されます。

    ・
    ・
    ・
メニュー1
    ・
    ・
    ・
メニュー2
    ・
    ・
    ・

※上記のページ内リンクをクリックすると、スムーズスクロール移動してますが、その方法はこちら(はてなブログでページ内スムーズスクロールを実現させる)で紹介しています。

 この箇条書きをHTML記述しようとするとulタグと、uiタグを組み合わせて記述する必要があるけど、その手間を省きつつaタグはHTML記述することによってid名を付与できるわけです。


※ここで1点注意です。はてな記法の場合、リンクは通常は[ ]で記述しますが、リンク先がidの場合は使えないので、aタグで記述しないとだめです。
(例)↓このように記述しても

[#menu1:title=メニュー1へ移動]

↓このようにリンクにならない
[#menu1:title=メニュー1へ移動]


まとめ

 はてな記法も確かに万全じゃない。でもはてな記法で無理な部分はHTML記述によって補うことができる。
 それが「はてな記法モード」なんですよ。

 これと同じことを「見たままモード」でやろうとすると、「見たまま編集」タブと「HTML編集」タブを切り替えつつ、両方で記述しなきゃならないでしょ。
 それがどんだけめんどくさいか。


 もし「はてな記法モード」をまだ使ったことがない人がいたら、1回でいいから「はてな記法モード」を使ってみることを、ぜひお勧めします!

 「はてな記法モード」に慣れてしまったら、もう「見たままモード」を使う気にはなれませんよ!


↑ページトップへ