オススメ記事

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

 

入力補助機能

です。

 

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

 

そこで今回は、

入力補助機能ぜんぶ見せて!!

 

という方のために、
1つずつどういった機能かを説明していきたいと思います。

 

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

 

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

チキさん
時間短縮がハンパない!

 

それでは順番に見ていきましょうc(*゚ー゚*)

 

スポンサーリンク

Diver入力補助その1:見出し

 

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

見出しスタイル1
見出しスタイル2
見出しスタイル3
見出しスタイル4
見出しスタイル5
見出しスタイル6
見出しスタイル7
見出しスタイル8
9見出しスタイル9
10見出しスタイル10
見出しスタイル11

 

 見出しスタイル9と10については、
オプションで先頭の数字を自由に決めることができます。

チキさん
見出しスタイルはブログの雰囲気などに合わせて好きなものを使おう

 

色はデフォルトの7色から選ぶこともできますし、
カスタムで自由な色を指定することもできます。

 

Diver入力補助その2:ボタン

 

ボタンタイプは13種類の中から選択できます。

 

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

 

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

 

Diver入力補助その3:バッジ

 

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

バッジ1
バッジ2
バッジ3
バッジ4
バッジ5
バッジ6
バッジ7

 

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

オススメ商品

ココがポイント

 

Diver入力補助その4:囲い枠

囲い枠タイプは7種類の中から選択できます。

囲い枠タイプ1
テキストテキスト
囲い枠タイプ2
テキストテキスト
囲い枠タイプ3
テキストテキスト
囲い枠タイプ4
テキストテキスト
囲い枠タイプ5
テキストテキスト
タイトル無しの枠もありますよ
囲い枠タイプ7
テキストテキスト

 

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

 

装飾オプションではテキストに罫線を付けたり、枠に影を付けることもできます。

例えば
罫線のオプションを付けて
こんな風に
ノートっぽくしたり
枠に影を付けて
雰囲気を変えることもできます

 

Diver入力補助その5:区切り線

区切り線は3種類の中から選択できます。

もちろん太さや色も自由に変更できますよ(*゚ー゚*)

 

 

 

Diver入力補助その6:リストデザイン

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

 

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

例えばこんな感じです。

  • テキスト1
  • テキスト2
  • テキスト3
  1. テキスト1
  2. テキスト2
  3. テキスト3
  1. テキスト1
  2. テキスト2
  3. テキスト3

 

Diver入力補助その7:アイコン

 

アイコンの種類は使いきれないくらい多いです(・艸・。)
ほんとはもっとありますが一部だけご紹介します。

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

 

例えばこんな風に使えます。

@tikitengo

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

YouTubeでチェック!!

 

チキさん
サイズも変更できますよ

 

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

 

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

 

ちなみに「画面サイズが小さい時に、グリッドレイアウトを解除する」
チェックを外すと、スマホで見たときにもレイアウトが保持されるのでオススメです。

チェックを入れたままにすると、
スマホで表示したときに画像が通常通り縦に並びます。

 

Diver入力補助その9:引用

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

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

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

 

Diver入力補助その10:AMP表示

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

 

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

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

 

Diver入力補助その11:横棒グラフ

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

データ1
データ2
データ3

 

Diver入力補助その12:吹き出し

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

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

 

Diver入力補助その13:口コミ

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

WordPressテーマ「Diver」の評価

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

 

Diver入力補助その14:会話

会話風の表示も簡単につくれます(ノ*゚ー゚)ノ

チキさん
こんな風にしたり~

心の声みたいにしたり~

 

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

 

Diver入力補助その15:ランキング


 

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

WordPressテーマ「Diver」(商材タイトル)
初心者にピッタリ!(商材小見出し)
WordPressテーマ「Diver」なら初心者も簡単に使えて、
時間短縮できる機能がいっぱい!

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

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

 

Diver入力補助その16:レビュー

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

 

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

 

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

 

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

 

Diver入力補助その17:レビュー表

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

 

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

フルサイズ コンテンツ
ハーフサイズ1 コンテンツ ハーフサイズ2

 

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

見た目
料理の値段
お店の雰囲気
 スマホではハーフサイズは縦に重なって表示されます

 

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

 

Diver入力補助その18:ポップアップ

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

 

[壁]_・)フフフ
押してみる・・・・・?

(」゚ロ゚)」(」゚ロ゚)」(」゚ロ゚)」ポップアップ発動!!

 

Diver入力補助その19:Q&A

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

チキさんのプロフィール教えて?
プロフィールページをミテね[壁]*゚ー゚)ノ

 

Diver入力補助その20:コード

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

 

例えばこんな感じ

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入力補助その21:トグル

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

 

押すなよ!ゼッタイ押すなよ!
(*/∇\*))))))ィャ――――ン♪

 

Diver入力補助その22:QRコード

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

 

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

QR Code

 

Diver入力補助その23:記事一覧

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

 

例えばこんな感じです

 

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

 

まとめ

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

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

 

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

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

 

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

 

 

スポンサーリンク