WordPressテーマ「Diver」の入力補助機能すべてお見せします！

2018-08-13 2019-01-26 19分27秒

WordPressテーマ「Diver」の一番の魅力といっても過言ではないのが、

入力補助機能

チキさん

なのですっ！！ﾄﾞﾔｯ

「ブログ初心者の私がWordPressテーマ「Diver」を選んだ理由」では、
入力補助機能の一部をご紹介しましたが

入力補助機能ぜんぶ見せんかい

というご要望にお応えして、
1つずつどういった機能かをお見せしていきたいと思いますc(*ﾟーﾟ*)

Diverの入力補助機能は現在23個あります。

他のWordpressテーマであれば、コードなどを駆使する必要がある装飾も、
Diverなら直感的な操作で簡単に使うことができます。

チキさん

これは・・・時間短縮がハンパない！

ということで早速見ていきましょう！

Contents

1 Diver入力補助その１：見出し
2 Diver入力補助その２：ボタン
3 Diver入力補助その３：バッジ
4 Diver入力補助その４：囲い枠
5 Diver入力補助その５：区切り線
6 Diver入力補助その６：リストデザイン
7 Diver入力補助その７：アイコン
8 Diver入力補助その８：グリッドレイアウト
9 Diver入力補助その９：引用
10 Diver入力補助その１０：AMP表示
11 Diver入力補助その１１：横棒グラフ
12 Diver入力補助その１２：吹き出し
13 Diver入力補助その１３：口コミ
14 Diver入力補助その１４：会話
15 Diver入力補助その１５：ランキング
16 Diver入力補助その１６：レビュー
17 Diver入力補助その１７：レビュー表
18 Diver入力補助その１８：ポップアップ
19 Diver入力補助その１９：Ｑ＆Ａ
20 Diver入力補助その２０：コード
21 Diver入力補助その２１：トグル
22 Diver入力補助その２２：ＱＲコード
23 Diver入力補助その２３：記事一覧
24 まとめ

Diver入力補助その１：見出し

見出しのスタイルは11種類の中から選択できます

見出しスタイル１

見出しスタイル２

見出しスタイル３

見出しスタイル４

見出しスタイル５

見出しスタイル６

見出しスタイル７

見出しスタイル８

9見出しスタイル９

10見出しスタイル１０

見出しスタイル１１

　見出しスタイル９と１０については、
オプションで先頭の数字を自由に選択可能

チキさん

記事の内容によって使い分けることができて便利

見出しの色はデフォルトの7色、
またはカスタムで自由な色を指定することができます(｡･ω･)ﾉ

Diver入力補助その２：ボタン

ボタンタイプは13種類あります
ここにあるボタンは押してもなんにもなりません

テキストの前後にアイコンを付けることもできます
(アイコンの数は数百種類)

アイコン付き１

アイコン付き２

オプションのインラインやフルサイズを使用するとこんな感じ

Diver入力補助その３：バッジ

バッジタイプは7種類の中から選択できます

バッジ１

バッジ２

バッジ３

バッジ４

バッジ５

バッジ６

バッジ７

もちろんこれもテキストの前後にアイコンを付けることができます(　ﾟωﾟ)/
オススメ商品

ココがポイント

Diver入力補助その４：囲い枠

囲い枠タイプは7種類あります

囲い枠タイプ１

テキストテキスト

囲い枠タイプ２

テキストテキスト

囲い枠タイプ３

テキストテキスト

囲い枠タイプ４

テキストテキスト

囲い枠タイプ５

テキストテキスト

タイトル無しの枠もありますよ(タイプ6)

囲い枠タイプ７

テキストテキスト

こんな感じで内部リンクをおしゃれにすることも可能！
(タイトル前にアイコン設置＋テキスト部分に関連記事をカードタイプで挿入)

Diver入力補助その５：区切り線

区切り線は3種類の中から選択できます。
もちろん太さや色も自由自在(*ﾟｰﾟ*)

Diver入力補助その６：リストデザイン

リストデザインは箇条書きか順序付きを選択できます。

箇条書きリストは7種類、
順序付きリストは8種類のデザインが用意されていますc(*ﾟーﾟ*)

例えばこんな感じ

テキスト１
テキスト２
テキスト３

テキスト１
テキスト２
テキスト３

テキスト１
テキスト２
テキスト３

Diver入力補助その７：アイコン

チキさん

アイコンの種類多すぎっっ！！

なので、
ほんとはもっとありますが一部だけご紹介します（笑）
(スクロールバーを見て頂ければ多さが分かると思います)

　ボタン機能やバッジ機能で使えるアイコンもこれと同じです

例えばこんな風に使えます
@tikitengo

ブログ初心者の私がWordPressテーマ「Diver」を選んだ理由

YouTubeでチェック！！

チキさん

アイコンの色やサイズも変更可能です

Diver入力補助その８：グリッドレイアウト

グリッドレイアウトを使用すると、
例えばこんな風に表示することができます

「画面サイズが小さい時に、グリッドレイアウトを解除する」
はスマホだと3カラムの画像は小さくなりすぎるのでチェックを入れておくのがオススメです
(2カラムの場合はチェック無しでも大丈夫かも)

チェックを入れたままにすると、
スマホで表示したときに画像が縦に並ぶようになります

チキさん

私は画像の大きさによって使い分けています

