昨日はメインブログの広告表示を調整したが、今日はサブブログである本ブログ側の広告表示を調整してみた。
ちなみに、当ブログの全体テーマは、公式テーマの「Terminal」を利用しており、CSSで広告表示に関する調整を行っている。
【目次】
「レスポンシブデザイン対応テーマ」について
ちなみに公式テーマの「Terminal」は、レスポンシブデザイン対応を謳っており、ブラウザの幅によって表示が変化するようになっている。
以下の画像は、FHDサイズのパソコン画面にて、半分以上の幅でWebブラウザを開いている状態。ちなみにバナー広告は水色の長方形で隠している。
以上のように、はてなブログでは、レスポンシブデザイン対応のテーマを選んで、デザイン設定で「レスポンシブデザイン」にチェックを入れると、ウィンドウや画面の幅に応じて、自動的にデザインが調整される。
スクリーンショットで見ても分かりにくいので、実際にページ上部のバナー広告を表示させて、webブラウザの幅を調整してもらえれば、手っ取り早くて分かりやすいと思う。
レスポンシブデザイン対応であれば、ブログのデザインをパソコン用・スマホ用と別々に用意する必要がないのが利点。
ひとつ書き忘れたが、背景画像は、私が撮影した愛用のSurface専用キーボード（販売終了品）なので、画像の著作権的には問題なし。
レスポンシブデザイン対応ならではの苦労
レスポンシブデザイン対応ならではの苦労として、幅の広いバナー広告が使えないこと。
PC用に幅広いバナー画像を貼り付けて、スマホ画面で見たら左右に突き抜けていた、ということがある。
このため、バナー画像や広告も、レスポンシブデザイン対応のものが望ましい。
ただ、レスポンシブデザイン対応のバナー画像が使えない場合は、必然的に幅が狭いものを使用することになる。当ブログのように。
先に挙げた画像では、幅238ピクセルのバナー広告を3つ使っているが、これはPCでもスマホでも問題なく表示させるため。
もちろん、CSSのフレックスレイアウトで、画面幅に応じてレイアウトが自動的に変化するように設定している。
参考までに、当ブログで使ったHTML/CSS設定を公開する。ちなみに疑問・質問には答えないので悪しからず。そこはご自身で調べて欲しい。パラメーターの意味を知ることは大切。
/* CSS側 */
section.banner {
display: flex;
flex-flow: wrap;
width: 100%;
justify-content: center;
}
div.banner {
width: 240px;
margin: 0 10px 5px;
}
/* HTML側 */
<section class="banner">
<div class="banner">（バナー広告のタグ）</div>
<div class="banner">（バナー広告のタグ）</div>
<div class="banner">（バナー広告のタグ）</div>
</section>
ちなみに私が参考にしたのは「HTML&CSSポケットリファレンス 改訂3版（森 史憲・藤本 壱 著／技術評論社 刊）」。こちらもご参考までに。
公式テーマの利用で諦めたこと
はてなブログの公式テーマ「Terminal」を使用して、ふたつほど諦めたことがある。
１．記事一覧の日付表記が無駄にスペースを取る
諦めたことのひとつは、記事一覧の日付表記が無駄にスペースを取ること。
特にスマホ画面で一覧を見ると、画面の左半分をかなり無駄遣いしている。タイトルの上にあれば嬉しいんだけど。
指定したテーマでどういうコードになっているのかは見ていないが、面倒ごとになるのは目に見えているので、これ以上は深入りしない。
２．はてなスターがスクロールの邪魔をする
もうひとつ諦めたことは、はてなスター（SNSで言うところの「いいね」ボタン）を設置すると、スマホ画面のスクロールで邪魔になること。
画面をスクロールしようとすると、まあ地味に指の当たること。
はてなスターは、はてなブログ内での評価基準にもしているのだが、アクセシビリティを優先して、泣く泣く記事のデザイン設定で非表示とした。
もっとも当サブブログは、はてなブログというより、WordPressより管理が簡単なブログとして利用しているので、さほどスターの数は気にしていない。
【2025/11/27 追記】
一時は非表示にしていた「はてなスター」だが、さすがにちょっと寂しくなり表示を復活させた。
まあ当ブログの方向性的に、スマホよりパソコン向けの記事が多く、実際、Googleアナリティクスのレポートを見ても、スマホ視聴は1割に満たなかったため。
もちろん多数決ではないので、1割の訪問者も大事なのだが、少なくとも今のブログテンプレートで「はてなスター」が邪魔になるのは、トップページの記事一覧くらいなので。
という訳でスマホユーザーの皆様、ご勘弁を。
（追記ここまで）
あとがき
本当はもっと簡潔に記事を書いて「はいおしまい」という具合にするつもりだったが、スクリーンショットを貼り付けていくうち、結構な文章量になってしまった気がする。
いや、HTMLとしてのコード量は多いが、画像やリンクが多いので、実際に記事として見ると、さほどでもないか、な？
では。
