見出し装飾のお話「ストライプ」、 改良～♪

先週のブログでご紹介した見出し修飾「ストライプ」。

コメントをいただいたり、さっそく使われている記事を拝見したり。

そういうの、とーっても嬉しいものです

で、今日は。。。

お使いになったブログを拝見して思ったんですけど、見出しの文字数が多くて2行に折り返した場合、ちょっとギューギューな感じ。。。

なので、行間を少し広くしたバージョンを。

ピンクのストライプ
2行になってもいい感じ 

前回同様ブログ記事に使う時は、「HTML表示」のところに下記文字列をコピペすると使えます。

<div style="font-size: 1.5em; font-weight: bold; color: #333333; line-height: 1.3; padding: 10px; background: repeating-linear-gradient(45deg, #febccb, #febccb 3px, #ffd8e1 3px, #ffd8e1 6px);">★★★ここに好きな言葉を入力してくだいね★★★</div>

グリーンのストライプ

<div style="font-size: 1.5em; font-weight: bold; color: #333333; line-height: 1.3; padding: 10px; background: repeating-linear-gradient(45deg, #bbe094, #bbe094 3px, #d8ffc3 3px, #d8ffc3 6px);">★★★ここに好きな言葉を入力してくだいね★★★</div>

ピンクのストライプ

<div style="font-size: 1.5em; font-weight: bold; color: #333333; line-height: 1.3; padding: 10px; background: repeating-linear-gradient(45deg, #febccb, #febccb 10px, #ffd8e1 10px, #ffd8e1 20px);">★★★ここに好きな言葉を入力してくだいね★★★</div>

グリーンのストライプ

<div style="font-size: 1.5em; font-weight: bold; color: #333333; line-height: 1.3; padding: 10px; background: repeating-linear-gradient(45deg, #bbe094, #bbe094 10px, #d8ffc3 10px, #d8ffc3 20px);">★★★ここに好きな言葉を入力してくだいね★★★</div>

2行に限らず、何行でも大丈夫 

ただ、3行・4行となると、見出しというより飾り枠・背景な感じですね。

お好みでどーぞ 

「Happy Clover」って

「Happy Clover」の

「パソコン操作個別レッスン」

つながってくださる方、募集中
よろしくお願いします