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

2014-01-21 /Development #CSS 32 users
この記事は最終更新日から11年以上経過しています。

このブログは 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の隣接兄弟セレクタ 1 を指定してその後記述した画像とテキストが横並びになるようなCSSを記載する

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

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

コピーしました 
<div class="md-img-left"></div>
![](https://dl.dropboxusercontent.com/u/3924504/server/12px.com/blog/140118/img.png)
テキストが入ります。テキストが入ります。テキストが入ります。

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

コピーしました 
.md-img-left,
.md-img-right
  clear: both
.md-img-left + p img,
.md-img-right + p img
  width: 300px
  margin-bottom: 20px
  @media screen and (max-width: $break-point + 300px)
    position: relative
    width: auto !important
    margin-left: 0 !important
    float: none !important
    width: 100% !important
.md-img-left + p img
  float: left
  margin-left: -100px
  margin-right: 30px
.md-img-right + p img
  float: right
  margin-right: -100px
  margin-left: 30px

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

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

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

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

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

コピーしました 
<div class="md-large"></div>
![](https://dl.dropboxusercontent.com/u/3924504/server/12px.com/blog/140118/img.png)

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

コピーしました 
.md-large + p
  $ml: 100px
  width: auto !important
  margin-left: -$ml !important
  margin-right: -$ml !important
  position: relative
  img
    width: 100%
    height: auto
  @media screen and (max-width: $contents-width + ($ml*2) + 20px)
    margin-left: 0 !important
    margin-right: 0 !important
  @media screen and (max-width: $break-point)
    margin-left: 0 !important
    margin-right: 0 !important

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

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

注釈を見やすくする

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

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

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

コピーしました 
$('a', '.body').each(function(i, el) {
  var href = $(el).attr('href');
  if(href && href.indexOf('#fn') != -1) {
    $(el).click(function(){
      $target = $($(el).attr('href'));
      $target.addClass('active');
      setTimeout(function(){
        $target.removeClass('active');
      }, 1000);
    });
  }
});

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

コピーしました 
.footnotes
  ol
    li
      +transition-property('background-color')
      +transition-duration(1s)
      +transition-timing-function(ease-out)
      &.active
        background-color: yellow

ページ内リンクを使う

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

コピーしました 
##ページ内リンクを使う

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

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

コピーしました 
<a id="anchor-link"></a>
##ページ内リンクを使う

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

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

コピーしました 
2. [ページ内リンクを使う](#anchor-link)

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

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

コピーしました 
2. [ページ内リンクを使う](#anchor-link)

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

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

コピーしました 
$('a', '.body').each(function(i, el) {
  var href = $(el).attr('href');
  if(href && href.charAt(0) == '#') {
    $(el).click(function(){
      var top = $($(el).attr('href')).offset().top - 10;
      $('html, body').animate({scrollTop: top}, 800);
      return false;
    });
  }
});

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

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

コピーしました 
$('.footnotes', '.body').find('li').each(function(i, el) {
  var id = $(el).attr('id');
  id = id.replace(':', '-');
  $(el).attr('id', id);
});
$('sup', '.body').each(function(i, el) {
  var id = $(el).attr('id');
  id = id.replace(':', '-');
  $(el).attr('id', id);
});
$('a', '.body').each(function(i, el) {
  var href = $(el).attr('href');
  if(href && href.charAt(0) == '#' && href.indexOf(':') != -1) {
    $(el).attr('href', href.replace(':', '-'));
  }
});

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

  1. 同じ親要素を持つ子要素ですぐ後ろの要素にのみ対象となるセレクタ。Chrome, Safari, Firefox, IE 7以上, Operaで有効  ↩
  2. Markdown上で配置した画像はpタグの中に入れ子で配置されるようになっています  ↩
  3. こんな感じで一定時間色が付きます。  ↩
  4. Markdown記法で書かれた文章をHTMLに変換する仕様。例に出ている自動でidを振り分けてくれるパターンはRubyのKramdownを使用して変換してくれた場合のものになります。パーサーによって書き出されるHTMLのマークアップはfootnoteにつくセレクタとかも含めてパーサーによって結構違いがあります。  ↩
  5. 自分の場合は.body以下の本文部分にのみ適応するようにしています。  ↩
Profile

石原 悠 / Yu Ishihara

デザインとプログラミングと編み物とヨーグルトが好きです。

関連記事