こんな人におすすめマーカーペンの引き方解説します😊💋
＊読んでほしい人＊
記事内にラインマーカーを引く方法を知りたい人
OPENCAGEのテーマを使用している人
♡ 目次 ♡
ワードプレスのブログでラインマーカーを引く方法
CSS・HTMLのコードの入力する場所は？
WordPressで書かれたブログを見ているとこんな風に蛍光ペンでノートにラインを引いたようなデザインを目にしませんか？
ただ文字を書くより、強調したい箇所が分かりやすくて、見た目もなんだかかわいい感じがしますよね。
無料ブログを使っていた時は、このマーカーペンで色を付けるデザインはボタン１つで挿入できました。
でもWordPressの場合は投稿画面のテキストエディター（HTML）と
追加CSS
にコードを書き込まないと使えません。
超初心者の頃、このコードを確認作業がとても面倒に感じられて、
と思いました😅
CSSやHTMLの英文字や記号の羅列は見慣れないうちはとっても難しく感じます・・。
でも慣れてしまうと本当に簡単に書けるので挑戦してみて下さい。
他の方のブログでもブログ内に蛍光ペンを引く方法について書いてある記事をよく目にしますが、このOPENCAGEのアルバトロスのテーマでは書いてある通りにしてみてもなかなか記事上に反映されませんでした。
最終的にアルバトロスのお問合せ窓口に問い合わせをしてみてやっと解消したので、同じテーマを使用している方なら、この通り入力すれば確実に記事に反映されます♪
コードの入力手順と入力方法
CSS画面に入力するコードとコードの意味
テキストエディタにコードを入力する前に、まずはCSSにコードを入力してブログにHTMLの”コードの意味”を覚えてもらう必要があります。
テキストエディタにコードを入力する前の準備
CSSを入力する画面は、【カスタマイズ】＞【追加CSS画面】の
ここか
もしくは、ダッシュボードの画面の【外観】＞【テーマエディタ】＞【編集するテーマを選択】＞【style.css】の画面から入力します。
ダッシュボードのテーマエディターの中にあるスタイルシート（style.css)から編集する際は必ず編集するテーマを選択します。
わたしは子テーマを使用しているので編集するテーマ名は”albatros_custom”の表示になっています
※子テーマについての記事はまた後日書きます🙂
このコードをこのままコピーしての上の画像のCSSの画面のどちらかに貼り付けてください。
まず例として定番の黄色のペンから
|
1 2 3 4 |
.yellow_line {background:rgba(0, 0, 0, 0) linear- gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;} |
入力が出来たら『公開』ボタンを押します。
コードの意味をチェック
コードの意味はCSS/HTMLを勉強してみると少しずつ分かってきます。
例えば、このコードであれば、transparent 60%の部分の％（パーセンテージ）はラインがかかっていない透明部分を表しています。
transparentは『透明な』という意味なので、透明部分のパーセンテージを設定するという意味になります。
％の数字を大きくすれば透明部分の割合が増えるのでラインの太さは細くなります。
このブログでは60％を設定していますが、例えば10％に変更すると
ラインがより強調される感じになりますね。
『#ffffbc』は文字色を表すコードです。
カラーコード表を参照してこのコードを変更することで色々な色に変更できます。
カラーコード表のサイトも調べると色々と出てきますが、今のところこのサイトがおしゃれな感じで気に入っています💓
上に載せたコードの黄色は若干薄めの色を設定しているので、もっと濃くしたい方はコードを変更してみて下さいね。
これで『透明部分が60％』で『カラーは「#ffffbc」の色のライン』が反映するようにブログに覚えさせたということになります。
テキストエディタにHTMLコードを入力
CSSの入力が完了したら、次は投稿画面のテキストエディタにHTMLのコードを入力していきましょう。
HTMLをテキストエディターから入力することで、ブログが覚えたコードの内容が実際の投稿画面に反映する仕組みです😃
HTMLのコードはこちらです。コピペして下さいね。
|
1 |
<strong class="yellow_line"></strong> |
テキストエディタの画面を開き、< >のタグで囲まれたコードで線を引きたい文字をはさみます。
更新すると、記事上には”こう反映します”♪
これでマーカーが引けるようになりましたね。
色々な色を使ってみよう
このブログでは黄色、ピンク、ブルーの3色を使用しています。
それぞれのコードはこちら。
CSS
ピンク
|
1 2 3 4 |
.pink_line {background:rgba(0, 0, 0, 0) linear- gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;} |
青
|
1 2 3 4 |
.blue_line{background:rgba(0, 0, 0, 0) linear- gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;} |
HTML
ピンク
|
1 |
<strong class="pink_line"></strong> |
青
|
1 |
<strong class="blue_line"></strong> |
この記事を書くにあたって何色か追加してみました😊
CSS
グリーン
|
1 2 3 4 |
.green_line {background:rgba(0, 0, 0, 0) linear- gradient(transparent 60%, #00FF00 0%) repeat scroll 0 0;} |
オレンジ
|
1 2 3 4 |
.orange_line {background:rgba(0, 0, 0, 0) linear- gradient(transparent 60%, #FF6100 0%) repeat scroll 0 0;} |
ティファニーブルー💕
|
1 2 3 4 |
.tiffanyblue_line {background:rgba(0, 0, 0, 0) linear- gradient(transparent 60%, #00FFCB 0%) repeat scroll 0 0;} |
HTML
グリーン
|
1 |
<strong class="green_line"></strong> |
オレンジ
|
1 |
<strong class="orange_line"></strong> |
ちょっとおしゃれにティファニーブルー💕
|
1 |
<strong class="tiffanyblue_line"></strong> |
あまりカラフルにしすぎると強調したい箇所がどこなのか曖昧になって、読みにくくなるので、3色くらいがちょうどいいかなと思っています。
ブログの雰囲気に合わせて使用する色を変えてみてもいいかもしれません😊
ブログ上にうまく反映しない時はここをチェック
入力は出来たけど更新してみると変化がない場合は以下のポイントをチェックしてみて下さい。
- コードの入力を間違えていないか
- キャッシュをクリアして解消しないか
- 読み込みに時間がかかっている可能性はないか
コードの入力を間違えている
CSSやHTMLはコードを1文字でも間違えていたり、余分なスペースが入っていたり、半角で入力するところを全角で入力しているとうまく反映しません。
コピペで入力する時は特に余分なスペースが入っていないか注意してくださいね。
キャッシュをクリアして再読み込みしてみる
ブラウザには1度見たページを一時的に記憶させておく”キャッシュ機能”というものがあります。
この機能が使われることで同じページをもう一度見る際に、ページが早く表示されるようになっています。
このキャッシュが残っていると更新したページがうまく表示しないことがあります。
キャッシュを削除してから再読み込みをすると解消することがあるので試してみて下さい。
※キャッシュを削除したら必ず開いているページを全て閉じてから開きなおします。
読み込みに時間がかかっている
①②の手順で解消しない場合は、端末再起動をして様子を見てもらいのですが、それでも解消しない場合があります。
その場合、ただ読み込みに時間がかかっていることが考えられます。
わたしも今のPCは4-5年程使用しているせいか、読み込みに時間がかかり、変更した内容がなかなか反映しないことが多いです。
普段はInternetExploreを使用しているのですが、ブラウザをGoogleChromeにかえたり、スマホやiPadの別端末でブログを見てみると変更した内容が反映されていることがあります。
他にも原因はいろいろと考えられますが、上記の内容で解消しなければ、ブログテーマとの相性の問題といった点も考えられるので、別のコードで代替えできないか調べて試してみる方が早いかもしれません。
ブログのジャンルに合わせると読者の読みやすいブログに仕上がる
マーカーを使うと逆効果?
マーカーを使うと文章に強弱がついたり、ブログにオリジナル感が出たりするのでおすすめです。
ただ、カラフルな色合いは男性の方には読みにくいと感じる場合があるようです。
これはメンタリストのダイゴさんの『男女別脳戦略』という書籍で読んだのですが、網膜の視細胞の関係で男性と女性では反応する色が違うらしいです。
女性は『赤、グリーン、オレンジ』といったカラフルな色、男性は『黒、灰色、青、銀色』といったモノクロ系の色を好む傾向にあります。
実際、職場で社内メールを配信した際にも、文字の色をかえたカラフルなメールを作ると男性社員からは『読みにくい！』、女性社員からは『読みやすい♪』という反響があります。
女性向けのブログを書く時はなるべくカラフルになるよう、男性にも読んでほしい内容のブログを書く際はあまり蛍光ペンは使用しないよう意識するとよいかもしれません。
このダイゴさんの書く『男女別脳戦略』ですが、元々営業やビジネスシーンでの成約率を上げるために書かれた本で、アフィリエイトに使えるような情報がたくさんつまっています。
アフィリエイトも人のこころを動かす文章を書いて商品を買ってもらうビジネスなのでメンタリズムに通じることころがありますよね。
ブログを書いたり、アフィリエイトをしたりするのにとても役立ちそうなのでおすすめです。
気になる方は読んでみて下さいね。😃
ブログに色を付けてオリジナル感を出したい♪