アメブロで使えるお知らせの外枠テンプレートをコピペで表示する方法

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
アメブロで外枠に色をつけたテンプレートってありますか?

よしたか
シンプルな枠の紹介をコピペで出来るようにしておくよ。

上下ラインのみで先頭にタブで「お知らせ」というシンプルな枠を紹介します

枠色の変更方法も掲載しておきました。

この記事を読むことで
  • アメブロの上下枠線の設定の方法がわかります。
  • 色の変更方法がわかります。

アメブロで枠線をつける方法

囲み枠の反映方法

【囲み枠の反映のさせ方】

  1. 枠内のタグをコピーする
  2. 記事編集画面でHTML表示に切り替え。
  3. コピーしたタグを貼り付ける
  4. 記事編集画面の標準表示に戻す。
  5. 囲み枠内のテキストを変更する

アメブロで使える枠 サンプル

 

アメブロでも使えますよ〜

サンプルはコチラ・・・・

 

お知らせ
テキスト
テキスト
テキスト

 

カラーはご自分で変えることができます。

↓ ↓ ↓

  • 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>

右上のコピーで持っていって活用して下さい。

応用編  定型文として保存して活用する。

定型文ができたら記事ごと保存しておきましょう。

 

記事を複製しておけば、いつでも利用可能になります。

 

 

 

まとめ

今日はアメブロで使える

上下枠線のコードを紹介しました。

 

コピーペーストで設定できます。

簡単な方法で設定できるようにしているので

ぜひ活用して下さい。

 

自分なりの使い方を考えて

進めてみて下さいね(^^)

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事