アンカー用のショートコード追加

どういうものか

ページ内スクロールを楽にするために考えました、おわり。…ぐらいに単純なものですが、正規表現はムズかった。

面倒でない人は、

<a href='#test'></a>

として、書けば良いんですけどもまぁ面倒くさいじゃないですか。なので、[a(test)]で実現してみようというテストです。しかしこれには問題があってカラのリンクだけだと何も表示されません。
そのため、もし要素がカラである場合はアイコンを擬似要素で表示するようにしました。

[info blue]このショートコードではアドレスの最後にハッシュが入ります。TOCではそれらを除去していましたがこちらは履歴が残るので1発でブラウザバックできないことに注意して下さい。[/info]

要素がカラの場合、テキストを囲んだ場合

[a(comments)]

<p>[a(comments)]</p>

カラの場合はこういう感じですが、もしテキストを挟むと以下のようになります。

[a(comments)]ターゲットにスクロール[/a]

<p>[a(comments)]ターゲットにスクロール[/a]</p>

いずれの場合も出力されるhtmlは、

<a href='#comments' class='anchor' title='クリックでページスクロール'></a>

このような感じです。目的地であるターゲットは一意のID属性でクラスのように重複していてはいけません。必ずユニーク(唯一の、独自の、珍しいの意)なそれだけしか使われていない必要があります(目的地が複数あるのは色々とややこしいので)。

同じようなものにターゲットを入れる場合でそれらを識別する場合は#test-1などと数字やアルファベットを加えるべきですが、どれがどれかわからなくなるので工夫が必要です。
そういった一意のIDであるという前提で。ちなみにアドレス自体には＃が入りますが、このショートコードにはターゲットの名称だけでokです。

[info][a]: anchor
[t]: target
[hs]: height-space
みたいな感じです。[hs]はサイズとその単位をお忘れなく[/info]

任意のターゲットの入れ方

すでにサイト上にある要素にIDが入っている場合はそれをターゲットに利用できますが、ページ内の任意の部分でIDが入っていない箇所には別途用意する必要があります。その場合には、

<p>[t(anchorTarget)]</p>

というように書きます。そうすると、その箇所に、

<span id='anchorTarget' class='anchorTarget'></span>

という感じにhtmlに変換されて挿入されます。

このように、もし任意の箇所にターゲットになるIDを入れたい場合は<p>[t(anchorTarget)]</p>と、カッコの中身のテキストはIDになり一意のものである必要はありますが独自にターゲットを設定できます。

単に<p>[t(anchorTarget)]</p>のように書くと何も表示されずターゲットになるだけですが、次のようにターゲットを明確にすることもできます。

[t(anchorTarget)] ←ここにアンカーのターゲットが見えてませんが入ってます。

[t(anchorTarget)]スクロールのターゲット[/t]

<p>[t(anchorTarget)]スクロールのターゲット[/t]</p>

テキストを挟むのはこんな感じに書かれています。装飾などはされていないので何かしらテキストにそれとわかるものが必要かもしれませんが、シンプルに考えると文章の一部の単語などを囲んでおけば良いのではなかろうかと思ったりもします。

上記の「スクロールのターゲット」の上にもテキストが見えていない状態で入ってます。本来は同じIDで使うのはアレですが、ここではテストということで入れてあります。

ショートコード使用例

ページの最後に次のように書いても良いかもしれません。TOCで上に戻れますけども。

[a(main)] ←をクリック/タップで＃mainにスクロール

<p>[a(main)]</p>

メインセクションには、id='main'が入っているので、これで上に戻ることはできます…できると思います。…できると信じたい。できました。

[t(ank_spaceShortcode)]

スペースを作るショートコードを追加

これは単純にスペースを確保するだけのものです。

[hs(100vh)]

こんな感じにスペースを確保します。

[a(ank_spaceShortcode)]セクションに戻る[/a]

<p>[hs(100vh)]</p>

このように入っていて、

<div style='display:block; height=ここに入力された値'></div>

このような出力があります。