投稿日: 2018/02/02
投稿者:webコラム
こんにちは！ ライターのモモタロウです。
今回は、はてなブログカスタマイズ デザイン下線を設定する方法をお伝えします。
はてなブログにデザイン下線を引くには？
まず、はてなブログにログインします。
その後、「ダッシュボード」→「デザイン」→「CSS編集」をクリックします。
以下のコードをCSS編集に書き込みます。
.under {text-decoration: underline;}
このコードを書き込むことにより、「ブログを書く」の「HTML編集」に、以下のようにタグを編集すると下線を引くことができます（タイトルは「編集 みたまま」画面で入力しておきます）。
【「ブログを書く」HTML編集に入力するタグ】
<p>例文：<span class="under">下線部分</span>です。<span class="under">下線部分</span>です。下線を引くことができました。</p>
CSS編集の「変更を保存」して、ブログを書いてみよう。
<p>例文：<span class="under">
下線部分</span>です。<span class="under">
下線部分</span>です。下線を引くことができました。</p>
「 下線部分 」が下線を引く部分です。
はてなブログでは、デフォルトでアンダーラインを引くボタンが用意されています。
以下の画像のように、文章の下線を引きたい部分を範囲選択して、ボタンをクリックすると下線が引けます。
はてなブログを確認すると・・・
下線を引くことができました。
次に、記事のある部分に二重線を引いてみよう。
先ほどのCSS編集に以下のコードを書き込みます。
.under {
border-bottom: double 6px #87CEFA;
その後、「記事を書く」でHTML編集から以下のように書き込みます。
文章は任意に変更可能です。
<p>例文：<span class="under">二重線部分</span>です。<span class="under">二重線部分</span>です。二重線を引くことができました。</p>
公開をクリックして、ブログを確認すると・・・
最後に、蛍光ペンで書いたような文章にラインを引いてみよう。
CSS編集には以下のコードを予め書き込んでおきます。
.under {
background: linear-gradient(transparent 0, #8effa1 0);
「記事を書く」でHTMLに以下のように入力して（文章は任意です）公開して、ブログを確認すると・・・
<p>例文：<span class="under">蛍光部分</span>です。<span class="under">蛍光部分</span>です。蛍光ペンを引くことができました。</p>
まとめ
なお、以下の通り、下線の引きたいところでタグを書き込み区切っていくことによりいくつでもアンダーラインを引くことが可能です。
<p>例文：
<span class="under">
<span class="under">
<span class="under">
<span class="under">
</span>
是非、試してみて下さいね。
