オカンTECH

全国のオカンのITリテラシーを底上げだ!

f:id:beaber:20211122011912p:plain
 音楽聞き放題の無料体験もう試した?

【2022年現役】はてなブログでおしゃれなストライプマーカーを引く方法【WordPress風】

 


2f:id:beaber:20210628164354p:plain













はてなブログではWordPressみたいにストライプマーカーを引くことはできないのかしら?

f:id:beaber:20210628164402p:plain







カスタマイズすることで使うことはできるよ。ただし「見たままモード」ではマーカーを表示させることはできないので注意が必要だよ

 

このページでは「はてなブログでストライプマーカーを引く方法」を中心に紹介。

複数パターンの色を紹介しつつ、手順を説明していきます。

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • はてなブログでもマーカーを引きたい
  • WordPressのようなおしゃれなマーカーを使いたい
  • コピペだけでブログをカスタマイズしたい

 

f:id:beaber:20211117154746p:plain

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

完成イメージ

 

「はてなブログでストライプマーカーを引く」

 

文字を強調し、目立たせたいときに使用するマーカーです。

乱用すると読みづらくなるだけなので、ほどほどがちょうど良いです。

 

今回はこのマーカーの引き方を紹介します。

 

WordPress風のおしゃれマーカーがおすすめ

目立たせたい時に使用することが多いマーカーですが、よく見るマーカー(図1)を文中に引くと どうしてもマーカー部分で目が留まってしまって見づらいです。

 

特に怪しいアフィリエイトサイト(笑)でこのようなマーカーを見かけるので、読者にとってはネガティブな印象を持つことがあります。

 

以下は、先ほどの文章によく見るマーカーを引いた例です。

f:id:beaber:20211124233751p:plain

図1 よく見るマーカー

 

 

対して、最近のWordPress界隈で流行りのストライプマーカーは自然に線が引けます。

 

文章に馴染んでいて怪しいアフィリエイトサイト(笑)感はだいぶ薄まったのではないでしょうか。

 

以下は、例におしゃれストライプマーカーを引いてみました。

f:id:beaber:20211124233848p:plain

図2 おしゃれストライプマーカー

 

f:id:beaber:20210628164402p:plain





はてなブログでストライプマーカーを使っている人はあまり見かけないので目立つよ!

ストライプマーカーの使用方法

事前準備(CSS入力)

※この先の手順はパソコンで操作してください。

STEP
設定画面を開く
はてなの管理ページから設定を押す。

f:id:beaber:20211125002858p:plain

STEP
詳細設定画面を開く
「詳細設定」を押す。

f:id:beaber:20211125002922p:plain



STEP
テキストボックスを選択する
下の方へ行き、「<head>要素にメタデータを追加」を押す。

f:id:beaber:20211125002955p:plain



STEP
CSSコードを入力する
以下をコピペして貼り付ける。

 

STEP
変更内容を保存
一番下へ行き、「変更する」を押す。以上で事前準備は完了です。お疲れさまでした。

f:id:beaber:20211125003203p:plain

 

f:id:beaber:20210628164402p:plain





今回はイタリック(斜体)を黄色マーカーにする方法です。このCSSコードを使っている間はイタリックは使用できなくなるので注意してね

 

記事に挿入

※この先の手順はパソコンで操作してください。

STEP
はてなブログの記事編集画面へ
はてなブログの管理画面から「記事編集画面」を開く。
STEP
マーカーを引きたい文を選択
マーカーを引きたい文をドラッグし、選択する。今回は「デザイン画面を開く」にマーカーを引きます。

f:id:beaber:20211128064716p:plain

STEP
イタリックモードにする
マーカーを引きたい文を選択した状態で「i(斜体)」を押す。

f:id:beaber:20211128064433p:plain

STEP
表示確認
プレビューを押し、マーカーが引かれていることを確認する。

f:id:beaber:20211128064447p:plain

ストライプマーカー10色

ストライプマーカーを使用するためのCSSコードを色別に紹介します。

 

今回は以下の10色を紹介します。

使用方法は、黄色マーカーと同様の流れで 貼り付けるCSSコードのみ使用したい色のものに変更してください。

ストライプマーカーCSSコード5色

  • 赤色
  • 青色
  • 緑色
  • オレンジ
赤色

f:id:beaber:20211128070959p:plain

 

 

青色

f:id:beaber:20211128071355p:plain

 

緑色

f:id:beaber:20211128071030p:plain

 

オレンジ

f:id:beaber:20211128071042p:plain

 

f:id:beaber:20211128071054p:plain

f:id:beaber:20210628164402p:plain





CSSコードの中の「#fcf69f」の部分を変えることで好きな色に変えられます。好みの色がなければチャレンジしてみてね

まとめ

おしゃれはコピペで作れます。笑

はてなブログでもWordPress風にマーカーくらい引けます。

 

マーカーはデフォルトで機能としてあっても良いくらい使いやすいので、ぜひ使い方を覚えて読者にとって読みやすいブログにしてください。

 

最後に関連記事のご紹介。はてなブログでも少しは稼げるんだよ

といった記事です。

 

www.okan-tech.com

 

 

最後までありがとうございました。

 

 

オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2021 オカンTECH Powered by Hatena Blog