アイキャッチ画像

[WordPress] メディアライブラリの「添付」されたり、されなかったり？ ホームページ運用

[WordPress] メディアライブラリの「添付」されたり、されなかったり？

WordPressのメディアライブラリには「添付」という概念があり、画像と投稿・固定ページの関連付けを管理します。画像の挿入や削除により添付状態が変化しますが、URLリンクでの指定は技術的に「添付」にはなりません。メディアライブラリから画像を選択することで、管理の効率化やSEO対策、セキュリティ向上などの利点があります。WordPressのメディアライブラリにおける「添付」の意味WordPressのメディアライブラリには「添付」という概念があります。メディアライブラリでは、各...
2024.08.03
ホームページ運用
【断念】WordPressでタイトルからアイキャッチ画像を自動生成したい（Auto Post Thumbnailプラグイン） とりあえずのメモ

【断念】WordPressでタイトルからアイキャッチ画像を自動生成したい（Auto Post Thumbnailプラグイン）

WordPressでタイトルからアイキャッチ画像を自動生成したかったのですが、結局 断念しました。ざっと調べたものは、$55の有料版限定であったり、日本語の文字化けがあったりしたからです。この記事のアイキャッチ画像は、結局 Keynoteで作りました。Auto Post Thumbnailのダウンロード数が最多はてなブログなど、記事のタイトルがそのままアイキャッチになるサービスが便利そうです。SNSで見かけたときに、読みたくなります。WordPressでも同じようにできないか...
2024.06.23 2024.06.26
とりあえずのメモパソコン基礎知識プログラミングホームページ運用作業効率化
InkscapeのmacOS用インストーラが探しにくかった（検索結果の古い版） Mac

InkscapeのmacOS用インストーラが探しにくかった（検索結果の古い版）

Googleで「inkscape mac」で検索したら、最新版のパッケージが見つけにくかったのでメモしています。検索エンジンを鵜呑みにしてはダメなんですね。MacでInkscapeを使い方スライドやアイキャッチ画像のデザインで、「袋文字」を使いたいと思いました。今は、KeynoteやPowerPoint、あるいはCanvaで作成しています。「袋文字」を作るには同じ文字を重ねて配置し、段階的に枠線の太くしています。しかし、文章内容を修正するときに、いちいち大変です。そこで別の方...
2024.06.13 2024.07.21
Macとりあえずのメモインターネット小話
[WordPress] アイキャッチ画像にリンクを挿入した（ショートコード） とりあえずのメモ

[WordPress] アイキャッチ画像にリンクを挿入した（ショートコード）

サイトのヒートマップなどを分析すると、けっこうアイキャッチ画像がタップされているようです。そこで、アイキャッチ画像にリンクを付けられるショートコードを作ってみました。eyecatch_link ショートコードを作った記事中に以下のようなショートコードを入力します。[eyecatch_link href=""]functions.phpにコードを追加するこのコードを解釈できるように、functions.phpにコードを追加します。/** * アイキャッチ画像にリンクを追加するシ...
2023.08.07
とりあえずのメモプログラミングホームページ運用
[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした とりあえずのメモ

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。まず、メイン全体の余白（padding）をなくしてから、記事要素に余白（margin）を追加しました。/** モバイルサイトでアイキャッチの写真を横一面にする*/@media screen and (max-width: 1023px) { main.main { padding-right:0px; padding-left:0px; } .entry-content, .entry-fo...
2022.05.18
とりあえずのメモプログラミングホームページ運用追記予定の話
LINE公式アカウントのVOOMでリンクの投稿方法が変わった【LINE VOOM Studio】 インターネット小話

LINE公式アカウントのVOOMでリンクの投稿方法が変わった【LINE VOOM Studio】

LINE VOOM Studioの投稿画面には、「リンク」ボタンがなくなりました。投稿文章内に、URLを入力してから、Enterキーを入力すると、自動的にリンクプレビュー（サムネイル画像）が追加されます。LINE VOOM Studio（VOOM専用の管理画面）LINE公式アカウントでVOOMを投稿しようとしたら、投稿画面が変わっていました。青が基調の「LINE VOOM Studio」という画面になっています。これまでは、LINE公式アカウントの管理画面で「LINE VOO...
2022.04.17 2024.04.15
インターネット小話ホームページ運用
note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】 ニッチな話題

note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイトルと本文の位置が近くなるので、読みやすいですよね。Cocoon設定やPHP編集もいいけれど……アイキャッチ位置を変更する方法をざっと調べると…Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更する方法が紹介...
2020.12.20 2020.12.21
ニッチな話題ホームページ運用
[WordPress] アップロードした画像ファイル名から全角文字をなくすには？ 【WP Multibyte Patch】 ホームページ運用

[WordPress] アップロードした画像ファイル名から全角文字をなくすには？ 【WP Multibyte Patch】

日本語には全角文字があって、コンピュータを利用しているとしばしばトラブルの元になります。今回は、WordPressにアップロードするファイル名に、全角文字があれば自動で変更する方法をまとめてみます。ことの発端はLINE共有でアイキャッチ画像が表示されなかったこと先日、LINEのタイムラインに投稿するときに、アイキャッチ画像のファイルが表示されないことがありました。原因は、og:imageで指定されるアイキャッチ画像のファイルURLに全角文字が含まれていることがでした。通常は、...
2020.08.28 2021.10.09
ホームページ運用
LINEのタイムライン投稿のアイキャッチ画像が表示されない？ 【OGPとURLエンコード、サーバーキャッシュ】 SNS

LINEのタイムライン投稿のアイキャッチ画像が表示されない？ 【OGPとURLエンコード、サーバーキャッシュ】

LINEのタイムラインにブログのURLを投稿したら、アイキャッチ画像が表示されないことがありました。原因を調べてみると、画像ファイル名に日本語文字が含まれているときに、うまくいかないことがわかりました。SNS共有のための「OGP情報」に、マルチバイト文字列が含まれると、LINEタイムラインではうまく表示できないようでした。【追記：2022-04-17】LINE VOOM Studioになって、リンクの挿入方法が変わりました。【関連】どんな問題があったの？ちいラボでは、教室前の...
2020.08.22 2023.05.04
SNSホームページ運用