Boo-logの利用方法やお役立ち情報をブーログ編集部が発信しています。

ブーログヘルプ|Boo-logの利用方法やお役立ち情報をブーログ編集部が発信中!

ブーログTOPブーログヘルプお役立ち情報

サイドバーにバナー画像を表示する方法

サイドバーにバナー画像を表示する方法

記事の横にある、プロフィールなどが表示されているサイドバーに、バナー画像を表示させることができます。

目立たせたいお知らせやキャンペーンを掲載したり、バナーをクリックすると他のページへリンクさせることも可能です。

サイドバーにバナー画像を表示する方法

上記イメージ画像のように、サイドバーにバナー画像を設置できます。

  1. 1管理画面TOPの[ブログ環境設定]から[カスタムプラグインの登録]をクリックします。

    サイドバーにバナー画像を表示する方法

  2. 2「カスタムプラグイン1」に画像やリンクのHTMLタグを入力し、「サイドバーに表示する」を選択して[更新]ボタンをクリックします。

    ※カスタムプラグインは5個まで作成できます。「カスタムプラグイン1」を使用中の場合は、2〜5を使用してください。

    ※カスタムプラグインは[PC][スマートフォン][タブレット]それぞれに設定できます。上部のタブで切り替えてください。

    サイドバーにバナー画像を表示する方法

  3. 3カスタムプラグインの保存ができたら、実際のページを見て確認しましょう。

    カスタムプラグインは、HTMLタグで入力する必要があります。改行などもHTMLタグ(<br>)を入れないと改行が消えてしまいますのでご注意ください。

    サイドバーにバナー画像を表示する方法

これで、サイドバーに画像バナーを表示させることができます。



HTMLタグが分からない方(初心者の方へ)

ブーログの記事投稿画面を活用すると、簡単にバナー画像のHTMLタグを作ることができます。

  1. 1記事投稿画面で[ひまわりのアイコン(1枚ずつ画像挿入)]をクリックして、バナー画像に使いたい画像を記事に挿入します。

    サイドバーにバナー画像を表示する方法

  2. 2バナー画像をクリックすると他のページにリンクしたい場合は、[LINKのアイコン(リンクを挿入)]をクリックして、リンクを設定します。

    サイドバーにバナー画像を表示する方法

  3. 3生成されたHTMLタグを、冒頭の手順でカスタムプラグインの設定ページにコピーしてください。

    ※記事投稿画面で「デザインモード」をONにしているとHTMLタグが表示されません。デザインモードはOFFにしてください。

    サイドバーにバナー画像を表示する方法

※ご利用のテンプレートによっては、サイドバーが無いデザインのものや、サイドバーの位置が異なるものがございます。

※カスタムプラグインの中に複数のHTMLタグを書くことで、複数のバナー画像を掲載することも可能です。


バナー画像の表示順を変更したい場合は?

管理画面TOPの[ブログ設定:サイドバー]で、サイドバー内のコンテンツの並び替えが可能です。

サイドバーにバナー画像を表示する方法



同じカテゴリー(お役立ち情報)の記事画像
ブログ記事内に地図を埋め込む方法
記事一覧を投稿日とタイトルだけの一覧で表示する方法(サイトマップ)
下書き保存を活用しよう
一覧ページを画像サムネイルが並ぶようにする方法
読者登録って何?
同じカテゴリー(お役立ち情報)の記事
 ブログ記事内に地図を埋め込む方法 (2019-11-23 10:02)
 記事一覧を投稿日とタイトルだけの一覧で表示する方法(サイトマップ) (2019-11-22 13:57)
 下書き保存を活用しよう (2018-01-10 10:29)
 一覧ページを画像サムネイルが並ぶようにする方法 (2017-12-22 17:36)
 読者登録って何? (2017-10-26 10:35)

2019年11月01日 10:25│お役立ち情報