diver入力補助の全機能の説明と使い方、

記事作成していると画像は良く使うことが多いのですが、diver入力補助を使うと画像の横に吹き出しを入れるのが簡単にできる。

いつもと違うレイアウトにしてみよう。画像とGIFで説明していきます。

GIFを使って説明していますので読み込みに時間がかかるかもしれませんご了承くださいね。

画像の横に吹き出し

画像の横に吹き出しが

テーマDiverを使うと簡単に!

3ステップで完了

Diverおすすめのポイント

イメージ画像
テーマDiverを使うと3ステップで簡単に、初心者でもサクサク、悩む必要なし
通常通り作成していくと画像の横に吹き出しはうまく表示されない、画像の下にきてしまう。
画像のサイズが大きい場合は下に吹き出しで問題ないですが、画像サイズが小さい時とか画像横に吹き出しを入れたいときの方法をご紹介します。

普通のやり方

普通に吹き出しを挿入してみる

画像の下に

吹き出しがでて来ない。

できない・・・

できますよ、手順を解説していきます。

 

普通にサクサクやっていること、うまくいかないんですね、でも問題ないですdiverなら簡単にできますから

次からはdiverの入力補助を使ってサクサクいきましょう。

 

装飾あと

完成イメージ画像です。

説明させていただきますね。

 

作成方法

1枚画像を用意してください。

  • グリッドレイアウト
  • レイアウト
  • 画像挿入
  • 吹き出し
入力補助を選択して、
レイアウトを選んで、最後にレイアウトを挿入ボタンを押す
記事作成の画面に薄い線せレイアウト表示されています。
画像をグリッドレイアウトの左側に挿入する
メディアを追加で画像を挿入
右側に吹き出しを挿入
完成です、プレビューで確認してレイアウトや表示がずれている場合は修正してから投稿しましょう。
簡単すぎる、Diverで画像の横に吹き出の入れ方でした。

画像回り込み

画像回り込みとは、
画像回り込みとは画像の横に文字が出ること

Diverで解除は簡単で、テキスト(ビジュアル)画面から周り込み解除があるのでクリックで解除されます。

 

解除あとは、文字が下にきます

文字が下になる

 

入力補助下に、スタイルボタンがありその中に回り込み解除もあります。

Q&A

画像と吹き出しの位置が合わない、すきまがある?
グリッドレイアウトで調整してみる、画像の配置を変えて見ることで解消できます。
画像をクリックで下にポップアップが表示されて画像の位置を移動できる右、中、左修正してみて。
グリッドレイアウトは好きなレイアウトで配置が合うように調整。
吹き出しの種類は1つですか?
吹き出しの向きは上下左右4方向あります。カラー、線の太さは変更可能です、cssで調整してください。吹き出しの角に丸みをつけることも可能です。

diver入力補助

diver入力補助はたくさんあります、簡単に記事装飾ができますが使い方が分からないと意味がないです。

全部の機能を一度目をとうしてみましょう。

入力補助23項目概要一覧

  1. 見出し
  2. ボタン
  3. バッジ
  4. 囲い枠
  5. 区切り線
  6. リストデザイン
  7. アイコン
  8. グリッドレイアウト
  9. 引用
  10. AMP表示
  11. 横棒グラフ
  12. 吹き出し
  13. 口コミ
  14. 会話
  15. ランキング
  16. レビュー
  17. レビュー表
  18. ポップアップ
  19. Q&A
  20. コード
  21. トグル
  22. QRコード
  23. 記事一覧

記事装飾に使える入力補助23項目

1見出し

エディタ段落で設置できますが入力補助内にもあります、今回使っている丸に番号はいいかもしれない!

diverカラーは基本7色でプラス、カスタマイズで無限色選択可能

2ボタン

リンク先も簡単に設定できるのがうれしいですね、アイデア次第でいろいろ使えます

 

3バッジ

 

テスト

ボタンと似ているが比べると分かるが小ぶりで、リンク先がない。

テキストにリンクも可能、テキストをなぞってエディタ、リンクアイコンから作成してください。

テストボタンを押すと1番見出しに戻ります

 

4囲い枠

囲い枠

基本カラー7色

画像も挿入できる

5区切り線

 

記事作成の途中に使うのがいいですね

 

6リストデザイン

  • 1項目
  • 2項目
  • 3項目
サンプル

ulとliの箇条書き

    • 1つめの項目
    • 2つめの項目
    • 3つめの項目

1つめの項目
2つめの項目
3つめの項目
このようにulとliを使うと、各項目の先頭が黒ポチの箇条書きとなります(この黒ポチのデザインは変えることができます)。

olとliの箇条書き
ulのかわりにolを使うと以下のように番号付の箇条書きになります。

    1. 1つめの項目
    1. 2つめの項目
    1. 3つめの項目

7アイコン


アイコン種類も豊富で色の変更も可能です。

アイコン作成する時はビジュアルエディタでは見えないので作成した後に変更をプレビューで確認して表示されていることを確認しましょう。

8グリッドレイアウト

②グリッドレイアウトは画面を分割してくれます。薄い線が画面に出現しますのですぐに確認できます。
③今、説明している状況は3分割して記事を書いています①が画像で②中、③が左となります。

グリッドレイアウトは使い方がなれないと、うまく思い通りに表示されないので何度も使って覚えましょう

応用すると画像を3枚並べたり吹き出しを画像の横に簡単に設置することが出来ます。

こんな感じで使えます
グリッドレイアウトを使ってみましょう

9引用

引用
(引用文 から転送)

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2019/03/04 02:50 UTC 版)

