azuhiko@68【カスタマイズ】ワードプレスの記事へ蛍光ペン風にアンダーラインが引きたい?プラグイン「AddQuicktag」を使えば超カンタン!ツイートシェアはてブLINEPocketワードプレスで記事を作成しているとポイントとなるテキストやフレーズに下線(アンダーライン)を引いて目立たせたいことってありますね。こんな感じに・・・ベタっと黄色で強調するのではなくて半透明な感じの蛍光ペンでアンダーラインを引いた見栄えはスッキリして見えてイヤミがありません。この方法、実はとってもカンタン。大まかな3つのステップでできちゃいます。それではお伝えいたしましょう。余談|コードをそのまま表示する方法おさらいとまとめショートコードと言われるタグを使うショートコードとは?ワードプレスではショートコードと呼ばれる「タグ」を使うことでカンタンに記事中のテキストに装飾をかけたりサイトのデザインをカスタマイズすることが可能です。今回の蛍光ペン風にアンダーラインを引くために下記のショートコードを使います。蛍光ペン風ショートコードテキストこのコードを装飾をかけたいテキストの前後に挟み込めば完了です。ショートコードの利便性を最大化するプラグイン「AddQuicktag」ショートコードはワードプレスで記事を作成するうえでとても便利で頻繁に使うものです。そのたびにいちいちキーボードで打ち込むのもコピーしてくるのも面倒です。この問題を解決してくれる便利なプラグインが「AddQuicktag」です。このプラグインをお使いのワードプレスにインストールしてよく使うショートコードをAddQuicktagの設定から入力しておきます。すると記事作成画面上に表示設定しておいたショートコードが投稿編集画面に表示されます。ショートコードを使いたい場合は記事内のテキストをマウスでドラッグしておいてからコードをクリックするだけなので作業効率の向上にもつながります。ちなみにstorkを販売しているオープンゲージ公式サイトでは利用頻度の高いショートコードをまとめたデータファイルをダウンロードできますので活用されるのも良いでしょう。上記のリンクからインポートファイルをダウンロードしたファイルはこのままではワードプレスにインストールできません。窓の杜かvectorでLhaplus(ルーファス)などの無料で利用できる解凍ソフトをダウンロードしインストールします。vectorで解凍ソフトをダウンロードする。パソコンへインストールしデスクトップなどにショートカットアイコンをおいておくと便利です。オープンケージでダウンロードしたAddQuicktagインポートファイルをマウスでクリックしたまま解凍ソフトのアイコンの真上まで持って行きます。この作業でインポートファイルが解凍完了です。解凍後のファイルをAddQuicktagの設定画面からインストールして完了です。CSSにコードを追加CSSとは?カスケーディングスタイルシートと言われる定義を使ってウェブサイトのデザインと装飾を行います。HTMLで書いた命令文と構造をCSSでカスタマイズするという関係性です。ようするにウェブサイトの骨格となる構造がHTMLでありこれを女性自身としたらCSSはお洋服やお化粧という存在になるかもしれません。わかりやすいような分かりにくいような説明で申し訳ございませんがようするにCSSという定義でおしゃれにお化粧することができますよとう事はご理解いただけたでしょう。下記のコードをワードプレステーマのなかのCSSスタイルシートという編集画面に入りペーストします。上記のCSSコードを追加する方法が有料ワードプレステーマのストークならむちゃくちゃカンタンに実行できます。ダッシュボードのカスタマイズから追加CSSに入り貼り付けて保存するだけです。余談|コードをそのまま表示する方法この記事の冒頭でショートコードを記載していますがふつーにコードをのっけてしまうとコードの中身が表示されません。一部の記号を全角に変更するなどに対応すれば可能ですが、閲覧いただいた訪問者さまにご迷惑とご不便をおかけすることになります。そこでネットユーザーさまに助けを求めた結果下記<XMP>と</XMP>のタグでコードを括ることでコードの中身を記載できる方法が分かりましたので余談にはなりますがご紹介しておきます。class=”marker1′′>テキスト</span></xmp>さらにこのタグを無効化してくれるサイトさまを発見しましたので紹介します。ボックスに画面上にタグを反応させずに表記したいタグをコピペで放り込み「タグ無効化」ボタンをクリックすれば下のボックスに無効化されたタグが表示されます。あとはこの無効化タグをご自身のウェブサイトへ搭載すればオッケーです。タグ無効化変換ツールおさらいとまとめ記事に蛍光ペン風にアンダーラインを引く方法ショートコードテキストを活用する。プラグイン「AddQuicktag」をインストールする。CSSコードをCSSスタイルシートに追加する以上です。ご参考になさってください。ワードプレスワードプレスこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。【エレキ】G&Lテレキャスター購入!「レオフェンダー」が最後に送り出したトリビュートシリーズアサットクラシックのレビューを届けます!【格安SIM】マイネオのデータ通信専用シングルプランの通信速度とAPNプロファイル設定RECOMMENDこちらの記事も人気です。ワードプレス2017.10.7ワードプレステーマのストークでショートコードを使った関連記事表示テクニッ...ワードプレス2017.11.7ブログが長続きしない?ワードプレスで100記事を達成できた理由と背景を分...ワードプレス2019.12.6ネットショップの構築方法と選択肢!ランニングコストを抑えた運用方法の検討ワードプレス2017.12.2さくらサーバーで常時SSL化!バナー画像のURLが原因でSSL化表示にな...ワードプレス2018.1.4【情報発信】ビジネスのスタートにHPは必須!ウェブサイトを開設するならワ...ワードプレス2017.8.30ワードプレスをスタートする前に用意して置きたいレンタルサーバーの選び方と...ワードプレス2017.8.20ワードプレスの設定でお困り事はありませんか?直々にアドバイス致します!ワードプレス2018.3.6インターネットを活用したビジネスを展開するならワードプレスを導入した方が...ABOUTこの記事をかいた人azuhiko@68オートバイ事故で脊髄を損傷し下半身不随の身体で50歳という年齢を迎えることができました。交通事故で車いす人生を送ることになってしまいましたが30年間の中で色々とチャレンジしてきたことをこのブログでお伝えできればと思っています。主なテーマはつぎのようなカテゴリーです。取り留めない内容をお届けするかと思いますが、よろしくお願いいたします。【azuhiko】17歳のころオートバイ事故で脊髄損傷となる。・もう一度自家焙煎の珈琲店を再開したい・格安スマホとネット回線の乗り換えなど生活コストの見直しをかけてお金がないなりに楽しくやっている。▽脊損歴30年の体験をまとめます。