はてなブログで1分で文章に蛍光ペンを使う設定方法

はてなブログ

はてなブログを使っていて、他のブロガーの方が蛍光ペンを使って読みやすくしているのを見ると「いいな・・・羨ましいなー」って感じていました。

自分でもしてみようとチャレンジするんですが

色んなやり方があるし、やっても反映されない事が多すぎました。

ここポイントです!

やっても反映されません!

下線が引かれるだけです!

意味ないし・・・

それにコピペして使えと書かれていても、変なマークまでコピーされるし・・・

意外と不親切!!!

ということで探してみると超簡単な方法があったのでご紹介します!

スポンサーリンク

面倒なのは毎回HTMLコードを入力すること

色々と比較して調べてみました。

どこも手順は同じで方法としてはこうなります。

①コードをコピーして設定画面のどこかへ貼る

②文章を書く時にいじる(サインペンを引く)

こうなるんですが、①が反映されないことが多いんです。

そして問題は②の部分!

毎回「HTML編集」の部分で直接HTMLコードを入力とか・・・

実はこれ面倒です!

これがあるからやりたくない!って人も多いのでは?

毎回コードなんて入力するの面倒だし・・・

・・・でもやり方はありました!

スポンサーリンク

斜体文字を押すだけでサインペン表示になる

これ超簡単です。

このやり方だと自分でブログを書いて、サインペンにしたいところを選んで、ブログ入力画面の上にある「斜体文字」をクリックするだけで・・・

自動的にサインペンで表示されます!

本当に最強です!

はてなブログで標準装備してくれたらいいのですが、それは今はないので仕方がありません。

早くやり方教えろよ!(って・・・文句が聞こえそうなので)

そんな方のためにやり方をまとめました!

スポンサーリンク

最初にすることはheadに貼るだけ

最初にすることはコードを貼るだけです。

貼る場所は「headに要素を追加」の部分です。

皆さんがアドセンスを取得した時に貼り付けた部分です。

詳しくはここです。

「管理画面」→「設定」→「詳細設定」

→「検索エンジン最適化」→「headに要素を追加」

ここに下にあるコードをコピーして貼り付けて保存してください

<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%, #ffd700 60%) !important;
}
article i{
font-style:oblique !important;
}
</style>

↑これを貼って保存を押せばできあがりです!

これで99%できあがりました。

スポンサーリンク

はてなブログでサインペンの使い方

ここから先は簡単すぎて説明するのも申し訳ありません。

【超簡単サインペンの使い方】

まずはいつものようにブログを書きます。

サインペン表示にしたい文面を選んで、編集の上にある斜体文字を押す。

これで終わりです!

当然ブログを書く編集画面ではサインペンは反映されていませんが

プレビューを見るとしっかりと反映されているはずです!

簡単すぎません??

これだけで終わりですが、念のためにアドバイス!

コピーして貼ったコードは、自分でもわかるようにメモ帳かどこかへ残しておくといいです。

理由としては、貼った部分が「アドセンス」でも利用する部分なので、何かあったときに「どのコードがサインペン?」なのかすぐ分かるようにしておくと便利です。

また今までのブログの斜体文字の部分が、すべてサインペン状態になります!

【色を変えたいとき】

色を変えたい場合は、貼り付けたコードの「#ffd700」の部分を変更すればOKです。

好きな色はこちらも参考にして選んでください。

www.colordic.org

【幅を変えたいとき】

サインペンの幅を変えたいときは「transparent 60%」のパーセンテージを大きくすると、マーカーの幅が狭くなります。

皆さんもぜひ便利に使ってください!

いつも応援ありがとうございます。

コメント

  1. toratora0310 より:

    これいいですね実践させて頂きます^^

  2. zaihamizunogotoshi より:

    >理由としては、貼った部分が「アドセンス」でも利用する部分なので、何かあったときに「どのコードがサインペン?」なのかすぐ分かるようにしておくと便利です。

    私はこうしてます。で囲まれたところは無視されるのです。
    便利です。
    ※こんどこそ。承認されないとコメントが自分で削除できないようで…。何度もすみません。(+_+)

  3. zaihamizunogotoshi より:

    コード、コメント欄に書くと変なことになるのね…。今までのコメントはすべて削除でお願いします。

    <!--ここからサインペン設定ーー>
    (ここにプログラムコピペ)
    <!ーーサインペン設定終わりーー>
    ↑これらの記号を半角で入力する。

    これでどうでしょう…。
    自分の勘違いもあり、朝っぱらから何度も何度も本当にごめんなさい。
    #コメント確認画面と戻るボタンが欲しい

  4. hennsaisurude より:

    toratora0310さん、コメントありがとうございます!便利に使ってください。
    keroyonさん、詳しい追加説明もありがとう!
    コメント削除しておきました!
    使わせてもらいます。

タイトルとURLをコピーしました