アメブロ

アメブロのフリースペースを使いこなすとPR効果が増大する話

アメブロでお店のブログをやっているけれど、facebookやline@などのSNSもやっている、あるいはお得な情報をを目立つようにアピールして集客を強化したいという人は多いと思います。

フリースペースを使用すると、好きな情報を紹介でき、装飾すれば掲載したい情報を目立たせることができます。

アメブロのフリースペースの機能を紹介します。

アメブロのフリースペースとは

アメブロのフリースペースとは、サイドバーに好きなHTMLタグを追加で記述することができる機能です。

フリースペースという名前がついていますが、結局のところはHTMLの記述にすぎず、そこにCSSを記述すればその通りの装飾が可能です。目立たせるような配置の指定をしてやれば、それに従って表示されます。

本来サイドバーに表示されるものを、CSSを使用して自由に表示位置を設定することで、特に重要な情報を目立たせることができます。

この基本的な仕組みを理解することで、自在に自分の見せたい情報を目立たせることができるようになります。

たとえば下の例はグローバルメニューを作るための記述となります。

アメブロのフリースペース

特に装飾に関する指定をしなければ、サイドバーに並べて表示されます。下の写真の「リンク先」などの文字がサイドバーに書かれたHTMLとなります。

アメブロのサイドバー

デザインの設定でCSS編集用デザインを選択し、CSSの設定をすることで、自由に表示のされ方を変えることができます。

アメブロのグローバルメニュー

記事の間にフリースペースのナビゲーション部分を並べるように、配置の設定をしました。先ほどのリンクなどの文字が並んでいますね。

本来サイドバーに表示されたものを、CSSのルールに則って表示のされ方を変更しただけです。表示のされ方を目立つ位置に変えることで、集客に関する重要な情報を目立たせることができます。

アメブロのフリースペース機能の使い方

ここからはアメブロのフリースペース機能の使い方を紹介します。

アメブロのフリースペース機能を有効化させる

アメブロのフリースペース機能を有効化させるには、サイドバーの配置設定で「フリースペース」を使用する機能に設定する必要があります。

アメブロのサイドバーの配置設定

機能ごとにドラッグ&ドロップで、使用するものを選ぶことができます。フリースペースを使用する機能として設定しましょう。

フリースペースに目立たせたい情報を掲載する

フリースペースに目立たせたい情報を掲載します。

あくまでHTMLの記述にすぎないので、HTMLのルールに則っていれば何を書いても問題ありません。

CSSを設定する

CSSを自分が「こうしたい」と思うデザインにあわせて設定します。アメブロもHTMLとCSSの仕組みに則って表示されているので、CSSを設定すればその通りの表示のされ方をします。

どんなデザインを作りたいかによってCSSの設定は変わります。

ブログデザインのCSSの設定の仕方によって表示のされ方が変わります。

たとえば右上に表示を固定させるのであれば、次のような記述となります。

.sns-side{
position:fixed;top:30px;right:0px;
}

あくまで一例であり、表示させたい場所に好きなように表示させることが可能です。

右上にSNSでも配信中という飾り枠を作ってみました。

表示位置が固定されているため、スクロールしてもずっと右上に表示され続けます。

フリースペースを使いこなすとPR効果が増大

このようにアメブロのフリースペースを使いこなすと、自分の目立たせたい情報を見てもらえる確率を上げることができます。SNSやお得な情報の配信、あるいは自分のサービスの体験会の情報でもよいでしょう。

特に目立たせたい情報を、目につきやすいところに配置させることができます。

ではCSSはどのように設定すればよいかというと、これに正解はありません。「こうしたい」という希望に対して、それにあわせて設定するものであり、表示させたい情報の内容にもよって変わるでしょう。

目的にあわせてCSSを設定することで、どんな情報でも目立たせることができ、集客に役立ちます。ぜひ自分だけのカスタマイズを作ってみてくださいね。