BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ デザイン下線を設定する方法

このエントリーをはてなブックマークに追加

はてなブログカスタマイズ デザイン下線を設定する方法

   投稿日: 2018/02/02    投稿者:webコラム

ff80c6a1edc832feadc4d43b03c3d89c_s.jpg


 こんにちは! ライターのモモタロウです。

今回は、はてなブログカスタマイズ デザイン下線を設定する方法をお伝えします。

はてなブログにデザイン下線を引くには?


まず、はてなブログにログインします。

20171223-2.jpg



その後、「ダッシュボード」→「デザイン」→「CSS編集」をクリックします。



20171223-3-.jpg


以下のコードをCSS編集に書き込みます。

.under {text-decoration: underline;}


20171223-4.jpg


このコードを書き込むことにより、「ブログを書く」の「HTML編集」に、以下のようにタグを編集すると下線を引くことができます(タイトルは「編集 みたまま」画面で入力しておきます)。

【「ブログを書く」HTML編集に入力するタグ】

<p>例文:<span class="under">下線部分</span>です。<span class="under">下線部分</span>です。下線を引くことができました。</p>



CSS編集の「変更を保存」して、ブログを書いてみよう。


20171223-7.jpg

<p>例文:<span class="under">下線部分</span>です。<span class="under">下線部分</span>です。下線を引くことができました。</p>

 下線部分 が下線を引く部分です。

はてなブログでは、デフォルトでアンダーラインを引くボタンが用意されています。

以下の画像のように、文章の下線を引きたい部分を範囲選択して、ボタンをクリックすると下線が引けます。

はてなブログを確認すると・・・


20171223-5.jpg


下線を引くことができました。

次に、記事のある部分に二重線を引いてみよう。

先ほどのCSS編集に以下のコードを書き込みます。

.under {
  border-bottom: double 6px #87CEFA;

その後、「記事を書く」でHTML編集から以下のように書き込みます。

文章は任意に変更可能です。

<p>例文:<span class="under">二重線部分</span>です。<span class="under">二重線部分</span>です。二重線を引くことができました。</p>

公開をクリックして、ブログを確認すると・・・


20171223-6.jpg


最後に、蛍光ペンで書いたような文章にラインを引いてみよう。

CSS編集には以下のコードを予め書き込んでおきます。
.under {
  background: linear-gradient(transparent 0, #8effa1 0);

「記事を書く」でHTMLに以下のように入力して(文章は任意です)公開して、ブログを確認すると・・・

<p>例文:<span class="under">蛍光部分</span>です。<span class="under">蛍光部分</span>です。蛍光ペンを引くことができました。</p>

20171223-8.jpg


まとめ


なお、以下の通り、下線の引きたいところでタグを書き込み区切っていくことによりいくつでもアンダーラインを引くことが可能です。
<p>例文:
<span class="under">
<span class="under">
<span class="under">
<span class="under">
</span>

是非、試してみて下さいね。

カテゴリ:

TOPへ