スプリンターでスプリント! web版

元気・まっすぐ・ポンコツな2児の母が、わちゃわちゃな日々を記録します。育児やらパン作りやらマイブームやら。

初心者でもできた!はてなブログのiボタンで蛍光ペン風ライン

f:id:Sanhachi:20180419012944j:plain

こんにちは、38_さんはちです♪

CSSとかHTMLとか、イマイチよくわかってない私ですが、

四苦八苦した末に、蛍光ペン風のアンダーラインが引けるようになりました♪

これめっちゃ華やかになるー!やった~!

 

ということで、蛍光ペン風のアンダーラインを引くやり方、まとめました。

おススメですので、気になる方はぜひ!

 

見たままモードのiボタンで蛍光ペン風ラインを引くには

f:id:Sanhachi:20180418171050p:plain

 

参考にしたのは、こちらのサイト。

ガジェレポさん、ありがとうございます!

gadgerepo.com

ガジェレポさんは

3つの色を使って蛍光マーカーで装飾するコードを書かれています。

これ、本格派です。

 

私の場合、

1色をマーカーとして使いたかったので、多少アレンジさせていただきました。

このコードを乗せておけば、

iボタン(斜体)を押すと、

蛍光ペン(緑)+太字になります。

 

コードを貼り付ける場所

「ダッシュボード」→「設定」→「詳細設定」から下へ下へ、スクロールして

f:id:Sanhachi:20180418170248p:plain

 

「headに要素を追加」の枠の中に貼り付けてください。

f:id:Sanhachi:20180418170257p:plain

 この「headに要素を追加」の部分が、割と見つけづらいんですが、、

はてなブックマーク欄の上にあります!

 

貼り付けるコード

注意

コードを貼り付ける前に、必ずメモ帳などにバックアップを取ってね!

 

バックアップのやり方分からない方は↓

HTMLやCSSコードをPCのメモ帳にバックアップしよう【Windows編】 - スプリンターでスプリント! web版

 

これは私が使ってるコード↓

<style type="text/css">

/* 斜体表示を蛍光ペン(緑)風に */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(159,223,131,1) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}

</style> 

 

上記のコードを「headに要素を追加」に貼り付けて、「変更する」ボタンを押せば完了です。

あとは見たままモードで記事を作成し、

装飾したい文字を範囲指定→iボタンを押すと

太字+蛍光ラインが引けます。

 

色を変更するには

コードの中の

rgba(159,223,131,1) が色!

 

rgba(159,223,131,1)の部分をご自分の好きな色のコードに書き換えてみてください。

色のコード参考例↓コピペok

■ピンクなら rgba(255,153,255,1)

■黄 色なら rgba(252,252,84,0.8)

■青 色なら #2196f3

■紫 色なら #673ab7

■オレンジは #ff4500

■グレーなら #999999

■ベージュは #deb887

 

色のコードは

RGBA形式「rgba(159,223,131,1)」←こういう書き方のやつでも

16進数形式「#9fdf83」←こういう書き方のやつでも

 どちらで表記しても大丈夫です!

 www.colordic.org

 

 蛍光ラインだけにしたいときは

コードの中の

font-weight:bold;

これ↑を削除すると、蛍光マーカーのみの装飾になります。

 (要するに太字が消える)

 

文字を斜体にしたいときは

HTML編集画面で

斜体にしたい文字を<i></i>タグで囲めばいいんだと思うんですが…

 

例:わたしは<i>斜体</i>にしたいです。

 

私は斜体にしたいです。

↑なぜかこうなる。。。。

 

f:id:Sanhachi:20180410165626j:plain

…出直してきます!!

 

まとめ

はてなブログの見たままモードにあるiボタンは<em>タグとつながってる!

その<em>タグでどんな装飾をするのかを書いた、CSSの紹介でした。

 

と、とにかく!

うまくいかない場合があったらいけないので、

絶対バックアップ取ってからチャレンジしてみてください。←急に及び腰

おばちゃん、HTMLとかするの高校生ぶりだから。

…そしてポンコツだから!

 

私の説明がアレだと思ったら…

ガジェレポさんのサイトへ行ってください!!!!

gadgerepo.com

ガジェレポさんへ。

引用したのに最後丸投げで…本当に申し訳ありませんでした。

CSSやらHTMLの勉強になりました!

今後も活用させていただきたいと思います。

 

バックアップのやり方はこちらから↓

HTMLやCSSコードをPCのメモ帳にバックアップしよう【Windows編】 - スプリンターでスプリント! web版

 

 

あわわ、背中の赤子が泣いてるよ!

 

またねっ