Diver入力補助その９：引用

他のWebページや書籍の内容を引用したいときに使用します(｡･ω･)

引用文をここに挿入します。

引用元のリンクはチキテンゴTopにしています。

引用元のタイトルがココ

Diver入力補助その１０：AMP表示

AMP(Accelerated Mobile Pages)は簡単に言うと、
モバイルページを高速表示するための方法です。

どちらのテキストが表示されていますか？

通常表示されている場合はこのテキスト

Diver入力補助その１１：横棒グラフ

何かのデータを比較したい時などに使用しますc(*ﾟーﾟ*)

データ１

データ２

データ３

Diver入力補助その１２：吹き出し

吹き出しタイプは上下左右から選択できます｡･ω･｡

吹き出しタイプ右

吹き出しタイプ左

吹き出しタイプ上(角丸50px)

吹き出しタイプ下(角丸50px)

Diver入力補助その１３：口コミ

Diverの入力補助を使えば口コミも簡単に作成できますc(*ﾟーﾟ*)

WordPressテーマ「Diver」の評価

Diverの入力補助機能を使えば、おしゃれな装飾が簡単にできるよ！

チキさん

Diver入力補助その１４：会話

会話風の表示も簡単につくれます(ﾉ*ﾟｰﾟ)ﾉ

チキさん

こんな風にしたり～

心の声みたいにしたり～

アイコン画像はダッシュボードの「Diverオプション」から保存しておけるので便利です♪

Diver入力補助その１５：ランキング

Diverのランキング機能を使えば、
アフィリエイトの商品紹介もかっこよく作成できます(vﾟｰﾟ)v

WordPressテーマ「Diver」(商材タイトル)

初心者にピッタリ！(商材小見出し)

WordPressテーマ「Diver」なら初心者も簡単に使えて、
時間短縮できる機能がいっぱい！

記事作成に集中できますc(*ﾟーﾟ*)
(説明文)

リンクボタンはアフィリエイトページに飛びます　(備考)

ご購入はこちら

詳しくはこちら

Diver入力補助その１６：レビュー

商品レビューの際に、星で評価を付けるのも簡単です(｡･ω･)ﾉ

レビュースコア1 ＆タイプ小

レビュースコア3.5 ＆タイプ中

レビュースコア5 ＆タイプ大

Diver入力補助その１７：レビュー表

レビュー表機能は複数項目を一度に比較するときなどに便利です｡･ω･｡
レビュー内容はテキストや星の数で表示できます。

例えば上にフルサイズと下にハーフサイズを組み合わせたり
(上の画像通りに入力するとこんな感じ)

フルサイズ	コンテンツ
ハーフサイズ１	コンテンツ	ハーフサイズ２

ハーフサイズを重ねてもいいですねc(*ﾟーﾟ*)

見た目		味
料理の値段		お店の雰囲気

　スマホではハーフサイズは縦に重なって表示されます

チキさん

もちろん1段でも3段以上でも自由自在です

Diver入力補助その１８：ポップアップ

ポンっと浮かびあがるポップアップも簡単に作成できます(｡･ω･)

[壁]_･)ﾌﾌﾌ
押してみる・・・・・？

(」ﾟﾛﾟ)｣(｣ﾟﾛﾟ)｣(｣ﾟﾛﾟ)｣ﾎﾟｯﾌﾟｱｯﾌﾟ発動！！

Diver入力補助その１９：Ｑ＆Ａ

Q&Aもあっという間に作れますc(*ﾟーﾟ*)

チキさんのプロフィール教えて？

プロフィールページをミテね[壁]*ﾟｰﾟ)ﾉ

Diver入力補助その２０：コード

コード機能を使えば、コードの説明をしたい時に、
それっぽく表示することができます(｡･ω･)ﾉ

例えばこんな感じ

RewriteBase /
RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

他にも、例えば文字を赤くするコードを説明したいとき、
普通に入力してしまうと

こうなっちゃいますよね？

でもショートコードをさらに[　]で囲えば

[color color="red"]このように表示できます！[/color]

ただしこれはワードプレス自体の機能なので、

[color color="red"]Diverのコード機能を使わなくても表示できます(笑)[/color]

チキさん

ですがDiverのコード機能を使った方がそれっぽいですよね

Diver入力補助その２１：トグル

トグル機能を使えば、文章の一部を隠して表示することができますc(*ﾟーﾟ*)

押すなよ！ゼッタイ押すなよ！

(*/∇＼*))))))ｨｬ――――ﾝ♪

Diver入力補助その２２：ＱＲコード

なんとQRコードだってURLとQRコードのサイズを指定するだけで、
サクっと作成可能です！

チキテンゴTopのQRコード (サイズ150px)

Diver入力補助その２３：記事一覧

カテゴリや取得数などを選択することで、
過去の記事一覧を挿入することもできますc(*ﾟーﾟ*)

例えばこんな感じです

日付を消去してカテゴリと取得数を変えるとこんな感じ

まとめ

いかがでしたでしょうか？

Diverの入力補助機能を使えば、
こんな素敵な機能や装飾が簡単に使用できます(*ﾟ▽ﾟ)/

コードの知識がなくても穴埋めしていくだけでいいので、

まさに初心者にピッタリの機能です！！

チキさん

今後もアップデートで機能が追加され次第、追記していきます

Diver公式HPをチェックしてみる