WordPress最適化

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

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

 

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

 

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

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

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

 

本記事の内容

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

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

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

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

 

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

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

本記事を読めば、
「JIN」をお使いの方なら誰でも
簡単にボックスを設定する事が出来て
見やすくおしゃれな記事を
書く事が出来る様になりますよ!

 

この記事を書いている人

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

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

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

「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」
記事内に「ボックス」を設定する
「ボックスの設定方法」について
ご紹介しました。

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

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

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

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

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

関連記事