今日はこんな人におすすめ、
ワードプレスのブログでおしゃれに♪
マーカーペンを引く方法を解説します😊💋
＊読んでほしい人＊
記事内にラインマーカーを引く方法を知りたい人
OPENCAGEのテーマを使用している人
ワードプレス 文字装飾はマーカー で♪ おしゃれなブログを書く方法*
ワードプレス マーカー html を入力する場所は？*
WordPressで書かれたブログを見ていると
こんな風に
蛍光ペンでノートにラインを引いたようなデザインを目にしませんか？😀
ただ文字を書くより、
強調したい箇所が分かりやすくて、
見た目もなんだかかわいい感じ
がしますよね☺️💖
無料ブログサービスを使ってブログを書いていた時は、
このマーカーペンで色を付けるデザインはボタン１つで挿入できましたが、
WordPressの場合、
投稿画面のテキストエディター（HTML）と
追加CSS
にコードを書き込まないと使えません。
CSSやHTMLの英文字や記号の羅列は見慣れないうちはとっても難しく感じますが・・
慣れてしまうと本当に簡単に書けるので挑戦してみて下さい✨
ワードプレス マーカー できない のはなぜ？*
WordPressのブログに蛍光ペンを引く方法についての記事はよく目にしますが、
このOPENCAGEのアルバトロスのテーマでは書いてある通りにしてみてもなかなか記事上に反映されませんでした。
原因はやり方を間違えていたから💦
＊あなたの ブログをもっとおしゃれに♥＊
＊OPEN CAGE のテーマ＊
最終的にOPEN CAGEのサポート窓口に問い合わせをしてみてやっとやり方が分かりました☺️
同じテーマを使用している方なら、
この通り入力すれば確実に記事に反映されるのでやってみてください♪
ワードプレス マーカー プラグインなし でOK!
ワードプレスはプラグインを使わなくてもマーカー引くことができます。
プラグインでマーカーが引けるようになれば手っ取り早いかもしれませんが🤔
プラグインはむやみにインストールすると、
セキュリティ上問題があったり
不具合を起こしてブログにトラブルが起きたり
重たくなったり
するので、コードで実装できればその方がいいです☺️❤️
ワードプレス マーカー コードの入力手順と入力方法*
ワードプレス マーカー 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の別端末でブログを見てみる
と変更した内容が反映されていることがあります。
他にも原因はいろいろと考えられますが、
上の方法で解消しなければ、
★ブログテーマとの相性の問題
といった点も考えられるので、
別のコードで代替えできないか調べて試してみる方が早いかもしれません。
ワードプレス マーカー 消す 方法は？*
引いた線を消す場合は、入力したHTNLのコードを消すだけ☺️
テキストエディタを開くと、コードがたくさん並んでいて、
一度入力したコードを探すのも大変なのですが、
そんなときは「Ctrl+F」でキーワード検索を使うと、
入力した文章が見つけやすいです✨
いかがでしたか？
ブログの文章は、
★女性向けに書くのであればカラフルに
★男性向けに書くのであればモノトーン
を意識して書くと、読者が読みやすい文章に仕上がります。
私のブログの読者さんは女性がメインなので💖
なるべく女性が読んでいて
楽しい
テンション上がる
ウキウキする
という文面やデザインを心がけています(●’◡’●)
ちょっとの工夫で自分のブログのファンを増やすきかっけにしてみてくださいね！
ブログに色を付けてオリジナル感を出したい♪