オカンTECHロゴ
iPadほしい人!買う前に絶対見てほしい

【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

 

 

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

 

 

ITハンドブック
初めてのオカンにはまずはこれ!

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック?

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック


入れておきたい定番スマホアプリ

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

インスタグラマー御用達!CanvaProの30日間無料トライアルの登録方法

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで解説

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで

実家のオカンに教えた得する情報

安過ぎて鼻血が出そうになる中古Apple製品買い方

安過ぎて鼻血が出そうになる中古Apple製品買い方

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

家事との相性バツグン!Audibleを使って読みたかった本を読破

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

オカンでも出来るインスタ攻略

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

Instagram片思いチェックアプリReports Followers

Instagram片思いチェックアプリReports Followers

人気記事

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

ブログ:オカンTECHの紹介

ーパソコンでわからないことがあるわ。息子が次に実家に帰ってきたら聞こう。
ースマホのプランを変えたいけどよくわからないわ。携帯ショップに問い合わせしよう。

このブログではこういった時に誰かに頼らずに自分で答えに辿り着けるオカンの「IT的自立」を目指します。


新着記事
オカンTECH

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

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

©️ 2022 オカンTECH Powered by Hatena Blog