無職ぽこのらくがき

自由に好きなことを好きなだけなぐり書き

【コピペで簡単】はてなブログで愛用しているHTMLカスタマイズ3選

 本ページはプロモーションが含まれています

Google AdSense合格者9人目の方の部分でカスタマイズについて触れたので軽くご紹介!

※リンクを貼るために作成しました(笑)

 

私が愛用しているHTMLカスタマイズ3選になります!

 

コピペで使える他のサイトもたくさんあるのでお好みのものをぜひ見つけてみてください!

 

 

オレンジ色枠

 

◆この記事はこんな方にオススメ◆ ここに本文を入力します。
見出し付き直線の囲み枠例です。

 

使用したい方は下記をコピペ!

<fieldset style="border:2px solid #ffa500;"><legend><span style="font-size: 16px; color: #ffa500; font-weight:bold;">
◆この記事はこんな方にオススメ◆
</span> </legend>
ここに本文を入力します。<br>
見出し付き直線の囲み枠例です。
</fieldset>

 

 

赤色枠

 

この記事を読めばわかること こういうのよく見ますよね。
こちらが今回のポイントです!みたいな。

 

 

使用したい方は下記をコピペ!

 

<fieldset style="border:2px solid #fc4a1a;"><legend><span style="font-size: 18px; color: #fc4a1a; font-weight:bold;">
この記事を読めばわかること
</span> </legend>
こういうのよく見ますよね。<br>
こちらが今回のポイントです!みたいな。
</fieldset>

 

 

テープ付き付箋

 

 

ここに文章

 

 

使用したい方は下記をコピペ!

 

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"> </div>
<!-- ここまでテープ -->
<div style="background: #e0ffff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p>
</div>
<p> </p>

 

 

簡単使用方法説明

 

ざっくり説明だけしておきます(パソコンでの作業用です)

 

①「使用したい方はコピペ」部分のコードをコピー

 

コピーするだけで大丈夫!

 

②「HTML編集画面」に移動



上記赤丸部分を選択

 

③「HEML編集画面」に「貼り付け」

 

 

挿入したい部分に「貼り付け」!

 

※最初は文章中に入れるのが大変なため、挿入したい部分をめっちゃ改行しておくのがオススメ!

 

④「編集みたまま」に戻る

 

 

戻ったらちゃんと表示されているはず!!!

 

以上!!!

 

 

まとめ

 

コピペだけで簡単カスタマイズができるのでぜひやってみてください!!

 

もっといろんなのが見たいって方が

はてなブログ カスタマイズ 枠」で検索!!!

 

好きな枠を見つけて、どんどんブログ楽しんでいきましょう!!!