【便利なプラグイン　AddQuicktag】ワードプレスのデザインのカスタマイズに役に立つ

2021年2月6日

 

add11

add12

AddQuicktagを使うと上記のようにCSSを使って文章を枠で囲んだり、見出しを装飾したりして、ワードプレスの外観をカスタマイズすることができます。プラグインの名前のとおり、すばやくタグを設置して、ワードプレスの外観を改善することができます。

CSSを覚えるのはちょっと時間がかかりますが、Webページにはコピペでいろいろデザインを指定できる情報が公開されているので、CSSを知らない方でもだいじょうぶです。

 

 

AddQuicktagのインストール

add1

この説明は自分のパソコンにインストールしたワードプレスを参考に書いています。

ブロックエディタではなく、以下のプラグインをインストールして、昔ながらのクラッシックエディタを使ってます。

それでは、まず、AddQuicktagをインストールして、有効化しましょう。

使いたいCSSをコピーする

css1

囲みや見出しをCSSでカスタマイズする記事には、通常CSSのコードが紹介されています。

利用したいコードをコピーしておきます。

注意

この例の場合、/* 黒板風　1 */　の最初の行は必要ありません。削除しないと正しく表示されませんでした。

 

ワードプレスにCSSを追加する

ワードプレスの左のメニューから以下のように選択します。

外観→カスタマイズ→追加CSS

css2

 

add2

説明が表示されているので、”閉じる”をクリックします。

以下のように、コピーしたCSSを貼り付けます。

 

add3

必ず、”公開”をクリックして保存してください。

css3

AddQuicktagにHTMLのタグを設定する

css4

 

add4 add5

 

add6

赤の部分が開始タグになります

タイトルは好きなタイトルに変更します

緑の部分が終了タグです

 

add7

赤で囲んだ部分を設置します。

右側のチェックボックスはすべてチェックしておいてよいでしょう。

”ここがポイント”は設置したタフの名前です。おぼえやすい名前をつけましょう。

注意　”変更を保存する”をクリックするのを忘れないようにしましょう。

投稿ページを表示して確認する

投稿ページで以下のアイコンをクリックして表示を変更します。

add8 add9

メニューにQuickTagsが表示されます。

文章にCSSのタグを指定してみる

投稿記事のCSSを指定する場所をドラッグして選択します。

add10

公開または更新して、保存するのを忘れないようにしましょう。

記事を表示してみる

add11 add12

以上、CSSの設定が反映されていることが確認できました。

あとは同じような指定は、CSSを指定したい文章の範囲を指定して、メニューから選択するだけです。

 

ここがポイント

１．プラグインをインストール

２．使いたいCSSを探す、または自分で作る

３．プラグインに設定する

４．CSSを反映させたい部分を選択して、投稿メニューから選ぶ

さらに詳しいプラグインの説明は以下の記事が役に立ちます。

 

 

 

The following two tabs change content below.

無解行末那

無解行とは、信じることを大切にしたいという気持ちです、末那は九識論の末那識、自我にとらわれて世界をゆがんだ認識で観ている自分の姿。唱題行で心を磨き、理想郷、九識心王真如の都をめざします。人工知能、Python3、チェス、SF、Vtuberなど進化するもの、人の心の進化に興味があります。

SNSやGoogleの活用方法,ワードプレスいろいろワードプレス,Bitnami,AddQuicktag

Posted by 無解行末那