アメブロの記事の下に、お店の情報を一括で入れる方法について、書きます。
いわゆる「署名」的なもの。記事のフッター部分にあたるものです。
アメブロの記事に署名を入れるメリット
店舗の情報発信として、アメブロを活用している場合、ブログ記事は大切な集客ツールです。
お客様に記事を読んでもらい、お店に興味を持ってもらったとき、
記事の一番下にお店へのリンクがあると、便利です。
ただ、毎回手動で入力するのは大変・・・（汗）
そこで、自動的にお店の情報が入るようにすると、管理が楽になるというメリットがあります。
アメブロの記事に署名を入れるデメリット
ただ、この方法のデメリットは、スマホでは表示されないということです。
スマホでは、フリースペースやCSSの種類が違うので、自動挿入は表示されません。
スマホでブログを読む人が増えてきた中で、この仕様はかなり致命的な気がします・・。
アメブロの記事の下に署名を入れる方法
それでも・・という場合は、以下に方法を書いておきます。
アメブロの記事に署名を入れる手順
という手順となります。
１．署名文を作る
フリースペースに入れる署名文を作ります。
例えば、
サンプルアロマサロン ← ホームページへのリンク
〒000-0000
東京都名古屋区大阪町・・ ← 住所ご予約はこちら ← ご予約フォームへのリンク
と、表示したい場合は、
<div id="teikeibun"><!-- --><span class="title"><a href="ホームページURL" target="_blank">サンプルアロマサロン</a></span> 〒000-0000 東京都名古屋区大阪町・・ <a href="ご予約フォームへのリンク" target="_blank">ご予約はこちら</a><!-- --></div>
というように、内容を入れます。
解説すると、
全体を、 teikeibun という要素で囲っています。
その中に、タイトルだけは別のスタイルを設定できるように <span> 〜 </span> で囲っています。
また、アメブロはフリースペースの改行を自動的に置き換えてしまうので、
意図しない改行が生まれてしまいます。
そこで、改行が自動的に処理されて行間が空きすぎないように、
<!– 〜 –> を前後につけて改行をコメントアウトしています。
まずはこれで、署名としていれる内容ができました。
フリースペースに署名を入れる
まずは、アメーバーにログインをして、ページ上部にある「アメブロ」をクリック
設定・管理 の中にある「フリースペース編集」をクリック
フリースペースの中に、先ほどのタグを挿入して、保存します
そうすると、アメブロのどこか横の部分に表示されるはずです。
フリースペースは、「サイドバーツール」なので、まずは横に表示されちゃいます。
全体だと、このへん。
これは、サイドバーのどこに設定したかによって変わります。
今回は、管理画面を見ると、左下に「フリースペース」が設定されているので、ここに表示されました。
これで、とにかくブログに署名を表示させることだけはできました。
あとは、表示させる場所を調整します。
入れた署名が記事の下に挿入されるようにフリープラグインで制御
位置を調整するには、「jQuery」というスクリプトを使います。
うーん・・わかりやすく言うと、ちょっとホームページを調整するための簡単なプログラムみたいなものです。
※厳密には全く違うので、ごめんなさい（汗
今度はこちらから、「プラグインの追加」を選択します
プラグインリストには、２種類あるので、「フリープラグイン」のタブを開きます
この中に、位置を設定する内容を書いて行きます。
記述はシンプルな以下の内容です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#teikeibun").appendTo(".articleText")
});
</script>
どういうことかというと、
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
これで、「GoogleさんのjQueryを借りますー」という意味です。
<script type=”text/javascript”> 〜 </script> で囲って、
「いまからプログラム的なことを書きますよー」と、アメブロに伝えます。
$(“#teikeibun”).appendTo(“.articleText”)
ここでは、「teikeibunというidに入った内容を、articleText の最後に移動します」という指定です。
articleText というのは、アメブロの記事を囲っている要素のことです。
ちょっと文字が細かいけれど、この部分。
つまり、「Googleさんの力を借りて、定型文を記事の最後に移動する」という意味です。
この内容を保存すると、先ほど追加した提携文が、記事の下に移動します。
記事の下に表示された署名をCSSで調整
あとは、この内容をCSSというスタイルで調整すればOK。
これも、「フリープラグイン」に追記して行きましょう。
例えば、こんな感じ。
<style type="text/css">
#teikeibun {
border: 4px solid #999999;
border-radius: 3px; /* CSS3草案 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
padding: 10px;
}
#teikeibun .title{
font-size: 140%;
font-weight: bold;
border-bottom: 2px solid #999999;
}
</style>
ここでは、 色設定の他に
という設定がされています。
そうすると、こんな感じに表示されます。
これで、アメブロに署名を追加することができました。
この内容は、どの記事を見ても同じものが表示されるようになります。
別の記事でも、こんな感じ。
あとは、上下の空白を調整したり、アイコンを入れてみたり・・
そのあたりは、微調整で対応可能だと思います。
まとめ
アメブロの記事の下に文章を入れるのは、けっこう簡単にできると思います。
ただ、問題は、最初にも書いた通り、スマホでは表示されないということ。
スマホではこの通り、空白になっています。
スマホで、署名を簡単に管理する方法としては、
署名を書いた画像を、すべてのページに手動で挿入する・・というものがあります。
これなら、１つの画像を複数ページで読み込んでいるので、その画像を書き換えれば一括で変更ができる・・。
ただ、テキストとして拾われないことがとてもネックになります。
結論としては、自分の手元にブログを置くことをオススメする
結論としては、集客活動への自由度という点でも、
外部のブログツールからの脱却がどこかのタイミングで必要になると思います。
「アメブロは集客に強い」というのは、今でもきっとその通りだと思うのですが、
という点が、「事業運営」という点で見ると、どこかのタイミングでネックになってくると思います。
自分のブランドを作り、育てると言う点では、
WordPressや、Movable type、a-blog cmsなどを使って、
自分の手元でブログを管理する方法を、やはりお勧めします。
