WordPress(ワードプレス)の記事にマーカーペンを引く方法は?ブログが倍かわいくなる♪CSS・HTMLコードコピペok!【オープンケージ*アルバトロス】

ブログ内にマーカーペンを引く方法を教えて!

ブログに色を付けてオリジナル感を出したい♪

 

こんな人におすすめマーカーペンの引き方解説します😊💋

 

*読んでほしい人*

記事内にラインマーカーを引く方法を知りたい人

OPENCAGEのテーマを使用している人

 

ワードプレスのブログでラインマーカーを引く方法

CSS・HTMLのコードの入力する場所は?

WordPressで書かれたブログを見ているとこんな風に蛍光ペンでノートにラインを引いたようなデザインを目にしませんか?

 

ただ文字を書くより、強調したい箇所が分かりやすくて、見た目もなんだかかわいい感じがしますよね。

 

無料ブログを使っていた時は、このマーカーペンで色を付けるデザインはボタン1つで挿入できました。

 

でもWordPressの場合は投稿画面のテキストエディター(HTML)

 

追加CSS

 

コードを書き込まないと使えません

 

超初心者の頃、このコードを確認作業がとても面倒に感じられて、

 

さりぃ♥
WordPressは無理かも・・

 

と思いました😅

 

CSSやHTMLの英文字や記号の羅列は見慣れないうちはとっても難しく感じます・・。

でも慣れてしまうと本当に簡単に書けるので挑戦してみて下さい。

 

他の方のブログでもブログ内に蛍光ペンを引く方法について書いてある記事をよく目にしますが、このOPENCAGEのアルバトロスのテーマでは書いてある通りにしてみてもなかなか記事上に反映されませんでした

 

最終的にアルバトロスのお問合せ窓口に問い合わせをしてみてやっと解消したので、同じテーマを使用している方なら、この通り入力すれば確実に記事に反映されます♪

コードの入力手順と入力方法

CSS画面に入力するコードとコードの意味

テキストエディタにコードを入力する前に、まずはCSSにコードを入力してブログにHTMLの”コードの意味”を覚えてもらう必要があります。

 

*さりぃ*
この手順を飛ばしすと画面にうまく反映しません💦

 

テキストエディタにコードを入力する前の準備

CSSを入力する画面は、【カスタマイズ】>【追加CSS画面】

 

ここか

 

もしくは、ダッシュボードの画面の【外観】>【テーマエディタ】>【編集するテーマを選択】>【style.css】の画面から入力します。

 

*さりぃ*
どちらでも大丈夫です。

 

ダッシュボードのテーマエディターの中にあるスタイルシート(style.css)から編集する際は必ず編集するテーマを選択します。

 

わたしは子テーマを使用しているので編集するテーマ名は”albatros_custom”の表示になっています

※子テーマについての記事はまた後日書きます🙂

 

このコードをこのままコピーしての上の画像のCSSの画面のどちらかに貼り付けてください。

 

まず例として定番の黄色のペンから

 

 

入力が出来たら『公開』ボタンを押します。

 

コードの意味をチェック



コードの意味はCSS/HTMLを勉強してみると少しずつ分かってきます。

 

例えば、このコードであれば、transparent 60%の部分の%(パーセンテージ)はラインがかかっていない透明部分を表しています。

 

transparentは『透明な』という意味なので、透明部分のパーセンテージを設定するという意味になります。

 

%の数字を大きくすれば透明部分の割合が増えるのでラインの太さは細くなります

 

このブログでは60%を設定していますが、例えば10%に変更すると

 

 

 

ラインがより強調される感じになりますね。

 



『#ffffbc』は文字色を表すコードです。

 

カラーコード表を参照してこのコードを変更することで色々な色に変更できます。

 

カラーコード表のサイトも調べると色々と出てきますが、今のところこのサイトがおしゃれな感じで気に入っています💓

 

上に載せたコードの黄色は若干薄めの色を設定しているので、もっと濃くしたい方はコードを変更してみて下さいね。

 

これで『透明部分が60%』で『カラーは「#ffffbc」の色のライン』が反映するようにブログに覚えさせたということになります。

 

テキストエディタにHTMLコードを入力

CSSの入力が完了したら、次は投稿画面のテキストエディタにHTMLのコードを入力していきましょう。

 

HTMLをテキストエディターから入力することで、ブログが覚えたコードの内容が実際の投稿画面に反映する仕組みです😃

 

HTMLのコードはこちらです。コピペして下さいね。

 

 

テキストエディタの画面を開き、< >のタグで囲まれたコードで線を引きたい文字をはさみます。

更新すると、記事上には”こう反映します”

 

これでマーカーが引けるようになりましたね。

 

色々な色を使ってみよう

このブログでは黄色ピンクブルーの3色を使用しています。

 

それぞれのコードはこちら。

 

