ブログのテーマを “_s” をベースに自作しましたが、それにあわせてリンクをすべてカード形式にしてみました。(まだ “ニュースまとめ” カテゴリは変更作業中ですが…　↓は自作したことを書いた記事リンク)

やったことは以下の通りです。

Amazon商品リンクのUI変更

もともとUIは微妙だなと思っていたし、ブログ内で統一されていなかったりしたので、UIを大幅に変更＆ブログの過去記事をさかのぼって全記事でUIを統一しました。気を付けたポイントは次の通りです。

• Amazonのリンクだとわかるように
• 領域がはっきりわかるように
• エディタがGutenbergなので、再利用コードとして登録できるように

3つめはUIというより僕の編集作業のためですが、せっかくGutenbergの便利機能があるからうまいこと活用しようと思いまして。テンプレートを登録しておいて、商品リンクとか画像リンクの部分だけコピペすればできるようにしました。

その他のリンクはすべてカード形式に

もともと “Pz-LinkCard” というプラグインは入れていて、一部の外部リンクはこいつを使ってカード形式にしていたのですが、そもそも「functions.phpをいじれればプラグイン使わなくても実装できるんじゃね？」と思い、いろいろ調べながらやってみました。

↓のサイトを参考にさせていただきました。

なんだかスクリーンショットの表示が遅い気もしますが…とりあえずはこれでいくことにしました。javascript使ってブックマークレット作成っていう方法もあるようですが、あとでコードみつつ検証してみようと思います。

リンクカードはプラグインを使った場合と同様に、ショートコードで記述するスタイルです。なのでそのショートコードをAmazonリンクと同じように再利用ブロックに登録しておけば、楽に呼び出せて便利です。

カードの見た目はスクリーンショットとリンク先タイトル、リンク先URLだけというシンプルなものにしてあります。抜粋文も入れられるのですが、シンプルな見た目がよかったので省略。

リンク先のリンク切れチェックとかSSL対応とか

UIを変えるついでに、リンク切れチェックとかhttpをhttpsに変更したりとかもしました。これにはプラグインを活用して、さくっと。

リンク切れチェックには、”Broken Link Checker” を、SSL対応には “Search Regex” を、それぞれ使いました。使い方はどちらも簡単で迷うことはないと思いますし、検索すれば解説記事が結構いっぱい出てくるので、ぜひ使ってみてください。

Broken Link Checkerは有効化しておくと定期的にリンク切れチェックをしてくれるみたいですが、サイトが重くなるのも嫌なので、Search Regexとともに普段は無効にしておき、チェックしたいときだけ有効化するようにしました。どこまでサイト高速化に有効なのかはわかりませんが、余計なものは眠らせておくってのはどんなことでも大事だと思うのでｗ

というわけで、またすこし見た目がよくなりました。まだまだ、のんびり、がんばります。