WordPress最適化

WordPressテーマ「JIN」で「ボックス」を設定する方法

パソコン操作する男性の画像

 

こんにちは。
必死に張り切る ひしはり です。

 

ひしはり
ひしはり
WordPress有料テーマの「JIN」
記事内に「ボックス」を設定する方法って
どうするの?

公式サイトの説明だけでは
細かいところがわからないんだけど?

本記事では
このような疑問にお答えします。

 

本記事の内容

❶ 「JIN」で「ボックス」を設定する方法

❷ ボックス1〜15の設定方法

❸ ボックス16〜21の設定方法

❹ 内部リンクもURLを貼り付けるだけ

 

もともと「JIN」には使い方を教えてくれる
公式の「設定マニュアル」があります。

しかし私の場合、
そのマニュアルでの
ボックスの使い方の説明では、
いまいちわかりづらい部分が
ありましたので、本記事では
全手順を画像付き
説明したいと思います。

本記事を読めば、
「JIN」をお使いの方なら
誰でもかんたんに
ボックスを設定することができて
見やすくおしゃれな記事を
書くことができるようになりますよ!

 

この記事を書いている人

この記事を書いている私はブログ歴4年目

現在は本業のサラリーマンの傍ら副業ブロガーとして活動しています。

Twitter(ひしはり人生再構築ブロガー)のフォロワーは1800人ほど。

「JIN」で「ボックス」を設定する方法

ボックス設定の画像

 

まず、「JIN」には、
20種類を超えるボックスが
標準搭載されています。

コードをコピーして
記事に貼り付けるだけで、
誰でもかんたんに
バリエーション豊富なボックスを
記事に設定することができます。

無料ブログテーマで
記事を作成していたころには、
考えられないことですが、
こういった点も
有料ブログテーマならではの
強みといったところですよね。

それではさっそく、
ボックスの設定方法を
ご紹介して行きます。

まずWordPressの管理画面から
「投稿」「新規追加」
記事作成画面へ移動します。

 

管理画面の画像

 

この記事作成画面で
記事を書いて行くわけですが、
ずっと下の方まで
画面をスクロールして行くと、
「ボックスデザイン一覧」
表示されています。

 

記事作成画面の画像

 

ボックスデザインの画像 ボックスデザインの画像 ボックスデザインの画像

 

ここで自分が使いたいと思う
ボックスを選択して
コードをコピーします。

コピーしたコードを貼り付けるのは、
「テキスト」モードを選択します。

「ビジュアル」モードで
ボックスを挿入したい箇所を
クリックして場所を
指定しておきます。

テキストモードに切り替えたら、
その指定した箇所が
点滅していますので、
先ほどコピーしたコードを
貼り付けます。

 

ひしはり
ひしはり
次の章では具体的な設定方法を解説して行きますね。

 

ボックス1〜15の設定方法

セッティングの画像

 

「ボックス1〜15」までは、
テキストモードに貼り付けると
ビジュアルモードの方に
そのまま反映されます。

 

ひしはり
ひしはり
ボックス1で実践してみましょう。

 

① ビジュアルモードで
  ボックスを挿入したい箇所を指定。

 

ビジュアルモードの画像

 

② テキストモードに切り替え。

 

テキストモードの画像

 

③ ボックス1のコードをコピー。
 (コードコピーをクリックすると
  コピーされます)

 

ボックス1の画像

 

④ そのまま貼り付け。

 

貼り付けの画像

 

貼り付けの画像

 

⑤ ビジュアルモードに切り替えて
  ボックス1がちゃんと
  反映されているかを確認。

 

反映の画像

 

「ここにテキストを入力」
    表示されているところに
    書きたい内容を書く。

 

ここにテキストの画像

 

⑦プレビューで確認する。

 

プレビュー画面の画像

 

ボックス16〜21の設定方法

設定マークのイラスト画像

 

次に「ボックス16〜21」までは、
テキストモードで先ほどと同じように
コピーしたコードを貼り付けると
ビジュアルモードでは
そのままコードが表示されてしまいます。

 

ひしはり
ひしはり
これが初心者を
悩ます原因ですね。

 

少なくとも私はここで
うまく設定できていないと思い
かなり悩みましたね。

「JIN」の公式マニュアルでは、
コードをコピーして貼り付けるだけで
好きなボックスを使えますとだけ
書かれています。

ボックス1〜15までは、
コードをテキストモードに貼り付けて
ビジュアルモードで確認したときに
そのままボックスが
表示されてくれますので
これは誰でも正しく
設定できたとわかりますよね。

しかしボックス16〜21までは、
コードをテキストモードに貼り付けて
ビジュアルモードで確認したときに
コピーしたコードが
そのままビジュアルモードに
表示されてしまいますので、
一瞬「うん?」となります。

ですので正しく設定できているかが、
最初はわかりづらいんですね。

ですが、実はそれで
正しく設定できているんです(笑)

 

ひしはり
ひしはり
どないやねん!(笑)

 

正しく設定できているかを確認するには、
投稿画面で右上にある
「プレビュー」から
確認することができます。

 

プレビューの画像

 

ひしはり
ひしはり
ボックス18で実践してみましょう。

 

① ビジュアルモードで
  ボックスを挿入したい箇所を指定。

 

ビジュアルモードの画像

 

② テキストモードに切り替え。

 

テキストモードの画像

 

③ ボックス18のコードをコピー。
 (ショートコードコピーを
  クリックするとコピーされます)

 

コードコピーの画像

 

④ そのまま貼り付け。

 

貼り付けの画像

 

コードコピーの画像

 

⑤ ビジュアルモードに切り替えて
  ボックス18のコードが
  ちゃんと反映されているかを確認。

 

反映の画像

 

この状態で
正しく設定が反映されているんですね。

 

ひしはり
ひしはり
ややこしや〜(笑)

 

「ここにタイトルを入力」のところに
    表示したいタイトルを書き込む。

「ここに本文を入力」
  表示されているところに
  表示したい内容を書く。

 

タイトルと表示内容の画像

 

⑧プレビューで確認する。

 

プレビュー画面の画像

 

ひしはり
ひしはり
いかがでしたか?
ちゃんと反映されていますよね?

 

内部リンクもURLを貼り付けるだけ

リンクの画像

 

ちなみに内部リンクを
貼り付けたい場合は、
その貼り付けたい記事のURLを
テキストモードに直接貼り付けると
自動でボックス21が適用されて
反映されるようになっています。

 

内部リンク貼り付けの画像

 

ボックス21も
ビジュアルモードではなく
プレビューで確認することで、
初めて正しく設定できていることが
わかります。

 

内部リンクの画像

 

ひしはり
ひしはり
そこが理解できるまでに
けっこう時間が
かかってしまいました(笑)

 

まとめ

 

今日はWordPress有料テーマの「JIN」
記事内に「ボックス」を設定する
「ボックスの設定方法」について
ご紹介しました。

いかがでしたか?

ちょっとしたことなんですけど、
そのちょっとしたことが
初心者にはむずかしいんですよね。

初歩的なことかもしれませんが、
私と同じように悩んでしまわれる方も
おられると思い
今回記事にまとめてみました。

さっそくいろいろなボックスを
あなたの記事内に活用して
ブログ運営をより質の高いものに
していただけたらと思います。

私自身も読者の方が読みやすくて
役に立つ記事を
どんどん作成して行けたらと
思っています。

ブログ記事作成で
ボックス使いのファンタジスタを目指し
必死に張り切る ひしはり でした。
今日はここまで。

関連記事