コピペで使えるブログページの装飾HTML集

コピペで利用できるHMTL装飾ツールです。ブログコンテンツ作成用によく使うモノだけピックアップしてリスト化しています。ほぼ自分の仕事用です。気に入ったモノがあればどうぞご自由に。


リンクボックス【アプリーチ用】

<div id="appreach-box" style="text-align: left;"><img id="appreach-image" src="＠＠＠" alt="250x250" style="float: left; margin: 10px; width: 25%; max-width: 120px; border-radius: 10%;"><div class="appreach-info" style="margin: 10px;">＠＠＠</div><div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>



<div style="border-left: 10px solid #333333; border-bottom: 1px solid #333333; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン09</div>



<div style="padding: 10px; border: 1px solid #333333; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力<br /></div>

あわせて読みたい

ここに本文を入れる

<fieldset style="border:1px solid #333333;"><legend><span style="font-weight:bold;">あわせて読みたい</span> </legend>ここに本文を入れる</fieldset>



<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br></div>


<div style="border-left: 10px solid #000000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">ブラックドット</div>


<div style="border-left: 10px solid #333333; padding-left: 10px; background-color: #333333;　font-weight: bold; font-size: 100%; color: #ffffff;">デザイン06</div>


<div style="background: #f5f5f5; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">グレイ背景ありリボン<br /></div>


<div style="border-left: 10px solid #cccccc; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">グレイドット</div>


<div style="border-left: 10px solid #ff0000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">レッドドット</div>


<div style="border-left: 10px solid #00cc66; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">グリーンドット</div>


<div style="border-left: 10px solid #0033ff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">ブルードット</div>


<div style="border-left: 10px solid #ffcc00; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">イエロードット</div>

点線

---

<hr style="border:1px dashed #999999;">

太文字
<strong>太文字</strong>


太文字・中
<span style="font-size:large;"><strong>太文字・中</strong></span>




<div class="appreach-links" style="float: left;"><div id="appreach-itunes-link" style="display: inline-block;"><a id="appreach-itunes" href="＠＠＠ストア" rel="nofollow"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg" style="height: 40px; width: 135px;"></a></div><div id="appreach-gplay-link" style="display: inline-block;"><a id="appreach-gplay" href="＠＠＠プレイストア" rel="nofollow"><img src="https://nabettu.github.io/appreach/img/gplay_ja.png" style="height: 40px; width: 134.5px;"></a></div></div></div><div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>

関連記事：
あるとないで全然違う！ブログ・サイト運営で役立つ便利なウェブツール