【アメブロ】サイドバーにボックスナビをつくるカスタマイズ方法｜実例を使ってわかりやすく解説

リタイアかわうそです。

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

少しでも、見やすいブログにしようと頑張ってカスタマイズしています。

先日、サイドバーに念願の『ボックスナビ』をつくりました。

こちらが私のアメブロ『リタイアかわうそ日記』のサイドバーにつくった『ボックスナビ』です。

『ボックスナビ』は「ブログ内回遊率のアップ」や「読んでもらいたいページへ誘導」などの効果が期待できるといわれています。

何より、読者の方にとっても『ボックスナビ』はとても便利ですよね。

本記事では実例を紹介しながら、アメブロのサイドバーに『ボックスナビ』をつくる方法をわかりやすく解説します。

残念ながら、アメブロではサイドバーの『ボックスナビ』をパソコンしか表示させることができません。

そこでスマホ向けに、投稿記事下に『ボックスナビ』をつくる方法も併せてお伝えします！

＜３ステップ＞アメブロのサイドバーに『ボックスナビ』を作るカスタマイズ手順

アメブロのサイドバーに「ボックスナビ」を作る手順は、以下の３ステップです。

ボックスナビ用のロゴは【Canva】で作るのがおすすめ

❶のボックスナビ用のロゴは【Canva】で作ると簡単で便利です。

今回ご紹介する「ボックスナビ」のロゴ画像も【Canva】で作りました。

【Canva】を使えば、まるでプロのようなデザイン画像が、だれでも簡単に作れます。

ボックスナビ用のロゴも【Canva】に装備されている画像の素材を使えば、おしゃれな仕上がりになります。

こちらは、わたしが【Canva】でつくったボックスナビ用のロゴです。

こんなロゴが、デザインの知識がなくても簡単に作れます。

特に、有料版の 【Canva Pro】は使い切れないくらいの画像素材が使い放題なんです。

これから作成する「ボックスナビ」用のアイコンも、有料版の【Canva Pro】で作っています。

無料版の【Canva】でもロゴ画像をつくることができますが、使用できる画像素材は制限されます。

ご安心ください

無料期間中に解約もできます。

ロゴだけ作ったら、解約するのもアリですよ。

本記事では【Canva Pro】でロゴ画像を作る手順もくわしく解説しています。

この機会にぜひ、【Canva Pro】の楽しさをご体験ください。

解約方法はこちら

【ステップ１】Canvaで「ボックスナビ」用のロゴをつくる

まず最初に「ボックスナビ」のロゴを作ります。

今回つくるロゴはこちらです。

ロゴの外枠をつくる

ロゴの内側をつくる

今回は、以下のロゴにピッタリなイラストを内側に入れます。

完成したロゴ画像をダウンロードする

完成したロゴをCanvaからパソコンにダウンロードします。

【ステップ２】アメブロの記事編集画面で「ボックスナビ」をつくる

ボックスナビは、記事編集画面でつくります。

【ステップ３】「ボックスナビ」をサイドバーに表示させる

最後に、ボックスナビをサイドバーに表示させます

投稿記事下に「ボックスナビ」を表示させる方法

アメブロのサイドバーは、残念ながらスマホには表示されません。

でも、せっかく頑張って作った「ボックスナビ」です。

スマホで訪問してくれた読者さんにも、ぜひ見てもらいたいですよね。

レスポンシブ未対応の『ボックスナビ』を見栄えよく表示するためのサイズとは

『ボックスナビ』は、レスポンシブデザインに対応していません。

そのため、パソコン作ったデザインでもスマホでみると型くずれしてしまいます。

＊レスポンシブデザインとは、パソコン・スマホ・タブレットなど画像サイズの幅が異なるWebサイト表示をそれぞれのサイズに合わせて見やすいデザインにすること

パソコンでもスマホでも見栄えがよく表示させるためには、ボックスナビ横幅のサイズを調整する必要があります。

スマホでボックスナビを＜２列表示＞する方法

ボックスナビの横幅をすべて160＆中央揃えにしてください

パソコンの表示画面はこのようになります

スマホの表示画面はこのようになります

２列の場合は、ボックスナビの数を偶数にすると見た目がよくなります

スマホでボックスナビを＜３列表示＞する方法

ボックスナビの横幅をすべて105＆中央揃えにしてください

パソコンの表示画面はこのようになります

スマホの表示画面はこのようになります

３列の場合は、ボックスナビの数を３の倍数にすると見た目がよくなります。

数合わせのために、twitterのボックスナビを追加し９個にしてみました。

パソコン画面

スマホ画面

収まりがよくなりました(^_^)

まとめ　～ボックスナビで見やすいブログにカスタマイズしよう～

今回はアメブロのサイドバーと投稿記事下に「ボックスナビ」を作る方法について説明しました。

アメブロのサイドバーは、スマホには表示されません。

せっかく作ったボックスナビをスマホでも見てもらえるよう投稿記事下にも設置するのがおススメですよ。

ぜひあなたのブログにぴったりな「ボックスナビ」で、見やすいブログにカスタマイズをしてみてくださいね。