「アイテム」ウィジェットをカスタマイズ

「アイテム」ウィジェットをカスタマイズ

 「アイテム」ウィジェットは、ブログに登録された画像を一覧表示します(図2-1)。そのため「アイテム」にあるサムネイルをクリックすると、オリジナルの画像が表示されます。ユーザーとすれば、画像をクリックしたらその画像を使用しているブログ記事にリンクしてほしいところですが、アイテムは複数のブログ記事で使い回しができるためそのような仕様になっているのでしょう。

 しかし、ほとんどの人は、ブログ記事で一度使用したアイテムをほかの記事で使用することはないでしょう。本記事では、「画像をクリックしたら、それを使用しているブログ記事にジャンプする」ようにカスタマイズしたいと思います。

 まず、「アイテム」ウィジェットが機能するためには画像が必要ですので、先にアップロードしておきましょう。

 「新規作成 > ファイルアップロード」で画像をアップロードするとアイテムとして自動的に追加され、トップページにアップロードした画像が追加されていきます。いくつかの画像は、新規ブログ記事にも挿入しておきましょう。

 「アイテム」ウィジェットを編集するには、「デザイン」メニューのウィジェットを選択します。ウィジェット一覧の中に「アイテム」がありますので、それをクリックし編集画面を開きます(図2-2)。

サムネイルのリンク先をエントリーにする

 編集するコードを次のように変更します。



 コードを変更する際は、元々あったコードをタグで囲むとよいでしょう。は、その間にあるMTタグやテキストをすべて無視して出力しません。

 さて、オリジナルのウィジェットと上記の変更したウィジェットは、画像を一覧表示する点は同じですが、根本的な発想の仕方が異なっています。

 オリジナルはで示すアイテムを基準にしています。つまり、アイテムとして登録した画像を取り出し、そのサムネイルのリンク先を、アイテムの本体にしています。

 一方、変更後はで示すように、エントリー(ブログ記事)を基準にしています。エントリーが使用しているアイテムを取り出し、そのアイテムのサムネイルを表示し、リンク先をエントリー記事にしています。

 2つは、同じような結果を出力しますが、異なるアプローチになります。例えば、最近、画像を使用しないエントリーが10件以上続けば、変更後ではアイテムが1つも表示されませんが、アイテムを基準にしているオリジナルでは、エントリーに使用されているかどうかを問わずアイテムが10個表示されるようになっています。しかし、変数やといったタグを駆使すれば、まったく同じ結果にすることも可能です。

 次ページでは新規にウィジェットを作成し、ウィジェットセットに登録します。

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30