bb_line_koushiki

bb_line_koushiki

登録してくれたお友達に 特典 があるよ!

プレゼント1、完全無料でブログができる方法

プレゼント2,期間工情報や生活にかかせないお得が、、、

bb_info_line

bb_info_line

QRコード恐竜が可愛い

カメラで読み込んで見てね!

恐竜QRを表示させる方法

動画の中に新しい機能が!

2021年東京オリンピック開会式予定まであと何日?

New video marketing

 

diver ワードプレスの入力補助23の使い方と画像の横に吹き出し
スポンサーリンク

 

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を使いこなしましょう。

 

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

ではこのへんで!!

BB公式登録キャンペーン

3つのプレゼント

限定特典

お得がもらえる

だけもれなく全員

BB公式LINE 限定

期間工募集中!
激アツ 情報
期間工最新情報、激アツ
トヨタ期間工 入社
 祝い金が 
          UP 

 

えっ 60
※ メーカーより特別手当 40  + 初回更新手当 20

 

経験者手当:最高 10

 

年収例445以上可能 ※1年目

 

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

 

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

 

期間工、募集企業名 特典
トヨタ自動車 えっ 60 【特別手当 40 + 20 初回更新
  • ◇満了慰労金+報奨金
    • 3ヶ月満了 122,000円(満了慰労金30,500円+満了報奨金91,500円)
    • 6ヶ月満了 390,400円(満了慰労金207,400円+満了報奨金183,000円)
    • 12ヶ月満了 488,000円(満了慰労金305,000円+満了報奨金183,000円)
    • 18ヶ月満了 512,400円(満了慰労金329,400円+満了報奨金183,000円)
    • 24ヶ月満了 536,800円(満了慰労金353,800円+満了報奨金183,000円)
    • 30ヶ月満了 561,200円(満了慰労金378,200円+満了報奨金183,000円)
    • 35ヶ月満了 576,000円(満了慰労金396,000円+満了報奨金180,000円)
 
豊田自動織機 ★★メーカーより入社特典総額55万円支給★★ 【内訳】 ■入社祝い金50万円 ■赴任手当3万円 ■食事手当2万円 ※支給規定あり
トヨタ自動車九州 メーカーより入社祝い金 総額 40万円 ※規定あり
スバル、群馬製作所 入社特典最大55 メーカーからの支給
日産自動車株式会社
横浜工場
 
  初月月収例 44.7万円   月収例 33.9万円   企業からお祝い金 50万円   満了慰労金 9万円   経験者手当 5万円
追浜工場
  初月月収例 49万円   月収例 34万円   企業からお祝い金 30万円   満了慰労金 最大94万円 経験者手当 8万円
※入社祝い金や特典には規定があります。
応募や面接時に確認しましょう。
スポンサーリンク
おすすめの記事