ブログ

【WordPressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

こんにちもじゃもじゃ、

雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。

読者にインパクトを与えたい、

見やすさを向上させたいといった時にはフォントサイズやカラフルな色を使うのも一つですが、

WordPressの機能一つであるショートコードを使ってみるのもおすすめもじゃよ。

ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!
ブログのフォントサイズ一覧|使いこなして読みやすさを向上しよう!こんにちもじゃもじゃ、 雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 ブログを趣味の一つとして運営しているも...

普段はひたすら文章を書き、

多少フォントサイズを変更したり色を持たせてみたりするだけの記事を書いている人も多いのではないもじゃかな。

闇もじゃめ
闇もじゃめ
ショートコードって色々あるもじゃね…
もじゃめ
もじゃめ
全部は使ったことねいね!

今回はWordpressのショートコードの中にある「アイコンボックス」について記事をまとめたもじゃよ。

私はWordpressのテーマで「JIN(ジン)」を使っておりますので、

今回はJINにあるショートコードをみていくもじゃよ。

【Wordpress】ショートコードを使いこなそう|アイコンボックス編

JINのショートコードにはかわいらしいものがたくさんありますので、

気になるものがあれば是非使ってみましょうもじゃ。

この記事はこんなあなたにおすすめ

〇WordpressのテーマでJIN(ジン)を使用している
〇WordpressのテーマでJIN(ジン)を使うか検討している
〇ショートコードを使ったことがない
〇ショートコード

ショートコードは下記の画像のとおり呼び出すことができるもじゃよ。

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

現在は全16種類のアイコンボックスのショートコードがあるもじゃね。

闇もじゃめ
闇もじゃめ
テーマは「JIN(ジン)」を使っているので、JINのショートコードについての記事になるもじゃよ…
もじゃめ
もじゃめ
アイコンボックスもかわいらしいもじゃね!

アイコンボックスを使ってみよう

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

ショートコードには様々な種類がありますが、

今回は比較的使いやすいアイコンボックスにどのようなものがあるのかをご紹介していくもじゃね。

現在は16種類のアイコンボックスがあるもじゃよ。

  1. 注意
  2. 電球
  3. カート
  4. お知らせ
  5. 吹き出し
  6. チェック
  7. 鉛筆
  8. 情報
  9. 歯車
  10. クリップボード
  11. いいね!
  12. よくない
  13. ハート
  14. はてなマーク

となっておりますので、それぞれを知っていれば記事にアクセントをつけることができるもじゃね。

今回のアイコンボックスの文中は全て「アイコンボックスを使いこなす」にするもじゃね。

文中でショートコードをクリックすると

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

とコードがむき出しに表示されますが、実際には

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

と表示されますので安心してくださいもじゃ。

それでは、全16種類のショートコード「アイコンボックス」をみていくもじゃよ。

闇もじゃめ
闇もじゃめ
ショートコードを使用したらプレビューでの確認は必須もじゃよ…
もじゃめ
もじゃめ
想像と違った結果になっている時もあるもんね!

注意

アイコンボックスを使いこなす

アイコンボックスを使いこなす

電球

アイコンボックスを使いこなす

カート

アイコンボックスを使いこなす

お知らせ

アイコンボックスを使いこなす

吹き出し

アイコンボックスを使いこなす

チェック

アイコンボックスを使いこなす

鉛筆

アイコンボックスを使いこなす

情報

アイコンボックスを使いこなす

歯車

アイコンボックスを使いこなす

クリップボード

アイコンボックスを使いこなす

いいね!

アイコンボックスを使いこなす

よくない

アイコンボックスを使いこなす

ハート

アイコンボックスを使いこなす

はてなマーク

アイコンボックスを使いこなす

アイコンボックスを使いこなす

アイコンボックスのショートコードを重ねてみる

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

上記ではそれぞれのアイコンボックスをみてきたもじゃね。

アイコンだけで伝えたいことを表現できるのがこのショートコードの特徴もじゃね。

ここで気になるのはショートコードを重ねるとどうなるのか、というところもじゃよね。

ブログを書いていると、関数がごっちゃになりエラーが表示されることがあるもじゃな。

今回はアイコンボックスのショートコードを重ねるとエラーがでるのか、と調査してみた結果、結論をいうとエラーにはならないことが判明したもじゃよ。

実際にアイコンボックスを重ねることはないと思いますが、せっかく重ねられるのでご紹介していくもじゃね。

闇もじゃめ
闇もじゃめ
実験は好きもじゃよ…
もじゃめ
もじゃめ
重ねるとどんな結果が出るのか楽しみもじゃね!

アイコンボックスの中にアイコンボックスを1つ

こちら一つ目のアイコンボックス「注意」です。

こちらは「星」です。

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

上記は「注意」のアイコンボックスの中に「星」のアイコンボックスをいれた様子となっているもじゃよ。

