ワードプレス マーカーを引く 方法は?*ブログの記事が倍かわいくなる♪【ブログテーマ:OPEN CAGE】

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

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

 

今日はこんな人におすすめ、

 

ワードプレスのブログでおしゃれに♪

マーカーペンを引く方法を解説します😊💋

 

*読んでほしい人*

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

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

 

ワードプレス 文字装飾はマーカー で♪ おしゃれなブログを書く方法*

ワードプレス マーカー html を入力する場所は?*

WordPressで書かれたブログを見ていると

こんな風に

蛍光ペンでノートにラインを引いたようなデザインを目にしませんか?😀

 

ただ文字を書くより、

 

強調したい箇所が分かりやすくて

見た目もなんだかかわいい感じ

 

がしますよね☺️💖

 

無料ブログサービスを使ってブログを書いていた時は、

このマーカーペンで色を付けるデザインはボタン1つで挿入できましたが、

 

WordPressの場合、

投稿画面のテキストエディター(HTML)

 

 

追加CSS

 

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

 

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

 

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

 

ワードプレス マーカー できない のはなぜ?*

WordPressのブログに蛍光ペンを引く方法についての記事はよく目にしますが、

 

このOPENCAGEのアルバトロスのテーマでは書いてある通りにしてみてもなかなか記事上に反映されませんでした

 

原因はやり方を間違えていたから💦

 

*あなたの ブログをもっとおしゃれに♥*

 

*OPEN CAGE のテーマ*

 

最終的にOPEN CAGEのサポート窓口に問い合わせをしてみてやっとやり方が分かりました☺️

 

同じテーマを使用している方なら、

この通り入力すれば確実に記事に反映されるのでやってみてください♪

ワードプレス マーカー プラグインなし でOK!

 

ワードプレスはプラグインを使わなくてもマーカー引くことができます。

 

プラグインでマーカーが引けるようになれば手っ取り早いかもしれませんが🤔

 

プラグインはむやみにインストールすると、

 

セキュリティ上問題があったり

不具合を起こしてブログにトラブルが起きたり

重たくなったり

 

するので、コードで実装できればその方がいいです☺️❤️

ワードプレス マーカー コードの入力手順と入力方法*

ワードプレス マーカー 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度見たページを一時的に記憶させておく”キャッシュ機能”というものがあります。


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

 

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

 

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

 

PC 動きが遅いときの対処法 * 画面の表示がおかしい、画面が固まるときにも試してみよう【*キャッシュの削除*】

2019-06-19

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

 

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

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

 

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

 

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

 

普段はInternetExploreを使用しているのですが、

 

ブラウザをGoogleChromeにかえたり、

スマホやiPadの別端末でブログを見てみる

 

と変更した内容が反映されていることがあります。

 

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

 

他にも原因はいろいろと考えられますが、

上の方法で解消しなければ、

 

ブログテーマとの相性の問題

 

といった点も考えられるので、

別のコードで代替えできないか調べて試してみる方が早いかもしれません。

 

ワードプレス マーカー 消す 方法は?*

引いた線を消す場合は、入力したHTNLのコードを消すだけ☺️

 

テキストエディタを開くと、コードがたくさん並んでいて、

 

一度入力したコードを探すのも大変なのですが、

 

そんなときは「Ctrl+F」でキーワード検索を使うと、

 

入力した文章が見つけやすいです✨

 

いかがでしたか?

 

ブログの文章は、

 

女性向けに書くのであればカラフルに

男性向けに書くのであればモノトーン

 

を意識して書くと、読者が読みやすい文章に仕上がります。

 

私のブログの読者さんは女性がメインなので💖

 

なるべく女性が読んでいて

 

楽しい

  テンション上がる

  ウキウキする

 

という文面やデザインを心がけています(●’◡’●)

 

ちょっとの工夫で自分のブログのファンを増やすきかっけにしてみてくださいね!

*Share this article !*

コメントを残す

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

CAPTCHA


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