wordpressブログで長いURLを途中で改行する方法

wordpressブログで長いURLを途中で改行して、綺麗に表示させる方法は？
文字色を変えて、行間を詰めるには？
こんな疑問に答えていきます。

ブログで長いURLを書くことって多いですよね

本文に普通に書く分には、別に問題ないんです。
ただ、注釈や引用などで、小さく目立たないように書きたい時に困ります。

URLは、インターネットのお約束上、途中で折り返さないようになっています。
なので、長いURLが改行されずに、無理やり、存在感をアピールしてくるんです…
目立って欲しくない時に、目立つのです

スマホなどで右端が見切れてしまうのも問題です。

今回は、そんな時に役立つ、wordpressブログで長いURLを途中で改行する方法です。

僕はWordPressのブログでは月２万PV、自作のiPhoneアプリを２つリリースしています。
そんな僕が解説していきます。

完成例

完成例です。

見て欲しいのは、表の下の注釈の部分（灰色の文字）です。

表の注釈として、下にURLを複数入れる場合を想定しました。
文字色も、行間も、文字サイズも、配置も調整しています。

iPhoneで見た時のスクショ

完成例をiPhone5で見た時のスクリーンショットです。
右端が綺麗に処理されているのが、わかると思います。

１．URLを表の中に入れる（tr/tdタグ）

URLを改行させるためには、表の中に文章を入れるのが有効的です。
td/trタグで囲んでいき、td styleを編集することで、文字の配置などを調整しています。

２．表の枠線を「なし」に設定

表の枠を表示しない設定にすれば、表の存在は感じません。
表の枠をなくすには、border: none; word-break: break-all;を使いました。

td style="border: none; word-break: break-all; background-color: #ffffff; text-align: right;"

3．文字の色、文字のサイズをspan styleで調整する

今回、文字の色、文字サイズは以下のようにしました。

color: #999999; font-size: 70%

4．行間をdivとline hightで調整する

さらに行間も調整した方が綺麗に見えると思います。
行間の調整には、divタグで囲んで、line-heightを使います。

今回、line-heightを「1em」にしてみました。

行間については、こちらの記事を参考にさせていただきました。

[ HTML ] 文字間隔と行間（行の高さ）を設定する ( letter-spacing / line-height )
http://hensa40.cutegirl.jp/archives/3556

完成コード

これらを組み合わせた完成コードがこちらです。

<table>
<tbody>
<tr>
<td style="background-color: #ede5fa; text-align: center;" colspan="2"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">サンプルレストラン 概要</span></td>
</tr>
<tr>
<td style="background-color: #ede5fa;">URL</td>
<td style="word-break: break-all;"><a href="https://appcoding.net/?p=875">https://appcoding.net/?p=875</a></td>
</tr>
<tr>
<td style="background-color: #ede5fa;">英語版アプリ</td>
<td style="word-break: break-all;"><a href="https://itunes.apple.com/us/app/luminous-calculator-11-colors-and-button-sounds/id1273066642?mt=8">https://itunes.apple.com/us/app/luminous-calculator-11-colors-and-button-sounds/id1273066642?mt=8</a></td>
</tr>
<tr>
<td style="background-color: #ede5fa;">日本語版アプリ</td>
<td style="word-break: break-all;"><a href="https://itunes.apple.com/jp/app/luminous-calculator-11-colors-and-button-sounds/id1273066642?mt=8">https://itunes.apple.com/jp/app/luminous-calculator-11-colors-and-button-sounds/id1273066642?mt=8</a></td>
</tr>
<tr>
<td style="background-color: #ede5fa;">運営会社</td>
<td>バナナイタリアン</td>
</tr>
<tr>
<td style="background-color: #ede5fa;">運営会社の概要</td>
<td>輸入業<span style="color: #999999;">（※1）</span></td>
</tr>
<tr>
<td style="background-color: #ede5fa;">開設年</td>
<td>2001年7月</td>
</tr>
<tr>
<td style="background-color: #ede5fa;">沿革</td>
<td>2001年10月 バナナイタリアンを開設<span style="color: #999999;">（※2）</span>
2018年7月、「オレンジバナナ」を「オレンジモンキー」へサービス名を変更<span style="color: #999999;">（※3）</span></td>
</tr>
<tr>
<td style="background-color: #ede5fa;">レストランの数</td>
<td>全国で13店舗<span style="color: #999999;">（※4）</span></td>
</tr>
</tbody>
</table>
<table style="border: none;">
<tbody>
<tr>
<td style="border: none #ffffff; word-break: break-all; background-color: #ffffff; text-align: right;">
<div style="line-height: 1em;"><span style="color: #999999; font-size: 70%;">https://appcoding.net/?p=875より作成、（※1）https://itunes.apple.com/jp/app/luminous-calculator-11-colors-and-button-sounds/id1273066642?mt=8、（※2）https://appcoding.net/?p=875、（※3）https://appcoding.net/?p=875</span></div></td>
</tr>
</tbody>
</table>

というわけで今回は以上です。

思っていたより、手順が多いですね。
それでも引用元は大事なので、しっかり書いて、かつ読みやすいという記事が、これで実現できると思います。