sky-blogモバイル対応壁紙
「スマホ壁紙」改め「モバイル対応壁紙」の更新を行っています。
スマホ・タブレット・MP4に対応した壁紙の推奨サイズは 2160×3840 で、これは縦向きの4K解像度になります。YouTubeショートにも使用できるため、このサイズで壁紙を制作しました。
ChatGPTと話していたところ、1080×1920（いわゆるフルHD縦型）では、それ以上に縦長のディスプレイを採用している機種も多く、その場合は上下に余白（レターボックス）が生じてしまうとのことでした。
そこで「どの解像度で制作すれば、主要な端末すべてに対応できるのか？」を尋ねたところ、ChatGPTが下記のような一覧表を提示してくれました。
記録としてここに残しておきます。
技術の進化は日進月歩。現在の壁紙サイズがいつまで“標準”でいられるかはわかりません。とはいえ、AIを使えば数秒で高解像度の壁紙が生成できる時代です。今回の作品も、いずれは私専用のオリジナル壁紙として残っていくのかもしれません。
スマホ・タブレット・MP4に対応した壁紙の推奨サイズは 2160×3840 で、これは縦向きの4K解像度になります。YouTubeショートにも使用できるため、このサイズで壁紙を制作しました。
ChatGPTと話していたところ、1080×1920（いわゆるフルHD縦型）では、それ以上に縦長のディスプレイを採用している機種も多く、その場合は上下に余白（レターボックス）が生じてしまうとのことでした。
そこで「どの解像度で制作すれば、主要な端末すべてに対応できるのか？」を尋ねたところ、ChatGPTが下記のような一覧表を提示してくれました。
記録としてここに残しておきます。
技術の進化は日進月歩。現在の壁紙サイズがいつまで“標準”でいられるかはわかりません。とはいえ、AIを使えば数秒で高解像度の壁紙が生成できる時代です。今回の作品も、いずれは私専用のオリジナル壁紙として残っていくのかもしれません。
👉📱 よくあるスマホ画面解像度一覧（目安）
- iPhone 6/7/8・初代SE
- 解像度：750×1334（約9:16）
備考：いわゆる16:9より少し縦 - iPhone X/XS/11/12/13/14 シリーズ
- 解像度：1125×2436（約9:19.5）
備考：ノッチ付きの縦長ディスプレイ - Samsung Galaxy S8/S9
- 解像度：1440×2960（約9:18.5）
備考：ほぼ18:9の縦長画面 - Google Pixel 4/5/6
- 解像度：1080×2340（約9:19.5）
備考：最近のAndroidの一般的縦長比率 - Samsung Galaxy S20以降
- 解像度：1440×3200（約9:20）
備考：さらに縦長の最新モデル - Sony Xperia 1 シリーズ
- 解像度：1644×3840（9:21）
備考：映画のシネマ比に近い超縦長画面
👉📱 よくあるタブレット解像度一覧（目安）
- iPad（無印、Air）
- 解像度：1640×2360（約3:4）
備考：iPadOSの標準解像度 - iPad Pro 12.9
- 解像度：2048×2732（4:3）
備考：高解像度の大型モデル - Androidタブレット（多くの機種）
- 解像度：1600×2560（16:10）
備考：Galaxy Tab、Lenovoなど - Fire HD 10（Amazon）
- 解像度：1920×1200（16:10）
備考：独自OS搭載だがAndroid系 - Chromebook タブレット
- 解像度：1536×2048（3:4）
備考：教育向けによく使われる
👉📱 壁紙作成におすすめのサイズ（現代機種向け）
- スマホ（全般）
- 推奨サイズ：1080×2400 または 1440×3200
備考：縦長、Android主流 - タブレット（全般）
- 推奨サイズ：1600×2560 など
備考：8〜10インチ向け。アスペクト比4:3や16:10で作るとよい - どちらにも対応
- 推奨サイズ：2160×3840（4K縦長）
備考：トリミング耐性あり、汎用性最強
Googleカスタム検索を設置
「ぱたぱたアニメ館」トップページの右上に、Googleカスタム検索を設置しました。その検索ボックスの構造を知りたくて、各クラスに色を付けて調べてみました。
▼ デモ画像
※ 実物はこちらです。検索対象は『ぱたぱたアニメ館』内のコンテンツのみです。
▼ 使用したCSS（説明付き）
▼ 複雑な構造について
HTMLを確認してみると、Googleカスタム検索は table タグを何重にもネスト（入れ子）していて、かなり複雑な構造になっていました。
クラス名を見ても、それが画面のどの部分を指しているのかは、実際に色を付けてみるまで分かりませんでした。
▼ Google独自のクラスについて
gsc-control-cse や gsc-search-box などは、Googleが自動で生成している独自のクラス名なので、将来的に仕様変更で名前が変わる可能性もあります。
また、GoogleのCSSでは !important が多用されているため、こちらのスタイルを確実に反映させたいときは、自分のCSSにも !important を付けたほうが良さそうです。
▼ 実際に設置した検索ボックスでは
ただ、元のデザインが私の好みに合っていたので、実際に設置した検索ボックスでは横幅を330pxに指定しただけにとどめています。
▼ デモ画像
※ 実物はこちらです。検索対象は『ぱたぱたアニメ館』内のコンテンツのみです。
▼ 使用したCSS（説明付き）
.gsc-control-cse {
width:90% !important;
background-color:hotpink !important;
} /* 検索全体の背景をホットピンク、幅を90% */
.gsc-search-box {
border:1px solid blue !important;
} /* 検索ボックスの外枠に青の実線枠 */
.gsc-input {
background-color:silver !important;
} /* 入力欄にシルバーの背景 */
.gsc-input-box {
border:3px dashed black !important;
} /* 入力ボックス全体に黒い点線枠 */
.gsc-search-button {
border:3px solid skyblue !important;
background-color:yellow !important;
} /* 検索ボタンに空色の実線枠と黄色の背景 */
.gsc-search-button svg {
fill: red !important;
} /* 虫眼鏡アイコンの色を赤に */
.gscb_a {
background-color:orange !important;
color:white !important;
} /* 入力後に表示される✕マークにオレンジ背景と白の文字色 */
width:90% !important;
background-color:hotpink !important;
} /* 検索全体の背景をホットピンク、幅を90% */
.gsc-search-box {
border:1px solid blue !important;
} /* 検索ボックスの外枠に青の実線枠 */
.gsc-input {
background-color:silver !important;
} /* 入力欄にシルバーの背景 */
.gsc-input-box {
border:3px dashed black !important;
} /* 入力ボックス全体に黒い点線枠 */
.gsc-search-button {
border:3px solid skyblue !important;
background-color:yellow !important;
} /* 検索ボタンに空色の実線枠と黄色の背景 */
.gsc-search-button svg {
fill: red !important;
} /* 虫眼鏡アイコンの色を赤に */
.gscb_a {
background-color:orange !important;
color:white !important;
} /* 入力後に表示される✕マークにオレンジ背景と白の文字色 */
▼ 複雑な構造について
HTMLを確認してみると、Googleカスタム検索は table タグを何重にもネスト（入れ子）していて、かなり複雑な構造になっていました。
クラス名を見ても、それが画面のどの部分を指しているのかは、実際に色を付けてみるまで分かりませんでした。
▼ Google独自のクラスについて
gsc-control-cse や gsc-search-box などは、Googleが自動で生成している独自のクラス名なので、将来的に仕様変更で名前が変わる可能性もあります。
また、GoogleのCSSでは !important が多用されているため、こちらのスタイルを確実に反映させたいときは、自分のCSSにも !important を付けたほうが良さそうです。
▼ 実際に設置した検索ボックスでは
ただ、元のデザインが私の好みに合っていたので、実際に設置した検索ボックスでは横幅を330pxに指定しただけにとどめています。
