アメブロの記事の下に、お店の情報を入れる

アメブロの記事の下に、お店の情報を一括で入れる方法について、書きます。

いわゆる「署名」的なもの。記事のフッター部分にあたるものです。

 

アメブロの記事に署名を入れるメリット

店舗の情報発信として、アメブロを活用している場合、ブログ記事は大切な集客ツールです。

お客様に記事を読んでもらい、お店に興味を持ってもらったとき、

記事の一番下にお店へのリンクがあると、便利です。

 

ただ、毎回手動で入力するのは大変・・・(汗)

そこで、自動的にお店の情報が入るようにすると、管理が楽になるというメリットがあります。

 

アメブロの記事に署名を入れるデメリット

ただ、この方法のデメリットは、スマホでは表示されないということです。

スマホでは、フリースペースやCSSの種類が違うので、自動挿入は表示されません。

スマホでブログを読む人が増えてきた中で、この仕様はかなり致命的な気がします・・。

 

アメブロの記事の下に署名を入れる方法

それでも・・という場合は、以下に方法を書いておきます。

 

アメブロの記事に署名を入れる手順

  1. 署名文を作る
  2. フリースペースに署名を入れる
  3. 入れた署名が記事の下に挿入されるようにフリープラグインで制御
  4. 記事の下に表示された署名をCSSで調整

という手順となります。

 

1.署名文を作る

フリースペースに入れる署名文を作ります。

例えば、

サンプルアロマサロン ← ホームページへのリンク

〒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> で囲っています。

 

また、アメブロはフリースペースの改行を自動的に置き換えてしまうので、

意図しない改行が生まれてしまいます。

そこで、改行が自動的に処理されて行間が空きすぎないように、

<!– 〜 –> を前後につけて改行をコメントアウトしています。

まずはこれで、署名としていれる内容ができました。

 

フリースペースに署名を入れる

まずは、アメーバーにログインをして、ページ上部にある「アメブロ」をクリック

スクリーンショット 2014-12-04 18.18.47

 

設定・管理 の中にある「フリースペース編集」をクリック

スクリーンショット 2014-12-04 18.19.09

 

フリースペースの中に、先ほどのタグを挿入して、保存します

 

スクリーンショット 2014-12-04 18.19.48

そうすると、アメブロのどこか横の部分に表示されるはずです。

フリースペースは、「サイドバーツール」なので、まずは横に表示されちゃいます。

スクリーンショット 2014-12-04 18.20.10

 

全体だと、このへん。

これは、サイドバーのどこに設定したかによって変わります。

スクリーンショット 2014-12-04 18.22.03

今回は、管理画面を見ると、左下に「フリースペース」が設定されているので、ここに表示されました。

スクリーンショット 2014-12-04 18.29.17

 

これで、とにかくブログに署名を表示させることだけはできました。

あとは、表示させる場所を調整します。

 

 

入れた署名が記事の下に挿入されるようにフリープラグインで制御

位置を調整するには、「jQuery」というスクリプトを使います。

うーん・・わかりやすく言うと、ちょっとホームページを調整するための簡単なプログラムみたいなものです。

※厳密には全く違うので、ごめんなさい(汗

 

今度はこちらから、「プラグインの追加」を選択します

スクリーンショット 2014-12-04 18.32.47

プラグインリストには、2種類あるので、「フリープラグイン」のタブを開きます

スクリーンショット 2014-12-04 18.34.15

 

この中に、位置を設定する内容を書いて行きます。

記述はシンプルな以下の内容です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
$("#teikeibun").appendTo(".articleText")
});
</script>

スクリーンショット 2014-12-04 18.52.41

 

どういうことかというと、

<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 というのは、アメブロの記事を囲っている要素のことです。

ちょっと文字が細かいけれど、この部分。

スクリーンショット 2014-12-04 18.40.37

 

つまり、「Googleさんの力を借りて、定型文を記事の最後に移動する」という意味です。

 

この内容を保存すると、先ほど追加した提携文が、記事の下に移動します。

スクリーンショット 2014-12-04 18.45.39

 

記事の下に表示された署名を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>

ここでは、 色設定の他に

  • teikeibun というボックスには、外枠をつけて、10px分余白をつける
  • teikeibun の中の title という要素には、下線をつけて文字を大きくする

という設定がされています。

そうすると、こんな感じに表示されます。

スクリーンショット 2014-12-04 18.59.39

これで、アメブロに署名を追加することができました。

この内容は、どの記事を見ても同じものが表示されるようになります。

 

別の記事でも、こんな感じ。

スクリーンショット 2014-12-04 19.01.05

 

あとは、上下の空白を調整したり、アイコンを入れてみたり・・

そのあたりは、微調整で対応可能だと思います。

 

まとめ

アメブロの記事の下に文章を入れるのは、けっこう簡単にできると思います。

ただ、問題は、最初にも書いた通り、スマホでは表示されないということ。

 

スマホではこの通り、空白になっています。

スクリーンショット 2014-12-04 19.03.14

 

 

スマホで、署名を簡単に管理する方法としては、

署名を書いた画像を、すべてのページに手動で挿入する・・というものがあります。

これなら、1つの画像を複数ページで読み込んでいるので、その画像を書き換えれば一括で変更ができる・・。

 

ただ、テキストとして拾われないことがとてもネックになります。

 

結論としては、自分の手元にブログを置くことをオススメする

結論としては、集客活動への自由度という点でも、

外部のブログツールからの脱却がどこかのタイミングで必要になると思います。

 

「アメブロは集客に強い」というのは、今でもきっとその通りだと思うのですが、

  • 商用利用すると、消される可能性がある
  • どれだけ記事を書いても、結局はアメブロの資産である

という点が、「事業運営」という点で見ると、どこかのタイミングでネックになってくると思います。

 

自分のブランドを作り、育てると言う点では、

WordPressや、Movable typea-blog cmsなどを使って、

自分の手元でブログを管理する方法を、やはりお勧めします。

 

このページについてのお問い合わせ

必須お名前
フリガナ
必須メールアドレス
必須確認のためもう一度
メッセージ
こんなブログも読まれています