【Diver】囲い枠を入力補助で簡単に作成する方法と応用編！

１．はじめに

２．囲み枠の作成方法

まず「Diver入力補助」の囲い枠をクリックしてください。

囲い枠入力補助の作成画面が出てきますので入力およびチェックをしていきます。

今の作業で下のような囲い枠が入力されたと思います。

ちなみに、この状態を作ってしまえば直接修正をしても加筆してもＯＫです。

３．アイコンの挿入方法

先程、触れなかった「アイコン」について説明をしていきます。

「アイコン」をクリックするとアイコン選択画面がポップアップされます。

ポップアップされたら挿入したいアイコンを選択してクリックしてください。

ただし、いくつか試しましたが挿入できないアイコンもあるみたいです。

今回は、例としてビットコインのアイコンを「fa-btc」挿入していきます。

「fa-btc」をクリックするとアイコンが「fa-btc」に変わりました。

タイトルに「ビットコイン」と入力して「タイトル内」にチェックを入れて挿入していきます。

下のようにタイトルが「　ビットコインfa-btc」にという形で挿入ができました。

「コンテンツ」にチェックを入れるとテキスト内の先頭にアイコンが表示されます。

４．装飾オプション

５．応用編

囲い枠を作ってしまえば中に画像や他の入力補助を挿入することもできます。

画像を枠で囲みたい場合は先に枠を挿入してからテキストの部分に画像を挿入します。

こちらは入力補助でグリッドレイアウトの4カラムを選択して画像を挿入しています。

このように入力補助のランキングの枠として使用することもできます。

ランキングには枠を挿入できるようになっていますが個人的にこちらのバランスが好きです。

アフィリエイト最適化WordPressテーマ

こんなテーマを待っていた！

・販売価格：17,980円（税込）
・販売経路：DLmarket or infotop
・SEO：初期設定ファイルにて案内
・子テーマ：子テーマ付き
・サポート：永久無料
・バージョンアップ：永久無料

美しいデザインが目を引くWordpressテーマですが、内部構造がしっかり作り込まれているのが特徴です。SEO対策は当たり前で、アフィリエイトの収益をいかに増やせるかということを考えて作られています。デザインはユーザーのことを考えて作られていて、カスタマイズの自由さでも美しさが損なわれることがないように作成可能。

ご購入はこちら

詳しくはこちら

６．まとめ

サイト制作者の「考え方・やり方」次第で様々な用途で使える便利な機能だと思います。

～こちらの記事も参考にしてください～

【おすすめ】ワードプレステーマDiverの使い方を詳しく完全解説！

2019.4.7

aki ワードプレステーマ「Diver」について詳しく説明するよ！ 今回は「有料テーマ」の購入を検討している方に「Diver」でどんなことが出来るのかを簡単に説明していきます。 ...