WordPressテーマ Diverの使い方 【簡単】テキスト ボックス(囲い枠)の設置方法

ポチくれたら喜びます♪


人気ブログランキング

 

WordPressテーマ Diverを使ってるんだけどテキストボックス(囲い枠)の作り方がわからない
こんな悩みを解消します。
結論、めっちゃ簡単です。
なぜなら、WordPressテーマ Diver」の「入力補助」メニューに最初から準備されてるから。
それでは、順番に解説していきますね。

テキストボックス(囲い枠)って何?

文字を四角で囲んで強調(見やすく)する装飾。
例えば、
✔ 焼肉の注文
1.塩タン
2.カルビ
3.ハラミ
ボックスを使用した場合、
こんな感じ。
✔ 焼肉の注文
1.塩タン
2.カルビ
3.ハラミ
少し、目に止まりやすくなりますよね。

ボックス(囲い枠)のバリエーションは?

WordPressテーマ Diverのボックス(囲い枠)のカラー・デザイン共、複数から選択できます。
✔ ラーメン
1.塩ラーメン
2.みそラーメン
3.豚骨ラーメン
✔ うどん
1.肉うどん
2.きつねうどん
3.月見うどん
1.イイ収入ガイド
2.ニュープロ
3.BMTS
また、「囲い枠」のデザインも複数用意されてます。

ボックス(囲い枠)の設置手順

1.「投稿」の編集画面で「入力補助」をクリック

2.「Diver入力補助」の「囲い枠」をクリック

3.「囲い枠」の編集

① 「タイトル」

ボックスにタイトルを付ける場合、テキストを入力

② 「テキスト」

強調したいテキストを入力

③ 「囲い枠タイプ」「色」「装飾オプション」

囲い枠タイプ、色、装飾オプションを選択

ボックスデザイン DiverとAFFINGERを比較

Diverの「囲い枠」設置

入力補助」にて全て入力して「囲い枠」の設置完了。
前項で解説した通りシンプルですね。

Affingerの「ボックスデザイン」設置

1.「投稿の編集」画面にて「タグ」をクリック

Affingerの場合は、「囲い枠」ではなくて「ボックスデザイン」となります。
「タグ」からボタンを選択

2.編集画面にコードが表示

タイトル」「テキスト」は、「投稿の編集画面」で直接編集します。
1.「タグ」から「ボックス」の種類を選択
2.「投稿の編集画面」で直接編集
3.プレビューで確認可能
(Diverの場合、編集画面で確認可能)
結論、編集の手順は双方違いはあるけど編集メニューから「ボックス(囲い枠)」の設置に直接アクセスできるので不満はなし、ユーザーの好み次第ですね。
敢えて言うとすれば、
Diverは、「プレビュー」画面でなく、「投稿の編集画面」で確認でき、ワンアクション少なく済むので初心者にもオススメ。
いずれも有料テーマは、コードの打込みからする必要はないので時短につながりますね(^^)

WordPressテーマ Diverの使い方 【簡単】テキスト ボックス(囲い枠)の設置方法 まとめ

WordPressテーマ Diverの使い方 【簡単】テキスト ボックス(囲い枠)の設置方法

Diverは、「Diver入力補助」画面に文字に加えてイラストも表示あり。
それにより、直感で触ってみるだけでカスタマイズ編集がしやすい
テキストボックス(囲い枠)も簡単に設置できました。
各テーマの公式HPでデザイン・機能やカスタマイズのしやすさなどをチェックされると良いですね。

関連記事

おすすめの記事