コピペでブログの文字や見出しをおしゃれにする方法

【ブログアレンジ(画像角丸、文字装飾など)】
ここはeroメインのブログですが、一応ero以外でも生きてるよーってことで、このブログで使ってるアレンジ技を紹介してみようと思います。


ただ、1文字でも間違えるとブログの表示が大きく崩れてしまうこともあるので、

HTMLやCSSという、プログラム的な作業が好きな方か、冒険してみたい方のみトライしてみて下さい。

※ブログサービスやもともとの設定によって同じようにならない場合や、個別に修正が必要な場合があります。



1 装飾タグの紹介



ちょっと目立たせたい文字や、見出しをつけたい文字を、HTMLタグで囲うだけであら不思議、文字が装飾されます。

<b>ディルド</b> → ディルド (太字)

<u>クリトリス</u> → クリトリス (下線)

<i>おっぱい</i> → おっぱい (斜体)

<s>アナル</s> → アナル (取り消し線)



2 色もつけられるよ



<span style="color:red">バイブ</span> → バイブ
カラー

<span style="color:green"><b>クンニ</b></span> → クンニ
カラー+太字

<span style="color:violet"><b><u>フェラ</u></b></span> → フェラ
カラー+太字+下線



3 サイズも変えられるよ



<span style="color:orange; font-size: 100%">バイブ</span>

バイブ

<span style="color:yellowgreen; font-size: 150%">バイブ</span>

バイブ

<span style="color:skyblue; font-size: 200%">バイブ</span>

バイブ

<span style="color:blue; font-size: 300%">バイブ</span>

バイブ

<span style="color:violet; font-size: 500%">バイブ</span>

バイブ



4 見出しのhタグも便利



hタグはすべて太字。文字サイズはh1~h6の数字を変えるだけでOKです。

<h1>ディルドの魅力</h1>

ディルドの魅力



<h2>ディルドの魅力</h2>

ディルドの魅力



<h3>ディルドの魅力</h3>

ディルドの魅力



<h4>ディルドの魅力</h4>

ディルドの魅力



<h5>ディルドの魅力</h5>

ディルドの魅力


<h6>ディルドの魅力</h6>

ディルドの魅力




5 見出しタグにも色つけできるよ



※ 前後に改行が入るので、それがいやな場合は3で紹介した<span>タグがおすすめです。

<h1 style="color:orange">ディルドの魅力</h1>

ディルドの魅力



<h2 style="color:gold ">ディルドの魅力</h2>

ディルドの魅力



<h3 style="color:yellowgreen">ディルドの魅力</h3>

ディルドの魅力



<h4 style="color:skyblue">ディルドの魅力</h4>

ディルドの魅力



<h5 style="color:blue">ディルドの魅力</h5>

ディルドの魅力


<h6 style="color:violet">ディルドの魅力</h6>

ディルドの魅力




6 見出しhタグのデザインいろいろ



このタグを装飾するだけでも、ブログ全体が個性的でおしゃれに見えてきます。

今回は記事内で一般的に見やすい大きさのh3タグで解説していきますが、h1~h6、どれでもできます。


<h3 style=" border-bottom: solid 3px blue;">ディルドの魅力</h3>

ディルドの魅力




<h3 style=" color:brown; border-bottom: dashed 2px brown; ">ディルドの魅力</h3>

ディルドの魅力




<h3 style=" border-bottom: double 3px green;">ディルドの魅力</h3>

ディルドの魅力




<h3 style="color: blueviolet;/*文字色*/ padding: 0.5em 0;/*上下の余白*/ border-top: solid 3px #364e96;/*上線*/ border-bottom: solid 3px #364e96;/*下線*/ ">ディルドの魅力</h3>

ディルドの魅力




<h3 style=" padding: 0.5em;/*文字周りの余白*/ color: #494949;/*文字色*/ background: #fffaf4;/*背景色*/ border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/ ">ディルドの魅力</h3>

ディルドの魅力




<h3 style=" background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 1px #96c2fe; padding: 0.2em 0.5em; color: #454545; border-radius: 0.2em;/*角丸*/">ディルドの魅力</h3>

ディルドの魅力




<h3 style="color: #364e96;/*文字色*/ border: solid 3px #364e96;/*線色*/ padding: 0.5em;/*文字周りの余白*/ border-radius: 0.5em;/*角丸*/ ">ディルドの魅力</h3>

ディルドの魅力




4 いたずら編



以下、ぜひあなたのブログにもコピペして使ってください( ̄+ー ̄*)

<span style="color:red; font-size: 2000%; ">ディルドの魅力!</span>

ディルドの魅力!







また追記します!



↓こちらの記事を参考にさせて頂きました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

h1?h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。





結局erogっぽい記事になりましたねf(^^;)

まぁ、HTMLやCSSの解説で素材がeroなんてレアだと思うので、これで行くことにします。


※CSS(style)は本来は別のファイルに書いたほうがすっきりしますが、少し難しくなるのと、アメブロなどではそういったことができないので、ここではあえて本文内に記述する方法としています。



関連記事

0 Comments