ブログ運営

AFFINGER(アフィンガー)で蛍光ペンのような文字装飾をする方法

投稿日:2018-03-04 更新日:

こんにちは!つーぶろっくです!

今回はAFFINGERのテーマで蛍光ペンのような文字装飾を可能にする方法について記事にしたいと思います。

蛍光ペンのような文字装飾とは?

蛍光ペンのような文字装飾とは文字の背景の下半分を塗りつぶした装飾のことを呼びます。こんな感じです。

文字全部の背景に色がついていないので蛍光ペンでマーカーしたようにおしゃれにみることができます。

AFFINGERに蛍光ペンスタイルはない

でも、残念ながらAFFINGERではこのスタイルがデフォルトでついていません。

簡単に追加できるだろうと思ってたのですが難しいです。AFFINGERテーマの直接編集で四苦八苦してたのですがうまく反映されません。それでもなんとか勉強して蛍光ペンの装飾ができるようになったのでその方法を覚書として残したいと思います。

プラグイン「Simple Custom CSS」で実現

今回の解決方法はプラグイン「Simple Custom CSS」の導入することで実現できます。

このプラグインは直接テーマを触ることなくCSSを変更できるプラグインになります。

AFFINGERで直接テーマを触ってもAFFINGER独自の作りの為、直接反映させるのはかなりの手間になってしまう(詳細は省きます)ということがわかったのでこの方法をとるのが一番良いです。

手順

プラグイン「Simple Custom CSS」のインストール

Simple Custom CSSWordPressの「ダッシュボード」→「プラグイン」→「新規追加」→「Simple Custom CSS」の検索→「インストール」→「有効化」を行います。

プラグイン「Simple Custom CSS」の設定

Affinger style

WordPressの「ダッシュボード」→「外観」→「カスタムCSS」と進むとSimple Custom CSSが開きます。

タグの導入

今回、ymarkerkeikoというスタイルを追加します。AFFINGERでは定義されていない新しいスタイルとなります。

以下のタグを出てきたSimple Custom CSSの画面に入力します。

Simple Custom CSS

.ymarkerkeiko {
background: linear-gradient(transparent 40%, #ffff66 40%);
padding:0 2px;
}

Simple Custom CSS

「カスタムCSSの更新」で完了です。

これで「ymarkerkeiko」という呪文が登録されたと考えてください。

次にプラグイン「AddQuickTag」でこのタグを登録します。

プラグイン「AddQuickTag」に登録

プラグイン「AddQuickTag」のインストール

インストール手順は以下の記事を参考にしてください。

プラグイン「AddQuickTag」の設定

</span>WordPressの「ダッシュボード」→「設定」→「AddQuickTag」を選択すると設定画面へ行きます。

ボタンのラベル、ダッシュアイコン、ラベル名

「ボタン名」のところは自由に書いてOKです。ビジュアルエディター上で表示される名前になります。

自分は「ymarkerkeiko」と設定。

「ダッシュアイコン」「ラベル名」は未記入でも可能。

開始タグ*と終了タグ(s)
開始タグ*

<span class="ymarkerkeiko">

終了タグ(s)

</span>

と入れてください。

アクセスキーと順番

未記入で大丈夫です。

チェックボックス

右にあるチェックボックスには

ビジュアルエディター、post、pageにそれぞれチェックを入れておいてください。

 

最後に「変更を保存」を押す。

以上で設定の完了になります。

設定の確認

ここで投稿画面に行ってみてください。

エディターの中に「Quicktags」があり、クリックすると。。

ymarkerkeiko

先ほど設定した「ymarkerkeiko」ができているのがわかります。

使ってみた

それでは実際に使ってみたいと思います。

こちらが蛍光ペンではないほうです。

こちらが蛍光ペンのほうです。

どうでしょうか?結構見た目変わりますよね!

番外編 お好みでタグを作る

Simple Custom CSSとAddQuickTagを応用すれば色んなタグが作れますね。AddQuickTagの使い方も以下の記事に載せてあるのでぜひ、使ってみてください。

他にも

AFFINGERを使ったサイトのSSL化についてはこちらの記事でまとめています!

AFFINGERで作る404ページはこちら。

まとめ

今回の記事ではずっと前からやりたかったAFFINGERで蛍光ペン風の文字装飾をやる方法を学んだのでまとめました。ネットで記事を探そうと思ってもなかったのでこの記事があなたの参考になることを願ってます。よろしくお願い申し上げます。

念願の蛍光ペンだーー!
つーぶろ

↓いつも初心に戻れる一冊です↓

-ブログ運営
-, ,

Copyright© OKIRAKU LIFE.com , 2018 All Rights Reserved.