【蛍光ライン】今日のブログでの学び≪第5弾≫
どうもっす！
福助でござんす!(^^)!
ブログを更新するにあたって、
他の方のブログを見る事が多くなりました！
その中でよく見るのがカッコよくアンダーラインを引いているブログ！
今まで見て欲しい文言は文字の大きさを150％くらいにして、文字色を変更していました！
でも、アンダーラインを引いている文章見る度に「かっこえぇぇぇ」ってなりますやん？
なので今回、アンダーラインで記事を書いていくぅ！
アンダーライン（蛍光ペン風）を引くための方法
1.ページ内のシステム変更
今回はこちらの記事を参考にしました！
設定方法
はてなブログのホーム画面右側『デザイン』をクリック！
『デザイン』画面の左側『カスタム』の中にある『デザインCSS』をクリック！
『デザインCSS』にアンダーライン設定のコードを入れます。
【入力コード】
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}
ここまで入力出来れば前準備は完了です。
※福助のブログでは背景が暗い色に白字なので、
上記コードからアンダーラインの色・太さを変更しています。
方法は下記に追記しておきます。
記事内アンダーラインの引き方
上記で裏設定が完了しました。
あとは、実際に記載する記事内での設定方法について記載してきます！
普段は皆さんがどのように編集されているか不明ですが、
福助は『見たまま』でいつも記事を書いています。
変えたい部分があれば、
HTML編集にてコードを入力しています(*´▽｀*)
編集した後はプレビューで都度確認をしています。
※間違いが起こってないように
今回は『見たまま』で通常に文字を入力してください！
ある程度文字が書けましたら、
アンダーラインを引きたい箇所を『HTML編集』で<u>～</u>で囲みます！！！
↓
たったこれだけ！
色や太さの変え方
色や太さの変更は『デザインCSS』に入力したコードを修正すれば、
いつでも変更できます！
入力したCSSコード
(transparent 50%, #ffff00 50%)
このコードがアンダーラインの色と太さ、濃さを表しています。
transparent＝文字の太さ
→％が高くなるにつれて、アンダーラインが細くなります。
#ffff00＝文字の色
→色によってコードが違います。
％が高くなるにつれてアンダーラインの色が薄くなります。
☆CSS色コード☆
ぜひ皆さんのブログに合う色などを見つけてください！
まとめ
今回ぴゃっとアンダーラインについて記載しましたが、
方法は数パターンあります！
『HTML編集』で直接コード入力する方法もありましたので、
下記参考ページ貼っておきますね！
その他、アンダーライン以外でブログの小技あります。
☆過去記事貼り付け方法☆
☆記事シェア方法☆
☆目次の作成方法☆
ぜひ参考にしてみてください( *´艸｀)
では今日はここらへんで。
また次回の記事で！
