アメブロの「見出し付き・四隅角丸・影付きのお知らせ枠」をコピペで作る方法

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

初心者
オーソドックスな囲み枠もここでは教えてくれますか??

よしたか
コピペでも簡単につくれますのでぜひ利用してください。

 

この記事を読むことで
  • アメブロのオーソドックスな見出し入り囲み枠の作り方がわかります。
  • CSSを貼り付けて自分のアメブロに反映することができます。
  • 簡単なCSS操作がわかります。

アメブロのオーソドックスな見出し入り囲み枠の作り方

オーソドックスな囲みのコード

 

見出しタイトル

テキスト
テキスト
テキスト

この枠ですが、以下のようなコードを書きます。

CSSコード コピペ

<div style=”border:1px solid#3b5998; margin:5px; padding:0;border-radius:5px; box-shadow:#cccccc 3px 3px 3px;”><p style=”margin:0; padding:3px 12px; background:#3b5998; color:#ffffff;”>見出しタイトル</p><div style=”padding:12px;”>
テキスト<br>
テキスト<br>
テキスト<br>
</div></div>
※2箇所の赤字、#3b5998には、お好みのカラーコードを入れて下さいね。

CSSのコード解説

今日もちょっとお勉強の時間です。

CSSコード解説

border:1px
⇒線の太さ
solid #3b5998;
⇒線の色
margin:5px;
⇒余白
padding:0;
border-radius:5px;
⇒四隅の丸み

box-shadow:#cccccc 3px 3px 3px;”
⇒影の色と大きさ

まとめ

今回は単純ながらもしっかりとデザインができる

囲み枠を作りました。

 

デザインに著作権はありませんのでどんどん活用してください。

 

あ!

僕もメルマガ発行しているので

忘れずに登録して下さい(^^)

 

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

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

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

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

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

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

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

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

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

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事