暮らしの処方戦

日々の暮らしの、ほんの少しの息抜きに。

はてなブログをカスタマイズ!初心者でも出来る文字に蛍光ラインを引く方法

はてなブログを書いていて

いつも不満に思うのが文字装飾の少なさ

 

WordPress(ワードプレス)でもいくつか

サイトを運営しているからなのか

スタイルの少なさに物足りなさしかありませんでした。

 

特に「何でないん!?」となるのが

蛍光のアンダーライン

です。

 

この↑↑アンダーラインタイプは出来るのですが

蛍光のアンダーライン

これ↑↑はてなブログではできないですよね??

 

今回どうしても蛍光のアンダーラインで装飾したくなったので

蛍光ペン風にする方法調べました!

 

もし同じようにお悩みでしたら

是非参考にして下さい!

 

 

はてなブログで蛍光ペン風にカスタマイズするには設定が必要

少し手間ではあるのですが

納得できる見栄えの記事を書きたければ

デザインからCSS設定をする必要があります。

 

HTMLとかCSSとか聞くと

難しそうに感じるかもしれませんが

設定自体はめちゃくちゃ簡単!!

 

ですので興味があればアレルギーおこさないで

試しにやってみて下さい。

 

アンダーラインをカスタマイズする【コード】

まず、蛍光ペン風アンダーラインを入れる

基本のコードはこちらです。

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
 
こちらのコードは
黄色の蛍光ライン
を入れたい時に使用するコードになります。
 
article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
 
上記コードの黄色い部分がラインの種類を表しています。
50% yellow
「幅50% 黄色」
を表しています。
 
この部分を変更する事で
好きな色や幅を設定する事が可能になります。
 
それと、今回は分かりやすくyellow表記していますが
カラーコードというものを使用した方が
簡単だし細かく色を設定することが出来るのでお勧めです!
 

カラーコードって何?

カラーコードとは

#から始まる6桁(または3桁)の数字とアルファベットの羅列です。

◆代表的なカラーのコードです◆・ブラック:#000000
・レッド :#ff0000
・ブルー :#0000ff
・グリーン:#008000
・ピンク :#ffc0cb
・オレンジ:#ffa500
・イエロー:#ffff00
・ホワイト:#ffffff
こんな感じで#に続けて数字とアルファベットを記入する事で
色を指定することが出来ます。
 
色は無限にあるので好みのカラーを選ぶことも出来ますよ!
 
こちらのサイトが色を選ぶのに分かりやすいので
ぜひ参考にしてみてください。

www.colordic.org

 

先ほど説明した蛍光ペン風のラインを引くコードで例えると 

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,#ffff00 80%);
}
「#ffff00」でも同じく黄色の蛍光風アンダーラインが入ります。
 
水色の蛍光ペン風にしたければ
lightblue」or「#add8e6
skyblue」or「#87ceeb
deepskyblue」or「#00bfff
 
ピンクの蛍光ペン風にしたければ
pink」or「#ffc0cb
lightpink」or「#ffb6c1
 
などを記入すると好きな色に変更することが出来ます。
 
カラーは無限にありますので
好みのカラーを選んでください。

ラインの幅の%の意味

カラーの設定は理解できましたか?

次は幅の%の設定の仕方について解説していきます。

 

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}

50%,yellow50%部分の設定です。

 

何となく

「数字が小さい方が幅が細く」

「数字が大きい方が幅が広い」

イメージを持ちそうですが実際は反対の意味です。

 

装飾する文字に対しての覆わない部分(白い部分)

の幅の%だと考えて下さい。

 

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}

article u {
text-decoration: none;
background: linear-gradient(transparent 10%,yellow 80%);
}

 

 こうすると幅の広いラインになります。

逆に

article u {
text-decoration: none;
background: linear-gradient(transparent 70%,yellow 80%);
}

こうすると幅の狭いラインになります。

 

理解出来ましたか?

単純なことですね。

 

それではお好きな幅に設定してみて下さい。

 

はてなブログにカスタマイズしたコードの貼り付け方

コードの記入が理解できましたら

次は実際にはてなブログに

カスタマイズするコードを貼って行きましょう!

 

カスタムコードを貼り付ける⑤step

・ダッシュボード➡デザイン➡カスタマイズ➡デザインCSS

の順に進んでいきます。

 

step①

左上メニューの中から「デザイン」をクリック。

メニューの中からデザインを選択

step②

画面が変わりますので

真ん中のアイコン「カスタマイズ」をクリック。

カスタマイズ をクリック

step③

サイドバーの中の一番下にある

デザインCSSをクリック。

下の方のデザインCSSをクリック

step④

コードを貼れる場所が広がります。

開いたエリアをクリック

step⑤

更に広く広がるのでコードを貼り付ける

貼り付ける

step⑥

最後に忘れず「変更を保存する」をクリックする。

変更を保存する

以上です!

6stepと言いましたが工程自体はめちゃくちゃ簡単ですよね!

 

はてなブログをカスタマイズ出来るコードのテンプレート

カラーや幅は自由にカスタマイズしてもらえばいいかと思いますが

そうは言っても

  • 自分で設定するのはめんどくさい
  • コードをいじる自信がない
  • 手っ取り早く設定したい

