公開日 2020/12/24
更新日

蛍光マーカー風ボーダーを使っておしゃれなブログを作りたく HTML CSSを調べてみました

たとえば（＊おしゃれではありませんが）

ブログ予告

キャノンのプリンター MG6330のヘッドを洗う←まだ洗ってない
玉ねぎの芯 1つで新玉ねぎ 3,4個はできる
しょうがひとかけらから上手くいったもので新しょうががたくさんできた
太らないことをいいことに洋菓子をたくさん食べていたら
LDL（悪玉）コレステロールが 201mg/dlになった!! 2020冬の出来事（基準値 70-139mg/dl）
◆ 和菓子にチェンジ ◆

border-top: dotted 3px pink; と

border-bottom: dotted 3px pink; の

組み合わせ

↓ キリトリセン ↓ キリトリセン ↓ キリトリセン ↓ キリトリセン ↓

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【P最大4倍! 12/26 01:59まで】三菱鉛筆プロパスウインドウクイックドライ 10色セット蛍光マーカー[ネコポスで送料無料]文房具文具ステーショナリー筆記具蛍光ペンラインマーカー速乾ユニ Uni
価格：1287円（税込、送料別) (2020/12/24時点)

楽天で購入

【無料】はてなブログ【HTML CSS】いろんな下線を使って見やすいブログの作り方蛍光マーカー風ボーダー

【無料】はてなブログ【HTML CSS】いろんな下線を使って見やすいブログの作り方蛍光マーカー風ボーダー

下線を引く指定 → border-bottom:

下線の種類 / 太さ / 色の指定

1. 直線

直線 / 太さ2 / 赤 → solid 2px red;

クラス名を undersol2re にしてみる

【CSS】デザイン設定→カスタマイズ→記事→記事上に下記を貼り付け
詳しく知りたい方は CSS 設定方法へ

.undersol2re {
border-bottom: solid 2px red;
}

【HTML】ブログ編集に下記を貼り付け

これは直線で太さ2の赤です。

【ブログプレビュー】

これは直線で太さ2の赤です。

2. 点線

点線 / 太さ3 / ピンク → dotted 3px pink;

クラス名を underdot3pi にしてみる

【CSS】デザイン設定→カスタマイズ→記事→記事上に下記を貼り付け
詳しく知りたい方は CSS 設定方法へ

.underdot3pi {
border-bottom: dotted 3px pink;
}

【HTML】ブログ編集に下記を貼り付け

これは点線で太さ3のピンクです。

【ブログプレビュー】

これは点線で太さ3のピンクです。

3. 破線

破線 / 太さ4 / 黄 → dashed 4px yellow;

クラス名を underdas4ye にしてみる

【CSS】デザイン設定→カスタマイズ→記事→記事上に下記を貼り付け
詳しく知りたい方は CSS 設定方法へ

.underdas4ye {
border-bottom: dashed 4px yellow;
}

【HTML】ブログ編集に下記を貼り付け

これは破線で太さ4の黄です。

【ブログプレビュー】

これは破線で太さ4の黄です。

4. 二重線

二重線 / 太さ5 / 紫 → double 5px purple;

クラス名を underdou5pu にしてみる

【CSS】デザイン設定→カスタマイズ→記事→記事上に下記を貼り付け
詳しく知りたい方は CSS 設定方法へ

.underdou5pu {
border-bottom: double 5px purple;
}

【HTML】ブログ編集に下記を貼り付け

これは二重線で太さ5の紫です。

【ブログプレビュー】

これは二重線で太さ5の紫です。

文字に被せて線を引く指定 → background:

1. 蛍光マーカー風太

太い蛍光マーカー風文字の70%だけ / 青 → linear-gradient(transparent 30%, lightskyblue 30%);

Point

薄めの色を指定すると文字が読みやすい
今回は lightskyblue にしてみました

クラス名を transthickbl にしてみる

【CSS】デザイン設定→カスタマイズ→記事→記事上に下記を貼り付け
詳しく知りたい方は CSS 設定方法へ

.transthickbl {
background: linear-gradient(transparent 30%, lightskyblue 30%);
}

【HTML】ブログ編集に下記を貼り付け

これは太い蛍光マーカー風の青です。

【ブログプレビュー】

これは太い蛍光マーカー風の青です。

2. 蛍光マーカー風細

細い蛍光マーカー風文字の20%だけ / 緑 → linear-gradient(transparent 80%, lime 80%);

クラス名を transthingr にしてみる

【CSS】デザイン設定→カスタマイズ→記事→記事上に下記を貼り付け
詳しく知りたい方は CSS 設定方法へ

.transthingr {
background: linear-gradient(transparent 80%, lime 80%);
}

【HTML】ブログ編集に下記を貼り付け

これは細い蛍光マーカー風の緑です。

【ブログプレビュー】

これは細い蛍光マーカー風の緑です。

あとがき

後日上線も追加します
ボタンデザインなどもやる予定です

種を捨てないで植えてみるブログ

本ページは広告が含まれています

【無料】はてなブログ【HTML CSS】いろんな下線を使って見やすいブログの作り方蛍光マーカー風ボーダー

【無料】はてなブログ【HTML CSS】いろんな下線を使って見やすいブログの作り方蛍光マーカー風ボーダー