diver入力補助の全機能の説明と使い方、
記事作成していると画像は良く使うことが多いのですが、diver入力補助を使うと画像の横に吹き出しを入れるのが簡単にできる。
いつもと違うレイアウトにしてみよう。画像とGIFで説明していきます。
画像の横に吹き出し
画像の横に吹き出しが
テーマDiverを使うと簡単に！
3ステップで完了
Diverおすすめのポイント
普通のやり方
普通に吹き出しを挿入してみる
画像の下に
吹き出しがでて来ない。
できない・・・
普通にサクサクやっていること、うまくいかないんですね、でも問題ないですdiverなら簡単にできますから
次からはdiverの入力補助を使ってサクサクいきましょう。
装飾あと
作成方法
1枚画像を用意してください。
- グリッドレイアウト
- レイアウト
- 画像挿入
- 吹き出し
画像回り込み
画像回り込みとは、
画像回り込みとは画像の横に文字が出ること
Diverで解除は簡単で、テキスト(ビジュアル)画面から周り込み解除があるのでクリックで解除されます。
解除あとは、文字が下にきます
文字が下になる
Q＆A
diver入力補助
diver入力補助はたくさんあります、簡単に記事装飾ができますが使い方が分からないと意味がないです。
全部の機能を一度目をとうしてみましょう。
入力補助23項目概要一覧
- 見出し
- ボタン
- バッジ
- 囲い枠
- 区切り線
- リストデザイン
- アイコン
- グリッドレイアウト
- 引用
- AMP表示
- 横棒グラフ
- 吹き出し
- 口コミ
- 会話
- ランキング
- レビュー
- レビュー表
- ポップアップ
- Q＆A
- コード
- トグル
- QRコード
- 記事一覧
記事装飾に使える入力補助23項目
1見出し
エディタ段落で設置できますが入力補助内にもあります、今回使っている丸に番号はいいかもしれない！
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つめの項目
- 2つめの項目
- 3つめの項目
7アイコン
fa-cc-jcb
アイコン種類も豊富で色の変更も可能です。
アイコン作成する時はビジュアルエディタでは見えないので作成した後に変更をプレビューで確認して表示されていることを確認しましょう。
fa-bank
8グリッドレイアウト
グリッドレイアウトは使い方がなれないと、うまく思い通りに表示されないので何度も使って覚えましょう
応用すると画像を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側でキャッシュすることで、読み込む分の時間を大幅に削減する仕組みとなっています。
11横棒グラフ
12吹き出し
吹き出し
矢印方向は4方向左右上下
角のまるみも調整可能
線の太さ、色の変更ができないのが残念
13口コミ
diver、入力補助
diver入力補助は機能多数でカスタマイズしやすい
是非とも使ってほしい
14会話
最近よくみる会話風の吹き出しです。たまには使いますが頻繫に使うと
見ていて疲れる感じがします、必要なとき使用しましょう。
15ランキング
使ってわかるdiverのよさ！
当サイト、アドセンス審査4時間の実績あり
アドセンスコードも貼り付けでok
カスタマイズのしやすさ
SEO対策
テーマ更新もボタン1つ押すだけ
ランキングはサイト運営しているいる方には必修項目でしょう、商品レビューもHTML・CSSのの知識がなくてもほんの数秒で出来上がり
16レビュー
文章を書いていて何かしら評価したりレベル表示する時にはいいかもしれません。
17レビュー表
| ココナラ |
|
||
|---|---|---|---|
| 最近値上げしてので↘ | |||
枠付きでレビューが出来ます
18ポップアップ
ポップアップ機能は、文字や画像を押すと画面が変わり、まったく違う情報を表示することができます。
レイアウトに動きを付けたり情報の出し方の変化で変わった演出ができます。
19Q＆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コード作成もスムーズ、自分のサイトURL
LINEQRコードをサイドバーに表示するの便利ですね。
23記事一覧
記事一覧はdiverのトップページでカスタマイズ表示もしくは投稿設定で表示しているので使用頻度は少なめ
記事作成途中に内部リンクや外部リンクはテキストがオススメ！
まとめ
見た目をカスタマイズするのが簡単で使いやすいのが気にいっています。
せっかく有料テーマを購入したんですからDiverを使いこなしましょう。
