その他

SPACEで使えるショートコード一覧とその使い方

SPACEで追加された新しいショートコードとその使い方を説明します。

記事一覧を表示させるショートコード

[space name="" id="" target="" count="" category=""]

このショートコードはTOPページやカテゴリーページ、ウィジェットで使うことができるショートコードです。それぞれにしっかり意味があるコードですので使い方をよく知った上で使うようにしましょう。

また、このショートコードはカスタマイズ性にかなり富んでいます。カテゴリ一覧や任意の記事一覧を作成したりすることもできるので、あなたのブログに訪れているユーザーに読んでもらえるような記事一覧を作成していきましょう!

それでは、各項目の説明です。

「name=””」にはタイトルを入力

[name="ここにタイトルが入ります。"]

ここにはその記事一覧がどんな一覧なのかをユーザーに伝えるために設けられている部分です。

ユーザーに「お!」っと思ってもらえる記事一覧にするために、まずは記事一覧のタイトルをしっかり入力しましょう!

「id=””」には出力させたい記事IDを入力

[id="339,110,11,6"]

ここには出力した記事のIDを「,(コンマ)」で区切りながら入力していきます。記事IDの確認方法はこちらに記載していますので参考にしながら設定してみてください。

記事ID・カテゴリIDを確認する方法

「target=””」にはリンクの開き方を入力

[target="_blank"]

ここには表示させたリンクを「内部リンク」として扱うのか「外部リンク」として扱うのかを設定することができます。

  • 内部リンクとして扱う場合は「_self」
  • 外部リンクとして扱う場合は「_blank」

上記のどちらかを設定してください。

正しく設定しないとエラーが発生します。入力は慎重に行うようにしてください。

「category=””」には出力させたいカテゴリIDを入力

[category="10"]

ここにIDを入力すると「id=””」で設定していた記事は表示されなくなり、設定したカテゴリに該当する記事を出力してくれるようになります。

ここには1つのカテゴリしか入力することができません。複数のカテゴリを表示させる場合はショートコードを複数用意し表示させるようにしてください。

また、カテゴリIDの確認方法はこちらに記載していますので参考にしながら設定してみてください。

記事ID・カテゴリIDを確認する方法

「count=””」には出力させたい記事数を入力

[count="5"]

「category=””」にカテゴリIDを入力するとそのカテゴリに該当する記事を表示してくれますが、その記事数を管理することはできません。

ですが、「count=””」を使えば出力する記事数を選択することができるので、何十記事も表示されてしまうことを防ぐことができます。

表示させたい記事数を半角英数字で入力するだけで表示する記事数を制限してくれますので、お好みで数字を変化させてみてください。

新着記事一覧を表示してくれるショートコード

[news name="新着記事" count="5"]

このショートコードは単純に新着記事のみを表示してくれるショートコードです。

このショートコードはTOPページに入れるもよし、記事やトップページ上下のウィジェットエリアに入れるもよしと、表示させる箇所は無数にあるのでより読者が読みたいと思えるような箇所に追加していきましょう!

それでは、各項目の説明です。

name=””にはタイトルを入力

[name="新着記事"]

ここにはその記事一覧のタイトルを入力する項目です。ここを入力しないとその記事一覧がどんな記事一覧なのかわからなくなっていきます。

読者を迷わせないためにしっかりタイトルを入力していきましょう。

number=””には出力する記事数を入力

[number="5"]

ここには新着記事を何記事表示させるかを入力することができます。

あまり多すぎると良くないので「3〜5記事」あたりを目安に設定してみると良いかと思います。

任意のリンクボタンを作成できるショートコード

このショートコードは色やURL、JINアイコン等を全て自由にカスタマイズすることができるショートコードボタンです。

TOPページをサイト型にした時や、記事内でもアイコン付きのボタンとして利用することで他のブログデザインと差をつけることができます。

実際のショートコードは以下です。

[space_btn01 shortcode="jinアイコンフォントを入れましょう。" content="ここにボタン内のテキスト" link="URLを入れましょう。" bg_color="背景色"]

サンプル

それでは各項目について説明していきます。

アイコンフォントを入力

shortcode="jin jin-ifont-check"

ここにはJINのアイコンフォントを入れることで独自のアイコンボタンを作成することができます。

JINのオリジナルのアイコンフォントは以下から確認できますので参考にしながら設定してみてください。

JINオリジナルアイコンリストを確認する

注意点

FontAwesomeには対応していないので、予めご了承ください。

ボタンテキストを入力

content="テキストを入力します。"

表示させたいテキストをここに入力すると、ボタン内に自動的にテキストが表示されるようになります。

遷移先のURLを入力

link="https://~~"

遷移先のURLを入力することができます。

背景色のカラーコードを入力

bg_color="#2d72d9"

基本的に文字色は白色で固定なので、それにあったボタンの背景色を選択しましょう。

グラデーションボタンを作成するショートコード

ダークテーマのデザインに非常に相性がいいボタンデザインです。カラーは全部で6種類用意し、どのダークテーマにも合うボタンデザインに仕上げてみました。

[space_btn02 shortcode="jic jin-ifont-check" content="テキスト" link="https://~~" gradation_color="blue"]

それでは項目の説明です。

アイコンフォントを入力

shortcode="jin jin-ifont-check"

ここにはJINのアイコンフォントを入れることで独自のアイコンボタンを作成することができます。

JINのオリジナルのアイコンフォントは以下から確認できますので参考にしながら設定してみてください。

JINオリジナルアイコンリストを確認する

注意点

FontAwesomeには対応していないので、予めご了承ください。

ボタンテキストを入力

content="テキストを入力します。"

表示させたいテキストをここに入力すると、ボタン内に自動的にテキストが表示されるようになります。

遷移先のURLを入力

link="https://~~"

遷移先のURLを入力することができます。

背景色のカラーを入力(6種類)

gradation_color="blue"

今回用意しているのは全部で6種類です。

サンプル

gradation_color="blue"

サンプル

gradation_color="red"

サンプル

gradation_color="orange"

サンプル

gradation_color="purple"

サンプル

gradation_color="green"

サンプル

gradation_color="pink"

好きなカラーを選んで設定していきましょう。

WordPressテーマ「JIN」専用デザインプラグイン『SPACE』

SPACEは

「アプリのようなスピード感とかっこいいブログ」

をコンセプトに記事の探しやすさ、見つけやすさ、かっこよさに重点をおいたプラグインです。

WordPressテーマ「JIN」の機能性と「SPACE」のデザインでよりユーザーに回遊してもらう仕組みを構築しました。

ブログを稼ぐための道具としてではなく、自分の発信メディアとして愛情を持ってくれる人が増えたらなぁと心から願っています。