「注意」のアイコンボックス内に文章をいれ、その後ろに「星」のショートコードを入れてみた実験もじゃね。

闇もじゃめ
闇もじゃめ
エラーにはならないもじゃよ…
もじゃめ
もじゃめ
まずはエラーとならなかったことの確認だね!

アイコンボックスの中にアイコンボックスを2つ

今度はアイコンボックスのショートコードの中にアイコンボックスを2つ入れてみるもじゃね。

ここには大きくわけて2通りの検証の仕方があるもじゃよ。

  1. アイコンボックスの中にアイコンボックス、さらにその中にアイコンボックス
  2. アイコンボックスの中に2つのアイコンボックス
闇もじゃめ
闇もじゃめ
マトリョーシカみたいもじゃね…
もじゃめ
もじゃめ
こんな使い方をしようと思う人はいないかもね!

それではまずは「1」についてみていくもじゃね。

注意のアイコンボックスです。

星のアイコンボックスです。

電球のアイコンボックスです。

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

マトリョーシカみたいにアイコンボックスが重なってきたもじゃね。

そして、アイコンボックスも巨大に膨れていく様子が見てわかるもじゃな。

次は、一つのアイコンボックスの中に二つアイコンボックスを入れてみるもじゃね。

これは注意のアイコンボックスです。

これは星のアイコンボックス1です。
これは星のアイコンボックス2です。

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

注意のアイコンボックスの中に2つの星のアイコンボックスが並んだもじゃね。

アイコンボックスの併用は面白いことができそうな気がするもじゃね。

闇もじゃめ
闇もじゃめ
おまけで面白いことやってみるもじゃね…
もじゃめ
もじゃめ
もじゃ君はすぐ遊んじゃうんだから!

おまけ|アイコンボックスを多用してみる

せっかくアイコンボックスを多用してもエラーが出ないとわかりましたので、

実際に使うことはないでしょうがたくさん併用してみるもじゃね。

アイコンボックスのショートコードを多用してみたもじゃよ。

よかった点について

新たな使い方に気づけた
アイコンボックスの応用に使える
よくない点について

なにを伝えたいのかわからない
見にくくなる
なぜ楽しんでいるのだろうか

エラーが発生しないことで探求心が止まらない。

しかし、やりすぎは注意しなければならないため、ここで止む無く終えることとする。

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

アイコンボックスを多用してみると、新たな使い方に目覚めそうになったもじゃね。

見にくいのか、と言われるとうまく使えばアイコンボックスだけでまとめた一覧表を作成できる気がしたもじゃな。

闇もじゃめ
闇もじゃめ
何かに使えそうもじゃな…
もじゃめ
もじゃめ
一覧表をアイコンボックスだけで作れそうだね!

さいごに

【WordpressのテーマJIN(ジン)】ショートコードを使いこなそう|アイコンボックス編

今回はWordpressのテーマJIN(ジン)のショートコードにあるアイコンボックスにはどのようなものがあるのかを一覧にしてみたもじゃよ。

普段文字ばっかりの記事を書いていると飽きてしまうことがあると思いますので、文中にアイコンボックスを挿入してみるのはどうもじゃかな。

特に伝えたいことをアイコンボックスで表現することで、読者に伝えたいことを伝えやすくなるのではないもじゃかな。

アイコンボックスは目立つもじゃね!

今だ私は全てのアイコンボックスを使用したことはないですが、

これはこういった文中で使うと影響が大きそうだな、

とは一覧で確認すると思いつくことがあるもじゃね。

多用しすぎるとかえって見にくくなると思いますので、ここぞという時にアイコンボックスのショートコードを使用してみてくださいもじゃ。

他にもこんなブログを書いているもじゃよ!
大人の趣味にブログがおすすめ|ブログが楽しいと思う3つのことについて!
大人の趣味にブログがおすすめ|ブログが楽しいと思う3つのことについて!こんにちもじゃもじゃ、雑記ブロガーの「もじゃめ(@mojame_blog)」だよ。 私がブログを始めたのが2018年12月なので、...
【ブログ】記事が書けなくて辛い人へ|書き続けるために必要な5つの改善方法について!
【ブログ】記事が書けなくて辛い人へ|書き続けるために必要な5つの改善方法について!こんにちもじゃもじゃ、雑記ブロガー『もじゃめ(@mojame_blog)』だよ。 ブログを書くのが辛い人、必見もじゃよ。 h...
【初心者】ブログを書くモチベーションをあげる方法
【初心者】ブログを書くモチベーションをあげる方法こんにちもじゃもじゃ、駆け出し雑記ブロガーのもじゃめ(@mojame_blog)だよ。 駆け出しブロガーではありますが、最近下記の...
闇もじゃめ
闇もじゃめ
ついつい遊び心が出てしまったもじゃよ…
もじゃめ
もじゃめ
最後まで読んでいただきありがもじゃもじゃ!
にほんブログ村

COMMENT

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