記事編集に役立つ便利なWPショートコードプラグイン「Arconix Shortcode」

Wordpressショートコード系プラグイン「Arconix Shortcode」イメージ

WordPressで投稿記事(ブログ)を作成・編集している時、「ここを枠で囲んで目立たせたい」、あるいは「このリンクをボタンにしたい」とか、そんなふうに思ったことはありませんか?

文章はちょっとしたデザインの違い、文字の使い方、レイアウトの組み方で読みやすくも読みづらくもなってしまいますよね。わたしもどうしたら読みやすくできるだろうかと日々頭を悩ませています(笑)

そんな時に便利&おすすめなのが「ショートコード」という機能です。

たとえば、この機能を使うとこんな風に記述するだけで

[button color=”red” size=”small”]ボタンリンク[/button]

ボタン(リンク)が簡単にできたり、文章のレイアウト(段組み)を変えることだって簡単です。

この[button] みたいなものをちょっと書き足すだけで簡単にできてしまうのですが、この[button] なるものが「ショートコード」です。あまり聞きませんが、日本語にすれば「短縮コード」でしょうか。

が、しかし・・・

この「ショートコード」を使うためにはWordPressのファイルを書き換えたりする必要があり、誰もがすぐにできるわけではありません。

「え〜〜〜」っと思った方、ご安心下さい。そこはWordPressです。

便利な「プラグイン」を使えば WordPress を今日はじめたばかりの人だろうと、あっという間に「ショートコード」を使いこなすことができるのです。

というわけで、今日はそんな便利なショートコード系のWordPressプラグイン「Arconix Shortcode(アーコニクス・ショートコード)」をご紹介させていただき、出来ること、導入方法、使い方などをお伝えしたいと思います。(読み方が間違っていたらすみません・・)

アーコニクス・ショートコードで出来ること

ではこのショートコードプラグインを使ってできる7つのことを見ていきましょう。

 

1.アコーディオン

名前の通り、見出しを押すと開いたり閉じたりします。→ アコーディオンの動作確認

WordPressショートコード系プラグイン「AcconixShortcode」のアコーディオン効果

2.ボックス

色、大きさ、アイコンを指定してボックスを作ることができます。

WordPressショートコード系プラグイン「AcconixShortcode」のボックス効果

 

3.ボタンリンク

色、大きさ、リンク先を指定してボックスを作ることができます。

WordPressショートコード系プラグイン「AcconixShortcode」のボタン効果

4.カラム

2カラム、3カラムなどレイアウト(段組み)を指定することができます。

 

5.タブ

ブラウザなどでもお馴染みの「タブ」です。→ タブの動作確認

WordPressショートコード系プラグイン「AcconixShortcode」のタブ効果

 

6.トグルボタン

On / Off を交互に切り替えることができます。→ トグルボタンの動作確認

WordPressショートコード系プラグイン「AcconixShortcode」のトグル効果1

クリックすると中身が表示される。

WordPressショートコード系プラグイン「AcconixShortcode」のトグル効果2

 

7.リスト

マークの色や形を指定してリストを作ることができます。

WordPressショートコード系プラグイン「AcconixShortcode」のリスト作成機能

以上、7つの「ショートコード」を見てきました。それではこれから、プラグインの導入方法、使い方のご説明に入ります。

 

アーコニクス・ショートコードの導入方法

アーコニクス・ショートコードの導入は通常のプラグインの導入方法と同じで簡単です。

ダッシュボード > プラグイン > 新規追加 > 検索【Arconix Shortcode】

検索結果に表示されたら「いますぐインストール」をクリック

WordPressショートコード系プラグイン「AcconixShortcode」のインストール方法1

プラグインを有効化 → 完了!

WordPressショートコード系プラグイン「AcconixShortcode」のインストール方法2

記事編集画面に「ショートコード」の一覧が追加されています。

WordPressショートコード系プラグイン「AcconixShortcode」のインストール方法3

 

アーコニクス・ショートコードの使い方

ショートコードの使い方はとっても簡単です。

記事編集画面で、「[box]●●●●●●[/box](●●●●の部分はコンテンツ)」のように書き、それぞれショートコードに応じて必要な情報(属性)を書き足します。

たとえば「お知らせ」的な情報を掲載したいので「style=”info”」という属性を選ぶこととします。

wordpressショートコード系プラグイン「Acconix-Shortcode」の使い方1

すると、「インフォメーション」アイコンとともに青色の箱で文章が囲まれます。

wordpressショートコード系プラグイン「Acconix-Shortcode」の使い方2

それぞれの「ショートコード」により属性が異なりますので、以下のリンク先に記述例と表示例を整理しておきました。カンペのような感じでお使いいただければと思います。

wordpressショートコード系プラグイン「Acconix-Shortcode」の使い方3

「Arconix Shortcode」ショートコード事例

 

 

有料のWordPressテーマを購入すると「ショートコード」組込まれていることがよくあります。無料テーマでもたまにありますが、まぁ多くの場合ありません。

それでもこのようなプラグインを使うことで、便利な機能がいくらでも追加できるのがWordPressの魅力ですね。

無料テーマの紹介とともに、こういった便利でおすすめの無料プラグインもどんどんしていきたいと思います。

  • このエントリーをはてなブックマークに追加

This Post Has 20 Comments

  1. Pingback: WordPress 無料テーマ > ブログ > Chooko Lite|レスポンシブ・かわいい・おしゃれ

  2. Pingback: WordPress プラグイン > カスタマイズ > WooSidebars|サイドバー・ウィジェット

  3. Pingback: WordPress 無料テーマ > ブログ > BoldR Lite|シンプル・レスポンシブ

  4. Pingback: WordPress プラグイン > 記事編集 > TablePress|表・テーブル作成支援

  5. Pingback: WordPress 無料テーマ > ポータル/ブログ/マガジン > Mesocolumn|レスポンシブ

  6. Pingback: WordPress 無料テーマ > 写真ギャラリー/ブログ > Gridster Lite|レスポンシブ・シンプル

  7. Pingback: WordPress 無料テーマ > ブログ > SympalPress-Lite|レスポンシブ・シンプル・かっこいい

  8. Pingback: WordPress 無料テーマ > ブログ/マガジン > OXYGEN|シンプル,レスポンシブ,スライダー

  9. Pingback: WordPress 無料テーマ > ビジネス/ブログ > Customizr|レスポンシブ・スライダー・簡単カスタマイズ

  10. Pingback: 写真中心の子育てブログにおすすめ|WordPress無料テーマ「Spun」

  11. Pingback: プラグイン1つで複数のスライドショーを生成|WordPress Meta Slider

  12. Pingback: 爽やかなニュースメディアサイト構築|WordPress無料テーマ iMag Mag

  13. Pingback: ブログ本来の姿へ原点回帰|WordPress公式テーマ Twenty Thirteen

  14. Pingback: 369種類のアイコンを簡単設置|WPプラグイン WordPress Visual Icon Fonts

  15. Pingback: WordPress テーマ「Attitude」- 無料ながら万能、多用途型のスゴいやつ。

  16. Pingback: クールでかっこいいピン風ブログ|WordPress無料テーマ Surfarama

  17. Pingback: 記事本文中の要素を折りたたんで表示してみる→スッキリ! | こてつは内臓ではない2

  18. Pingback: WordPressって便利だなあ…。 - Hotch Potch

  19. Pingback: 記事編集に役立つ便利なWPショートコードプラグイン「Arconix Shortcode」

  20. Pingback: WPショートコードの考察 | kinetone

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>