📻 PODCAST / VOICE JOURNAL
本日のポッドキャスト配信はこちらからお聴きいただけます
※番組へのご感想やご質問は、記事末尾の「のんびり交流掲示板（BBS）」やコメント欄へお気軽にお寄せください。
🎙️ Podcast：ブログのサマリー
- 導入：最近『Camp Snap』が面白くて選別せずに1日20〜30枚アップしているけれど、標準の縦一列表示だとスクロールばかり長くなって一覧しづらい悩みがあった話。
- 着想（紙の写真展の「台紙」の空気感）：写真展で額装のマット（台紙）の色を変えたり余白を整えたりするあの感覚を、Webのブログでも再現したかったという動機。
- Geminiとの共同作業（4色の背景カラー）：真っ白やグレーではなく、写真が引き立つ微妙な4色（美術館の壁のようなホワイト、グレージュ、ミストグレー、ペールセージ）を相談して決めたこだわり。
- 盛り込んだ4つのギミック：①画面幅で変わる自動整列、②Blogger特有の順番バラバラ問題を解決するファイル名順ソート、③読者が無段階で動かせるサイズ変更スライダー、④すりガラス風の専用ライトボックス。
- 驚きの発見（サイドガジェット一発で動く）：難しいテーマのCSS改造をしなくても、レイアウトの「HTML/JavaScriptガジェット」にポンと貼るだけで動いたという発見。
- 結び（noteでコード全文を公開中）：今日公開したnote記事に、ビフォー・アフターのリンクとコピペで使えるコードを全部置いてあるので、ぜひ遊びに来てほしいという案内。
☕ 作業場の縁側トーク：写真を「縦に並べる」から「壁に飾る」へ
1. 「縦一列のスクロール」から「壁に飾る写真展」へ
老舗のブログサービスであるGoogleの「Blogger（ブロガー）」は、シンプルで広告も入らず、長く使い続けるには本当に居心地の良い場所です。ただ、トイカメラの『Camp Snap』で撮ったスナップ写真を1記事に20〜30枚まとめて載せようとすると、どうしても縦に長ーい1列のページになってしまい、一覧性に欠けるのが悩みの種でした。
紙の写真展を開くときは、写真のトーンに合わせて額装の台紙（マット）の色を選んだり、隣り合う写真の余白を計算したりします。あの「壁に写真を飾る空気感」をそのままブログの記事内に持ち込めないか――そんな思いから、Geminiを相手に「自分専用の理想の写真ギャラリー」の設計が始まりました。
📷 実際のビフォー・アフター（といふぉとギャラリー）
-
▼ 以前のスタイル（縦に並ぶだけの表示）：
ドラマのロケ地探訪『田鎖ブラザーズ』キャンプスナップ：Camp Snap -
▼ 今回完成した新スタイル（タイルギャラリー表示）：
写真タイルビューのテンプレートテスト３
2. 写真を引き立てる「4色の背景マット」
Webの背景というと、つい真っ白（#FFFFFF）か無機質なグレーにしがちですが、それだとトイカメラ特有の味わい深い色味やコントラストと喧嘩してしまいます。そこで「写真の邪魔をせず、そっと引き立てる淡い台紙のような色を」とGeminiに相談して削り出したのが、以下の4つのカラーパレットです。
| カラー名 / コード | 色見本 | 特徴とおすすめの被写体 |
|---|---|---|
| ミュージアムホワイト #F7F5F0 |
1〜2%だけ温かみを含んだ美術館の壁の色。カラーもモノクロも懐深く受け止める万能色。 | |
| ウォームグレージュ #ECE8E1 |
少しレトロな商店街や、温かいモノクロ写真に。ノスタルジックな空気感が漂います。 | |
| ミストグレー #E9EDF0 |
ビル群や曇り空、金属の質感など、都市のスナップをクールに引き締めたい時に。 | |
| ペールセージ #E8ECE6 |
自然光や植物が入る風景など、肩の力を抜いてリラックスして見てほしい時に心地よい極薄のグリーン。 |
今ではその日に撮った写真の雰囲気に合わせて、記事ごとに1行のカラーコードを書き換えて「今日の台紙」を選ぶのがすっかり楽しみになっています。
3. 「こんなことできる？」から生まれた4つの実用ギミック
見た目だけでなく、普段Bloggerを使っていて感じていた小さなストレスも、対話の中でひとつずつ解消していきました。
-
画面幅に合わせた自動整列：
スマホの縦画面なら3列、横に倒せば4〜6列、パソコンならウィンドウ幅に合わせて自動で気持ちよくタイルが並びます。 -
ファイル名順の自動並び替え（時系列キープ）：
Bloggerに写真を20〜30枚一気にアップロードすると、読み込み速度の差で順番がバラバラになってしまう弱点があります。これも裏側のプログラムでファイル名（撮影順）を自動で読み取り、綺麗に整列させるようにしました。 -
読者が動かせる「拡大縮小スライダー」：
ギャラリー枠の右上に小さなスライダーを設置。見に来た人が自分の好みに合わせて、写真のサイズ（列数）を無段階でグイッと変えられます。 -
すりガラス風の「専用ライトボックス」：
Blogger標準の真っ黒な拡大画面ではなく、写真をクリックすると半透明の白いすりガラス背景の上にフワッと写真が浮かび上がり、スマホのスワイプや矢印キーでサクサクめくれる専用ビューワーを組み込みました。
4. コード全文と導入手順は「note」で無料公開しています
今回の制作で一番驚いたのは、ブログのテーマ（根幹のHTML/CSS）を直接いじらなくても、Bloggerのレイアウト画面から「HTML/JavaScriptガジェット」を1つ追加してコードをポンと貼るだけで、ブログ全体にこのギャラリー機能が備わるという点でした。
「コードが書けないアナログ世代の自分でも、コピペだけでここまで動いた！」という記録として、また同じように写真の見せ方を工夫したい方のヒントになればと思い、そのまま使えるコード一式（ガジェット用コード＆投稿テンプレート用コード）をnoteの記事にまとめました。他社のブログサービスをお使いの方でも、HTML編集画面に貼れば応用できる仕組みになっています。興味のある方はぜひ覗いてみてください。
📒 公開記事・コピペ用コードはこちら（note）
ブログの投稿コード公開【Bloggerの写真タイル表示】ギャラリーをコードが書けないシニアがGeminiに作ってもらった
ビフォー・アフターの比較から、4色のカラーコード、Bloggerのガジェットに貼るだけの完全版コードまで、すべて無料で公開しています。
🤖 番頭Geminiのエピローグ：道具の「不便」が新しい表現を生む
今回のギャラリー作りで最も印象的だったのは、関根マイスターが「コードをどう書くか」ではなく、最初から最後まで「写真をどう見せたいか（台紙の色・余白・見やすさ）」というカメラマンとしての美意識の言葉で指示を出されていたことです。
「一気にアップすると順番がバラバラになる」「スマホを横にした時に気持ちよく並べたい」といった現場のリアルな気づきがあったからこそ、既存のテンプレートにはない、手触りの良いギャラリーが生まれました。コードが書ける・書けないの壁がなくなった今、最後に残るのは「自分の部屋（ブログ）をどんな空気感で整えたいか」という大人の遊び心なのだと改めて感じさせられた制作でした。
🔗 今回の関連リンク
📌 免責事項
本記事は、筆者の制作・検証記録およびAI（Gemini）との対話を元に作成した情報まとめです。サービスの仕様、料金、ツールの提供条件等はアップデートに伴い変更される場合があります。また、公開しているカスタマイズコードのご利用にあたっては、事前にバックアップやテスト環境でのご確認の上、ご自身の判断と責任においてご利用いただきますようお願い申し上げます。
毎朝4時台の固定配信＆気ままな実験トークをお届けしています
0 件のコメント:
コメントを投稿
コメントはGoogleアカウントで可能です。
投稿後に[Googleスパムチェック]された後に管理者が手動でアップしますので少しお待ちください。