『はてなブログ』カスタマイズ集 ※随時更新中

f:id:maturikun:20170324204447j:plain

 

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

 

 

 

色コード

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