フリースペースや記事で使える囲みのお知らせやリンク


内藤です。

フリースペースや記事の中で、「メニュー一覧」とか、「アクセス」の記事にリンクをはって、さらにそれらを枠で囲いたい場合ってありますよね。

例えばこんな感じに


見やすいですよね。

フリースペースや、記事内に入れる場合はHTMLで書き込まないといけません。

サンプルを作りましたので、コピーして、必要箇所を書き換えて使ってみてください

<div style="border:3px double #ff99ff;background:#FFF4FF;padding:10px;">
【お店の名前】
住所:
営業時間:
定休日:
電話番号:
<a href="ここにリンク先のURL">メニュー・料金</a>
<a href="ここにリンク先のURL">アクセス</a>
<a href="ここにリンク先のURL">お客様の声</a>
<a href="ここにリンク先のURL">お問合せ</a>
</div>

最初にある 

<div style="border:3px double #ff99ff;background:#FFF4FF;padding:10px;">

 の部分で枠の色や線の種類を決めています。

border:3px doble #ff99ff とは、 
枠の線:太さ3px 二重線 色が#ff99ff という事です。

線の種類には二重線(duble)の他に

実線(一本線) solid
点線 dotted
破線 dashed

などもあります

色のカラーコードはこちらを参考にしてみてください

background:#FFF4FF; は
背景の色が#FFF4FF という事になります。

好みに合わせて作ってみてください。

また、

<a href="ここにリンク先のURL">メニュー・料金</a>

の部分は、「ここにリンク先のURL」の部分にリンクさせたい記事のURLを入れます。

そして、<a href="ここにリンク先のURL"> と </a> の間にある言葉が、リンクがかかった状態で表示される文字になります。

フリースペースでも、記事内でも使えますので試してみてください
記事の場合はHTML表示にして貼り付けてください

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください