はてなブログへのバナー掲載方法

 1. にほんブログ村バナーhtml取得方法

 2. はてなブログでのバナー掲載方法

 3. その他のバナー掲載方法はこちら (細かく設定したい方向け)



1. にほんブログ村バナーhtml取得方法
PCからバナーhtmlを取得したい方

にほんブログ村の右上にある、①のマイページをクリックしてください。
マイページに移動しましたら、②のランキング用バナーをクリックしてください。


ランキング用バナー移動した後に、以下のようなバナーhtmlがありますので、③のタグコピーをクリックしていただくと、バナーhtmlが取得できます。


※上記の方法でうまくいかない方はこちらをご覧ください
上記の方法でうまくいかない方は、以下のようにhtmlを範囲選択した後に、範囲選択枠内で右クリックをするとコピー欄がでますので、コピーをクリックすると取得できます。


以上でバナーが取得できますので、お試しくださいませ。


PCでの初期設定へ進む

目次へ戻る


スマートフォンからバナーhtmlを取得したい方

にほんブログ村の右上にある、①のマイページをタップしてください。
マイページに移動しましたら、メンバー・コンテンツ管理メニュー内にある、②のランキング用バナーをタップしてください。


ランキング用バナー移動した後に、以下のようなバナーhtmlがありますので、③のように範囲選択しコピーしていただくと、バナーhtmlが取得できます。


以上でバナーが取得できますので、お試しくださいませ。


スマートフォンでの初期設定へ進む

目次へ戻る


2. はてなブログでのバナー掲載方法
PCでの初期設定

以下のような設定を行ってください。これを行わないと、スマートフォンから閲覧する方にバナーが表示されません。


はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のスマートフォンのアイコンをクリックします。
スマートフォンのアイコンをクリックした後に、②の記事をクリックします。


記事をクリックした後に、記事上下のカスタマイズ欄にある、③の「PCと同じHTMLを表示する」にチェックを入れてください。
チェックを入れた後に、④の変更を保存するをクリックしてください。


以上の設定ができましたら、PCからのバナー掲載方法へ進んでください。


PCからのバナー掲載方法へ進む


PCからのバナー掲載方法

はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のカスタマイズをクリックします。


カスタマイズをクリックした後に、②の記事をクリックします


記事をクリックした後に、記事上下カスタマイズ欄にある、③の記事下の枠内をクリックしてください。


クリックした後に、空白内で右クリックし、④の貼り付けをクリックします。
貼り付けが成功すると、⑤のようにバナーhtmlが貼り付けられます。
⑤のようになりましたら、⑥の変更を保存するをクリックしてください。


以上で完成しますので、お試しくださいませ。


目次へ戻る


スマートフォンでの初期設定

マイブログから、①の設定をタップします。


設定に移動した後に、編集モード欄にある、②のはてな記法モードかMarkdownモードを選択してください。


以上の設定ができましたら、スマートフォンからのバナー掲載方法へ進んでください。


スマートフォンからのバナー掲載方法へ進む


スマートフォンからのバナー掲載方法

新規記事から、本文にバナーhtmlをペーストし、記事を書いてから公開してください。


目次へ戻る



3. その他の掲載方法

  PCからのバナー掲載方法

 スマートフォンからのバナー掲載方法


PCから新規記事へのバナー掲載方法はこちら

新規記事から、左上にある、①のHTML編集をクリックします。
HTML編集をクリックした後に、余白内で右クリックし、②の貼り付けをクリックします。
貼り付けが成功すると、③のようなバナーhtmlが表示されます。


貼り付けた後に、④の編集見たままをクリックします。
すべて成功していると、⑤のようにバナーが表示されます。
⑤のように表示されましたら、記事を書いて、⑥の記事を更新するをクリックしてください。

以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


PCから既存記事へのバナー掲載方法はこちら

記事管理画面から、バナーを掲載したい記事の編集ボタンをクリックしてください。
その後は、新規記事と同じ方法でバナーが掲載できます。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


PCから記事上へのバナー掲載方法

はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のカスタマイズをクリックします。


カスタマイズをクリックした後に、②の記事をクリックします


記事をクリックした後に、記事上下カスタマイズ欄にある、③の記事上の枠内をクリックしてください。


クリックした後に、空白内で右クリックし、④の貼り付けをクリックします。
貼り付けが成功すると、⑤のようにバナーhtmlが貼り付けられます。
⑤のようになりましたら、⑥の変更を保存するをクリックしてください。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


PCからヘッダへのバナー掲載方法はこちら

はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のカスタマイズをクリックします。


カスタマイズに移動した後に、②のヘッダをクリックします。
ヘッダをクリックした後に、タイトル下欄内にある、③の空白内をクリックします。


クリックした後に、空白内で右クリックし、④の貼り付けをクリックします。
貼り付けが成功すると、⑤のようにバナーhtmlが貼り付けられます。
⑤のようになりましたら、⑥の変更を保存するをクリックしてください。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


PCからサイドバーへのバナー掲載方法はこちら

はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のカスタマイズをクリックします。


カスタマイズに移動した後に、②のサイドバーをクリックします。
サイドバーをクリックした後に、③のモジュールの追加をクリックします。


モジュールの追加をクリックした後に、左の欄から、④のHTMLをクリックします。
枠内で、右クリックし、⑤の貼り付けをクリックします。
貼り付けが成功しましたら、⑥のようなバナーhtmlが表示されます。
⑥がのようになりましたら、⑦の適用をクリックしてください。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


PCからフッタへのバナー掲載方法はこちら

はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のカスタマイズをクリックします。


カスタマイズに移動した後に、②のフッタをクリックします。
フッタをクリックした後に、③の空白内をクリックします。


クリックした後に、空白内で右クリックし、④の貼り付けをクリックします。
貼り付けが成功すると、⑤のようにバナーhtmlが貼り付けられます。
⑤のようになりましたら、⑥の変更を保存するをクリックしてください。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


スマートフォンから既存記事へのバナー掲載方法はこちら

マイブログから、記事の管理欄にある、バナーを掲載したい記事をタップします。
その後は、新規記事と同じ方法でバナーが掲載できます。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る


PCからヘッダ・記事・フッタへのバナー掲載方法 (はてなブログPro向け)

有料会員のはてなブログProに登録されている方は、スマートフォンのヘッダ・記事・フッタにもバナーが掲載できます。


はてなブログの右上にある自分のアイコンから、デザインをクリックし、①のスマートフォンのアイコンをクリックします。
②からバナーを掲載したい箇所をクリックし、バナーhtmlを貼り付けてください。
貼り付け方は、上記と同じです。


以上で完成しますので、お試しくださいませ。


その他の掲載方法へ戻る

目次へ戻る