Archive

画像

Blog

HugoでSearch Consoleに追加された「ウェブに関する主な指標レポート」(CLS)の問題に対応する

Google Search Consoleに追加された新たな指標値 Google Search Consoleに新たな指標が追加されました。すべて、ウェブに関する主な指標レポートに記載の通りです。必ずしも早急な対処が必要なものではありません。ただし、これらの指標に対応することで、必然的にUI/UXの向上が期待できます。 LCP (Largest Contentful Paint) FID (Fist Input Delay) CLS (Cumulative Layout Shift) LCP (Largest Contentful Paint) LCPは、「ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間」を表し、Largest Contentful Paint (LCP)に具体例が掲載されています。ビューポートは、「モバイルデバイスでコンテンツを表示する幅」を示します。ビューポートは、<meta>タグで明示的に指定可能です。

Blog

Hugoで記事のアイキャッチ画像を自動的に取得する

📝 2026年補記 Hugo 0.112+ では .Resources.GetMatch / .Page.Resources による Page Bundle の画像取得が標準化され、2018年当時の手動対応よりシンプルに書けるようになりました。Open Graph 用のサムネイル自動生成には resources.GetRemote や image.Resize の組み合わせが推奨されます。 Hugo には、記事執筆時点において、WordPress のような便利なプラグインはありません。しかし、Shortcode やテンプレートの構文を工夫することで、WordPress と同等のプラグイン機能を実現できます。

iPhone

iCloud同期可能でWordPressや静的サイト向けデプロイ機能付きのMarkdownエディター

📦 アーカイブ記事 この記事はWordPress運用時代に公開したものです。MWebエディタ自体は現役ですが、WordPress連携機能の仕様は変更されている可能性があります。本サイトは2019年にHugoへ移行済みです。 📦 2026年アーカイブ注記 この記事は2018年に執筆されたものです。筆者はその後WordPressの運用から離れており、記事中で紹介している手順・プラグイン・ツールは、現在のWordPress(6.8 / 7.0世代 + Block Editor / FSE)や周辺ツールの状況と異なる可能性があります。歴史的記録として残しています。

Blog

商用利用可能!ブログのアイキャッチ画像に使用できる著作権フリー(CC0 Public Domain)の画像を横断して検索できる「LibreStock」

📝 2026年補記 LibreStock は2020年以降更新停止となっています。2026年時点で主流のCC0/商用利用可能画像ソースは、Unsplash、Pexels、Pixabay です。AI画像生成サービス(DALL·E 3、Midjourney、Stable Diffusion等)でのアイキャッチ生成も一般化しました。 WordPressのアイキャッチ画像(記事のトップに表示される画像)は、クリック率の上昇や記事の内容を読者に伝えるため、是非とも使用したい機能です。ただし、Webサイト等で公開されている画像には著作権が設定されており、通常、無断で使用することはできません。アイキャッチ画像を一から作成することもできますが、手間もかかるというもの。しかし、人目につくインパクトのある画像を用意したいものです。

Mac

ブログ画像に最適!Macの標準アプリを使用して、拡大鏡のような効果を演出する方法

ブログでアプリや機能の紹介をする際に、効果的な画像で演出したいですよね。以前、Mac の標準アプリを使用して、スポットライト効果のような画像を作成する方法でプレビュー.app を使用して、スポットライト効果(マスク)を演出する方法をご紹介しましたが、今回もプレビュー.app で簡単にできる「拡大鏡」の演出をご紹介します。ブログ画像の加工だけなら、プレビュー.app だけで十分です、本当に。ただ、モザイク加工できないのだけが辛いところです。

Mac

Macの標準アプリを使用して、スポットライト効果のような画像を作成する方法

macOSに標準搭載されている優秀なアプリを使用して、アイキャッチ画像(冒頭の画像)のような、スポットライト効果を適用したような画像を簡単に作成することができることはご存知ですか?使用するアプリは、「プレビュー.app」です。macOSを使用しているなら、「プレビュー.app」は使い方を覚えておいて損はないアプリですよ。