こんにちは、パソコンワンポイントレッスン！
PCインストラクターの川上です。
記事の下に次のようなご案内枠を作ろう
と思っている方へ･･･
◆ ○○○専門サロン『＊＊＊＊』 ◆
【 OPEN 】 ９：００～１７：００
【 定休日 】 日曜・祝日
【 住 所 】 ○○市□□□
【 ○○専用サロン／完全予約制 】
【 ご予約・お問合せ先 】 ０９０－＊＊＊＊－＊＊＊＊
（施術中は留守電になっております。必ず折り返し致しますので
お手数ですが、お名前とご用件をお願いします。）
◇フェイスメニュー
◇ボディメニュー
◇【〇〇市内・JR◆◆駅周辺】からのアクセス
◇【○○・□□・△△方面】からのアクセス
【 OPEN 】 ９：００～１７：００
【 定休日 】 日曜・祝日
【 住 所 】 ○○市□□□
【 ○○専用サロン／完全予約制 】
【 ご予約・お問合せ先 】 ０９０－＊＊＊＊－＊＊＊＊
（施術中は留守電になっております。必ず折り返し致しますので
お手数ですが、お名前とご用件をお願いします。）
◇フェイスメニュー
◇ボディメニュー
◇【〇〇市内・JR◆◆駅周辺】からのアクセス
◇【○○・□□・△△方面】からのアクセス
いろんな方法がありますが、
１つは、メモ帳などのテキストエディタに次のようなコードを保存しておいて、
<div style="background:#ffeeee; padding:10px; margin:10px; border-radius: 10px; border: 2px dotted #ff0000;"><strong><font color="#cc0066" size="3"> ◆ ○○○専門サロン『＊＊＊＊』 ◆</font></strong><br><br><font color="#000000" size="2"><strong> 【 OPEN 】</strong> ９：００～１７：００ <br><strong> 【 定休日 】</strong> 日曜・祝日<br><strong> 【 住 所 】</strong> ○○市□□□<br><strong> 【 ○○専用サロン／完全予約制 】</strong><br><strong> 【 ご予約・お問合せ先 】</strong><a href="tel:090********"><strong>０９０－＊＊＊＊－＊＊＊＊</strong></a></font><br><font color="#000000" size="1"> （施術中は留守電になっております。必ず折り返し致しますので<br> お手数ですが、お名前とご用件をお願いします。）</font><br><br> <a href="リンクURL"><strong><font color="#3333CC" size="2">◇フェイスメニュー</font></strong></a><br> <a href="リンクURL"><strong><font color="#3333CC" size="2">◇ボディメニュー</font></strong></a><br> <a href="リンクURL"><strong><font color="#3333CC" size="2">◇【〇〇市内・JR◆◆駅周辺】からのアクセス</font></strong></a><br> <a href="リンクURL"><strong><font color="#3333CC" size="2">◇【○○・□□・△△方面】からのアクセス</font></strong></a></div>
このコードを、「HTML表示」や「HTMLタグ」にコピペする、という方法があります。
この場合は、記事を書くごとに、いちいちコピーしなければならないので、あらかじめいくつか適当なタイトルで下書きを作成しておくとよいですね。
そうすれば、あとからスマホや携帯からでも記事を編集・修正・追加することができますからね。
他にも、こんな枠だったり・・・
お店の名前
【住所】○○市○○区○○
【営業時間】○:○○～○:○○
【定休日】○曜 ・祝日
☆アクセス
☆お客様の声
☆ビフォー・アフター
☆ご予約＆お問い合わせ
☆０９０－＊＊＊＊－＊＊＊＊
（施術中は出られませんので折り返しご連絡させていただきます。
お名前・電話番号・ご希望の時間帯をメッセージでお願いします。）
<div style="border: #b0e0e6 3px double; padding: 6px; background-color: #ffffff; margin: 6px; color: #333333; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA"><p><strong>お店の名前</strong></p><p>【住所】○○市○○区○○<br>【営業時間】○:○○～○:○○<br>【定休日】○曜 ・祝日<br></p>☆<a href="URL">メニュー＆料金</a><br>☆<a href="URL">アクセス</a><br>☆<font color="#0000ff"><a href="URL">お客様の声</a><br>☆<a href="URL">ビフォー・アフター</a><br>☆<font color="#0000ff"><a href="URL">ご予約＆お問い合わせ</a><br>☆<a href="tel:090********">０９０－＊＊＊＊－＊＊＊＊</a><br>（施術中は出られませんので折り返しご連絡させていただきます。<br />お名前・電話番号・ご希望の時間帯をメッセージでお願いします。）</div>
記事下の囲い枠を自動挿入する方法
また、いちいちコピペが面倒だ、という方は
フリープラグインとCSSを連携させて、記事を投稿するたびにこういった囲い枠を自動で挿入することができます。（ただし、携帯からはできないですが。）
自動で表示するようにするには、次のスクリプトをフリープラグインに追加します。
（ただし、jQueryを使っていますので、jQueryの宣言はプラグインの先頭に入っていることとします）
＜フリープラグインに追加＞
<!-- 記事下囲い枠の自動挿入 -->
<script type="text/javascript">
$(function(){
$("div.articleText").append('<div class="kijiwaku">自動挿入させたい囲い枠内の内容</div><br>');
}
);
</script>『自動挿入させたい囲い枠の内容』の部分にHTMLタグを挿入します。
ただし、改行をなくして、1行にして代入する必要があります。
（改行して表示させたい場合は、<br>を入れます。）
それから、
［CSSの編集］で次のCSSコードを追加して、自動挿入された内容に囲い枠をつけます。
＜CSSに追加＞
/* 自動的に記事下に挿入する囲い枠 */
.kijiwaku{
border: 2px dotted #ff0000;/* 枠 */
background-color:#ffeeee; /* 背景色 */
border-radius: 10px;/* 角丸 */
padding:10px;/* 余白 */
margin: 15px 0; /* マージン */
}ただし、この自動挿入のプラグインを使用した場合、実際に投稿されないと表示の確認ができないのでご注意を。
「表示の確認をする」を押しても表示されませんので、一度投稿して試してみるとよいですね。
また、自動挿入のプラグインを設置した場合、今まで投稿した記事に常に表示されてしまいます。
ですので、入れたくない記事のときは、特定の記事だけをはずすスクリプトをプラグインに設置する必要があります。
＜フリープラグインに追加＞
<!-- 記事下の囲い枠を非表示 -->
<script type="text/javascript">
$(function(){
$("div.nowaku + div.kijiwaku").css("display","none");
}
);
</script>そして、次のHTMLタグを自動挿入したくない記事内の最後に書きます。（コピペするとよいです）
＜HTML表示で、記事内の最後に記入＞
<div class="nowaku"></div>･･･
やっぱり、自動挿入は面倒かも･･･^^;
と思った方は、メモ帳にコードを保存しておいて、記事本文にコピペしていくとよいですね^^!
さらに･･･
自動挿入の場合は、スマホや携帯では表示されませんのでご注意ください。
（スマホでも、パソコン版で見ている場合は表示されます）
スマホで見るかたのためを思うのであれば、自動挿入するよりも、面倒でも毎回コピペした方がいいですね。
（メモ帳に定型文をタグごと保存しておいて、毎回コピー＆ペーストするとよいです。）
＜参考＞
集客用に記事を作成している方は、さらに、記事の最後（枠の下）に
・どこの方が対象者なのか（実際、どこからお越しいだいているか）
・そして、そこで何ができるのか（コースや効果など）
を書かれるとよいですね。（次↓のように^^）
札幌市内全域（南区・豊平区・中央区・北区・西区・厚別区・手稲区・白石区・東区・清田区）よりお越しいただいております。
ギフトや贈り物に最適なフラワーアレンジ、ウェディングに素敵なブーケ・花冠・リスレット、プリザーブドフラワーの作成指導を行なっております。
･･･など^^
＜参照１＞
こちらの記事もご参照くださいませ↓↓↓
記事の下にあるシンプルなメニューバーはどのように･･･
＜参照２＞
【グーグルクロム限定】定型の囲み枠を簡単に挿入するには（Firefoxの追記有り）
＜追記＞
2017年6月5日より、アメブロPC版で「記事のコピー機能」が新登場しましたので、そちらを利用されるとよいです↓