こんにちは。
『やさしいブログの作り方』の松田です。
アメブロカスタマイズの松本さんのブログで紹介されていた、ふせん風囲み枠。
こんな感じの囲み枠が記事内に書けるようになります。（やり方はこちら。）
で、それを応用して、サイドバーのフリースペースにこんなお知らせ枠を作ってみました。＾＾
ふせん風の囲み枠を使って、その中にイメージ画像を１つ、そしてその詳細記事へのリンクを貼ったテキストを入れています。
レッスンやイベントの告知、新メニューの紹介、メルマガ登録記事など用途はいろいろありそうですね。＾＾
松本さんの色パターンおよびタグを参考に以下の種類を作りました。
【黄色】<div style="margin:30px 10px;padding:20px;word-break:break-all;box-shadow:4px 4px 4px #cccccc;background:#ffffcc;line-height:1.8;"><div style="width:60%;height:35px;opacity:0.15;margin:-35px auto 10px;background:#cccccc;transform:rotate(-5deg)"></div><img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:10px 0;" src="画像のアドレス" alt="" border="0" /><a href="リンク先のアドレス" style="color:#0000ff;font-weight:bold;text-decoration:underline;">ここにテキストが入ります。</a></div>
【ピンク】<div style="margin:30px 10px;padding:20px;word-break:break-all;box-shadow:4px 4px 4px #cccccc;background:#ffffcc;line-height:1.8;"><div style="width:60%;height:35px;opacity:0.15;margin:-35px auto 10px;background:#cccccc;transform:rotate(-5deg)"></div><img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:10px 0;" src="画像のアドレス" alt="" border="0" /><a href="リンク先のアドレス" style="color:#0000ff;font-weight:bold;text-decoration:underline;">ここにテキストが入ります。</a></div>
【青】<div style="margin:30px 10px;padding:20px;word-break:break-all;box-shadow:4px 4px 4px #cccccc;background:#ffffcc;line-height:1.8;"><div style="width:60%;height:35px;opacity:0.15;margin:-35px auto 10px;background:#cccccc;transform:rotate(-5deg)"></div><img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:10px 0;" src="画像のアドレス" alt="" border="0" /><a href="リンク先のアドレス" style="color:#0000ff;font-weight:bold;text-decoration:underline;">ここにテキストが入ります。</a></div>
上記枠内のタグをコピーして、サイドバーのフリースペース編集に貼り付けると、ふせん風お知らせ枠が表示されます。
その後、タグの記述内の赤文字の部分を変更します。
画像のアドレスの部分には表示したい画像のアドレスを入れます。
表示させる画像は、アメブロにアップロードした画像一覧の中から取得します。
記事を書く画面にある「画像ボタン」をクリックし、表示したい画像の上で右クリック→「画像URLをコピー」を選択します。
「画像URLをコピー」がない場合は、プロパティを開いて表示される画像アドレスをコピーしてください。
そして画像のアドレスのところにコピーしたアドレスを差し替えてください。
次に、リンク先のアドレスには、クリックした時に表示させたい記事のアドレスに変更します。
最後に、ここにテキストが入ります。の部分は、を貼りたい文章に変更すれば完成です。
最後までお読みいただきありがとうございました。６月１日、電子出版しました！
