【アメブロ】サイドバーをおしゃれにカスタマイズする方法｜実例を使ってわかりやすく解説

そんなお悩みを持つ方は、ぜひこの記事をお読みください。

私は当サイトの「姉妹ブログ」としてアメブロを活用しています。

当サイトへの流入をちょっぴり期待して開設したアメブロでしたが・・・

サイドバーに表示される広告が目障りでした気になってしかたありませんでした。

そこで見た目をよくするために、わたしがカスタマイズしたサイドバー（左側）がこちら

リタイアかわうその日記帳 (ameblo.jp)

本記事では、実際のカスタマイズ実例を紹介しながらアメブロのサイドバーをおしゃれにカスタマイズする方法をわかりやすく解説します。

この記事を読めばこんなことができるようになりますよ。

アメブロのトップページをおしゃれにカスタマイズしたい方はぜひ参考にしてみてくださいね。

＊アメブロのモバイル版は独自のテンプレートを使用しているため、今回のカスタマイズしたサイドバーは表示できません

トップページにサイドバーを設定する方法

はじめに、アメブロのトップページにサイドバーを表示する方法を説明します。

ご存じという方は、コチラをクリック して先におすすみください。

サイドバーのカスタマイズに使用する「フリースペース編集」とは

サイドバーにオリジナルの文章が画像を表示させる「フリースペース編集」

アメブロの「フリースペース」とはサイドバーに自由に文章を入れることができる機能です。

サイドバーのフリースペースに文章や画像などを入れることで、オリジナル感あるトップページにすることができます。

今回は、サイドバーのトップにフリースペースを表示させます。

「フリースタイル編集」に入力できるもの

入力することができるものは、以下の２つです

「フリースペース」に画像やリンクを表示させる場合は、 HTMLコード を入力します。

「フリースペース編集」の初期設定

ます「フリースペース編集」の初期設定を行います。

「フリースペース」はサイドバーの最上段に設置をするのがおススメです。

なぜなら、サイドバーのトップにオリジナルのコンテンツを配置することで、トップページや記事のページをスクロールしても広告が目につかなくなる、というメリットがあるからです。

サイドバーとトップに「フリースペース」を設置する

「フリースペース編集」の基本的な使い方

「フリースペース編集」にテキストを入力する方法

「フリースペース編集」にHTMLコードを入力する方法

テキスト以外は全て「HTMLコード」を入力します

上記「HTMLコード」 の入力方法は全て同じ手順です

「記事作成画面」でコンテンツを作成　→　「HTMLコードをコピー」　→　「フリースペース編集」に張り付け

では「HTMLコード」 をフリースペースに入力する方法を説明します。

ここでが、写真をサイドバーに表示させる方法を例に解説します。

カスタマイズ実例 ❶「ごあいさつ」コーナー

これから、私のアメブロサイトの「サイドバーカスタマイズ実例」を紹介します。

はじめに「ごあいさつ」コーナーの部分を作っていきます。

出来上がりはこちらです。

見出しの文字を装飾する

サイドバー冒頭に表示させている「ごあいさつ」の見出しを装飾します。

テキストの装飾は、以下のサイトを利用させていただきました。

掲載されているHTMLコードをコピぺするだけなので、専門的な知識も不要です。

「囲み枠」であいさつ文を装飾する

囲み枠の装飾は、以下のサイトを利用させていただきました。

カスタマイズ実例 ❷「当サイト紹介」コーナー

「ごあいさつ」コーナーの下に、当ブログ「リタイアかわうそ主婦活ブログ」紹介するコーナーをつくります。

このコーナーに、当ブログのリンクを設置します

出来上がりはこちらです。

リンクをサイドバーに設置する場合も、画像をサイドバーに貼り付ける方法と手順は同じです。

いったん「記事作成画面」で『テキストリンク』や『リンクカード』を貼り、HTMLコードをコピーしてサイドバーに貼りつけます。

「記事作成画面」 にリンクを貼る方法を３つ説明します

❶「記事作成画面」にリンクカードを貼る方法

「リンクカード」の貼り方は、ワンステップで完了です

❷「記事作成画面」にテキストリンクを貼る方法

❸「記事作成画面」に画像リンクを貼る方法

「記事編集画面」で作った３種類のリンクを組み合わせて「フリースペース」に表示させ、最後に「囲み枠」で装飾しました

まとめ

今回はアメブロのサイドバーを「フリースペース編集」を活用して、おしゃれにカスタマイズする方法を実例をまじえて説明しました。

この記事で紹介したカスタマイズはこちら。

わたしは、サイドバーの「フリースペース」のいちばん下に縦長サイズの画像を３つを入れています。

縦長の画像を入れたことにより、少し長めの記事を下までスクロールしても

広告表示が目につかないようにすることができるからです。

残念ながら、アメブロは、パソコンとスマホのデザインが連動していません。

読者の多くがスマホからの訪問です。

それでも、パソコンから見にきてくれた方に少しでも楽しんでいただけるようなブログにしていきたい！

何より自分のカラーでカスタマイズしたブログには愛着が生まれます。

アメブロのサイドバーは、サイトのオリジナル感を出せる貴重なコーナーです。

この記事を参考にしていただけると嬉しいです。

最後までお読みくださりありがとうございました。