【超初心者】ストークのショートコード・ワードプレス文字装飾のやり方

WordPressの記事を書いていると文字装飾をしてブログをより見やすくしたくなりますよね。

簡単に吹き出しや文字装飾のショートコードをAddQuicktagに登録方法を説明します。

ブログを見やすく装飾したいけど、どうやっていいか分からないと

私も最初とても苦労しました(今でも勉強中。。)

ショートコードってなに?CSSってなんだ?HTML??

と検索しまくって探しました。

当時は検索しても分からない言語だらけでその言葉をいちいちまた検索するという作業だけ数時間。。。( ;∀;)

 

ネネ
吹き出し
文字の囲み枠

 

文字の装飾

 

ラベル名
ボックス

こんな感じですね。

ワードプレス文字装飾を簡単にAddQuicktaguに登録する方法

超初心者の方のために簡単なやり方を紹介します。

まず

AddQuicktagsというプラグインを導入

プラグインとは?

ワードプレスは、いろいろな方がいろいろな使い方をするので、基本部分はシンプル設定です。
プラグインを追加するとカスタマイズできますよ。

というのがプラグインです。スマホで言ったらアプリみたいなものになります。

プラグインで

  • お問合せフォームを設置するためのプラグイン
  • ユーザーを管理するためのプラグイン
  • SEO対策をやりやすくするプラグイン
  • セキュリティーを強化するプラグインなど

さまざまなプラグインがあります。

 

AddQuicktagをインストール

WordPressの管理画面からプラグインを選択する

上記部分にあるプラグイン新規追加をクリック

枠で囲ったのがAddQuicktagのプラグインです。

私はインストール済みなので有効ボタンになってますが

インストールしてない場合は今すぐインストールというボタンなのでそちらをクリックしてインストールします。

インストールしたプラグインを有効化すると

投稿ページにquicktagsを選択できる箇所ができました

ショートコードを登録するとこのように使えます。

ショートコードをAddQuicktagusに登録

吹き出しやボックス背景カラーなどのショートコードを

AddQuicktagに登録していきます。

 

ショートコード登録ファイル➚

↑コビトブログさんのホームページからお借りしてます。

AddQuicktagの使い方➚

↑コビトブログさんが使い方を詳しく書いてくれています。

 

コビトブログさんのページから

上記画像のショートコード登録ファイルという個所をクリックするとダウンロードされます。

パソコンにダウンロードしたファイルを開くと

これだけでAddQuicktagに登録されています。

便利すぎる!

初心者にはとても簡単でありがたいですね。

2017年の記事でちょっと古いですが

登録された吹き出しやボタンなど全部は試していませんがほぼ問題なく使えます
(黄色のボックスがなぜか反映されませんでした)

検索しまくったのですがコビトブログさんが一番簡単なショートコード登録方法を記載してくれていました。(私調べ)

 

ファイルをダウンロードぜずに

一つ一つ自分で登録していく方法もありますが、

WordPress初心者には初めは訳が分からないと思うので

慣れるまでダウンロードしたコードでブログをカスタマイズしてみて下さい。

AddQuicktagに自分で登録

ストークのページやショートコードに詳しい方がブログに書いてくれているので

作りたい装飾のタグを探します。

例えば

<span style=”border-bottom: 2px solid #43FF6B;”>作りたい装飾のタグを探します。</span>

上のコードはのように文字の下にカラーの下線を引くコードです。

作りたい装飾のタグを探します。

こうなります。

ビジュアルページでもできるコードもありますが、
この下線はテキストページで入力しないと反映しません。

#43FF6B;が緑のカラーなのでここを変えれば下線の色を変えることができます。

カラーコード一覧表

WordPressの管理画面の設定からインストールしたAddQuicktagを開くと

ショートコードを入力できる箇所があります。

ボタン名には自分の分かりやすい名前を入力します

☆下線など

開始タグと終了タグに

入れたいコードをコピーします。

上記例えの場合

・開始タグ⇩
<span style=”border-bottom: 2px solid #43FF6B;”>
・終了タグ⇩
</span>

になります。

変更を保存ボタンで登録完了です。

 

コビトブログさんからショートコードをダウンロードして

簡単にAddQuicktagでブログを見やすくしましょう。

ダウンロードしたコードを見ていくと

色など変更して自分でカスタマイズしてもいいですね。

今回は以上です。