スキップしてメイン コンテンツに移動

些細な日常

BloggerにGoogleフォトを元のサイズでテンプレートに収めるには

以前から気がかりだったのはBloggerで大きな写真を載せるとスマホでは画面幅に合うけど、タブレットではテンプレートのメインのカラムからはみ出してしまう。

追記:2017年に追加された公式テーマ:ContempoとSohoとEmporioとNotableからは大きな写真をブログに載せてもテンプレートのカラムからはみ出さなくなった。

BloggerはGoogleフォトの高画質な写真が簡単に載せられる(ウェブの編集の画像挿入の「Google アルバム アーカイブから」か「携帯電話」によって/ブログに載せた写真は後からGoogleフォトでアルバムを移動すると消える可能性がありそうだからブログのためのアルバムを作って最初から入れておくと良い)から素晴らしいと思うけど、ただし元のサイズを表示しないと駄目なんだ。

やってみるとやはりタブレットではみ出してしまうので、頭を悩ませる。折角、素晴らしくても写真だけで、ブログのデザインが崩れては元も子もないし、何とかならないかと考える他はなくなった。

タブレットで表示されているのはウェブバージョンで、ブログの記事はテンプレートのメインのカラムだからそこに合わせて写真の横幅をCSSで調節すれば直ぐにできた。

ただし100%で置くと微妙にずれる、テンプレートに。本当に苦しくて、後一歩、夢の前で崖から崩れ落ちて行くような感じで、考え続けなくてはならなくて参った。

.post-body img {box-sizing:border-box;margin-left:-1.5em;margin-right:-1.5em;max-width:100%;}

記事の画像を「post-body」のクラスと「img」で指定して最大でメインのカラム一杯に表示されるように「max-width」で「100%」に調節する。枠の横幅よりも小さな画像は縮小されないデザインだ。

試行錯誤を繰り返しながら小さな画像は真ん中に入ると分かって枠の最大幅に近付くと右端に追いやられるわけだけれども画像の左右の外側の余白を「-1.5em」以上で詰めると大丈夫だとも分かって来た。そのように「margin-left」と「margin-right」で調節することにした。本当に嬉しくて完全に見違える仕上がりを得られた。

十分に納得したけれども画像が最大幅で文章よりも少し大きかったので、さらに「box-sizing」の「border-box」で画像の周りの余白を全て内側に取り込むと少し小さくなったので、気に入って使ってみている。他のCSSとの兼ね合いで変わって来ると思うけど、しかしデザインとしてはブログのウェブバージョンで動画の横幅が文章よりも少し小さくしてあるから画像も同じように合わせたくなった。

BloggerでGoogleフォトの軽量で高画質な写真を元のサイズでテンプレートに合わせて載せられた。望み通りだし、デザインは申し分なく、ブログへの意気込みこそ増してしまう。

  • ブログの投稿者: 結城永人
  • タイトル: BloggerにGoogleフォトを元のサイズでテンプレートに収めるには
  • 最終更新: 

コメント

最近の投稿

日付: 

Geminiのバージョン1.0の事実認識の実力の確認

イメージ

些細な日常の人気記事

スノーボードのジャンプ中のグラブには幾つもの種類がある

イメージ

スノーボードでジャンプして板を掴む動作をグラブ、またはグラブトリック(掴み技)としてエアー(空中)に組み込まれる。幾つもの種類があって空中での姿勢を安定させたり、ハーフパイプやスロープスタイルやビッグエアーなどの演技を競う試合では得点を左右する要因にもなっている。覚えておくと観る...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

三浦春馬と芦名星と竹内結子の自殺は陰謀なのか

イメージ

2020年に人気俳優の三浦春馬と芦名星と竹内結子が七月から九月というたった三ヵ月の間に相次いで自殺した。人気俳優というだけで、三人も自殺が続くことは珍しい。しかも死に方に共通点が多くて本当は他殺ではないかという陰謀論が未だに絶えない。 三浦春馬と芦名星と竹内結子の死亡状況 ...