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

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

 

入力補助機能

です。

 

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

 

そこで今回は、

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

fa-arrow-circle-downオススメ商品

ココがポイントfa-thumbs-o-up

 

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

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

 

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

 

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

 

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

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

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

 

 

 

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

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

 

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

例えばこんな感じです。

 

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

 

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

 

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

fa-twitter@tikitengo

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

fa-youtube-playYouTubeでチェック！！

 

 

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

 

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

 

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

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

 

Diver入力補助その９：引用

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

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

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

引用元のタイトルがココ

 

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

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

 

fa-arrow-circle-downどちらのテキストが表示されていますか？

 

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

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

 

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

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

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

 

fa-arrow-circle-downレビュースコア1 ＆ タイプ小

 

fa-arrow-circle-downレビュースコア3.5 ＆ タイプ中

 

fa-arrow-circle-downレビュースコア5 ＆ タイプ大

 

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

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

 

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

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

 

fa-arrow-circle-downハーフサイズを重ねてもいいですねc(*ﾟーﾟ*)

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

 

 

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

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

 

fa-arrow-circle-down[壁]_･)ﾌﾌﾌ
押してみる・・・・・？

 

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

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

 

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

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

 

fa-arrow-circle-down例えばこんな感じ

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入力補助その２１：トグル

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

 

 

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

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

 

fa-arrow-circle-downチキテンゴTopのQRコード (サイズ150px)

 

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

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

 

fa-arrow-circle-down例えばこんな感じです

• 2018-11-17
  ブログ運営
  ブログは3ヶ月目にPVが伸びるって本当？初心者ブロガーのリアル
• 2018-11-14
  ブログ運営
  GoogleアドセンスのPINコードが届かない場合の対処方法と手順
• 2018-09-04
  ブログ運営
  【ブログ運営記録】2ヶ月目のPVと収益は？月間1万PV達成！
• 2018-08-25
  ブログ運営
  ブロガー必見！おすすめのTwitter無料ツールを紹介
• 2018-08-13
  ブログ運営
  WordPressテーマ「Diver」の入力補助機能すべてお見せします！

 

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

• ライフハック
  【必見】宝くじのお得な買い方！3連バラ・福連100って何？
• ライフハック
  スマホゲームの課金をやめる方法！100万円課金した私の考え
• ライフハック
  NAVERまとめとブログはどっちが稼げるのか？に対する答え

 

まとめ

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

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

 

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

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