ブログを始めると記事を装飾したいと思うことってありますよね。
記事を装飾するためには、CSSやHTMLという名前を聞くだけで難しそうなことをしなければならないと想像すると思いますが、そんなことはありません。
「AddQuicktag」というプラグインを使うと、初めに簡単な設定だけしておけば後はワンクリックでOKです。
私のような超初心者でも簡単に設定できたので、参考にしてみてください。
ということで今回は、面倒なタグコードをワンクリックで貼り付けてくれる便利なプラグイン「AddQuicktag」を紹介します！
目次
AddQuicktagで出来ること
WordPressで記事を書く時、エディターの上にある項目の物を使うと思うんです。
文字を大きくしたり色を変えたりなど装飾しますよね。html何か知らなくても、ボタン1つで装飾できるのでとっても便利なんですが。
使っていると不満が出てきませんか？
標準で使いたいものは揃っているけど、ネットで見つけた装飾コードも使いたい
こんな感じに記事を装飾したい！
上にあるボックスタイプに装飾された部分。
人様のブログを見ていると目にすることがあると思いますが、自分のブログ記事にも導入したいと思いますよね。
タグと呼ばれるコードを使えば誰でも使えますが、「コードなんてさっぱりわからない！」って人のためにあるのが、今回紹介するプラグイン「AddQuicktag」です。
早速使ってみましょう。
AddQuicktag導入の仕方
WordPressの管理画面から、赤枠部分のプラグイン⇒新規追加「AddQuicktag」と検索。
AddQuicktagをインストール⇒「有効化」に。
管理画面のインストール済プラグインに追加されているか確認してみましょう。
AddQuicktagの設定箇所は
インストールしたAddQuicktagの設定していきます。
インストール済プラグインからAddQuicktag⇒「設定」をクリックします。
下の画像のような画面になるので、ここに使いたいコードを登録していきます。
基本的に使う所は、3箇所です。
・ボタン名
・開始タグ
・終了タグ
です。
設定というよりは、使いたいタグコードをプラグインに登録。
登録したタグコードは、WordPressの記事作成エディタにボタンとして追加されるイメージです。
設定してみよう！
上の写真は、私が実際に使っているコードになります。
左から
ボックス名⇒考え事風
開始タグ⇒開始コード
終了タグ⇒終了コード
の順に入力していきます。
ネットで見つけた使いたいコードを貼り付けるだけでOKです。
右側のチェック部分を一番右側にチェックを入れると、すべてチェックされるので、チェックを入れたら保存をクリック。
登録したものが追加されているか確認してみよう
登録したものが追加されているかは、普段ブログを書いているエディター画面で確認できます。
早速記事を書く画面で確認してみましょう！
エディターのテキスト画面を開くと、先ほど追加した赤枠部分「考え事風」が追加されていますね。
使いたいときはこのボタンを押すとコードが自動で貼り付けられるので、使いたいコードを登録しておけばいつでも使えるというわけですね。
使い方として
1回目のクリック⇒開始コードが貼り付け
2回目のクリック⇒終了コードが貼り付け
というように、貼り付けてくれます。
エディターに入力したら、プレビューで確認してみてくださいね。
CSSに追加して使えるものもある
今回紹介したボックスのような装飾コードを使うには、記事に追加するタグコードともう一つあります。
CSSにもコードを追加しないと使えないので、CSSコードも追加してみましょう。
CSSの追加の仕方
CSSは、管理画面の外観⇒テーマの編集⇒子テーマを選択。
テーマの編集を開くと、右側に「編集するテーマの選択」という項目があるので、こちらを使っているWordPressの子テーマを選んで「選択」です。
スタイルシートへ追加していく
子テーマを選択したら、、上のような画面になると思います。
初期状態だと、左に段落数で9行目までしかないです。
ネットで見つけた記事装飾コードにCSSへの追加が必要な時は、ここにCSSコードを追加します。追加したら保存ファイルを更新すればOKです。
まとめ
AddQuicktagの導入から設定の仕方を紹介してきましたが、できましたでしょうか？
htmlコードやCSSコードが必要なのはなんとなく理解できても、中身を理解するのは難しいですよね。今回紹介したプラグインを導入すれば、そんな悩みも解消されると思います。
普段は使いたいボタンの名前だけ意識しておけば、簡単に記事を装飾できるんですから。
最初の設定もそれほど難しくないので、使いたいコードを見つけたらドンドン登録していきましょう！
一緒に登録しておきたいプラグインはこれ！
参考記事
無料ブログのようにWordPressのエディターが使いやすくなると思います。