はてなブログのpタグ停止記法を使い、表と画像の間隔を詰める

f:id:gyykgkw:20200526230441p:plain
本日投稿した江ノ電の記事では、今までとはちょっと趣向を変えて、編成や行先に関する情報を表にまとめてみました。

が、画像と表の間隔が開きすぎているのが気になります。表の下にも同じくらいの余白があるので、どの表がどの画像に対応しているのか分かりにくい。

これを何とかしようといろいろ調べた結果、はてな記法のうち「pタグ停止記法」を使う方法に落ち着きました。

はてなブログでは、はてな記法で画像を挿入した場合*1、画像がpタグの中に入れられる仕様になっているようです。

当ブログでは記事中のpタグに一律で上下の余白を設定していたため、それが画像にも適用されてしまうという状態でした。

pタグ停止記法を使用します。この記法で括った範囲内にはpタグが自動生成されなくなる仕様のようです。

ヘルプページには

pタグ停止記法	>< ～～ ><
https://help.hatenablog.com/entry/text-hatena-list より

としか書かれていないのですが、HTMLタグを組み合わせないと使えないようです。

f:id:gyykgkw:20200526231519p:plain
記事中の広い範囲を囲いたかったので、divタグを組み合わせることにしました。

><div class="no-p-area">

</div><

「no-p-area」というクラス名を付けていますが、これはCSSカスタマイズで「no-p-area」の中にあるtableタグの下に余白を追加するためです。

f:id:gyykgkw:20200526231527p:plain
閉じタグはこのように記述します。

これで画像・表を掲載している範囲内にはpタグが自動生成されないようになりました。

前述のとおり、「no-p-area」というクラス名を付けたdivタグに対して下記の指定を追加しました。

.no-p-area table {
    margin-bottom: 50px;
}
.no-p-area p {
    margin-top: -45px;
    margin-bottom: 50px;
}

f:id:gyykgkw:20200526231850p:plain
pタグへの指定があるのは、上記画像のように時々表の下に一文付け足したくなることがあるからです。
自動生成を止めているため、一文付け足したい箇所にはpタグを手動追加しています。

f:id:gyykgkw:20200526232018p:plain
おわりです。

*1:他の編集モードでは確認していません

東海道・山陽三十五次