アメブロ

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

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

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

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

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

 

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

Contents

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

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

 

見出しタイトル

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

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

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>
※２箇所の赤字、#3b5998には、お好みのカラーコードを入れて下さいね。

CSSのコード解説

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

CSSコード解説

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

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

まとめ

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

囲み枠を作りました。

 

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

 

あ！

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

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

 

この記事を書いた人
YOSHITAKA
YOSHITAKA
コーチ・コンサル・セラピスト等のお一人起業家向けにWordPressを教えています。
Webが苦手で何から始めていいかわからない方にヒアリングを行い、適切なアドバイスを行い、必要なサポートを行っています。

あなたにお願いです。
メルマガを登録して、情報を受け取ってください。

  今すぐメルマガを受け取る

あなたとは今日しか出会えないかもしれません。
出会いと繋がりを大切にしています!!
あなたは「Web集客」に限界を感じていませんか？

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

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

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

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

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

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

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

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

↓　↓　↓　↓　↓　↓　

今すぐ情報を受け取る!!ここをクリック♪
おすすめの記事