Markdown記法で記事を書いているブログのデザインにひと手間加える

このブログは Markdown on Save Improved プラグインを使用して、 Markdown記法 で記事を投稿できるように設定しています。

Markdownって便利だけど要素に個別のクラスを割り当てたりできないので個別のデザインを割り当てたりページ内リンクとかがつけにくいですよね。 MarkdownにHTMLタグを記載すれば認識してくれるのでそのまま書けばいいじゃんて話だとは思うのですが、入れ子にしてしまうとタグの中ではMarkdown記法が認識されなくなってしまいます。

なので、Markdown記法の恩恵をうけつつある程度レイアウトも柔軟に行えるような方法をいくつかまとめてみました。

---

1. 画像とテキストを左右にフロートさせる
2. 配置する要素の横幅を広げる
3. 注釈を見やすくする
4. ページ内リンクを使う
5. 外部リンクは_blankで、ページ内リンクはスムーズにスクロールするようにするる

---

画像とテキストを左右にフロートさせる

画像を左右どちらかにフロートさせてテキストと横並びに配置したい時があった場合、HTMLのマークアップはdivで囲むのが一番楽チンですが、それだとdiv内の文章にMarkdown記法が使えなくなってしまいます。

なので方法としては、

1. 普通にMarkdownで画像とテキストを書く
2. 次にその先頭にセレクタを指定しただけの空の要素を配置
3. 先頭に配置した要素からCSS3の隣接兄弟セレクタ ¹ を指定してその後記述した画像とテキストが横並びになるようなCSSを記載する

といった手順で実現するようにしてみました。

まずは普通にMarkdownで画像とテキストを書き、次にその先頭に下記のようにセレクタ付きの空のdivタグを入れておきます。

CSSは隣接兄弟セレクタを使用して上記の空要素が指定されたすぐ後ろに配置されたimgタグとかpタグをfloatさせるように記述しておきます。

ちなみに右の時にはこんな感じでレイアウトされるようになります。

画像の横幅は%指定でももちろん大丈夫ですが、自分のサイトではあんまり色々な大きさの画像が混在して散漫にしたく無いので横幅を指定しています。 メディアクエリを指定して任意のブレイクポイントでfloatを解除するようにしておくと画像が画面外にはみ出るような事も無くて親切です。

---

配置する要素の横幅を広げる

このブログの本文の横幅は500pxになっていて、文章の読みやすさとか拡張性とか色々考えた結果なんだけど、特定の画像やgistや動画を貼付けた際なんかに500pxではなくてもっと大きく横幅をとりたい時があるので、このブログではこんな方法をとっています。

HTMLの方は前項と同様空の要素を配置しておいて、

CSSで隣接兄弟セレクタを使用して空要素が指定されたすぐ後ろに配置されたpタグ ² に対して横幅を拡張するように記述しておきます。

普通に画像を置いたときにはこんな表示で

幅指定用のdivを設置した時にはこんな表示になります。

---

注釈を見やすくする

Markdownでは簡単に脚注を入れる機能があって非常に便利です。 ただページの一番下にペッてスクロールするだけなので、脚注が大量に並んでいた場合とかに探すのが大変です。

そんな時にはページ内スクロール後、アクティブな要素に一瞬色をつけてあげると親切かもしれません。 ³

やり方は簡単で、jsでクリック後一定時間セレクタを追加しておいて

あとはcssで色とアニメーションをつければ良いだけです。

---

ページ内リンクを使う

この記事のように頭にリストを置いて目次のように使用したい時、ページ内リンクを貼る事になるかと思うのですが、 その為には各タイトルにidを設定しておかなければいけません。 例えば下記のように小タイトルを書いた場合、

Markdownのパーサー ⁴ の種類によっては勝手にh2タグにid="section-1"とか個別のidを設定してくれるものもあるのですが、Wordpressではそのような機能が無いので一つ一つ手動で設定する必要が出てきます。

その場合には普通にidを指定したaかdivのタグをタイトルの上に設置しておいて

（個人的にはaタグを使うとさらにpで囲まれてちょっと気持ち悪いのでdivを使用しています）

目次のリンクからは普通にページ内リンクを設定しておけば大丈夫です。

---

外部リンクは_blankで、ページ内リンクはスムーズにスクロールするようにする

外部リンクはMarkdownのパーサーの種類によっては[link](url){:target="_blank"}のように記載する事が可能ですが、今のところWordpressでは使用する事ができないので、jsでtargetを変更してやる必要があります。

参考 - リンク先を別ウィンドウで開く ⁵

また、#で始まるアンカーリンクまでスムーズにスクロールさせたい場合には下記のようにjsでスクロールするように指定しておくと良いです。

あと、Wordpressでfootnoteを使用していると、書き出されたfootnoteのidに**:**が含まれてしまうので、jQueryが要素を見つけられずにエラーになってしまいます。

そんな時には**:を-**に変更するような記述を入れておくとfootnoteでもスムーズにスクロールするように設定する事が可能です。

---

ブログのデザインを依頼された時、何も考えなければ本文の部分は文章、画像、リンクくらいのデザインがあれば事たりますが、このように色々なレイアウトに対応したデザインをする事も可能ですので、そういった事も考慮してデザインを作成できるように心がけておきたいです。