【はてブ】はてなブログでの蛍光色の導入方法と使い方(スマホ編)

PCからの蛍光色設定方法 を記事にしましたが、
スマホでブログ方への
はてなブログでの導入方法(スマホ編)です。
(注:画像多めです)

出来る事

導入するとこんな感じのことができます。
紫蛍光
黄色蛍光
緑蛍光

はてなブログ導入方法

PC

PCでの設定方法はこちらをご覧ください。

onthebacksoftheflyer.hatenadiary.jp

スマホ

スマホの場合、ログイン後にユーザ管理画面に行きます。

スマホサイトのユーザ管理画面

次にダッシュボードから自分のブログをタップします

スマホサイトのダッシュボード

ダッシュボードを開いたら[設定]を開きます

スマホサイトのメニュー

設定画面から[詳細設定]に行きます

スマホサイトの詳細設定

すると中程に[検索エンジン最適化]→[headに要素を追加]項目があります。

スマホサイトhead要素追加

ここに下記を追記します。

<style type="text/css">
/* 強調表示を蛍光ペン（ピンク）風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}

/* 斜体表示を蛍光ペン（黄）風に */
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(252,252,84,0.8) 60%) !important;
}
/* iタグは斜体*/
article i{
    font-style:oblique !important;
}

/* アンダーライン表示を蛍光ペン（緑）風に */
article u{
    font-weight:bold;
    text-decoration: none;
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}

</style>

使い方

紫蛍光色にするときは<strong>紫蛍光</strong>で囲ってあげると
紫蛍光
になります。

黄蛍光色するときは<em>黄色蛍光</em>で囲ってあげると
黄色蛍光
になります。

緑蛍光色するときは<u>緑蛍光</u>で囲ってあげると
緑蛍光
になります。

参照

www.gadgerepo.com

前回と同じくcssについてはここの丸パクリです。。。
ありがとうございます。