diviの使い方③　コードの入れ方

執筆者 | 8月 25, 2019 | divi, サイト作成 | コメント0件

Divi

コードの入れ方

サイトにコードを設定することで、あらゆることが可能となります。

・自分のサイトに予約システムを導入する

・フェイスブックと連携させ、常に最新の情報をサイトに掲示する

・アフィリエイトとして、サイトを収益源とする

その他にも、様々なことが可能になります。

サイト構築になじみのない方は「コードを入れる」と聞くと難しそうな印象を持たれると思います。
しかし、Diviでは「コピー＆ペースト」のみですので、驚くほど簡単です。

では、その方法をご紹介します。

設定方法

下記3ステップのみで設定できます。

①各種コードをコピーする

②『コード』モジュールを選択する

③記入欄に①のコードをペーストして完了

 

順番に説明します。

①各種コードをコピーする

サイトに掲載することができるコードにはたくさんの種類があります。実際の例をご紹介します。

・例1　Facebookやインスタグラムのページを紹介するコード

こちらは、私がとても気にっている4姉妹のパパ サイモンさんのインスタグラムサイトです。インスタグラムのページにはメニューに「コードを埋め込む」という表示があり、そのコードをコピーすることができます。後は後述する②③の方法でペーストすると、このような表示を自分のサイトに設けることができます。

この投稿をInstagramで見る

Here's to all the father's out there. To the fresh faced new dads & the ones who have war stories and experience lines. To the ones who act as human climbing frames, that fix broken things, that know all the lines to kids TV shows & that devour the kids left over food. To father's who strive to set benchmark of what men should be so high, that no future boyfriend's will ever match up. To the fathers who are a shoulder to cry on, not someone to cry about. To the dads that get on with life without making a drama, that stand in the middle of arguments instead of starting them, that counsel and guide the new generation to be better than themselves, that hold hands and give bear hugs that are accompanied with a good dose of beard rash. To the dads who stay at home, to the ones that work & to the ones that don't. To the dad's that tell terrible jokes & are a constant embarrassment to their offspring but see the fun in life, that smile and know that that they are doing their best for the ones they love. To every type of father there is out there - Happy father's Day - be proud you can call yourself 'dad' - it's a true privilege. #fathersday #mygirls #spoilt #Fatherofdaughters #dadlife #indstdad #fod #dadsareawesome#itsaprivilege

Simon, also known as FODさん(@father_of_daughters)がシェアした投稿 -

・例2　エアリザーブによる予約システムの導入

こちらは、リクルートさんが提供しているエアリザーブという予約システムです。こちらでもコードを提供しているため、そのコードをコピー/ペーストすることで、このように自分のサイトと予約システムを繋げることができます。（下は私の予約システムです。一例として入れてみました。）

エアリザーブに関する詳細はこちらです。

②『コード』モジュールを選択する

モジュールを追加して、「コード」を選択して下さい。

③記入欄に①のコードをペーストして完了

いかがでしたか？
とても簡単にコードを設定できることがお分かりになったかと思います。Divi、とてもおススメです。

（ご参考：下記のアフィリエイトリンクも、今回説明した「コード」機能を使ってバナーを設定しています　^^　）

■広告です
もしDiviに興味をもって下されば、下記リンクから会員登録（年間約1万円で各種機能/レイアウトが使いたい放題となります）をお願い致します。

私は「プログラミング教室等に通うことと比較すればとても安い♪」と感じ購入しました。公式サイトには、実際の使用を体感できるデモページもございますので、ぜひ試してみて下さい。

下記リンクは私にも収入が入るリンクですので、記事作成の励みとなります。
応援よろしくお願い致します。

“Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.”

同じカテゴリの記事はこちら

Diviの魅力②　直感的なユーザビリティ

Diviの魅力②　直感的なユーザビリティ

執筆者 | 7月 19, 2019 | ,

Diviの大きな魅力の1つは、直感的な「Diviビルダー」です。 まるでパワーポイント資料を作成しているような感覚で、実際の画面で文字の編集/写真の挿入/各種効果の反映等を行うことができます。 今回は、この3つを紹介しますね。・テキストの書き方　　：圧倒的なユーザビリティ。・レスポンシブデザイン：ボタン１つで画面を変えられます。・最近流行りの視差効果：パララックスも、ボタン１つで対応できます。①テキストの書き方 文字情報にマウスを合わせれば、そのまま文字を編集できます♪...

Diviの魅力①　豊富なレイアウト

Diviの魅力①　豊富なレイアウト

執筆者 | 7月 18, 2019 | ,

これから、Diviの魅力について紹介していきます。   Diviの会員になると、とてもオシャレなレイアウトがたくさん提供されます。そのレイアウトを基に、文字/写真を入れ替えながら作成することができるため、大変効率的に作業を進めることができます。   写真を用いながら、使い方についてご紹介します。①新規の投稿や固定ページを作成する際に、このようなページがポップアップします。 100以上あるレイアウトの中から、イメージにあうレイアウトを選びます。②あとは、「Use This...

WordPress「Divi」テーマとは？

WordPress「Divi」テーマとは？

執筆者 | 7月 7, 2019 | ,

Wordpressでサイトを作る方法は様々です。 全て自分で作りあげる、無料のテーマを使用する、有料テーマを使用する。 いろいろと調べてみましたが、私はコード等を駆使できる程の知識がなかったため、有料テーマを使用してサイトを作成することとしました。 （勉強と作りこみの時間を、お金で買うようなイメージです。） 有料テーマは大変多く、選ぶのが大変です。 重要視したことは「直感的に作成できること」...