日常の風景＞冬間近 あなたどうしたの

日常の風景＞紅葉 紅葉

秋晴れの日

日常の風景＞秋 蝶

日常の風景＞秋 菊の花

PCソフトウェア＞bloggerでアイキャッチ画像を指定する

bloggerの投稿画面のアイキャッチ画像は、記事中の最初の画像になるが、ちょっと不都合を感じる。できれば、ラベルの種類によって特定の画像を使いたい思う。そこで、疑似的だが、画像を指定して表示させることにする。

まず、アイキャッチにする画像を作る。画像は、真四角にして、背景には何か色を付けた方がよい。
画像の種類はpng、jpg、gifとし、大きさはあまり大きくなくていい。200*200pxくらいで十分だ。
これを画像挿入で普通にパソコンからアップロードする。

表示させる画像の divタグのstyle要素で display:none; とすると、記事中には表示されず、アイキャッチ画像として表示される。

アイキャッチ画像なし		アイキャッチ画像あり
	→

PCソフトウェア＞bloggerで画像を並べて表示

bloggerでやりにくいのが、画像のaタグに必ず　style="display: block; padding: 1em 0; text-align: center;"が入ってきて、自由が効かなくなる点だ。また、これが入っているとスマホの表示エリアから少しはみ出てちょっと気になる。

まず、エディッタをHTMLビューに切り替える。いろいろ調べてみたが、やり方として3通りほどあるようだ。

(1)display:flex を使用する

画像の間隔を指定しなくても、適当にあけてくれる。間隔の事が無ければ(3)を使えばいいかなと思うが････。

①並べる画像のグループを、以下のdivタグのコードでくくる。

< div style="clear: both; display: flex; height: auto; justify-content: space-around;" >

　　～

< div >

②各画像個別に付いている divタグ　を削除する。

③aタグのstyle要素(display: block; padding: 1em 0; text-align: center;)を削除する。

④このままだと、スマホで表示した時に画像が歪んでしまうので、imgタグ中の height要素は削除しておく。画像の大きさは、widthで指定する。

(2)表の　tableタグ　を使用する

画像の途中で改行しないが画面からはみだす事がある。説明を画像個別に入れたい時は、もう一列セルを入れそこに書き込む。ほとんど使われないと思うが、説明を入れたい時に便利だ。

①tableタグで表を作る

②tableタグの要素部分は以下のようにする

border="0" bordercolor="#000000" cellpadding="3" cellspacing="0"
style="border-collapse: collapse; width:100%; "

③tdタグ間に、必要な数だけセル(tr)を作る

④各セルに、divタグを除いた、aタグとimgタグの部分を入れる

⑤aタグのstyle要素(display: block; padding: 1em 0; text-align: center;)を削除する。しないと不自然に間隔があいて、全体が画面からはみ出る。

⑥このままだと、スマホで表示した時に画像が歪んでしまうので、imgタグ中の height要素は削除しておく。画像の大きさは、widthで指定する。

(3)img要素をそのまま並べる

特に余計なCSSやHTMLを書かなくても良い。最もオーソドックスなやり方だと思う。

①各画像個別に付いている divタグ　を削除する。

②画像全体を divタグ　で囲む。画像をセンター表示したい時は、style="tetx-align:center;"　を入れる

③aタグのstyle要素(display: block; padding: 1em 0; text-align: center;)を削除する。ただ、画像間を空けたいときは、2枚目以降の　padding: 1em 0;　を残す。1枚目にいれてしまうとスマホで見た時に、余計なスペースが入り画面からはみ出してしまう。特に「display: block;」の部分が1枚で改行されてしまう原因となっている。。

④このままだと、スマホで表示した時に画像が歪んでしまうので、imgタグ中の height要素は削除しておく。画像の大きさは、widthで決める。

(3)おしゃれなボックスデザインのcssを応用する

画面が広い場合は画像ごとに改行しない、画面が狭い場合(スマホ)は改行する。写真単体毎に説明文が入れられ、改行しても説明文が泣き別れしない。画像のheightは削除、widthのみ残す。感覚的にはimgタグをそのまま並べたような感じになる。

--------CSSのコード------

.box29 {
    display: inline-block;
    text-align: left;
}

@media screen and (max-width: 300px) {
.box29{
     display: inline;
     text-align: left;
  }
}

.box29 .box-title {
     text-align: left;
}

.box29 p {
}

------HTMLのコード-------

<div class="box29">
  <div class="box-title">ここに写真の説明</div>
  <p>imgタグを書き込む</p>
</div>

日常の風景＞秋の葉