はてなブログを書いていて
いつも不満に思うのが文字装飾の少なさ。
WordPress(ワードプレス)でもいくつか
サイトを運営しているからなのか
スタイルの少なさに物足りなさしかありませんでした。
特に「何でないん！？」となるのが
【蛍光のアンダーライン】
です。
この↑↑アンダーラインタイプは出来るのですが
【蛍光のアンダーライン】
これ↑↑はてなブログではできないですよね？？
今回どうしても蛍光のアンダーラインで装飾したくなったので
蛍光ペン風にする方法調べました！
もし同じようにお悩みでしたら
是非参考にして下さい！
- はてなブログで蛍光ペン風にカスタマイズするには設定が必要
- はてなブログにカスタマイズしたコードの貼り付け方
- はてなブログをカスタマイズ出来るコードのテンプレート
- はてなブログで蛍光ペン風のラインを引くにはHTML編集が必要
- HTML編集で装飾する所を代表名タグで挟む
- はてなブログのカスタマイズをスマホにも反映させる
- まとめ
はてなブログで蛍光ペン風にカスタマイズするには設定が必要
少し手間ではあるのですが
納得できる見栄えの記事を書きたければ
デザインからCSS設定をする必要があります。
HTMLとかCSSとか聞くと
難しそうに感じるかもしれませんが
設定自体はめちゃくちゃ簡単！！
ですので興味があればアレルギーおこさないで
試しにやってみて下さい。
アンダーラインをカスタマイズする【コード】
まず、蛍光ペン風アンダーラインを入れる
基本のコードはこちらです。
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
カラーコードって何？
カラーコードとは
＃から始まる6桁(または3桁)の数字とアルファベットの羅列です。
先ほど説明した蛍光ペン風のラインを引くコードで例えると
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
text-decoration: none;
background: linear-gradient(transparent 50%,#ffff00 80%);
}
「
「
「
ラインの幅の％の意味
カラーの設定は理解できましたか？
次は幅の％の設定の仕方について解説していきます。
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
50%,yellowの50％部分の設定です。
何となく
「数字が小さい方が幅が細く」
「数字が大きい方が幅が広い」
イメージを持ちそうですが実際は反対の意味です。
装飾する文字に対しての覆わない部分(白い部分)
の幅の％だと考えて下さい。
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}
text-decoration: none;
background: linear-gradient(transparent 10%,yellow 80%);
}
こうすると幅の広いラインになります。
逆に
text-decoration: none;
background: linear-gradient(transparent 70%,yellow 80%);
}
こうすると幅の狭いラインになります。
理解出来ましたか？
単純なことですね。
それではお好きな幅に設定してみて下さい。
はてなブログにカスタマイズしたコードの貼り付け方
コードの記入が理解できましたら
次は実際にはてなブログに
カスタマイズするコードを貼って行きましょう！
カスタムコードを貼り付ける⑤step
・ダッシュボード➡デザイン➡カスタマイズ➡デザインCSS
の順に進んでいきます。
step①
左上メニューの中から「デザイン」をクリック。
step②
画面が変わりますので
真ん中のアイコン「カスタマイズ」をクリック。
step③
サイドバーの中の一番下にある
「デザイン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編集」が必要になります。
コードを使用するのに必要な部分
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編集を見て下さい。
分かりやすく前後のコードを離しましたが
きいろきいろ・・・を<u></u>で挟んでいるの分かりますか？
この様に装飾したい部分を
先ほど説明したコードの代表名で挟むことで
蛍光ペン風ラインを引くことが出来ます。
これではてなブログでカスタマイズした
蛍光ペン風ラインを引くができました！！
はてなブログのカスタマイズをスマホにも反映させる
最後に、デザインのカスタマイズはPCで作業していると思うのですが
スマホでも記事を確認してみて下さい。
何の設定も出来ていなければ
スマホでは変更したCSSが当たっていないと思います。
ブログの読者さんはほぼスマホで見に来てくれるので
せっかくならスマホでも蛍光ぺン風の
アレンジを見て欲しいですよね！？
そこで確認する作業2つ！
①ブログのテーマがレスポンシブ対応になっている
②デザインの中の「レスポンシブデザイン」にチェックが入っている
以上2つ。
詳しく解説していきます。
①ブログのテーマがレスポンシブ対応になっている
※レスポンシブデザインとは：
パソコンの画面で見た時とスマートフォンで見た時のデザインを
それぞれに合わせて自然にサイズ等を変更してくれる対応の事を言います。
特にデザインをいらっていなければ
デフォルトの「Smooth」というテーマが適応されています。
このテーマならレスポンシブデザインに対応しているので
問題ありません。
他のテーマでも対応しているものもあれば対応していない物もあるので
ご自身が使用しているテーマがどうか確認してみて下さい。
良く分からなければデフォルトのデザインにしておけば
全く問題無いかと思いますが。
②デザインの中の「レスポンシブデザイン」にチェックが入っている
テーマがレスポンシブ対応していれば
次はサイトのレスポンシブデザインにチェックを入れて行きます。
管理メニューの左上からまたデザインを選び
上記の画面から、今度はスマホマークをクリックします。
すると下の方に詳細設定がありますのでもう一度クリック。
するとその下に
□レスポンシブデザインが出てくるので
チェックを入れて完了です！
何か変更したときは忘れずに「変更を保存」をクリックしてください。
以上で完璧にカスタマイズできました！！
まとめ
はてなブログでカスタマイズした蛍光ペン風ラインを引くには
①コードを貼り付ける
「ダッシュボード➡デザイン➡カスタマイズ➡デザインＣＳＳ」
②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%);
}
はてなブログをたのしく書く
参考になれば幸いです！！
