受容の繭

こころ軽やかに生きる内容を記していきたいとおもいます。

【簡単】コピペで使える装飾html囲い線やマーカー

 

 

 

 

初めてブログを作ったら、じぶんのブログをおしゃれに装飾したいなあっておもいますよね。他のブロガーさんみたいに、文字にマーカーを引いたり、おしゃれな見出を作ったり。ぼくはブログ初心者です。初心者のぼくが初心者におすすめの超簡単なhtmlのコピー作りました。全体的に白っぽいブログを、少しカスタマイズできますよ。

 

編集はhtml画面から行う

 

このブログからコピペを考える人なら、おそらく、無料サイトに登録してるんじゃないでしょうか?その場合は、見たまま文字を打ち込む画面と、html画面があるとおもうのです。一つの貼りかたとして、html画面から貼り編集することを前提としますね。手書きでもいいですよ。あとはHTML画面への設置ですね。(すいません。この変はぼくはわかりません)

 

初心者装備一覧

多くの人に使われてる装備一覧です。きょうはそのコードをご紹介します。

文字下に線を引

こういうやつです。

・黄色マーカー(文字半分にかかる)

こういうやつです。

・文字の色を変える

こういうやつです。

・見出しをおしゃれにする

こういうやつです。

・文字を枠で囲む

こういうやつです。

 

 

文字下に引く線で例えると

・文字と書かれている部分に、対象となるご自分の文章をいれてください。つまり、例えば↓の場合なら文章の初めに<hr>を入れ文章の終わりに</hr>と入れます。[きょうは遠足にいきました。]という文章の下にグレーの線を引く場合、

 

<hr>きょうは遠足にいきました。</h>

となります。あとはどのコードも一緒の応用で使えます。

一度メモ帳に張り付けて使う方法もあります。その場合は、文字を挟む最初のコードと後ろのコードを分けて保存すると使いやすいかもしれません。(特にスマホの場合)

 
[グレーの線]

<hr>文字</hr>

 

[赤の線]

<span style="border-bottom: solid 5px red;">文字</span>

 

[黄色マーカー]

<span style="background: linear-gradient(transparent 50%, #ffff66 0%);">  文字</span>

 

[文字の色をかえる]

・“色“と書かれた部分に、使いたい色をローマ字で入力します。青ならblueです。(赤色は使えません)

 

<font color=”色”> 文字 </font>

 

[文字の色を変える赤色限定]

<font color="#ff0000">文字 </font>

 

[見出ピンク]

<div style="border-left: 10px solid #ff6699; border-bottom: 2px solid #ff6699; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;">文字</div>

 

[枠の囲い線グレー]

<div style="border: 1px solid #000; padding: 10px;">文字</div>

 

[枠の囲い線グレーの二重]

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">文字</div>

 

[枠の囲い線水色、四方は丸みあり]

<div style="border:1px solid #0CF;padding:10px;border-radius:10px;">文字</div>

 

[枠の囲い線赤色、四方に丸みなし]

<div style="border: 1px solid #FF0000; padding: 10px;">文字</div>

 

こんかいはごく一般的なものを記載しました。色や線を工夫することで見映えが変わってくることは間違いありません。それにじぶんのブログにも愛着がわきますからね。一緒におしゃれなブログを目指して頑張りましょう!