Bloggerで投稿画像を横並びで表示する方法 結城永人 - 2021年4月12日 (月) 以前、CSSのグリッドレイアウトによる画像の横並びの方法を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次テンプレートによるコーディングの違い2020年9月以降に投稿された画像の横並び投稿画像の横並びのソースコードの書き方二つの投稿画像の横並びのソースコードのサンプルサンプルで指定したグリッドレイアウトの説明メインカラムに横並びの画像を収めるには画像をメインカラムに収めるソースコードのサンプル2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン3の公式テーマ Contempo/コンテンポSoho/ソーホーEmporio/エンポリオNotable/ノータブルEssential/エッセンシャル レイアウトヴァージョン2の公式テーマ Simple/シンプルDynamic Views/動的ビューPicture Window/画像ウィンドウAwesome Inc./オーサムインクWatermark/ウォーターマークEthereal/エスィリアルTravel/旅行 ※Bloggerのテンプレートのレイアウトヴァージョンは管理画面のテーマの「HTMLを編集」などから確認できるソースコードの冒頭のhtmlタグに「b:layoutsVersion='3'」が付けば3、「b:version='2'」が付けば2になる。 投稿画像の横並びに影響するのはブログのテンプレートでメインカラムから投稿画像がはみ出さないように横幅(width)か最大の横幅(max-width)がメインカラムの範囲内に指定されているかどうかにある。 レイアウトヴァージョン3は指定されていてレイアウトヴァージョン2は指定されていない。 前者だと投稿画像の横並びは必要なデザインを追加するだけで済むけれども後者だと複数でもはみ出さないくらい小さな投稿画像でなければメインカラムに収めるために横幅を制限する指定も追加しなくてはならない。 Bloggerの公式テーマ以外のテンプレートでも投稿画像がメインカラムからはみ出さないようになっているかどうかで、レイアウトヴァージョン3か2のどちらかの方法が当て嵌まることになる。横並びの方法自体は同じなので、非公式のテーマの投稿画像の横幅の指定について分からない場合は不要でも投稿画像がはみ出さないようにする指定を追加すれば全てのテンプレートで同じ結果が得られるし、または試して必要な方を使うと良いと思う。 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"」が付いていた。 公式テーマのレイアウトヴァージョン2はそのままでも変わらないから今の方法が全て使えるけど、ただしレイアウトヴァージョン3だと影響を受けるかも知れないから注意を要する。 画像のソースコードの外側の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」の二つの指定が欠かせないグリッドレイアウトよりももっと簡単だ。 グリッドレイアウトの利点としては横並びの数を決められるので、併せて縦並びも考慮し易いし、列や行やそれぞれに配置する数を操作できるので、覚えると投稿画像の敷き詰めに幅広く使うことができる。 コメント 新しい投稿 前の投稿
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
若者たちがFacebookよりもTwitterを多く始めるというソーシャルメディアの利用者数の変化について 僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2%、「Twitter」の利用率が81.5%と前...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
後藤浩輝と抑鬱傾向による突発的な自殺 中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
コメント