など、もう貼り付けるだけでいいコードが知りたい。

という場合もあると思いますので

「テンプレート」作ってみました。

 

特にこだわりが無いようでしたら

ぜひコピペしてカスタマイズして下さい!

 

◆コピペして使ってください◆

/* 蛍光ペン(黄)にする */

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,#ffff00 80%);
}

/* 蛍光ペン(ピンク)にする */

article u2 {
text-decoration: none;
background: linear-gradient(transparent 50%,#ffc0cb 80%);
}

/* 蛍光ペン(水色)にする */

article u3 {
text-decoration: none;
background: linear-gradient(transparent 50%,#87ceeb 80%);
}

 

上のコードで

「・黄色ピンク水色

の蛍光ペン風アンダーラインが引けるようになります。

 

はてなブログで蛍光ペン風のラインを引くにはHTML編集が必要

コードと貼り付け方が分かったかと思いますが

実際にはてなブログで文字に蛍光ペン風のラインを引くには

HTML編集が必要になります。

 

コードを使用するのに必要な部分

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
  •  

    こちらは黄色の蛍光ペン風ラインのコードになりますが

     

    このコードの場合

    いちばん上の行に

    「article u {」

    というのがありますね。

     

    このarticle u {」 u の部分が

    このコードの代表名みたいなものになります。

     

    article u2 {
    text-decoration: none;
    background: linear-gradient(transparent 50%,#ffc0cb 80%);
    }

     

     

    こちらはピンクの蛍光ペン風ラインのコードになりますが

     

    この場合「u2」がコードの代表名になります。

     

    ※なので違うコードなのにこの部分を同じにしてしまうと

    うまくCSSが当たらないので

    自分で記入する場合は注意してください。

     

    ここが理解できましたら

    早速「HTML編集」に行ってみましょう!

     

    HTML編集で装飾する所を代表名タグで挟む

実際に黄色の蛍光ペン風ラインを引いていきたいと思います。

 

きいろきいろきいろきいろきいろきいろきいろきいろ

 

ここのHTML編集を見て下さい。

 

HTML編集画面

分かりやすく前後のコードを離しましたが

きいろきいろ・・・を<u></u>で挟んでいるの分かりますか?

 

この様に装飾したい部分を

先ほど説明したコードの代表名で挟むことで

蛍光ペン風ラインを引くことが出来ます。

 

ピンクピンクピンクピンクピンクピンク

あおあおあおあおあおあおあおあおあお

 

タグで挟むとCSSが適用される

これではてなブログでカスタマイズした

蛍光ペン風ラインを引くができました!!

 

はてなブログのカスタマイズをスマホにも反映させる

最後に、デザインのカスタマイズはPCで作業していると思うのですが

スマホでも記事を確認してみて下さい。

 

何の設定も出来ていなければ

スマホでは変更したCSSが当たっていないと思います。

 

ブログの読者さんはほぼスマホで見に来てくれるので

せっかくならスマホでも蛍光ぺン風の

アレンジを見て欲しいですよね!?

 

そこで確認する作業2つ!

①ブログのテーマがレスポンシブ対応になっている

②デザインの中の「レスポンシブデザイン」にチェックが入っている

 

以上2つ。

詳しく解説していきます。

①ブログのテーマがレスポンシブ対応になっている

※レスポンシブデザインとは:

パソコンの画面で見た時とスマートフォンで見た時のデザインを

それぞれに合わせて自然にサイズ等を変更してくれる対応の事を言います。

 

テーマを確認

特にデザインをいらっていなければ

デフォルトの「Smooth」というテーマが適応されています。

 

このテーマならレスポンシブデザインに対応しているので

問題ありません。

 

他のテーマでも対応しているものもあれば対応していない物もあるので

ご自身が使用しているテーマがどうか確認してみて下さい。

 

良く分からなければデフォルトのデザインにしておけば

全く問題無いかと思いますが。

 

②デザインの中の「レスポンシブデザイン」にチェックが入っている

テーマがレスポンシブ対応していれば

次はサイトのレスポンシブデザインにチェックを入れて行きます。

 

レ点チェックを入れるだけ

管理メニューの左上からまたデザインを選び

上記の画面から、今度はスマホマークをクリックします。

 

すると下の方に詳細設定がありますのでもう一度クリック。

 

するとその下に

□レスポンシブデザインが出てくるので

チェックを入れて完了です!

 

何か変更したときは忘れずに「変更を保存」をクリックしてください。

 

以上で完璧にカスタマイズできました!!

まとめ

はてなブログでカスタマイズした蛍光ペン風ラインを引くには

 

①コードを貼り付ける

「ダッシュボード➡デザイン➡カスタマイズ➡デザインCSS」

 

②HTML編集からタグで挟む

「ラインを引きたい所に<></>で挟む」

 

③コードのテンプレート

/* 蛍光ペン(黄)にする */

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,#ffff00 80%);
}

/* 蛍光ペン(ピンク)にする */

article u2 {
text-decoration: none;
background: linear-gradient(transparent 50%,#ffc0cb 80%);
}

/* 蛍光ペン(水色)にする */

article u3 {
text-decoration: none;
background: linear-gradient(transparent 50%,#87ceeb 80%);
}

 

はてなブログをたのしく書く

参考になれば幸いです!!