2021/11/10

任意の画像をアイキャッチに

アイキャッチとは,ブログの記事のシンボル (画像) です.Bloggerの場合,下の図のようにアイキャッチが表示されます.記事の内容を視覚的に示することにより,読者に興味を与えます.良いアイキャッチがあると,それだけでも記事を読みたくなります.

記事の左の画像がアイキャッチ

Blogger では,記事の最初の画像がアイキャッチになります.記事に画像がない場合は,記事のタイトルの最初の一文字がアイキャッチになります.

任意の画像をアイキャッチにする場合,少しばかりテクニックが必要です.記事の先頭に画像を配置し,それを表示をしないようにします.画像を表示させないためには,CSSの「display:none;」を使います.具体的な手順は,以下のとおりです.

  1. カーソルをページの先頭に移動させます.
  2. 1行の空行を作成します.これは無くてもよいが,空行がある方が後での編集が容易になります.
  3. 空行の先頭にアイキャッチにしたい画像を挿入します.
  4. 左上の鉛筆マークをクリックし「HTML ビュー」を選択します.すると,HTML のソースコードが表示されます.
  5. 先頭付近は,図の挿入に伴い作成された HTML ソースです,それを編集し「<img style="display:none;" src="画像のパス” />」と修正します.この修正により,先頭に配置された画像は表示されません.
  6. 再度,左上の鉛筆マークをクリックし「作成ビュー」を選択ます.すると,HTML ビューが終わります.

以上により,表示はされないが先頭に挿入された画像がアイキャッチになります.結構便利です.

0 件のコメント:

コメントを投稿