Bloggerで投稿画像を横並びで表示する方法 結城永人 - 2021年4月12日 (月) 以前、CSSのグリッドレイアウトによる画像の横並びの方法を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次テンプレートによるコーディングの違い2020年9月以降に投稿された画像の横並び投稿画像の横並びのソースコードの書き方二つの投稿画像の横並びのソースコードのサンプルサンプルで指定したグリッドレイアウトの説明メインカラムに横並びの画像を収めるには画像をメインカラムに収めるソースコードのサンプル2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Contempo／コンテンポSoho／ソーホーEmporio／エンポリオNotable／ノータブルEssential／エッセンシャル レイアウトヴァージョン２の公式テーマ Simple／シンプルDynamic Views／動的ビューPicture Window／画像ウィンドウAwesome Inc.／オーサムインクWatermark／ウォーターマークEthereal／エスィリアルTravel／旅行 ※Bloggerのテンプレートのレイアウトヴァージョンは管理画面のテーマの「HTMLを編集」などから確認できるソースコードの冒頭のhtmlタグに「b:layoutsVersion='3'」が付けば３、「b:version='2'」が付けば２になる。 投稿画像の横並びに影響するのはブログのテンプレートでメインカラムから投稿画像がはみ出さないように横幅（width）か最大の横幅（max-width）がメインカラムの範囲内に指定されているかどうかにある。 レイアウトヴァージョン３は指定されていてレイアウトヴァージョン２は指定されていない。 前者だと投稿画像の横並びは必要なデザインを追加するだけで済むけれども後者だと複数でもはみ出さないくらい小さな投稿画像でなければメインカラムに収めるために横幅を制限する指定も追加しなくてはならない。 Bloggerの公式テーマ以外のテンプレートでも投稿画像がメインカラムからはみ出さないようになっているかどうかで、レイアウトヴァージョン３か２のどちらかの方法が当て嵌まることになる。横並びの方法自体は同じなので、非公式のテーマの投稿画像の横幅の指定について分からない場合は不要でも投稿画像がはみ出さないようにする指定を追加すれば全てのテンプレートで同じ結果が得られるし、または試して必要な方を使うと良いと思う。 2020年9月以降に投稿された画像の横並び Bloggerの投稿画面のHTMLビュー｜Blogger Bloggerの投稿画像の横並びは投稿画面のタイトルの下のメニューの左端で切り替える「HTMLビュー」から投稿画像のソースコードを編集しなくてはならない。 投稿画像の横並びのソースコードの書き方 投稿画面で複数の画像を取り込んだらHTMLビューでそれらのソースコードを横並びのグリッドレイアウトを仕込んだdivタグ、すなわち<div style="display:grid;grid-template-columns:1fr 1fr;">と</div>で囲む。 二つの投稿画像の横並びのソースコードのサンプル <div style="display:grid;grid-template-columns:1fr 1fr;gap:1em;"> <div class="separator" style="clear: both;"> <a href="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png" style="display: block; padding: 1em 0; text-align: center; "> <img alt="" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-jvLJ13lBdyU/YHHGfbazeSI/AAAAAAAAexw/pR84hnNQqq0sK4DpBvgVzk9_f05O4vc0gCPcBGAsYHg/s0/sketch1528098506773.png"/> </a> </div> <div class="separator" style="clear: both;"> <a href="https://1.bp.blogspot.com/-_0JQvIIR4zk/YHPsFonfZoI/AAAAAAAAeyU/gZTuAQ_R2YsOmSaUFFOqgqCWR7C6CpWoQCLcBGAsYHQ/s0/blue-square.png" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-_0JQvIIR4zk/YHPsFonfZoI/AAAAAAAAeyU/gZTuAQ_R2YsOmSaUFFOqgqCWR7C6CpWoQCLcBGAsYHQ/s0/blue-square.png"/> </a> </div> </div> ※太字が追加して記載する部分。 投稿画像のソースコードは何もせず、全体を所定のstyle属性を持ったdivタグで囲むだけで、横並びが可能になる。 サンプルで指定したグリッドレイアウトの説明 divタグにグリッドレイアウトの値を入れたstyle属性を付けて投稿画像の横並びを行っている。 display:grid グリッドレイアウトを使用する grid-template-columns:1fr 1fr 同じ比率で二列を使う gap:.5em 半文字分の隙間を空ける 一つ目の「display:grid」はグリッドレイアウトに必須だから削除してはならない。 二つ目の「grid-template-columns:1fr 1fr」は投稿画像の横並びの数を列の数として指定している。値の数が横並びの数に対応している。単位は「fr」がコンテンツが横幅に占める比率で、「1fr 1fr」だと二つがそれぞれの列に等しい占有率を持つ。三つならば「1fr 1fr 1fr」と三つの値で記載する。値の数だけスペースが取られてそこにコンテンツを配置して横並びにできる。 グリッドレイアウトの単位の「fr」は割合の「%」で捉えて二つならば「50% 50%」と指定しても同じ結果になる。 投稿画像を列方向に配置するだけならば「grid-auto-row:column」を使うことができる。数は不問で、コンテンツを横並びにするためのマークアップになる、簡単だけれども投稿画像の数が増えると全て一列に詰められるしかなくてどんどん小さくなるから注意を要する。 四枚の画像に対して「grid-template-columns:1fr 1fr」で二枚の横並びを記載すると余りは行方向に配置されて小さくならずに半分ずつの縦並びになる。 スペースを指定しない「grid-auto-row:column」の場合は二枚の横並びを上下に分けて二つ記載すれば同じ結果になるけれども却って手間は増えることになる。 三つ目の「gap:.5em」はコンテンツの隙間を指定する。くっ付けるならば値を「0」にするか要素と共に削除しても投稿画像の横並びの有無には影響しない。 グリッドレイアウトのその他の指定については以前の画像の横並びの記事でもっと色んなパターンを取り上げている。 投稿画像の位置取りも確定して元のdivタグ（separaterのclassが付いたもの）やaタグのstyle属性（displayとpaddingとtext-alignが指定されたもの）は不要になるので、画像のimgタグとリンクのaタグを囲んでいる開始タグと終了タグの両方を併せて削除しても横並びに支障はない。 メインカラムに横並びの画像を収めるには テンプレートによって画像の横幅がはみ出すので、横並びのソースコードに加えて画像のimgタグも修正しなくてはならない。 画像をメインカラムに収めるソースコードのサンプル <div class="separator" style="clear: both;"> <a href="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png" style="display: block; padding: 1em 0; text-align: center; "> <img style="max-width:100%;" alt="" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png"/> </a> </div> ※太字が追加して記載する部分。 幾つかの方法があるけれどもグリッドレイアウトに合わせるならば画像のimgタグに個別に「style="max-width:100%"」を追加するのが良いと思う。全体に追加するdivタグでメインカラムの列が必要なだけ分割されるかぎり、そこに画像を一つずつ横幅一杯まで表示できるのが「style="max-width:100%"」なんだ。投稿画像が大きくてもはみ出さず、小さくても引き延ばされず、元のサイズをなるべく保ちながら横並びでメインカラムに収まるようになる。 その他に「style="width:100%"」ならば大きくてもはみ出さず、小さければスペースを埋めるように引き延ばされる。画像の横幅を直接的に指定する「width="100%"」を追加しても同じ結果になる。 何れのマークアップも横並びに使用する全ての画像に追加しなくてはならない。 2020年9月以前に投稿された画像の横並び 投稿画像の横並びの方法は今と基本的に同じだけれども昔の投稿画像のソースコードはリンクのaタグに「imageanchor="1"」が付いていた。 公式テーマのレイアウトヴァージョン２はそのままでも変わらないから今の方法が全て使えるけど、ただしレイアウトヴァージョン３だと影響を受けるかも知れないから注意を要する。 画像のソースコードの外側のdivタグがないとき――かつて画像を「元のサイズ」で取り込んだ場合に自動的にそうなっていた――複数の画像が続くとモバイルのスマホ／タブレットの表示にかぎり、一枚目と二枚目以降で外側の上の余白に差が付いて横並びの高さが合わなくなる。 グリッドレイアウトに必要ないので、aタグの「imageanchor="1"」を削除すれば今の方法を使える。 もしも残すならば修正するソースコードを連続する複数の画像の二枚目以降のリンクのaタグに新しく記載しなくてはならない。 <a style="margin-top:0;" href="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png" imageanchor="1"> <img alt="" data-original-height="1600" data-original-width="1600" src="https://1.bp.blogspot.com/-Zf87LsjfbqM/YHPr9dTkZ_I/AAAAAAAAeyQ/l2dRENNTe3Yc_jY8OGTCqSVYxlt_ibcVQCLcBGAsYHQ/s0/red-square.png"/> </a> またはstyleタグでテンプレートや記事にデザインの変更を指定する場合は「body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {margin-top:0}」というマークアップになる。 画像の横並びはグリッドレイアウトだけではなくてフレックスボックスでも同じようにできる。画像の横幅や収まり方を適切に指定すれば追加するdivタグのstyle属性の中身は最少で「display:flex」だけで済んでしまう。すると「display:grid」に加えて「grid-template-columns:値」か「grid-auto-flow:column」の二つの指定が欠かせないグリッドレイアウトよりももっと簡単だ。 グリッドレイアウトの利点としては横並びの数を決められるので、併せて縦並びも考慮し易いし、列や行やそれぞれに配置する数を操作できるので、覚えると投稿画像の敷き詰めに幅広く使うことができる。 コメント 新しい投稿 前の投稿
吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす 歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます！ を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 伊良部秀輝が大好きだった記憶 Hideki Irabu records hi...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
松本典子の今世紀最大の失敗という笑い話 日本のアイドル黄金時代と呼ばれる1980年代の真っ只中に十六歳で歌手としてデビューして、その後、十九歳から異色にも 志村けん と共にお笑いでも活躍した 松本典子 という芸能人がいた。二十四歳で野球選手の 苫篠賢治 と結婚して芸能界から殆ど姿を消して、大分、経っているので、今は知ら...
ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳 十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン （1835）の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属...
結城永人
結城永人
コメント