はてなブログでマーカー風なラインを引く方法
ご訪問いただき、ありがとうございます。
まだまだ初心者ブロガーですが、頑張りたいと思います。
↓下記のランキングをクリックして頂けると、明日の更新の活力になります。応援よろしくお願いします！
株式 ブログランキングへ
アフィリエイトサイト構築のために文字をマーカー風に装飾する方法を調べたので、ついでにこのはてなブログでも実装してみます。CSSとHTMLで簡単に出来るので、皆さんもご参考に。
こんなやつになります。
CSS（基本の定義）
background: linear-gradient(transparent 線の太さ（%）, カラーコード（#xxxxxx） 0%);
「線の太さ」は%で指定します。
0%が一番太くなるので、数字が大きいほど細いライン（マーカー風）になります。
例：太めの黄色いマーカー風
CSS
.yellow-line {
background: linear-gradient(transparent 10%, #fff001 0%);
}
HTML
<span class="yellow-line">黄色のマーカー</span>
黄色のマーカー
はてなブログでの実装方法
はてなブログの「設定」⇒「デザイン」⇒「カスタマイズ」に進み、「デザインCSS」の欄に上記のCSSを貼り付けます。
あとは、ブログ記事を書く際に、「HTML編集」のモードで上記のHTMLコードの書き方をすればマーカー風な装飾が可能になります。
スポンサーリンク
