こんにちは。YOSHITAKA（@YOSHITA19704216）です。
初心者
アメブロで外枠に色をつけたテンプレートってありますか？
よしたか
シンプルな枠の紹介をコピペで出来るようにしておくよ。
上下ラインのみで先頭にタブで「お知らせ」というシンプルな枠を紹介します
枠色の変更方法も掲載しておきました。
この記事を読むことで
- アメブロの上下枠線の設定の方法がわかります。
- 色の変更方法がわかります。
Contents
アメブロで枠線をつける方法
囲み枠の反映方法
fa-arrow-circle-right
【囲み枠の反映のさせ方】
- 枠内のタグをコピーする
- 記事編集画面でHTML表示に切り替え。
- コピーしたタグを貼り付ける
- 記事編集画面の標準表示に戻す。
- 囲み枠内のテキストを変更する
アメブロで使える枠 サンプル
アメブロでも使えますよ〜
サンプルはコチラ・・・・
お知らせ
テキスト
テキスト
テキスト
テキスト
テキスト
カラーはご自分で変えることができます。
↓ ↓ ↓
- background:#009DBF
- solid #009DBF;
⇒2つのカラーコードは統一させてください。
カラーコードはコチラでお好きな色を見てください。
上の見本のコードはコチラ
↓ ↓ ↓
<div style="margin:0; padding:0; width:90px; height:25px; background:#009DBF; border-top-left-radius:5px; border-top-right-radius:5px; text-align:center; color:#ffffff;">お知らせ</div><div style="border-top:2px solid #009DBF; border-bottom:2px solid #009DBF; padding:20px 10px; word-break:break-all;"> ここに本文 ここに本文 ここに本文 </div>
右上のコピーで持っていって活用して下さい。
応用編 定型文として保存して活用する。
定型文ができたら記事ごと保存しておきましょう。
記事を複製しておけば、いつでも利用可能になります。
まとめ
今日はアメブロで使える
上下枠線のコードを紹介しました。
コピーペーストで設定できます。
簡単な方法で設定できるようにしているので
ぜひ活用して下さい。
自分なりの使い方を考えて
進めてみて下さいね(^^)
