自分は数ヶ月の間、ブログ記事の表に書くURLをセルのサイズに合わせて自動で改行するHTMLの書き方が分からずにいた。そのため、スマートフォン用WEBブラウザーで表示される時のセルのサイズに合わせてURLを2行にしていた。しかし、URLの文字数は各サイトによってバラバラなので、ブログ側で自動で表のセル内に収まるように改行して、タブレット端末用、パソコン用WEBブラウザーで見やすくなるようにした方がいいとここ数日思うようになった。
それで、「HTML 表 URL」や「HTML 表 セル URL 改行」というキーワードでググってみた。そしたら、表のセルの合わせてURLを自動で改行するHTMLの表を見付けられた。
↓ 実際に書いたHTMLコードの例 ↓
<table>
<tbody>
<tr>
<td width="30%">URL</td>
<td style="word-break: break-all;" width="70%">
<a href="https://www.atsuki-hamakawa.com/archives/3680" target="_blank">
https://www.atsuki-hamakawa.com/archives/3680</a></td>
</tr>
</tbody>
</table>
↓ HTMLで書いた表を実際に表示させた例 ↓
| URL | https://www.atsuki-hamakawa.com/archives/3680 |
自分は、HTMLのコードの書き方を説明できるほどHTMLに詳しいわけではないので、どうして上記のようにHTMLを書けばいいのか説明できない。しかし、HTMLについて説明するWEBサイトは、数えられないほどたくさんあるので、Googleのキーワード検索で探せば、HTMLのコードを書く時の困りごとを自力で解決できると思う。このブログに掲載する記事の書き方で困った時は、Googleのキーワード検索で困りごとを解決できる内容が掲載されていそうなサイトを探している。そうして、困りごとを解決している。今回もそうしてHTMLで表を書く時の困りごとを解決できた。
今回この記事を書く時にWordPressにHTMLのコードをそのまま表示させる方法を探して、いくつか試してみた。しかし、どの方法もうまくHTMLのコードを表示させることができなかった。そのため、特殊文字を表示させる方法で、<>を表示させることにした。この方法は、短いHTMLのソースコードを仕方なしに表示させるにはいいみたいだが、長いHTMLのコードを表示させるには向いてないそうだ。だから、WordPressで<code>タグを使ってHTMLコードを表示する方法を見つけた方がいいみたい。
スポンサーリンク
当ブログの記事に広告とアフィリエイトリンクが表示されることがあります。当ブログから広告へのアクセスとアフィリエイトリンク先での商品の購入と予約があると、筆者へ一定の収益が発生します。