CSS

ピンク

 

HTML

ピンク

この記事を書くにあたって何色か追加してみました😊

 

CSS

グリーン

オレンジ

ティファニーブルー💕

 

HTML

グリーン

オレンジ

ちょっとおしゃれにティファニーブルー💕

 

あまりカラフルにしすぎると強調したい箇所がどこなのか曖昧になって、読みにくくなるので、3色くらいがちょうどいいかなと思っています。

 

ブログの雰囲気に合わせて使用する色を変えてみてもいいかもしれません😊

ブログ上にうまく反映しない時はここをチェック

入力は出来たけど更新してみると変化がない場合は以下のポイントをチェックしてみて下さい。

 

  1. コードの入力を間違えていないか
  2. キャッシュをクリアして解消しないか
  3. 読み込みに時間がかかっている可能性はないか

 

コードの入力を間違えている

CSSやHTMLはコードを1文字でも間違えていたり余分なスペースが入っていたり、半角で入力するところを全角で入力しているとうまく反映しません。

 

コピペで入力する時は特に余分なスペースが入っていないか注意してくださいね。

 

キャッシュをクリアして再読み込みしてみる

ブラウザには1度見たページを一時的に記憶させておく”キャッシュ機能”というものがあります。


この機能が使われることで同じページをもう一度見る際に、ページが早く表示されるようになっています。

 

このキャッシュが残っていると更新したページがうまく表示しないことがあります。

 

キャッシュを削除してから再読み込みをすると解消することがあるので試してみて下さい。

 

【Win10】キャッシュの削除方法を解説。動作が遅い?画面の表示がおかしい?画面が固まる。そんな時はキャッシュを削除してみよう。【*覚えておきたい基本動作編①*】

2019.06.19

キャッシュを削除したら必ず開いているページを全て閉じてから開きなおします

 

読み込みに時間がかかっている

①②の手順で解消しない場合は、端末再起動をして様子を見てもらいのですが、それでも解消しない場合があります。

 

その場合、ただ読み込みに時間がかかっていることが考えられます。

 

わたしも今のPCは4-5年程使用しているせいか、読み込みに時間がかかり、変更した内容がなかなか反映しないことが多いです。

 

普段はInternetExploreを使用しているのですが、ブラウザをGoogleChromeにかえたり、スマホやiPadの別端末でブログを見てみると変更した内容が反映されていることがあります。

 

さりぃ♥
PCには半日以上経ってから反映することもあります

 

他にも原因はいろいろと考えられますが、上記の内容で解消しなければ、ブログテーマとの相性の問題といった点も考えられるので、別のコードで代替えできないか調べて試してみる方が早いかもしれません。

 

ブログのジャンルに合わせると読者の読みやすいブログに仕上がる

マーカーを使うと逆効果?

マーカーを使うと文章に強弱がついたり、ブログにオリジナル感が出たりするのでおすすめです。

 

ただ、カラフルな色合いは男性の方には読みにくいと感じる場合があるようです。

 

これはメンタリストのダイゴさんの『男女別脳戦略』という書籍で読んだのですが、網膜の視細胞の関係で男性と女性では反応する色が違うらしいです。

 

女性は『赤、グリーン、オレンジ』といったカラフルな色、男性は『黒、灰色、青、銀色』といったモノクロ系の色を好む傾向にあります。

 

実際、職場で社内メールを配信した際にも、文字の色をかえたカラフルなメールを作ると男性社員からは『読みにくい!』、女性社員からは『読みやすい♪』という反響があります。

 

女性向けのブログを書く時はなるべくカラフルになるよう、男性にも読んでほしい内容のブログを書く際はあまり蛍光ペンは使用しないよう意識するとよいかもしれません。

 

このダイゴさんの書く『男女別脳戦略』ですが、元々営業やビジネスシーンでの成約率を上げるために書かれた本で、アフィリエイトに使えるような情報がたくさんつまっています。

 

アフィリエイトも人のこころを動かす文章を書いて商品を買ってもらうビジネスなのでメンタリズムに通じることころがありますよね。

 

ブログを書いたり、アフィリエイトをしたりするのにとても役立ちそうなのでおすすめです。

 

気になる方は読んでみて下さいね。😃

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

アバター

「さりぃ ❤」です。 IT関連の一般企業勤めのアラサーOL。 2回の転職を経て現職は3年目に突入。 時の流れに身を任せて、気付けば今年で社会人8年目! フリーランス・独立を夢見て副業に勤しむ毎日を送っています。 目標は副業が本業の収入を超えたら起業すること♪ 自分がWordPressを始めた頃の気持ちをテーマに、初心者さんに役立ちそうな記事を丁寧に書いています。 あとは日々こつこつしている副業とその成果についても更新中です♥ 少しでもお役に立てる情報をお届け出来ますように・・