こんにちは。YOSHITAKA（@YOSHITA19704216）です。
初心者
もう少し見出しを小さくした枠パターンはありますか？？
よしたか
簡単な知識ですからすぐにできますよ。
見出しが枠の上に乗るようなスタイルの表示方法です。
より見出しっぽくなったスタイルの紹介です。
見出しタイトル
こういった囲み枠をコピペでできるようにします
この記事を読むことで
- 見出しの真ん中に線が通るスタイルの見出し付きの枠線の作り方がわかります。
- アメブロにコピペで貼り付けることができます。
Contents
見出しの真ん中に線が通るスタイルの見出し付きの枠線の作り方
見出し3
最初に紹介しましたが
こういった枠線を作るコピペの方法をお伝えします。
見出しタイトル
こういった囲み枠をコピペでできるようにします
アメブロの記事内に適用するには
「ＨＴＭＬタグを表示」に切り替えてから
下記のタグを貼り付けてください。
<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>
「見出しタイトル」の所には見出しを入れるのですが
文字が長くなりすぎるとスマートフォンで見た時に
２段に折り返されるので表示が崩れる場合があります。
１０文字前後までの文字数に納めることをおすすめします。
アメブロに貼り付けたらできます
fa-arrow-circle-right
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の部分にはご自身の好みのカラーコードを入れてください。
カラーコードはコチラの一覧から探してください
まとめ
今回はアメブロの枠線の作りかたを紹介しました。
デザインはいろんなサイトで公開されていますから
ご自身のお好きな形で進めていって下さい。
メルマガも発行していますので
登録よろしくお願いします(^^)