引用(いんよう、英語:citation, quotation[1])とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。狭義には、各国の著作権法の引用の要件を満たして行われる合法な無断転載等[2]のこと。

引用は正しく使いましょう。記載とリンクを貼ればいいと言う所もあるしNGの所もあります、

事前に確認するのが望ましいと言えます。

10AMP表示

AMPとは
AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

→AMPプロジェクト公式

AMPの仕組み
通常、ウェブページにアクセスするとき、リンクをクリックしてからHTMLを読み込み、ページを表示するため、その分時間がかかってしまいます。一方AMPでは、ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込む分の時間を大幅に削減する仕組みとなっています。

AMPは入力補助から使うのではなく変更プレビューから設定した方が簡単で楽にできます。

11横棒グラフ

レベル80
レベル
比較の作成で使う、グラフ化する時に良さそうです。

12吹き出し

吹き出し

矢印方向は4方向左右上下

角のまるみも調整可能

線の太さ、色の変更ができないのが残念

13口コミ

diver、入力補助

diver入力補助は機能多数でカスタマイズしやすい

是非とも使ってほしい

bb
商品紹介など口コミに
会話はアイコンと似ているが間違えないでください。

14会話

BB

最近よくみる会話風の吹き出しです。たまには使いますが頻繫に使うと

見ていて疲れる感じがします、必要なとき使用しましょう。

アイコンも無制限で登録できますから、表情ごとにアイコンを作成して会話アイコンを楽しむのもいいかもしれません
現在使っているのは手書きアイコンで自分で作成しています、もっと綺麗でキャラっぽいのがいいんですが絵のセンスがないためこんな感じでやってます。
作成依頼するのもいいですね、たとえばココナラ少し前はワンコインで依頼出来ましたが最近値上げしたみたいです最低金額がアイコン作成依頼で、
1000円からになってます。
1つ作成で倍の値段はちょっとやりすぎ! 値上げしてもココナラを使います! 自分でできないことは外部に依頼して時間短縮することをおすすめします。

15ランキング

diverのすすめ
diverのよさ

使ってわかるdiverのよさ!

当サイト、アドセンス審査4時間の実績あり

アドセンスコードも貼り付けでok

カスタマイズのしやすさ

SEO対策

テーマ更新もボタン1つ押すだけ

初心者用から上級まで使えるワードプレステーマdiver

ランキングはサイト運営しているいる方には必修項目でしょう、商品レビューもHTML・CSSのの知識がなくてもほんの数秒で出来上がり

16レビュー

文章を書いていて何かしら評価したりレベル表示する時にはいいかもしれません。

17レビュー表

ココナラ
最近値上げしてので↘

枠付きでレビューが出来ます

18ポップアップ

 

ポップアップを見てみる

ポップアップが表示されています、確認できましたか?

ポップアップ機能は、文字や画像を押すと画面が変わり、まったく違う情報を表示することができます。

レイアウトに動きを付けたり情報の出し方の変化で変わった演出ができます。

 

ポップアップ表示です!
表示コンテンツ
テスト
https://betterbest.work/wp-content/uploads/2019/05/アナリスク通知12-.jpg
表示コンテンツ
画像を拡大する機能

19Q&A

ここが分からないのですが?
教えてください。

で解決です

お問い合わせの回答をサイトに載せたり、質問のやり取りをQ&Aで作成するのもいいでしょう。

20コード

@charset "utf-8";
/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */

 

ちょっとしたコードの紹介や説明に使えます

21トグル

トグル説明
情報が多いときなどに活用していきましょう。画像や動画なども挿入可能で、トグル連打でボタン&情報が表示できます

22QRコード

QR Code

QRコード作成もスムーズ、自分のサイトURL

LINEQRコードをサイドバーに表示するの便利ですね。

23記事一覧

 

 

記事一覧はdiverのトップページでカスタマイズ表示もしくは投稿設定で表示しているので使用頻度は少なめ

記事作成途中に内部リンクや外部リンクはテキストがオススメ!

まとめ

 

見た目をカスタマイズするのが簡単で使いやすいのが気にいっています。

 

Diverは機能が多いんです、初心者の方は戸惑うかもしれませんが一度使ってなれることです。
機能の使い方をすべてを覚える必要はないので、使っていて分からない時はググって検索で解決できます。

 

せっかく有料テーマを購入したんですからDiverを使いこなしましょう。

 

装飾も簡単に初心者には最高でしょう。

ではこのへんで!!
期間工募集中!
激アツ 情報

期間工最新情報、激アツ
トヨタ期間工が募集再開を始めた!

 

入社祝い金10

 

初回更新手当10

 

経験者手当:最高10

 

年収例425以上可能

 

詳細は別記事で紹介している

 

 

募集、予約面接会場マップ、
他メーカー情報:
当サイトオリジナル

 

 

 

期間工、募集企業名 特典
トヨタ自動社
豊田自動織機 入社祝い金 20
トヨタ自動車九州
スバル 選考参加費 5
ホンダ
日産自動車 入社祝い金合計 :いわき工場 30

追浜工場:入社祝い金5

日産車体 入社祝い金総額 30
日産自動車九州
日産車体九州 入社祝い金等総額 34
オートワークス京都
ダイハツ九州 入社祝い金 10
いすゞ自動車
スズキ
入社祝い金 10
コマツ製作所
シーヴイテック
入社祝い金 15
ジャアトコ
NTN
入社祝い金 20
ブリヂストン
入社祝い金合計 15
住電装プラテック
キャノン
太陽誘電ケミカルテクノロジー
コマツ

 

 

 

スポンサーリンク
おすすめの記事