この記事は、
- こんな感じのマーカーを使いたい
- 何色か使い分けたい
- でもHTMLやCSS等の専門知識はない
こういった人向けの記事となります。このマーカーが使えると、オシャレな感じに強調できていいですよね！
直接コードを触る事がないような方法を紹介するのでご安心ください！
まずはコピー
黄色のマーカーが使いたい方は上半分をコピー、緑のマーカーも使いたい方は全てコピーするといいでしょう。
.marker-yellow {
background: linear-gradient(transparent 60%, #FFFF99 50%);
}
.marker-green {
background: linear-gradient(transparent 60%, #98FB98 50%);
}ペースト
WordPressの「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」に先ほどコピーしたものをペーストしましょう。
こうなります。
ここで「公開」を押すのをお忘れなく！
公開を忘れたら後悔しますよ。なんつって……。
…………。
プラグイン
AddQuicktagインストール
WordPressの「ダッシュボード」→「プラグイン」→「新規追加」
から、「AddQuicktag」をインストールして有効化しましょう。
AddQuicktagの設定
「設定」→「 AddQuicktag 」で、がぞうの四角で囲った部分を記入し、右のチェック欄全てにチェックを入れます。一番右の箱にチェックを入れると、その列の箱全てにチェックが入ります。
次に「デフォルトのクイックタグを非表示にする」の項目ですが、とりあえず全ての欄にチェックを入れておくといいでしょう。使い慣れてきたらチェックを外してみるといいかもしれません。
さて、最後になりますが、「拡張コードクイックボタン」の「widgets」にだけチェックを入れて変更を保存しましょう。
これで使う準備は整いました。
実際に使ってみる
まず注意すべきこととして、AddQuicktagはGutenbergエディタ(ブロックエディタ)では使用できません。2019年現在、Gutenbergエディタで編集してる方も多いと思いますので、従来のクラッシックエディタに戻す方法から丁寧に解説していきます。
クラシックエディタに戻しマーカーを使用
『ブロックの追加』から『フォーマット』にある『クラシックエディタ』を選択すると、そのブロックのみクラシックエディタに戻すことができます。
するとブロックがこのように変化するので、まずマーカーを引きたい文字を左クリックで選択し、『Quicktags』からマーカーの色を選んでクリックしましょう。一見何の変化も起こってないように見えますが、画面右上の『プレビュー』で確認すると、しっかりとマーカーが引けていることが分かります。
ブロックエディタに戻す
基本的に戻す必要はないですが、ブロックエディタでしかできないこともあるので、戻したくなるときもあるでしょう。そんな時は、上の画像内右上の…から、『ブロックに変換』を選択すると戻すことができます。勿論、ブロックエディタに戻したからといってマーカーが消えるなんてことはありません。
サイトの見た目や装飾を自由に弄れる技術が欲しい。なんなら一からWebサイトを作りたい。
そんな方にはTechAcademyフロントエンドコースがオススメ。無料体験、予約はコチラから↓
