楽天ROOMの登録をしたあとに、他の人のブログに楽天の「わたしのROOM」というバナーが貼ってあるのを見たことがありませんか？
このバナーです。↓↓↓
クリックすると「ころゆりの楽天ROOM」へ飛びます。
実際の設置後の状態がわかりますので、よければ試してみてくださいね。
（まだ、商品登録中のため掲載数が少ないです。スミマセン(^_^;)）
- どうやってこのバナーを自分のブログに貼るんだろう？
- そもそもこのバナーはどこにあるんだろう？
と疑問に思い、探したところ無事に発見し、自分のブログのサイドバーに「わたしのROOM」公式バナーを貼ることができました。
ただ、公式バナーの場所がわかりにくかったので、その場所と具体的なバナーの貼り方を画像つきでご紹介していきます。
設定前にサイドバーの状態を確認！（事前準備）
テーマJINを利用中の方で、WordPressのバージョン5.8（2021年7月20日リリース）以降を利用していて、サイドバーの状態が、ブロックエディターになっている場合、「Classic Widgets」プラグインを使って、サイドバーの仕様を旧方式に戻す作業を行います。
「Classic Widgets」プラグインはウィジェット管理のブロックエディターを無効化するプラグインです。
クラシックエディター版になっている方は、この工程は不要なので、次の工程へ進んでくださいね。
※テーマJINの公式マニュアルでも旧方式に戻してから作業することを推奨しています。（2022年8月9日現在）
⇒JIN公式マニュアル
▼ブロックエディター版
▼旧方式クラシックエディター版
Classic Widgetsのインストール方法
念のため、プラグインをインストールする前に、バックアップを取ることをオススメします。
WordPressの管理画面を開き
- プラグイン → 新規追加 → 検索窓に「Classic Widgets」を入力
- 画面上に下記画像の赤丸「Classic Widgets」が表示される
- 「今すぐインストール」をクリック（画像はクリック後のインストール中画面です）
- インストールが終わったら「有効化」ボタンをクリック
これでウィジェット画面が旧方式になり、作業しやすくなりました。
楽天ROOMの公式バナーをダウンロードしよう！
ブログに楽天ROOMの公式バナーである「わたしのROOM」バナーを貼るには
- ブログに直接「ブログ用のHTMLソース」を貼る方法
- バナー画像をダウンロードしてから、ブログ内にその画像を貼り付け、自分のmy roomへのリンクを貼る方法
の2通りの方法があるのですが、①の方法で「わたしのROOM」バナーを掲載する場合、事前の報告なく、リンク先が変更されたり、削除されたりすると表示されなくなるため、私は②の方法で行いました。
バナーの場所は、かなり奥の奥の奥の方まで潜らないと見つかりません(^_^;)
箇条書きでご紹介すると、
- 楽天ROOMにログイン
- my ROOMの画面の右上の歯車マーク（設定）をクリック
- 「ヘルプ」をクリック
- 「よくある質問」をクリック
- 「my ROOM」をクリック
- 「ブログやwebサイトに自分のmy ROOMへのリンクを貼りたいのですが、バナーはありませんか」をクリック
- 「バナー画面をダウンロードする場合」の「こちら」をクリックしバナー画面へ
- 「わたしのROOM」バナー上で右クリックし、「名前をつけて画像を保存」を選択して、PCに保存する
上記のような感じで、かなり探してやっと発見！という感じでした(^_^;)
楽天ROOM公式バナーは見つかりましたでしょうか？
ダウンロードは無事できましたでしょうか？
おそらくここまでは大丈夫かと思いますので、次はいよいよ私も利用しているテーマJINでサイドバーにバナーを貼り付ける方法を画像付きでご紹介していきますね♪
テーマJINのサイドバーに楽天ROOM公式「わたしのROOM」バーを設置！
私のブログは、WordPress＆テーマJINを利用しています。
（2023年4月現在はWordPressテーマ「SWELL」に変更しました。作業はほぼ同じでした。）
今回、楽天ROOM公式の「わたしのROOM」バーをブログのサイドバーに表示させるために行ったことは、
- 「わたしのROOM」バナー画像をWordPress管理画面の「メディアライブラリ」に追加
- WordPress管理画面「外観」→「ウィジェット」の「サイドバー」に「テキスト」を追加し、「わたしのROOM」バナーを貼り付け、リンクで「自分のmy ROOMのURL」を設定し別ページで開くようにした
以下、WordPress管理画面の画像付きで説明していきますね。
１．ライブラリに「わたしのROOM」画像を追加する
まずはWordPressにログイン後、管理画面左側のナビゲーションメニューで「メディア」をクリックすると、下記画面が表示されますので、右側にある「ライブラリ」をクリック。
下記のような画面が表示されますので、「新規追加」をクリック。
すると、下記の画面が表示されますので、
先程ダウンロードした「わたしのROOM」バナーを
- 上記画像の破線内に「直接ドラッグ＆ドロップ」または、
- 「ファイルを選択」をクリックして、「わたしのROOM」バナーダウンロード先を選び、「わたしのROOM」バナー画像をクリック
して「メディアライブラリ」に画像を追加します。
これで、「わたしのROOM」バナー画像の準備ができたので、今度は実際にサイドバーへ画像貼り付けの作業をしていきます。
２．サイドバーに「わたしのROOM」バナーを設置しリンクを貼る
今度は、「わたしのROOM」バナーを貼り付ける作業に入りますが、後ほど、「自分のmy ROOMのURL」が必要になりますので、作業時にすぐURLをコピーできるように
- 新しいタブで「自分のmy ROOM画面」を開いておくか
- メモ帳などに、「自分のmy ROOMのURL」をコピーして準備しておく
ことをオススメします。
では、実際のWordPress管理画面画像にて説明していきますね。
管理画面左側のナビゲーションメニューで下の方に表示されている「外観」→「ウィジェット」をクリック。
すると、下記のウィジェット画面が出てきます。
次にウィジェット画面左側にある「テキスト」を「サイドバー」に追加します。
（SWELLの場合は「共通サイドバー」）
方法は2通りあり、
- ウィジェット画面左側にある「テキスト」をドラッグし、右側にある「サイドバー」の枠内にドロップして追加する方法、または
- ウィジェット画面左側にある「テキスト」の右三角（▼）をクリックして「サイドバー」に追加する方法
どちらの方法でも結果は同じですが、今回は②の方法を画像付きでご紹介していきます。
ウィジェット画面左側にある「テキスト」の右三角（▼）をクリックすると、下記のような画面が表示されます。
ここで、「サイドバー」を選択し、「ウィジェットを追加」をクリック。
（SWELLの場合は「共通サイドバー」）
すると、下記の通り、サイドバーに何もデータのない「テキスト」が追加されます。
私は上記画面のタイトルに「ころゆり楽天ROOM」と入力。
次に、「メディアを追加」をクリックし、「メディアライブラリ」の中から先程追加した「わたしのROOM」バナー画像を選択して「投稿に挿入」をクリックすると、下記のようにバナーが表示されます。
次に、「わたしのROOM」バナーを文字を選択する時のように選択し、リンクのマーク（クリップのようなマークです）をクリック。
上記のように、「わたしのROOM」バナー画像下（赤矢印部分）に、リンクURLを入力する枠が表示されますので、ここに「自分のmy ROOMのURL」を貼り付けてください。
そして、右にある「歯車マーク」をクリックすると下記画面が出てきます。
上記のように「リンクを新しいタブで開く」にチェックを入れ、「更新」をクリックすると、下記の画面に戻ります。
最後に「保存」をクリックすれば、「わたしのROOM」バナー設置完了です！
お疲れさまでした♪
楽天ROOM公式バナーは画像をダウンロードしてから設置しよう！
楽天ROOM公式バナーは、ブログに直接「ブログ用のHTMLソース」を貼る方法もありますが、事前の報告なく、リンク先が変更されたり、削除されたりするとバナーが表示されなくなるため、
バナー画像をダウンロードしてから、ブログ内にその画像を貼り付けて、自分のmy roomへのリンクを貼る
という方法で「わたしのROOM」バナーを設置した方が安心です。
少し手間がかかりますが、こちらの方法をオススメします♪
テーマJINのウィジェット利用方法を画像付きで超初心者の方にもわかるようにご紹介しましたが、無事リンク設定まで終わりましたでしょうか？
この方法は、他の広告を貼る場合などにも応用できますので、これからバナーなどを設置する方にとって少しでもお役に立つことができれば幸いです。
※バナーデザインが変更された時は、また画像を貼りなおす作業が必要になりますので同じ様に作業してみてくださいね。
ブログ開始から数年間は初心者に優しい「テーマJIN」に大変お世話になりました。
2023年になってテーマを変更した理由は、「テーマJIN」はクラッシックエディター時代は快適だったものの、WordPressのバージョンが変わって「ブロックエディター」仕様になってからは、どうにも使いづらくなってしまって。
ブロックエディター完全対応の「テーマJIN：R」の販売が開始されたのですが、他のテーマも利用してみたくなり、今回SWELLに移行。
SWELLなら利用者が多いので、わからないことが出てきたときに情報がたくさん出てきて調べやすいという点も決め手となりました。
移行作業は大変な部分もありますが、WordPressテーマ「SWELL」に変えてからは、かなりブロックエディター作業がやりやすくなったので、とても助かっています。
＼ブロックエディター作業が楽になる！／
WordPressテーマ「SWELL」
【その他記事】
