ブログ改造日記 7: 「Broken Link Checker」の導入と自作目次の改善

「Broken Link Checker」の導入

今回はまずWordPressのプラグインである、「Broken Link Checker」を導入してみた。主な機能を簡単に説明すると、リンクエラーをチェックして、リンク切れになっているリンクを検出することができるという優れもの。内部リンクの間違いだけでなく、外部リンクが切れている時も随時チェックして教えてくれるので非常に役立つ。またデフォルトの設定では、リンク切れのリンクには取り消し線が引かれるようになっている。

ブログ記事はストックされていくものなので、時間経過に伴ってリンク切れは必ず起こってくる。特に外部リンクのリンク切れは自分のコントロールの範囲外であり、そういった記事を後から参照する人もいることを考えると、常にリンクが最新の状態かつリンク切れがないようになっていることは読者の利便性向上にもなる。実はこのプラグインは結構前から導入していたのだけれど、本格的にリンク切れには対応していなかったので、今回記事を書くに当たってほとんど全てのリンク切れのリンクを差し替えるなどして対応してみた。ちなみに「Broken Link Checker」は以下のリンクからダウンロード可能。

「Broken Link Checker」

自作目次の改善

以前書いたブログ改造日記 4: 「Table of Contents Plus」の限界と自作目次の導入という記事では、自作目次を導入した上で、更なる三つの改善点の2として以下の項目を挙げた。

2. アンカーテキストをインデントしている場合、文章が折り返した際のインデントを揃える。

今回はこの項目を改善することに成功したので、その方法について書いてみる。

コードの具体例

例えば昨日の記事の目次のコードを掲載すると以下のようになる。自作目次のコードについての詳細な説明はブログ改造日記 4: 「Table of Contents Plus」の限界と自作目次の導入という記事を参照してほしい。

<div style="display: block !important; width: 100% !important; background: #f9f9f9; border: 1px solid #aaa; font-size: 95%; box-sizing: border-box; line-height: 1.4; margin: 36px auto; padding: 1em 2em;">

<p style="text-align: center;"><strong>目次</strong></p>

<a href="#20171009-1">1. AirbnbとUberEATS</a>
<a href="#20171009-2">2. Airbnb</a>
<span style="float: left; margin-left: 1.5em;"><a href="#20171009-2-1">2.1. Airbnbとは何か?</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 1.5em;"><a href="#20171009-2-2">2.2. Airbnbのメリットとデメリット</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 3em;"><a href="#20171009-2-2-1">2.2.1. Airbnbのメリット</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 3em;"><a href="#20171009-2-2-2">2.2.2. Airbnbのデメリット</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 1.5em;"><a href="#20171009-2-3">2.3. Airbnbの体験談</a></span>
<div class="clear"></div>
<a href="#20171009-3">3. UberEATS</a>
<span style="float: left; margin-left: 1.5em;"><a href="#20171009-3-1">3.1. UberEATSとは何か?</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 1.5em;"><a href="#20171009-3-2">3.2. UberEATSのメリットとデメリット</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 3em;"><a href="#20171009-3-2-1">3.2.1. UberEATSのメリット</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 3em;"><a href="#20171009-3-2-2">3.2.2. UberEATSのデメリット</a></span>
<div class="clear"></div>
<span style="float: left; margin-left: 1.5em;"><a href="#20171009-3-3">3.3. UberEATSの体験談</a></span>
<div class="clear"></div>
<a href="#20171009-4">4. 幸福なディストピア</a>

</div>
追加したコードの説明

この中で以前は記述されていなかったコードの部分を抜粋すると、以下の二つになる。具体的には「span」の内部と後にそれぞれのコードを追加している。

float: left; 
<div class="clear"></div>

前者の「float」は指定した要素を左寄せ、もしくは右寄せにするプロパティ。「left」なので当然左寄せということになる。以前もここまでは辿り着いていたのだけれど、レイアウト崩れが起きてしまったので断念していた。しかし、今回は後者の「clear」という「float」で指定した要素の回り込みを解除するプロパティを毎回指定することにより、レイアウト崩れを防ぐことに成功した。恐らくこれらのコードをより簡潔に書く方法も存在しているはずだが、とりあえずは当面これらのコードを使用していこうかと思っている。ちなみにインデントしていないアンカーテキストについては、これらのコードを追加する必要はない。

今回の記事のまとめ: 修正と今後の展望

今回は「Broken Link Checker」を導入することでリンク切れを防ぎ、ブログのリライトの質を向上することに成功した。また自作目次を改善することで、より見易い目次にすることができた。表示、非表示と自動化については優先順位が低いので、余裕があれば取り組むということになりそうだ。今回の修正を過去記事の目次全てに適用したのだけれど、かなり骨が折れる作業だった。またその際にインデントしているアンカーテキストの番号の最後に. (ドット) が付いていない場合が多いことも発見したので、それについても適宜修正した。「ブログ改造日記」は割とマニアックな内容かと思いつつ、参考になっている読者の方もいるみたいなので、今後もNILOGの改造結果は報告していく予定だ。

ブログ改造日記: 連載記事リンク

ブログ改造日記 1: デザインの変更と機能の追加

ブログ改造日記 2: ブログに関する問題点

ブログ改造日記 3: 自滅としてのグーグル八分

ブログ改造日記 4: 「Table of Contents Plus」の限界と自作目次の導入

ブログ改造日記 5: 「All in One SEO」から「Yoast SEO」へ

ブログ改造日記 6: Googleのインデックスに関する問題点

ブログ改造日記 7: 「Broken Link Checker」の導入と自作目次の改善

ブログ改造日記 8: 両端揃えの導入

ブログ改造日記 9: Headerの高さを調整してみた

ブログ改造日記 10: Twitter Cardの設定

ブログ改造日記 11: footnotesというプラグインで脚注を導入してみた

ブログ改造日記 12: カテゴリ整理

ブログ改造日記 13: IFTTTとInstagram Feedの設定