『はてなブログ』カスタマイズ集

はてなブログで自分がよく使用するコードをまとめます!

色コード

f:id:maturikun:20170324205120j:plain

このサイトで色を選択するとカラーコードが表示されます。

html-color-codes.info

枠線

<div style=”border-style: solid ; border-width: 1px;”>ここに文字を入力</div>

枠線について紹介

上記のコードを利用すると上のような枠線になります。

これをHTML編集に打ち込むことで記事に枠線を加えることができます。

枠線は基本的なパターンから応用することで、様々な枠線を表示させることができます。

枠線の太さを変更

<div style=”border-style: solid ; border-width: 1px;”>ここに文字を入力</div>

赤字のところが文字の大きさを指定する数字です。

この部分を変更することで枠線の太さを変更できます。

線の太さ1px

<div style=”border-style: solid ; border-width: 1px;”>線の太さ1px</div>

線の太さ3px

<div style=”border-style: solid ; border-width: 3px;”>線の太さ1px</div>

線の太さ5px

<div style=”border-style: solid ; border-width: 5px;”>線の太さ1px</div>

  枠線の色を変更

<div style=”border-style: solid ; border-width: 1px;border-color: #ff0000;“>ここに文字を入力</div>

緑文字の部分を追加することで色を変更できます。

<div style=”border-style: solid ; border-width: 1px;border-color: #ff0000;“>ここに文字を入力</div>

青文字が色コードです。この部分を好きな色コードに変更してください。

HTMLカラーコード ⇦カラーコード一覧

赤色 #ff0000

<div style=”border-style: solid ; border-width: 1px; border-color: #ff0000; “>赤色 #ff0000</div>

太さ3px 色 #5882FA

 <div style=”border-style: solid ; border-width: 3px; border-color:#5882FA; “>太さ3px 色 #5882FA</div>

 線の種類を変更

 <div style=”border-style: solid ; border-width: 1px; border-color: #ff0000; “>ここに文字を入力</div>

オレンジ文字を変更することで線の種類を変更できます。

 実線 solid

 <div style=”border-style: solid ; border-width: 2px; border-color: #FF8000; “>実線 solid</div>

 点線 dotted

<div style=”border-style:dotted ; border-width: 2px; border-color: #FF8000; “>点線dotted</div> 

 破線 dashed

<div style=”border-style:dashed ; border-width: 2px; border-color: #FF8000; “>破線dotted</div> 

 二重線 double

 <div style=”border-style:dashed ; border-width: 2px; border-color: #FF8000; “>二重線 double</div> 

※二重線は線の太さを3px以上にする必要があります!

『リンク』枠組みカスタマイズ

↓のようにリンクをオシャレに挿入することができるようになる、カスタマイズです。詳細は以下をご覧ください。

 🌟今後も随時更新していきます! !

閲覧頂きありがとうございました。

今後もよろしくお願いします!!

f:id:maturikun:20170322214437j:plain

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です