cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。

しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。

CSS3を使用するので対応ブラウザがちょっと狭くなりますが¹、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。

手順

やり方は下記の4つの指定をすれば良いだけです。

1. 破線の部分はbackground-imageを使用して背景画像として描画します
2. 縞模様はlinear-gradientを使用してグラデーションの濃淡で表現します
3. color-stopsを使用して線分と間隔の開始と終了の位置をそれぞれ設定します
4. 最後に縞模様1ブロック分をbackground-sizeで区切ります

SassとCompassを使用するとこんな感じで4行で指定できます。

color-stopsの部分を調整すれば破線の間隔を変更する事が可能です。px指定も勿論可能です。

破線の場合は色をつける部分とつけない部分の2色なのでcolor-stopsの指定がそんなに面倒では無いです。線分の終了位置と余白の開始位置を同じに設定すれば境目はグラデーションにならずに綺麗に描画されます。間隔の部分は透過させるのでtransparentで区切っておきます。

Mixin作った

Sassを使っているので、使い回しがきくようにMixinにしておきました。

呼び出す時には+dotted(色, 線分, 間隔, 高さ)で呼び出すだけなので簡単に使用できます。

斜線もできそう

repeating-linear-gradientを使用すると斜線もできるようなので、ちょっと試してみました。

斜線バージョンも見る

錯視みたいですね。

辛うじて表示できているように見えますが、入力している値によってはたまにズレが出てしまいます・・・

このブログは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でもスムーズにスクロールするように設定する事が可能です。

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