はてなブログを２年ぶりに改めて開設して、いろいろな方のブログを拝見させていただいていますが、グループのバナーが貼ってあるのに気が付きました。
ランキングに参加するのも、このグループのバナーを貼らないといけないようです！
以前やっていたので特に説明も読まずやってるので、どうやって貼るのだろう！？
いろいろ、忘れてます・・・
やり方が分かりません！！
・・・ので、調べて、やってみました！
記事の前半は、簡単にスマホでやる方法
記事の後半は、詳細な説明を記載しています。
スマホでグループバナーを貼る方法
【前提】
まず、スマホのアプリからではなく、
ブラウザの画面で、はてなブログにアクセスしてください！
①編集画面で「∨」をタップします
②グループをタップします
③貼り付けたいグループを選択し、
「選択したアイテムを貼り付け」をタップします
④以下のようにバナーを貼ることが出来ます。
これにより、グループのランキングに参加することが出来ます！
【補足】
見たまま編集の画面では、バナーは下の画像のような文字列になっています。
この文字列をコピーして、他の記事の編集画面に貼ることで、同じバナーを貼る事ができます。
以下、詳細な説明になります。
はてなブログには「グループ」という機能があり、同じテーマのブログ同士をつなげることができます。
グループに参加すると、バナーを自分のブログに貼ることができます。
① グループに参加する
まずは、バナーを貼るためにグループに参加しましょう。
はてなブログにログインする
「グループ」のページへアクセス（はてなブロググループ）
興味のあるグループを探してクリック
「グループに参加する」ボタンを押す
参加ブログを選択して「参加する」をクリック
これでグループに参加完了です！
② グループバナーを取得する
グループに参加すると、バナーのHTMLコードを取得できます。
グループのページへ移動
**「このグループのバナー」**を探す
バナーのHTMLコードをコピーする
③ ブログにバナーを貼る
取得したHTMLコードをブログに貼り付けます。
★ 記事に貼る場合
記事作成画面で「HTML編集」に切り替える
コピーしたバナーのHTMLコードを貼り付ける
「プレビュー」で表示を確認
問題なければ公開！
★ サイドバーに貼る場合
**「デザイン」**を開く
「カスタマイズ」 → **「サイドバー」**を選択
**「HTMLモジュール」**を追加
コピーしたバナーのHTMLコードを貼り付ける
**「変更を保存」**を押す
これでサイドバーにバナーが表示されます！
④ バナーのデザインをカスタマイズする（応用編）
バナーのデザインを少し変更したい場合、CSSを使ってカスタマイズできます。
例えば、バナーのサイズを変更したい場合は、以下のCSSを追加します。
.group-banner img {
width: 150px; /* 幅を調整 */
height: auto; /* 高さを自動調整 */
}
CSSの追加方法
「デザイン」→「カスタマイズ」→「デザインCSS」
上記のコードを貼り付ける
「変更を保存」する
すると、バナーが指定したサイズで表示されます！
まとめ
はてなブログでグループバナーを貼る方法を解説しました。
- グループに参加
- バナーのHTMLを取得
- 記事やサイドバーに貼る
- 必要に応じてCSSでカスタマイズ
この手順でバナーを設置できます。
ブログのデザインに合わせて、ぜひバナーを活用してみてください！
