こんにちは。
面倒くさがりの主婦です。
日々、苦手な家事に奮闘しながら生活しています。
どうしても文章にマーカーを引きたくて、試行錯誤すること約数日。
やっとマーカーを引けるようになりました！⭐️
この記事では『編集エディタを使用せずにマーカーを引く方法』を今回参考にさせていただきましためいパパさんの記事と合わせてご紹介させていただいております。
初心者の私が同じく初心者の方のために「なるほど、こういうことか！」と理解できたことも含めてお伝えします。
参考記事
今回はこちらの雨のち晴れめいパパ (id:meipapa0219) さんの記事を参考にさせていただきました。
こちらの記事では編集エディタの「Open Live Writer」を利用してマーカーを超絶簡単に引ける方法が紹介されています。
私もこの方法で何度か試みたのですが、なぜか「Open Live Writer」がダウンロードできない。ちなみにPCはMacです。
（どなたか原因ご存知でしょうか？？😅）
何度やってもダウンロードできないので今回はエディタを使用しない方法で進めてみることにしました。
エディタを使用しない方法も同じくめいパパさんの記事で説明してくださっています。
マーカーを引く方法
１、はてなブログのデザイン→スパナマークにある、デザインCSSに上記記事（ブログにマーカーを簡単に引く方法。最初に登録をしておけば、５秒で様々な色のマーカーを引くことができます。 - 雨のち晴れ）内のコードを貼る
２、変更を保存
３、ブログ記事をHTML編集し、上記記事内のHTMLコードをコピペ。
＜ここに文字を入力＞というところに文章を入れる。
これで無事マーカーを引くことができました⭐️
見たまま編集ではマーカーは見えませんがプレビューではみることができます😊
雨のち晴れめいパパ (id:meipapa0219) さんの上記記事内には色の変更方法も書いてありますよ🎵
どうでしょうか？
かわいいですね😊
ちなみに私は簡単にコードが入力できるように、HTMLコードを定型文に保存しました。
これでHTML編集に貼り付けて文章を入れ替えるだけでマーカーが簡単に引けるようになりました。
そしてここから少し手間取ってしまったところ。
応用編（他のカラーのマーカーを引く方法）
上記記事内の下の方に色々なカラーのコピペ用CSSコードがあります。
１、それを必要な色のコードのみ（全部でも良いです）デザインCSSにコピペします。
２、先ほどのHTMLコード（これはオレンジのコード）の
<span class="orange-marker"><ここに文字を入力></span>
（めいパパさん記事内より）
ここの『色を表す部分』を先ほどデザインCSSにコピペしたコードの『色を表す部分』と同じ名称にそれぞれ変更し新たなHTMLコードとします。
３、新たなHTMLコードを先ほどと同じように編集ページで使用すると色が変化したマーカーが引けます。
例：
CSSコードのピンクコードをデザインCSSにコピペしている場合
HTMLの『色を表す部分』を変更して記事に使用。
<span class="orange-marker"><ここに文字を入力></span> （めいパパさん記事内より）
↓
<span class="pink-marker"><ここに文字を入力></span>
（分かりやすく文字の色を変えて表記しているだけです。実際は黒のままで大丈夫です）
いかがでしょうか？
これでデザインの幅がさらに広がりました！！😊
⚠️こちらはPCでブログを見た時のみの設定となります。
スマホに反映させるにはブログのテーマをレスポンシブ対応にし、デザイン→スマホマークからの高度な設定（詳細設定）のレスポンシブデザインにチェックを入れてください。
めいパパさん大変参考になりました。どうもありがとうございました！！
この記事が面白いと思ってくださった方は押していただけますと励みになります！よろしくお願いいたします☺️
最後までお読みいただきありがとうございました！
