どうも、さーづか（@shin_sasasa）です。
この記事を見ている方は、こんな疑問をお持ちではないでしょうか？
塚原 藍子ブログを自分の好きなレイアウトで記事を作成したいです…。
さーづかそれには、ワードプレスのプラグイン「AddQuicktag」というプラグインを使う事で実現できますよ。
当記事では、ワードプレスの「AddQuicktag」を活用した記事のレイアウト作成をする方法を解説していきます。
この記事を読むことで、記事を自分の好きなレイアウトで作成できるようになります。
※この記事は3分で読み終わります。
この記事の内容
プラグイン「AddQuicktag」の使い方！知らない人は損する！
WordPress の管理画面から記事を書く場合、エディタに標準装備されているボタンを使って見出しの設定や文字の装飾ができますよね。
しかし、なかにはまったく使わないボタンもあるんじゃないでしょうか。逆に、オリジナルの CSS があるときは専用ボタンがほしくなると思います。
AddQuicktag を使う事で、圧倒的に記事を書くスピードが格段に上がります。
AddQuicktagの導入方法
インストールは公式サイトからプラグインファイルをダウンロードするか、管理画面の「プラグイン」から検索して行います。
インストールが終わったら、忘れずに「有効化」しておきましょう。
有効化後、管理画面の「設定」に「AddQuicktag」が追加されます。ここから設定画面に入りましょう。
クイックタグの追加と削除
最初に「クイックタグの追加と削除」が出てきました。ここでタグを登録しておけば、投稿画面にボタンが表示される仕組みです。
この画面の開始タグにいろいろ登録することで、記事のレイアウトを好きに変える事ができます。
AddQuicktagの使い方
登録が終わったので、投稿でボタンを使ってみましょう。
使い方は標準ボタンと同じです。
ビジュアルモードでは「Quicktags」という選択欄が追加されていて、ここから登録したタグを呼び出せます。
ここをクリックすることで、登録したタグを選択することで、登録したタグが表示されるようになります。
3列に表示する
ここの開始タグに↓を入力します。
1 2 3 4 5 6 7 8 9 10 11 | [su_row] [su_column size="1/3"] ★ここに左★ [/su_column] [su_column size="1/3"] ★ここに中央★ [/su_column] [su_column size="1/3"] ★ここに右側★ [/su_column] [/su_row] |
このコードを活用することで、このブログのPC版のトップページ上側に表示している3つの記事リンクを表示することができます。
↑は最新記事の上に特に見せたい記事を３つピックアップで表示しています。
2列で表示する
開始タグに↓を入力します。
1 2 3 4 | [su_row] [su_column size="1/2"]★ここに左側★[/su_column] [su_column size="1/2"]★ここに右側★[/su_column] [/su_row] |
このコードを使うと以下のように2列に表示する事ができます。
右側の幅が広い版
開始タグに↓を入力します。
1 2 3 4 | [su_row] [su_column size="2/5"]★ここに左側★[/su_column] [su_column size="3/5"]★ここに右側★[/su_column] [/su_row] |
表示例は以下になります。
左に画像を表示して右側に解説などを表示する時に活用することが多いです。
左側が広い版
続いて左側の範囲が広くする場合は開始タグに↓を入力します。
1 2 3 4 | [su_row] [su_column size="3/5"]★ここに左側★[/su_column] [su_column size="2/5"]★ここに右側★[/su_column] [/su_row] |
これもトップページで使っています。
これでトップページもサブメニュー的な表示を右側に表示することができるようになります。
Shortcodes Ultimateプラグインを入れないと使えない
↑で解説したコードはShortcodes Ultimateというプラグインを入れないと使えないので、こちらのプラグインも導入しておいてくださいね。
開始タグによく使う文字を入力しておくと楽
AddQuicktagの開始タグにはコード以外にもよく使う文字を入力しておくと非常に楽です。
さーづかこのブログでよく使うキャラクターの吹き出しもAddQuicktagを活用して楽に表示しています。
これは↓のコードで表示されているのですが、このコードもAddQuicktagの開始タグに追加して簡単に
1 | [char no="1" char="さーづか"]テキスト[/char] |
こういったように、記事作成時によく使うテキスト＆コードを登録しておく事で、記事のレイアウトも自由に作成できますし、記事作成速度も格段に上がっていきます。
是非導入してみてはいかがでしょうか。
まとめ：AddQuicktagはブログの表現の幅が広がる
この記事では、ブログの記事作成時の作業効率を上げるプラグインAddQuicktagについて解説していきました。
是非あなたのブログでも活用してみてください。
それでは。
