アメブロの「短い見出し付き、囲み枠」のコピペで使えるCSSでアメブロカスタマイズの方法をお伝えします。

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

初心者
もう少し見出しを小さくした枠パターンはありますか??

よしたか
簡単な知識ですからすぐにできますよ。

 

見出しが枠の上に乗るようなスタイルの表示方法です。

より見出しっぽくなったスタイルの紹介です。

見出しタイトル
こういった囲み枠をコピペでできるようにします

 

この記事を読むことで
  • 見出しの真ん中に線が通るスタイルの見出し付きの枠線の作り方がわかります。
  • アメブロにコピペで貼り付けることができます。

見出しの真ん中に線が通るスタイルの見出し付きの枠線の作り方

見出し3

 

最初に紹介しましたが

こういった枠線を作るコピペの方法をお伝えします。

 

見出しタイトル
こういった囲み枠をコピペでできるようにします

 

メブロの記事内に適用するには

「HTMLタグを表示」に切り替えてから

下記のタグを貼り付けてください。

 

<div style="height:12px;">
<span style="margin-left:10px; padding:6px 10px; background:#3b5998; color:#ffffff; font-weight:bold;border-radius:5px;">
見出しタイトル</span></div>
<div style="border:2px solid #3b5998; padding:30px 15px 10px;border-radius:5px;">テキスト
テキスト<br>
テキスト<br>
</div>

 

「見出しタイトル」の所には見出しを入れるのですが

文字が長くなりすぎるとスマートフォンで見た時に

2段に折り返されるので表示が崩れる場合があります。

 

10文字前後までの文字数に納めることをおすすめします

アメブロに貼り付けたらできます

CSSコードをコピペして貼り付けて下さい

<div style=”height:12px;”> <span style=”margin-left:10px; padding:6px 10px; background:#3b5998; color:#ffffff; font-weight:bold;border-radius:5px;”> 見出しタイトル</span></div>

<div style=”border:2px solid #3b5998; padding:30px 15px 10px;border-radius:5px;”>テキスト テキスト<br> テキスト<br> </div>

#3b5998の部分にはご自身の好みのカラーコードを入れてください。

カラーコードはコチラの一覧から探してください

まとめ

 

今回はアメブロの枠線の作りかたを紹介しました。

デザインはいろんなサイトで公開されていますから

ご自身のお好きな形で進めていって下さい。

 

メルマガも発行していますので

登録よろしくお願いします(^^)

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

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

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

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

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

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

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

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

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

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事