WordPressやWebデザインなど紹介 Ocadweb https://ocadweb.com WordPressやWebデザインなどに役立つ情報をご紹介 Thu, 20 Apr 2023 09:05:40 +0000 ja hourly 1 https://wordpress.org/?v=5.8.9 https://ocadweb.com/wp-content/uploads/2018/03/logo2-150x150.png WordPressやWebデザインなど紹介 Ocadweb https://ocadweb.com 32 32 WordPress5.8対応へ!公式テーマLIQUID PRESSバージョンアップ! https://ocadweb.com/web/wp5_8_lqdupdate Wed, 24 Nov 2021 09:00:14 +0000 https://ocadweb.com/?p=9618 WordPress公式有料テーマのLIQUID PRESSがWordPress5.8対応とバージョンアップされました。便利な新機能や、お得なキャンペーン情報をご紹介します! LIQUID PRESS ...

The post WordPress5.8対応へ!公式テーマLIQUID PRESSバージョンアップ! first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
WordPress公式有料テーマのLIQUID PRESSがWordPress5.8対応とバージョンアップされました。
便利な新機能や、お得なキャンペーン情報をご紹介します!

LIQUID PRESS

WordPress5.8/PHP8対応

WordPress 5.8では、新しいブロック、ウィジェットブロックエディター、WebPサポート等の新機能が搭載されました。また、PHP8では、処理速度の向上により、以前のバージョンに比べてパフォーマンスが向上します。
WordPress公式サイト:WordPress 5.8 Tatum

LIQUID PRESSは、WordPress5.8/PHP8に対応しました!
※WordPressおよびPHPのバージョンアップは、本体やプラグイン等の対抗状況をご確認ください。

スライド系ブロック対応

LIQUID PRESS のバージョンアップで、スライド系ブロックに対応しました!

最新のウィジェットブロックエディターにも対応しているため、ウィジェットエリアにスライダーを配置することができるようになりました。これにより、カラムの表示の幅が広がり、より多様性のあるハイクオリティーなページをつくる事が出来ます。

カラムスライダー

カラム単位でスライドさせることができます!カラムの中は自由にブロックを挿入可能。用途に合わせた組み合わせで、オリジナルのスライダーを作成することができます。

レスポンシブ対応。スマホは左右にスワイプして切り替え可能。矢印を押下してスライドする事も可能。カラム数/表示数の変更、自動/手動スクロールの設定も簡単操作で編集可能。

◀サンプル▶

見出し

カラムスライダー 1

見出し

カラムスライダー 2

見出し

カラムスライダー 3

見出し

カラムスライダー 4

見出し

カラムスライダー 5

見出し

カラムスライダー 6

設定方法

カラムブロック全体を選択し、サイドバーのスタイルで Column Slider を選択します。

スライド設定の表示数が、画面上に表示される数です。カラムの方が多い場合、左右にスライドします。また、スライド形式で 自動スクロール手動スクロール を選択できます。

自動スクロールの場合、一定の速度で1カラムずつ自動でスクロールします。
手動スクロールの場合、左右に出る矢印をクリックすることによりスクロールします。

設定方法(ウィジェットブロック)

管理画面>外観>ウィジェット から、記事ページと同じようにブロックエディターでウィジェットを編集することができます。

カラムスライダーを操作した感想

おどろくほど簡単にスライダーが設定できます。
設定の自由度も高く、カラム数、表示数、スクロール方法も簡単に変更できるので、イメージ通りのサイトに仕上がりました。レスポンシブ対応なのでスマホやタブレットで見たときも、タップで直感的に操作する事ができました。

フェードスライダー

自動でフェード切り替えするギャラリーを作成することができます!
Webサイトのトップページなどでよく使われる表示方法で、シンプルな操作で簡単に取り入れることができます。

レスポンシブ対応。矢印を押下して画像を切り替えることも可能。カラム数/サイズの変更や、それぞれの画像にリンクを設定する事も可能。

◀サンプル▶

設定方法

ギャラリーブロックを選択し、サイドバーのスタイルで Fade Slider を選択します。

フェードスライダーを操作した感想

ページの見栄えが格段に良くなり、フェードのタイミングも秀逸、プロ並みのサイトになります。
設定方法もシンプルで分かりやすく、カラム数の変更や、それぞれの画像にリンクを付けることも簡単にできました。スマホやタブレットで見ることも多いので、レスポンシブ対応している事も魅力です。

GoogleアナリティクスGA4対応

Googleアナリティクスの最新バージョンGA4に対応しました!
旧IDにも対応しています。どちらか一方のみ設定します。IDを入力すると、アクセス解析タグが自動挿入されます。

GA4とは?

「Google アナリティクス4 プロパティ」の略で、2020年10月にリリースされた次世代型のWebサイトにおけるオンラインデータ解析ツールです。ユーザー(顧客)を軸とした計測ができ、「アプリとウェブをまたいだ計測」「Googleの機械学習モデルを活用した予測機能の導入」「プライバシー重視のデータ収集」の機能が搭載された事が大きな特徴です。Google アナリティクスのデフォルトプロパティとなり、今後もさらに新たな機能が導入される予定です。

LINE/Linkedinアカウント設定の追加

SNSアカウント設定に、LINE / Linkedin が設定が追加されました!
簡単設定でアイコンやリンクを表示したり、SNSウィジェットとして配置することができます。

Lineは国内8,800万人以上が利用しており、サイトにアカウントを載せる機会も多いのではないでしょうか。
Linkedinは世界最大級のビジネス特化型SNSです。全世界での登録者数は5億4千万人を超え、国内でもすでに200万人以上が登録しています。

設定可能なSNSアカウント

Facebook / Twitter / Google+ / Tumblr / Instagram / YouTube / Flickr / Pinterest / LINE / Linkedin

ブロックスタイルの追加、UI改善等

コードブロックに、darkスタイルが追加されました!
黒い背景だとコードエディター風の見た目になりますね。

<?php
define("DB_NAME", 'sample')

また、メディア系テーマ(MAGAZINE、INSIGHT)のヘッダーに検索アイコンが追加され、すぐに検索できるようになる等、UI改善にも対応しています。

検索アイコンをタップすると、すぐにキーボードが立ち上がる便利な仕様です。

その他、詳しくは公式サイトをご覧ください。

互換性

LIQUID PRESS では、互換性を重視した開発を行っており、例えば、テーマを変更してもカラムスライダー等は問題なく(スライドなしで)表示されます。

デフォルトテーマ:Twenty Twenty-One を有効にした場合

WordPress公式テーマLIQUID PRESS について

最新版 WordPress に対応する、WordPressテーマ&プラグインを提供しています。 LIQUID PRESS は、WordPress公式有料サポートテーマディレクトリに登録されています。

LIQUID PRESS


The post WordPress5.8対応へ!公式テーマLIQUID PRESSバージョンアップ! first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
テーマは不要か?WordPressテンプレートプラグイン「LIQUID BLOCKS」 https://ocadweb.com/web/liquid-blocks Fri, 01 Nov 2019 07:25:47 +0000 https://ocadweb.com/?p=9535 WordPressのGutenberg(グーテンベルク)が導入されてから、htmlなどの知識がなくてもおしゃれなホームページが簡単にできるようになりました。 WordPressテーマは不要になるのか?...

The post テーマは不要か?WordPressテンプレートプラグイン「LIQUID BLOCKS」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
WordPressのGutenberg(グーテンベルク)が導入されてから、htmlなどの知識がなくてもおしゃれなホームページが簡単にできるようになりました。

WordPressテーマは不要になるのか?

WordPress関連のブログ記事でもテーマは不要になるのではないかという意見もでています。(実際には現在、WordPressテーマは必要になります。しかし、いろんなテーマを選ばなくても簡単におしゃれなホームページができるようになるのでは。。。という意味です。)

とはいえ、配置やデザインを考えたり、詳細な使い方を勉強したりせずにもっと簡単に作りたいという方に、今回紹介するテンプレートが用意されているWordPressプラグイン「LIQUID BLOCKS」を紹介します。このプラグインのイメージ画像は英語表記されていますが、製作者は日本人のため、もちろん日本語対応。またWordPress公式のものなので安心です。

WordPressプラグイン
「LIQUID BLOCKS」

1クリックだけで簡単に1ページのレイアウトができたり、それぞれのパーツごとに選択して好みに合わせたレイアウトも非常に簡単に使うことができます。

「LIQUID BLOCKS」でレイアウトは簡単なのか?

WordPressプラグイン「LIQUID BLOCKS」でレイアウトは簡単なのか?

使い方は上記のイメージのように、上部バーにある「リキッドのロゴ」をクリックすると右側にLIQUID BLOCKSのメニューが表示されます。その中のギャラリーをクリックすると下に紹介するテンプレート事例が表示されるので、そこのレイアウトから好きなブロックを選択するだけです。

また、上記のようにテキストを選択して、「▼」ボタンを選択し「Mark」または「Underline」、「Big」、「Small」のどれかデザインを変更したい項目を選択すると表示も簡単に変更することができます。

WordPressプラグイン「LIQUID BLOCKS」のテンプレート事例

WordPressプラグイン「LIQUID BLOCKS」の使い方

テーマ不要になるか?WordPressプラグイン「LIQUID BLOCKS」:テンプレート
テンプレート

テーマ不要になるか?WordPressプラグイン「LIQUID BLOCKS」:ヘッドライン
ヘッドライン

テーマ不要になるか?WordPressプラグイン「LIQUID BLOCKS」:レイアウト
レイアウト
テーマ不要になるか?WordPressプラグイン「LIQUID BLOCKS」:料金表やCTA
料金表やCTA

今後もテンプレート数を増やしていくようですが、現在は33種類のデザインギャラリーから選ぶだけでおしゃれなデザインのサイトができます。

・無料
・どのテーマでも利用可能
・33種類のデザインギャラリーから選ぶだけで制作できる
・コード、設定変更不要
・デザインの種類は、「見出し」、「カラム」、「料金表」、「CTA」、「ブレイクレイアウト」、「Q&A」、「RANKING」

無料でWordPress公式のプラグインにも登録されているので、一度試してみてはいかがでしょうか。

WordPressプラグイン「LIQUID BLOCKS」の便利なショートカット機能

テーマ不要になるか?WordPressプラグイン「LIQUID BLOCKS」:ショートカット機能

テンプレートがあっても、実際使うブロックは決まってしまうこともあると思います。

なのに、右上の「LIQUID BLOCKS」メニューを選択して・・・・ブロックを選択して・・・・という作業を短縮できる機能もあります。上記画像のように「ショートカット」を設定してワンクリックで表示、選択できるようにすることができます。

設定方法は、管理画面>設定>LIQUID BLOCKS から行います。

テーマ不要になるか?WordPressプラグイン「LIQUID BLOCKS」:ショートカット機能
  • Name: 投稿者がわかりやすい名前を自由に入力
  • Type: ブロック一覧のカテゴリ名横のテキスト(Headlines, Layouts…等)を記載
  • No: ギャラリー番号

WordPressプラグイン
「LIQUID BLOCKS」

WordPressプラグイン「LIQUID BLOCKS」のイメージ動画

下記に動画でもご紹介されているので、気になった方はイメージしやすいと思うので、御覧ください。

WordPress関連記事

The post テーマは不要か?WordPressテンプレートプラグイン「LIQUID BLOCKS」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
フキダシで会話形式にするWordPressプラグイン「LIQUID SPEECH BALLOON」 https://ocadweb.com/web/lqd-speech-balloon Mon, 13 May 2019 07:42:30 +0000 https://ocadweb.com/?p=9482 最近良く見かけるようになったフキダシを使った会話形式の記事。 アイコンからフキダシ(吹き出し)にテキストを入力し、インタビューや会話形式で表示することができます。 以前、紹介したGutenberg対応...

The post フキダシで会話形式にするWordPressプラグイン「LIQUID SPEECH BALLOON」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
最近良く見かけるようになったフキダシを使った会話形式の記事。

アイコンからフキダシ(吹き出し)にテキストを入力し、インタビューや会話形式で表示することができます。

以前、紹介したGutenberg対応のフキダシ(吹き出し)が簡単にできるWordpressプラグイン「LIQUID SPEECH BALLOON 」を紹介したいと思います。

WordPressプラグイン「LIQUID SPEECH BALLOON」

フキダシで会話形式にするWordpressプラグイン「LIQUID SPEECH BALLOON 」とは?

WordPressプラグイン「LIQUID SPEECH BALLOON 」ってどんなプラグインなの?

こんな感じに会話しているように表示できるWordPressプラグインだよ。

他の似たプラグインとどう違うの?

このフキダシ(吹き出し)が簡単にできるWordpressプラグイン「LIQUID SPEECH BALLOON」のメリットとしては下記のようなものがあげられます。

・Gutenberg対応ならどのテーマでも使える
・設定で複数のアイコンを登録しておくと簡単に挿入できる

ほんとうに簡単なの?

設定画面でたくさんアイコンを登録できるし、Gutenbergのブロックで設定を簡単に変更できるようになっているよ。

下記のようにプラグインの設定画面でたくさんの登録ができます。

そして、下記のようにブロックで追加し、アバターや向き、デザイン、サイズ、背景色、テキストの色などを設定できるのが特徴です。

WordPressプラグイン「LIQUID SPEECH BALLOON」

WordPressプラグインと相性の良いテーマ

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ

今回紹介したプラグインはLIQUID PRESS以外のテーマでも利用ができます。が、例えば、LPを作っている方や作る予定の方は、以前紹介したランディングページ用WPテーマ「LIQUID LP」と合わせて、会話形式のLPを作ってみてはいかがでしょうか。会話形式に商品やサービスをわかりやすく説明でき、コンバージョンへつながりやすいと思います。

ランディングページ用WPテーマ
「LIQUID LP」

The post フキダシで会話形式にするWordPressプラグイン「LIQUID SPEECH BALLOON」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 https://ocadweb.com/web/liquid_lp_samplepage Mon, 17 Dec 2018 07:38:06 +0000 https://ocadweb.com/?p=9368 前回紹介しましたランディングページ(LP)向けWordPressテーマ「LIQUID LP」。 Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ このWordPre...

The post Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
前回紹介しましたランディングページ(LP)向けWordPressテーマ「LIQUID LP」Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ このWordPressテーマ「LIQUID LP」では簡単にランディングページ(LP)が作れます。htmlなどの知識がなくてもランディングページ(LP)を簡単に作れるように3つのサンプルページが搭載されています。 ※但し、WordPressのエディター「Gutenberg」の使い方はある程度知っておく必要があります。 さて、ではどんなランディングページ(LP)のサンプルページがあるのか。また、どんなときに便利なのかなどご紹介させていただきます。

「LIQUID LP」のサンプルページ

Gutenbergに便乗!ランディングページをWordPressで簡単に作れる「LIQUID LP」 WordPressテーマ「LIQUID LP」のサンプルページでは、
  • プロダクト(商品紹介向け)
  • リード(ユーザー・顧客獲得向け)
  • サービス(サービス紹介向け)
の3種類になります。 WordPressテーマ内にランディングマニュアルもあります。 それぞれの目的に合わせて構成されたページになりますが、例えばWordPressテーマ「LIQUID LP」のサンプルページ「プロダクト」に問い合わせを追加したい場合でも他ページ同様に追加もできますし、組み合わせはどのページでも可能になっています。

ランディングページ用WordPressテーマ「LIQUID LP」:プロダクト

ランディングページはサンプルページで書き換えるだけで作れるWordPressテーマ:プロダクト このサンプルページ「プロダクト」は、商品の紹介に適したレイアウト。最後にお知らせを表示されています。 こちらは広告宣伝に対する消費者の心理プロセスを示したAIDMAで構成されています。

ランディングページ用WordPressテーマ「LIQUID LP」:リード

ランディングページはサンプルページで書き換えるだけで作れるWordPressテーマ:リード サンプルページ「リード」は見込み顧客獲得に適したレイアウト。角丸オプションを使用しています。またプラグインを使うことで最後にフォームを表示することもできます。 こちらは商品販売ページやセールスレータのフレームワークPASONAの法則で構成されています。

ランディングページ用WordPressテーマ「LIQUID LP」:サービス

ランディングページはサンプルページで書き換えるだけで作れるWordPressテーマ:サービス サンプルページ「サービス」は、名の通りでサービス紹介に適したレイアウト。シャドウオプションを使用しています。こちらもリードのと同様、最後にフォームを追加することができます。

WordPressテーマ「LIQUID LP」の配色変えるだけでもイメージが変わる

サンプルページの配色デザインを変えただけでも雰囲気が異なります。試しに女性やかわいい向きに「ピンク」とクールで落ち着いたサイト向きに「ブラック」を作ってみました。そのままのサンプルページと3つを比較したものです。 Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 配色を変えるだけで雰囲気が異なっているのがよくわかります。 テーマのカスタマイズの色を変えるだけで全体の配色を変更してくれるので簡単です。 念の為、サンプルページをインポートし下書きから公開し変更したところは下記の通りです。
  • 管理画面の「外観」の「色」で「テーマカラー」「ヘッダー背景カラー」を変更 ※ここで変更した配色は、固定ページの色の設定も変更されます。 個別に固定ページの右側のメニュー内にある色の設定などで変更できます。
  • 管理画面の「設定」→「表示設定」→「ホームページの表示」→「固定ページ」のホームページ:「リード」を選択
ランディングページ用WPテーマ「LIQUID LP」

ランディングページ用WordPressテーマ「LIQUID LP」サンプルページの使い方

まずは、ランディングページ用WordPressテーマ「LIQUID LP」のZipファイル「liquid-lp.zip」と一緒にサンプルページ用Zipファイル「liquid-lp-sample.zip」をダウンロードをしておきます。 そしてWordPressテーマ「LIQUID LP」を有効化します。 サンプルページ「liquid-lp-sample.xml」は下記の通り、インポートを行います。 Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」
  1. 管理画面>ツール>インポート>WordPressインポーターの実行から「liquid-lp-sample.xml」を選択して「アップロードしてインポート」
  2. インポートする投稿者は、既存のユーザーを選択し、「添付ファイルをダウンロードしてインポートする」にチェックして「実行」
Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 すると、管理画面の固定ページに3種類の下書きがインポートされているのを確認し、編集を行っていきます。

WordPressテーマ「LIQUID LP」を使う前に注意事項

  • WordPress5.0以降、もしくは4.9.8+プラグインGutenberg(グーテンベルク)
  • プラグイン「Classic Editor」の無効化 (※サンプルページを修正する場合のみ)
ランディングページ用WPテーマ「LIQUID LP」

WordPress管理画面の「外観」カスタマイズ設定

こちらでは全体的なデザインを作成していきます。ここではカスタマイズのメニューをピックアップして紹介していきたいと思います。

カスタマイズメニュー:レイアウト

Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 レイアウト レイアウトでは2カラムか1カラム(サイドバーなし)の選択になります。 ※LPテンプレートは1カラム(サイドバーなし)となります。 ヘッダーボタン ①に「ランディングページ制作にお悩みはありませんか?」の下の「詳しくはこちら」と記載のボタンを表示されるかの有無となります。 ※上記「」内の文言は変更可能です。 ヘッダーメニュー自動表示 投稿ページや固定ページ(属性「LP」以外の場合、②のメニューは管理画面>外観>メニュー 「Global Menu」が表示されます。) ※固定ページの属性については下記の「固定ページの属性」内に記載しています。 ヘッダータイトルのリンク先 ヘッダータイトルとはLOGOなどを設置する左上のリンクになります。 ③をクリックした場合にそのWordPressをインストールしたTOPのページを表示するのか、個別に作った固定ページのLPを表示するのか設定できます。 Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 アイキャッチ画像 ④は投稿ページや固定ページの属性「LP」以外の場合、ページ内に表示するのか設定できます。 固定ページの属性「LP」の場合はページ内に既に表示されているので、表示はされません。 ※固定ページの属性については下記の「固定ページの属性」内に記載しています。 ⑤は右の新着記事の一覧表示された場合、タイトル横にアイキャッチ画像を表示するか選択できます。 固定表示するページのタイトル 右側のプレビューが固定されたトップページに指定しない場合の表示になります。 右側のプレビューのタイトルの「サービス一覧」と記載されているタイトルを⑥で変更ができるようになります。 固定表示するページのタグ 右側のプレビューの3つ表示されているサービス一覧はこちらで指定したタグが表示されます。 設定時には⑦は空欄になっていますので、こちらにタグを記載していないと表示されていません。 新着記事表示 ⑧で右側のプレビューのように新着記事の表示の有無をこちらで設定できます。

カスタマイズメニュー:ホームページ設定

Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 ホームページ設定 Topページを設定します。こちらで「最新の投稿」を選択していると上記アイキャッチ画像に記載しているイメージがTopページになります。作成したLPをTopページにする場合、ホームページの表示:固定ページ>ホームページで選択したページがTopページになります。(※公開されたページのみ選択が可能です。)

WordPressテーマ「LIQUID LP」のサンプルページの変更方法

また、前提としてサンプルページはブロックで作られていますので、ブロックの位置の上下などの移動や削除はGutenbergの機能と同じです。 こちらも基本的なGutenberg(グーテンベルク)の使い方は下記をご覧ください。 WordPressエディタ「Gutenberg」の使い方!誰でも直感的なデザインに!

固定ページの属性

Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 固定ページの編集画面のメニューにある固定ページの属性を指定できます。 固定ページの属性>テンプレートでLPを選択するとサイドバーの内サンプルページの表示になります。

色設定や高度な設定(HTMLアンカー・オプション)

Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 色設定 色設定ではテーマのカスタマイズで指定した色がそれぞれの左上に表示され、自動で全体の配色を変更してくれます。もし個別に色を変更する場合には、固定ページのそれぞれのセクションで色を指定すると変更されます。 高度な設定(HTMLアンカー・オプション)設定 ボタンや見出しなどを選択すると右側のメニュー内①のように高度の設定>HTMLアンカーが表示され、文字列を入れるとページ内リンクとして設定可能です。 また高度な設定>「追加CSSクラス」に下記のCSSクラスを記載するで様々なオプションを設定できます。 サンプルページではあらかじめ設定されています。
ブロック CSS クラス オプション 効果
カバー lp-cover lp-skew 画像の下部が斜めになります。
lp-loop カバー内の太字テキストをカンマで区切ると、テキストが順に切り替わります。
lp-big 大きく表示されます。
lp-anime 画像の透明度がアニメーションします。
lp-head-static ヘッダー固定表示が解除されます。
ボタン lp-button 立体的なボタンになります。
カラム lp-buttons ボタンを横に並べる際に使用します。
lp-item LPに最適なデザインになります。
lp-plan 料金表のデザインになります。
lp-banner バナーを横に並べる際に使用します。
lp-step フローを示すデザインになります。
lp-faq よくある質問のデザインになります。
メディアと文章 lp-media LPに最適なデザインになります。
リスト lp-list LPに最適なデザインになります。
テーブル lp-table LPに最適なデザインになります。
段落 lp-circle-item 丸いアイテムになります。
icon-* アイコンフォントを表示します。
共通 huwa スクロールでふわっと表示します。
shadow 影を付けます。
border ボーダーを付けます。
rounded 角丸にします。
※共通のオプションは、ブロックやその内容によって対応できない場合があります。 ランディングページ用WPテーマ「LIQUID LP」

ランディングページ向けWordPressテーマ「LIQUID LP」を使った感想

今回実際使ってみて感じたのは
  • Gutenbergの使い方が完璧に理解できていない。
  • WordPressテーマ「LIQUID LP」のカスタマイズが理解できていない。
ということで、いろいろ試しなからの紹介でした。 ただ、今までと違って、
  • デザインを作るにあたってHTMLのタグの表記やいろいろプラグインなどをインストールする必要がない。
  • 一度覚えてしまうと複数枚作っていろんなサービスや商品を売ったり、ABテストしたりするのが簡単にすぐにできる。
といった感想です。 Gutenbergの使い方でも記載しましたが、やっぱり慣れですね。 ただGutenbergによって幅広いユーザーが使えてカスタマイズできるようになっているなあと実感しました。 ランディングページ用WPテーマ「LIQUID LP」

WordPressテーマ関連記事

The post Gutenbergに便乗?ランディングページをWordPressで簡単に作れる「LIQUID LP」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ https://ocadweb.com/web/liquid_lp Mon, 10 Dec 2018 08:13:27 +0000 https://ocadweb.com/?p=9352 先日、ご紹介したWordPress5.0からアップデートされるエディター「Gutenberg」の使い方についてご紹介しました。 WordPressエディタ「Gutenberg」の使い方!誰でも直感的な...

The post Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
WordPressエディタ「Gutenberg」の使い方!誰でも直感的なデザインに! 今回はこのWordPress5.0からアップデートに合わせて、LIQUID PRESSから新たにWordPressのテーマ(テンプレート)がリリースされました。 ランディングページ用WPテーマ「LIQUID LP」 その新たにリリースされるWordPressのテーマ(テンプレート)は、この新たにアップデートされたWordPressエディターの「Gutenberg」と合わせて使うことで「LP(ランディングページ)」制作を「誰でも」「簡単に」作れるテーマ(テンプレート)になっています。 ではどのようなWordPressテーマ(テンプレート)なのか、ご紹介していこうと思います。

ランディングページ(LP)とは

ランディングページ(LP)とは以前も説明しておりますが、一つの商品やサービスを売るための、一枚の長いWEBページで非常に重要な要素になります。特定のユーザーを集約し、集客できるものになります。

WordPressテーマ「LIQUID LP」とは

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ 特徴としては冒頭の説明の通り、
  • ランディングページが簡単に作れる
  • htmlわからなくても作れる
  • WordPress新エディター「Gutenberg」対応
  • 固定ページでLPが何個でも作れる
  • マーケティングのヒント(ライテイングアドバイス)
といった特徴を持つWordPressテーマです。 ランディングページ用WPテーマ「LIQUID LP」

WordPressテーマ「LIQUID LP」の特徴

上記で説明しましたが、特徴として4つピックアップしてご紹介します。

WordPressテーマ「LIQUID LP」の特徴①「Gutenberg(グーテンベルク)」対応

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ 先日ご紹介したWordPress新エディター「Gutenberg」対応しているため、直感的に簡単に作成できます。またいくつかのブロックを組み合わせることで、Q&Aやリスト、料金表など簡単におしゃれなランディングページが作成可能。

WordPressテーマ「LIQUID LP」の特徴②サンプルページ

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ いざWordPressテーマを使ってランディングページを作ろうとしてもどうやって作ったらよいのかわからないということもあるかと思います。そのため、このWordPressテーマでは3種類のサンプルページが用意されています。

WordPressテーマ「LIQUID LP」特徴③複数のランディングページを作れる

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ ページを作成してからABテストをして効果計測をしたいこともあると思います。一つのテーマ内に複数のページを作って簡単に計測ができます。プラグインの「All in One SEO Pack」は動作確認済のため、カノニカル(canonical)の設定すればSEO対策も可能です。

WordPressテーマ「LIQUID LP」特徴④ランディングページマニュアル

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ 初めてランディングページを作るときにどのように作成していくのか、マーケティングを行っていくかなど、マニュアルも用意されています。サイトを作るだけでなく、きちんと成果(コンバージョン)へつながるようにマニュアルも用意されているのはうれしいですよね。

WordPressテーマ「LIQUID LP」の機能

SEO対策/ソーシャル連携

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ
  • SEO:TITLE/H1/METAタグなどを綿密に設計したSEO内部対策済
  • スマホ対応:Googleモバイルフレンドリーテストクリア
  • Microdata対応:Googleリッチスニペット対応パンくずリスト
  • Googleアナリティクス:トラッキングIDを入力するだけで高機能なアクセス解析
  • シェアボタン自動表示:テーマに合ったデザインで、はてなブックマークにも対応
  • ソーシャルアカウント:Facebook / Twitter / Google+ / Tumblr / Instagram / YouTube / Flickr / Pinterest
  • Facebook OGP対応:Open Graph Protocol 自動対応でシェアされやすく
  • Twitterカード対応:Twitter Cards 自動対応でさらにシェアされやすく

テーマの主な機能

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ
Point レスポンシブプラス
  • PC/タブレット/スマートフォン
  • タブレット/スマートフォンでPC表示切り替え可
  • Retinaディスプレイ対応
  • 画像/YouTube動画の自動レスポンシブ
Point 簡単カスタマイズ
  • テキストカラー
  • テーマカラー
  • リンクカラー
  • ヘッダテキストカラー
  • ヘッダ背景カラー
  • 背景カラー
  • 背景画像
  • ロゴ画像
  • メニュー
  • カバー画像/コピー
  • ヘッダー動画/YouTube
  • レイアウト(1カラム/2カラム)
  • 投稿/固定ページのみ2カラム(する/しない)
  • ヘッダーボタン
  • ヘッダーメニュー自動表示
  • アイキャッチ画像投稿内表示(する/しない)
  • アイキャッチ画像一覧表示(する/しない)
  • 固定表示するページ(タイトル/タグ指定)
  • 新着記事表示(する/しない)
  • SNSアカウント
  • Googleアナリティクス
  • ウィジェット
  • カスタムHEAD/CSS
Point ウィジェット機能
  • スマホ/PC出し分け
  • カラム数変更
Point ランディングページ
  • すぐに使えるテンプレート3種類(プロダクト/リード/サービス)
ウィジェットエリア
  • トップページ上部/下部
  • 投稿ページ上部/下部
  • 固定ページ上部/下部
  • アーカイブページ上部/下部
  • ヘッドライン
  • ページヘッダー
  • サイドバー
  • ページフッター
  • フッター
オリジナルウィジェット
  • 最近の投稿(画像付き):アイキャッチ画像付き新着投稿一覧
  • Facebook Page Plugin:Like Box 簡単表示
SEO/SMO
  • TITLE/H1/METAタグ自動出し分け
  • Microdata対応パンくずリスト
  • Googleモバイルフレンドリー対応
  • Googleアナリティクス対応
  • シェアボタン自動表示(カスタマイズ可能)
  • Facebook OGP対応
  • Twitterカード対応
SNSアカウント
  • Facebook / Twitter / Google+ / Tumblr / Instagram / YouTube / Flickr / Pinterest
その他機能
  • 無料デザインスキン&パーツ
  • アイキャッチ画像/カテゴリーアイキャッチ画像対応
  • アイキャッチ画像付き関連記事自動表示
  • 投稿/固定ページのページャー(ページ送り)機能
  • 編集ショートカット(編集箇所にボタン表示)機能
  • カスタム投稿タイプ対応(パンくず/タクソノミー)
  • テーマ自動アップデート
  • アイコンフォント
  • Bootstrap 4 対応
  • SSL対応
  • Gutenberg対応
  • WooCommerce対応
  • アクセシビリティ対応(WAI-ARIA)
  • Web標準に準拠
  • 国際化(i18n)に準拠
  • 日本語対応
推奨プラグイン(無料)
  • Web接客ツール+ランダムバナー:LIQUID CONNECT
動作確認済プラグイン(無料)
サポート等
  • 導入サポート(メール対応/30日間)
  • WordPress使い方マニュアルPDF
  • ランディングページマニュアルPDF

※プラグインの動作保証はいたしません。

※デモサイト内の写真は含まれていません。
以上、一部特徴をピックアップしてみました。 今回のLPのサービスでは「ペライチ」が有名ですが、「ペライチ」と異なり、ページ数やPV数を気にすることなく、作ることができます。

WordPressテーマ「LIQUID LP」の価格

価格 14,800円(税別)
ライセンス GPL(商用利用可、著作権表示削除可、設置数等制限なし)
動作環境 WordPress 5.0以降 または 4.9.8+Gutenbergプラグイン Chrome、Firefox、Safari、Edge (WordPressが動作する環境が必要です)
サポート 導入サポート(メール対応/30日間) WordPress使い方マニュアルPDF ランディングページマニュアルPDF
ランディングページ用WPテーマ「LIQUID LP」

WordPressテーマ「LIQUID PRESS」の他テンプレートもご紹介

過去にご紹介した記事になりますが、様々な記事を書いていますので、合わせてご覧ください。

The post Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
WordPressエディタ「Gutenberg」の使い方!誰でも直感的なデザインに! https://ocadweb.com/web/how-to-use-gutenberg Wed, 21 Nov 2018 08:33:52 +0000 https://ocadweb.com/?p=9300 WordPress5.0から新エディタ「Gutenberg(グーテンベルク)」。 WordPress4.9.8以降のバージョンなら利用できるので、利用されている方もいらっしゃるかもしれませんが、Wor...

The post WordPressエディタ「Gutenberg」の使い方!誰でも直感的なデザインに! first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>

WordPress5.0から新エディタ「Gutenberg(グーテンベルク)」。

WordPress4.9.8以降のバージョンなら利用できるので、利用されている方もいらっしゃるかもしれませんが、WordPressで記事を制作されている方はかなり良いエディタになると思っています。

実際使ってみてどうだったか。Gutenberg(グーテンベルク)の使い方を紹介していきたいと思います。

※この記事はWordPress4.9.8、Gutenberg(グーテンベルク)バージョン4.2.0のものを記載しています。

※WordPress5.0では、Gutenberg(グーテンベルク)が標準となっています。旧エディタを使う場合は、プラグイン「Classic Editor」をインストールする必要があります。

WordPressエディタ「Gutenberg」とは

WordPressエディタ「Gutenberg」の使い方

WordPress5.0からビジュアルエディタとなる「Gutenberg(グーテンベルク)」。

このGutenberg(グーテンベルク)という名前は、活版印刷技術の発明家「ヨハネス・グーテンベルク」からついた名前です。

Gutenberg

WordPressエディタ「Gutenberg」を使うとどう変わるのか

WordPressエディタ「Gutenberg」の使い方

簡単に言うと、

  • 直感的に記事作成できるようになる
  • ブロックの概念ができて、誰でもおしゃれなサイトが作れる
  • ウェジェットを記事内に設置できる
という感じです。

Gutenbergでは、ブロックと言う単位でコンテンツを構成します。

ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。

注意として現在、記事をアップしている方は記事ページのところでブロックに書き換えないようにすることです。書き換えてしまうとイメージが変わってしまいます。既存の記事を書き換える際の注意事項は最下部に記載しています。

WordPressエディタ「Gutenberg」の使い方

Gutenbergで記事作成

WordPressエディタ「Gutenberg」の使い方

ではまず始めに上記のイメージにある編集画面から説明していきます。

今までと異なり、WordPress新エディタGutenbergでは、一つ一つがブロックに分けられて作っていくようになります。

上記のイメージの左上にある⊕をクリックするとブロックのフォーマットが表示されます。

WordPressエディタ「Gutenberg」の使い方

ブロックは「段落(テキスト部分)」や「画像」、「リスト」、「テーブル(表)」と様々なものが用意されています。下にスクロールしていくと動画やSNSなどの挿入、ショートコードなどたくさんあります。

今までよりもこのブロックを使うことでタグの挿入も必要なく、直感的に、そして簡単に綺麗なページを作れるようになります。

WordPressエディタ「Gutenberg」の使い方

続いて右側には、「プレビュー」ボタンと「公開する」ボタンが表示され、タイトルやブロックで記載していくと「プレビュー」ボタンの左側に「下書き保存」とリンクが表示されるようになります。

そして、「公開する」ボタンの右側にあるボタンは「設定」ボタンになっており、右側に表示されているサイドバーを非表示にすることができるようになります。

右側にあるメニューボタン(縦に点が3つならんでいるボタン)はエディターの表示についてやオプションでサイドバーに表示・非表示といった設定ができるようになっています。

WordPressエディタ「Gutenberg」の使い方

右側のサードバーですが、上部にタブがあり、「文書」と「ブロック」が表示されています。

「文書」タブは、以前WordPressを使った方は前のエディターとほとんど変わりません。

今の「公開状態」や「カテゴリー」、「タグ」、「ファーストビューの設定」ができるようになっています。今まで異なるのは「ディスカッション(コメントやトラックバックの許可の設定)」がこちらに移動している感じでしょうか。

「ブロック」タブでは、ブロックで作業の際にそのブロックの詳細の設定ができるようになります。例えば、段落でテキストを入力していた場合には、テキストの色や背景色、文字サイズなど変更ができるようになります。

では早速、タイトルを入力して、ブロックを使って記事を作ってみましょう。

Gutenbergのブロックを使用して作成

見出し

WordPressエディタ「Gutenberg」の使い方

見出しのブロックは上記イメージの通り、hタグやテキストの配置など簡単に設定できます。

以前も記載しましたが、hタグは文字の大きさで使うわけではなく、h+小さい数字が見出しとして使い、h+大きい数字になればなるほど、中見出し→小見出し→・・・となっていきます。(hタグについての細かいところは省略しますが、重要なタグになります。)

段落

WordPressエディタ「Gutenberg」の使い方

段落のブロックでは、改行するまで一段落として記載されます。また、テキストを入力した上にはテキストの配置や太文字、斜め文字、リンクなどの設定などでき、右側のサイドバーには文字のサイズやテキストの背景色、テキストの色など設定できるようになっています。

画像

WordPressエディタ「Gutenberg」の使い方

WordPressエディタ「Gutenberg」の使い方

画像をアップロード、もしくは既にアップしてある画像を選択すると画像が表示され、こちらも画像の配置やaltテキスト(元のファイル名以外の名前として記載する場合)、画像サイズなど設定は右のサイドバーで設定できます。

また画像の下部にキャプション(テキスト)入力することもできます。

カバー画像

WordPressエディタ「Gutenberg」の使い方

ブロックのカバーを選択し、画像をアップもしくは選択すると上記の「画像」の上に「テキスト(文字)」を表示させることができます。

カバー設定では「固定背景」にすると画像が背景となり固定されます。

そして、「オーバーレイ」では画像の上に色をのせることができます。透過率によって濃度も変更できるので、テキストが背景の画像で見にくい場合にはここで調整できるようになります。

SNSや外部サイトの動画を挿入

WordPressエディタ「Gutenberg」の使い方

「埋め込み」内にあるSNSや動画サイトを埋め込みたい場合は上記の空欄にその埋め込みたいtweetや動画ページなどのURLを埋め込むと表示されます。

Gutenbergのブロックの移動・途中追加・削除

ブロックの移動

ブロックの移動は左側の上下のボタンでブロックを移動できます。

ブロックの間にブロックを追加

ブロックとブロックの間に追加したい場合は、追加したいブロックの間にカーソルを合わせると⊕が表示され、クリックするとブロックの一覧が表示され追加できます。

ブロックの削除

ブロックの削除は、削除したいブロックを選択し、右側のメニューボタン(縦に点が3つならんでいるボタン)を選択すると「ブロックの削除」が表示され、削除できます。

Gutenbergでパーマリンク設定

記事のタイトルを選択すると上部にURLが表示され、上記のイメージに「保存」のボタンが表示されていますが、同じ場所に「編集」ボタンが表示されます。「編集」ボタンをクリックすると上記イメージのようにパーマリンクの修正を行うことができます。変更しない場合はこちらはそのままで。

Gutenbergで既存ページを修正する注意点

既存のページを修正する方法はタイトル下の記事開始部分に「クラシック」と表示されています。その「クラシック」部分をクリックするとメニューボタン(縦に点が3つならんでいるボタン)が表示されますので、そこから「HTMLとして編集」を選択します。

※気をつけていただきたいのは「ブロックへ変更」を選択するとCSSのクラスなどが削除されてしまいますので、変更する場合には「HTMLとして編集」をおすすめします!

WordPressエディタ「Gutenberg」を使った感想

感想としては一言「慣れ」ですね。

今までの記事の書き方にもよると思いますが、そのまま記事を直感的にスラスラ書いていた人には便利だと思います。ただ、タグを使って書いていたのでやや手間になるところもあります。

しかし、初めてWordPressを使われる方でもランディングページであったり、コンテンツページであったりと見せるページはかなり直感的にかつ使いやすくなっていると思います。

WordPressテーマ関連記事

The post WordPressエディタ「Gutenberg」の使い方!誰でも直感的なデザインに! first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」 https://ocadweb.com/web/wpthema-stork https://ocadweb.com/web/wpthema-stork#respond Mon, 22 Oct 2018 22:07:11 +0000 https://ocadweb.com/?p=8749 スマートフォンでの使い勝手や、読むことにとことんこだわったモバイルファーストのWordPressテーマ「STORK」です。 ブログマーケッターJUNICHI氏が監修し、ブログでいかに結果を出すかだけで...

The post ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
スマートフォンでの使い勝手や、読むことにとことんこだわったモバイルファーストのWordPressテーマ「STORK」です。

ブログマーケッターJUNICHI氏が監修し、ブログでいかに結果を出すかだけではなく、ブロガーがブログを書くことも楽しくワクワクすることが追求されて作られています。

WordPressテーマ「ストーク」

WordPressテーマ「STORK(ストーク)」の外観イメージ

PCサイト画面イメージ(TOP)

ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」

PCサイト画面イメージ(記事ページ)

ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」

スマホサイト画面イメージ(TOP)

ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」

スマホサイト画面イメージ(記事ページ)

ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」

WordPressテーマ「STORK(ストーク)」の機能と特徴

ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」

  • ウィジット機能を使ってGoogleAdsenceの広告、バナー広告を配置
  • ブログ記事の下にCTAを設定
  • 人物と吹き出しのコメントもショートコードで記述可能
  • facebook、TwitterなどのSNSのシェアボタンを設定
  • 記事や固定ページをTOPページにスライドショーで設置
  • シンプルなデザインなので少しの修正で商用サイト作成可能
  • デザインに時間をかけずにアフィリエイトサイト作成可能

なぜ、WordPressテーマ「STORK(ストーク)」の有料テーマを使うのか

STORKは有料ですが、無料テーマで使いたい機能がなく妥協したり、細かいデザイン調整で時間をかけるコストを考えると有料テーマですぐに成果を出すことに注力する方が最終的なコストは少ないと考えることもできます。

ブログは記事を書くことが成果につながりますので、ライティングに集中するためのツールとして有効ではないでしょうか。

WordPressテーマ「ストーク」

WordPress関連記事

WordPressプラグイン関連記事

WordPressテーマ・テンプレート関連記事

The post ブロガー向けモバイルファーストを重視したWordPressテーマ「STORK(ストーク)」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
https://ocadweb.com/web/wpthema-stork/feed 0
Web集客に特化したWordPressテーマ「Emanon(エマノン)」 https://ocadweb.com/web/wptheme-emanon https://ocadweb.com/web/wptheme-emanon#respond Wed, 26 Sep 2018 15:37:23 +0000 https://ocadweb.com/?p=8752 株式会社イノ・コードが提供するWeb集客に特化したWordPressテーマ「Emanon」(エマノン)。Webサイトを制作してもサイト訪問者がいなければ成果には繋がりません。中小企業や個人事業の方たち...

The post Web集客に特化したWordPressテーマ「Emanon(エマノン)」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

]]>
株式会社イノ・コードが提供するWeb集客に特化したWordPressテーマ「Emanon」(エマノン)。Webサイトを制作してもサイト訪問者がいなければ成果には繋がりません。中小企業や個人事業の方たちのビジネスをうまくいくようにするためのWordPress有料テーマです。

Web集客に特化したWordPressテーマ Emanon

Web集客に特化したWordPressテーマEmanon(エマノン)について

Emanonは無料と有料のテーマがあります。

無料ではデザインパターンや機能が制限されているので、まずはお試しで使ってみて使い勝手が問題なければ有料版を購入するのが良いでしょう。

代表的なデザイン、機能としては次のようなものがあります。

ファーストビューパターンは6種類から選択(無料版は1種類)

WordPressテーマ「Emanon(エマノン)」

 Webサイトのイメージに合ったファーストビューパターンを選択することができます。

CTA機能

WordPressテーマ「Emanon(エマノン)」

サイト訪問者に資料請求やメルマガで有益な情報を与えて、メールアドレスなど情報を収集するための機能です。プラグイン「Contact Form7」に対応しています。

ランディングページ(有料版のみ)

ランディングページを複数作成することが可能になっていて、ランディングページからメルマガ登録、無料PDFダウンロードを促しすことでメールアドレスを取得する仕組みを作ることができます。パララックスのランディングページは1つのみ作成可能です。

SNSボタン

Facebook、Twitter、Google+のボタンを簡単に設置できます。

Googleアナリティクス簡単設置

トラッキングIDを設置するだけで簡単にGoogleアナリティクスを設置することができます。

  • 関連記事表示
    プラグインを利用することなく、記事やカテゴリの関連記事を表示させて訪問者をサイト内で回遊させることができます。
  • 広告設定(ウィジェット 無料版:1種類、有料版6種類)
    Googleアドセンスやアフィリエイト広告を簡単に設置することができます。
  • 内部SEO対応済み
  • レスポンシブ対応済み 他にも機能はありますので詳しくは下記のサイトよりご確認ください。

    Web集客に特化したWordPressテーマ Emanon

    WordPressテーマEmanon(エマノン)のメールサポート

    有料版の購入後(もしくはサイトオープン後)1ヶ月はメールでWeb集客のサポートをしてくれます。Webサイトを作ったはいいけど、訪問者が少なくて成果が出ない、という悩みを持っていても相談する先がないという方は多いのではないでしょうか。Web集客コンサルティングの経験と実績があるからこそできるサポートです。

    テーマを提供するだけではなく、Web集客の相談に乗ってくれるのはとても心強いですね。

    WordPress関連記事

    WordPressプラグイン関連記事

    WordPressテーマ・テンプレート関連記事

    The post Web集客に特化したWordPressテーマ「Emanon(エマノン)」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]> https://ocadweb.com/web/wptheme-emanon/feed 0 無料で簡単!WPテーマの見出しデザイン等変更するLIQUIDスキン https://ocadweb.com/web/liquid_designskins Mon, 04 Jun 2018 13:41:13 +0000 https://ocadweb.com/?p=9184 WordPressテーマをダウンロードしたものの見出しなど他のダウンロードしたサイトと同じで変えたいとか思うことはありませんか? LIQUID PRESSデザインスキン&パーツで簡単にいろいろカスタマ...

    The post 無料で簡単!WPテーマの見出しデザイン等変更するLIQUIDスキン first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    WordPressテーマをダウンロードしたものの見出しなど他のダウンロードしたサイトと同じで変えたいとか思うことはありませんか?

    LIQUID PRESSデザインスキン&パーツで簡単にいろいろカスタマイズできます。

    LIQUID PRESSデザインスキン&パーツとは

    LIQUID PRESSデザインスキン&パーツ

    さて今回紹介するのは、WordPressのテーマを配布しているLIQUID PRESSのデザインを無料でカスタマイズできるデザインスキン&パーツを紹介します。

    デザインは随時追加していかれるようです。

    例えば

    • hタグの見出しのデザインを変更する
    • 記事上のシェアボタンのサイズや配置を変更する
    • 色付きのアラートで文中に注意換気できる
    • 表(テーブル)横長になっても横スクロールが全部見えるようにできる
    • カードタイプの表示ができる
    • 料金表テンプレート
    などなど

    LIQUID PRESS デザインスキン&パーツ

    LIQUID PRESSデザインスキン&パーツの使い方

    「カスタムCSS」や「HTML」を見る方法

    LIQUID PRESS デザインスキン&パーツ

    LIQUID PRESS デザインスキン&パーツ

    上記の画像のように、「カスタムCSS」や「HTML」のボタンがをクリックするとコードが表示されます。

    「カスタムCSS」や「HTML」を使ってみる

    「カスタムCSS」の場合

    「カスタムCSS」の場合にはテーマのカスタマイズにコードをコピーして貼り付けます。

    「外観」→「カスタマイズ」→「カスタムヘッダー」→「カスタムCSS」にコードを貼り付けます。

    LIQUID PRESS デザインスキン&パーツ

    「HTML」の場合

    この場合、ウェジェットや投稿・固定ページともに使いたいところにコードを貼り付けるだけです。

    ただし、ビジュアルモードではなく、テキストモード(記事をhtmlで記載しているところ)に貼り付ける必要があります。

    LIQUID PRESS デザインスキン&パーツの注意

    こちらのLIQUID PRESSデザインスキン&パーツに関してはサポート対象外となりますのでご注意ください。

    LIQUID PRESS

    WordPressテーマ関連記事

    The post 無料で簡単!WPテーマの見出しデザイン等変更するLIQUIDスキン first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    AMP stories(ストーリーズ)の作り方。どう使ってみる? https://ocadweb.com/web/amp-stories Wed, 30 May 2018 23:18:15 +0000 https://ocadweb.com/?p=9047 前回、AMPやフルAMP(アンプ)についてご紹介しましたが、今回はInstagramのストーリー機能に似たものを自分のサイトでも作れるAMP stories(ストーリーズ)の作り方やどんな風にマーケテ...

    The post AMP stories(ストーリーズ)の作り方。どう使ってみる? first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    前回、AMPやフルAMP(アンプ)についてご紹介しましたが、今回はInstagramのストーリー機能に似たものを自分のサイトでも作れるAMP stories(ストーリーズ)の作り方やどんな風にマーケティングツールとして使ったら良さそうなのかなど紹介していきたいと思います。

    AMP stories(ストーリーズ)とは

    AMP stories(ストーリーズ)の作り方。どう使ってみる?1

    AMP stories

    Instagram Storiesなどのようにフルスクリーンで閲覧でき、タップすると次のページへすすんでいくというもの。AMP(アンプ)で制作されるため、画像や動画などの読み込みも早くなります。実際に上記のリンクの下の方からも見ることができますが、CNNやワシントン・ポストなどでもAMP stories (ストーリー)が作られている。

    どんなものかまずみてもらった方がよいと思うので下記のリンクを御覧ください。

    AMP stories(ストーリーズ)の作り方。どう使ってみる?2

    AMP stories (ストーリー)のデモ

    AMP stories(ストーリーズ)とは閲覧前に

    AMP stories(ストーリーズ)の作り方。どう使ってみる?3

    作業という程の作業ではありませんが、閲覧前に下記のようにでてくるので、①タップして許可を行い、②再読込を行うと閲覧できるようになります。

    AMP stories(ストーリーズ)の作り方

    AMP stories(ストーリーズ)の作り方。どう使ってみる?4

    下記のチュートリアルを読みながら作ると非常にわかりやすくまとまっていますので全体がわかると思います。(※日本語を選択しても英語になる場合は、画面を右クリックして「日本語に翻訳」を選択すると日本語に変換してくれます。)

    誰でも作れるように変更する部分などまずは試しに作ってみようということで、細かいところはできるだけ割愛していきたいと思います。

    Create a visual AMP story

    AMP stories(ストーリーズ)のテンプレートをダウンロード

    AMP stories(ストーリーズ)の作り方。どう使ってみる?5

    下記のサイトの「Step 1. Download the code」からAMP stories(ストーリーズ)のテンプレートをダウンロードします。

    Setting up|AMP

    amp-pets-story.zipを解凍

    AMP stories(ストーリーズ)の作り方。どう使ってみる?6

    ファイル内には下記のファイルが入っていると思います。

    assetsイメージファイルや動画、音楽などのファイルを格納
    bookend.jsonAMPファイルの中にリンクを表示できないのでここにリンクを書いていきます。
    htmlファイルここに基本的なAMP HTMLのルールやページの詳細を書いていきます。
    • pets.html:未完成版
    • pets-completed.html:完成版

    bookend.jsonを修正

    AMP stories(ストーリーズ)の作り方。どう使ってみる?7

    まずは簡単なところから。

    AMP stories(ストーリーズ)の中にはリンクを貼ることはできません。

    この最後のページにシェアとリンク用ページを作ります。

    title表示されるテキスト(サイト名など)
    urlリンク先のURL
    imageアイコンや画像などのイメージファイル名
    (assets内に画像や動画を格納し、/assets/ファイル名とします。)

    リンクに表示されるアイコンのサイズは「100px × 100px」がちょうどよいサイズです。

    AMP stories(ストーリーズ)ページを作る。

    AMP stories(ストーリーズ)ページはどうできているのか。

    AMP stories(ストーリーズ)の作り方。どう使ってみる?8

    AMP stories(ストーリーズ)のチュートリアルでも記載されてますが、下記のようにamp-storyは、amp-story-pageの複数ページで構成されています。

    また、amp-story-page内にはamp-story-grid-layerをイメージや動画、テキストを重ねたレイヤーで作られています。そのコードは下記のような形になっています。

    AMP stories(ストーリーズ)の作り方。どう使ってみる?9

    では上記を踏まえて、作っていきます。

    ダウンロードしたテンプレートの「pets.html」にはbody内は記載されていませんので、丸々一から作る場合はこちらに記載していきましょう。

    今回はダウンロードしたテンプレートの「pets-completed.html」を変更していきます。

    AMPはHTMLで記載するのではなく、AMP HTMLで記載する必要があるの注意が必要です。

    では「pets-completed.html」を開きます。

    titleを修正

    title内を変更します。

        <title>Joy of Pets</title>
    

    amp-customを修正

    AMPのCSS(スタイルシート)はamp-customの部分になります。修正があればこちらで修正します。

       <style amp-custom>
          amp-story {
            font-family: 'Oswald',sans-serif;
            color: #fff;
          }
          amp-story-page {
            background-color: #000;
          }
          h1 {
            font-weight: bold;
            font-size: 2.875em;
            font-weight: normal;
            line-height: 1.174;
          }
          p {
            font-weight: normal;
            font-size: 1.3em;
            line-height: 1.5em;
            color: #fff;
          }
          q {
            font-weight: 300;
            font-size: 1.1em;
          }
          amp-story-grid-layer.bottom {
            align-content:end;
          }
          amp-story-grid-layer.noedge {
            padding: 0px;
          }
          amp-story-grid-layer.center-text {
            align-content: center;
          }
          .wrapper {
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: 50% 50%;
          }
          .banner-text {
            text-align: center;
            background-color: #000;
            line-height: 2em;
          }
        </style>
    

    「amp-story-page」を見てみましょう。

    イメージとしては、①:紙を用意する、②:写真や動画を貼る、③:文字の書いたフィルムを貼るという感じでしょうか。

    まずは①の紙のサイズは「width=”720″ height=”1280″」になります。

    amp-story-page id=は「cover」から始まり、ページを増やしていくと「page1」「page2」など増やしていきます。amp-story-page id=で1枚のページを指定します。このidは「①:紙を用意する」イメージです。

    amp-story-grid-layer template=ではテンプレートを指定していきます。この1つ目のamp-story-grid-layer template=では紙に「②:画像や動画などを貼る」イメージです。

    そしてもう一度amp-story-grid-layer template=でテンプレートを指定していきます。今度のamp-story-grid-layer template=ではテキストを記載します。つまりここでは「③:文字の書いたフィルムを貼る」イメージです。

    amp-story-grid-layer template=には

    • Fill
    • Vertical
    • Horizontal
    があります。

    上記テンプレートの種類や説明は下記に記載があります。

    Laying out elements with a template|AMP

    ここでできあがったのが「pets-completed.html」内の最初のページが下記のものになります。

    <!-- ①紙を用意する -->
      <amp-story-page id="cover">
    
    <!-- ②写真や動画を貼る -->
            <amp-story-grid-layer template="fill">
              <amp-img src="assets/cover.jpg"
                  width="720" height="1280"
                  layout="responsive">
              </amp-img>
       </amp-story-grid-layer>
    
    <!-- ③文字の書いたフィルムを貼る -->
       <amp-story-grid-layer template="vertical">
    
    <!-- タイトルとなる部分 -->
              <h1>The Joy of Pets</h1>
    
    <!-- 説明書きなどテキストとなる部分 -->
              <p>By AMP Tutorials</p>
    
       </amp-story-grid-layer>
    </amp-story-page>
    

    上記のコードを1ページとして、ページを増やすと下記のようにコードが増えていくイメージです。

        <!-- Cover page -->
          <amp-story-page id="cover">
            <amp-story-grid-layer template="fill">
              <amp-img src="assets/cover.jpg"
                  width="720" height="1280"
                  layout="responsive">
              </amp-img>
            </amp-story-grid-layer>
            <amp-story-grid-layer template="vertical">
              <h1>タイトル</h1>
              <p>テキスト</p>
            </amp-story-grid-layer>
          </amp-story-page>
    
          <!-- Page 1 (Cat): 1 layer (vertical) -->
          <amp-story-page id="page1">
            <amp-story-grid-layer template="vertical">
              <h1>タイトル</h1>
              <amp-img src="assets/cat.jpg"
                  width="720" height="1280"
                  layout="responsive">
              </amp-img>
              <q>テキスト</q>
            </amp-story-grid-layer>
          </amp-story-page>
    

    ここで変更するのが、「タイトル」と「テキスト」部分を修正しましょう。pは通常のテキストでqは文章を引用した場合になります。

    また画像は「assets」フォルダに格納してamp-img src="assets/file name.png"のfile nameを指定します。

    ダウンロードした「pets-completed.html」がどのようになっているか詳しくは下記で確認できます。

    Adding more pages | AMP

    あとアニメーションも簡単に設置できます。

    下記のanimate-inanimate-in-delayを見てみましょう。

    animate-inアニメーションを選択
    • drop
    • fade-in
    • fly-in-bottom
    • fly-in-left
    • fly-in-right
    • fly-in-top
    • pulse
    • rotate-in-left
    • rotate-in-right
    • twirl-in
    • whoosh-in-left
    • whoosh-in-right
    animate-in-delayanimate-inを遅延して表示させる時間

    アニメーションやアニメーションの遅延などタイミングはAnimating elements|AMPで紹介されています。

         <!-- Page 5 (Collage): 2 layers + animations -->
          <amp-story-page id="page5">
            <amp-story-grid-layer template="vertical" class="noedge">
              <div class="wrapper">
                <amp-img src="assets/cat.jpg"
                    width="720" height="1280"
                    layout="responsive"
    
                <!-- animate-in="" でアニメーションを指定 -->
                    animate-in="fade-in"
    
                <!-- animate-in-delay="" に遅延して表示する時間を指定 -->
                    animate-in-delay="0.4s">
    
                </amp-img>
                <amp-img src="assets/dog.jpg"
                    width="720" height="1280"
                    layout="responsive"
    
                <!-- animate-in="" でアニメーションを指定 -->
                    animate-in="fade-in"
    
                <!-- animate-in-delay="" に遅延して表示する時間を指定 -->
                    animate-in-delay="0.6s">
    
                </amp-img>
                <amp-img src="assets/bird.jpg"
                    width="720" height="1280"
                    layout="responsive"
    
                <!-- animate-in="" でアニメーションを指定 -->
                    animate-in="fade-in"
    
                <!-- animate-in-delay="" に遅延して表示する時間を指定 -->
                    animate-in-delay="0.8s">
    
                </amp-img>
                <amp-img src="assets/rabbit.jpg"
                    width="720" height="1280"
                    layout="responsive"
    
                <!-- animate-in="" でアニメーションを指定 -->
                    animate-in="fade-in"
    
                <!-- animate-in-delay="" に遅延して表示する時間を指定 -->
                    animate-in-delay="1s">
    
                </amp-img>
              </div>
            </amp-story-grid-layer>
            <amp-story-grid-layer template="vertical" class="center-text">
    
                <!-- animate-in="" でアニメーションを指定 -->
              <p class="banner-text" animate-in="whoosh-in-right">Pets can lower your stress levels!</p>
    
            </amp-story-grid-layer>
          </amp-story-page>
    

    簡単に作るとしたら、変更する場所は以上です。

    今回はJSON-LDやGoogleアナリティクスの記載など細かい設定などは省いています。必要に応じて入れておきましょう。

    ちなみに画像は表示されないですが、テキストだけでもどんな風にできているか確認するには作成したコードを下記のサイトで貼り付けると確認することができますし、エラーも教えてくれます。

    AMP Playground

    さて出来上がったら、実際にサーバにアップしてみましょう。ただし自分のサーバにアップして作成される場合、下記のフォームで送信して自分のURLをホワイトリストに追加する必要があります。

    bit.ly/amp-story-signup

    AMP stories(ストーリーズ)をValidate AMPで確認

    AMP stories(ストーリーズ)ができたら、下記のValidate AMPできちんとできているか確認します。

    「Validation Status: PASS」とでたらOKです。

    Validate AMP

    もしJSON-LDも記載シている場合は下記のGoogle構造化データテストツールでも確認しておきましょう。

    Google構造化データテストツール

    AMP stories (ストーリー)を作ってみた感想

    AMP stories(ストーリーズ)が簡単に作れると思ったら、簡単じゃない。

    最初は、「なんだよ、できないよ」って。

    上記で記載したAMPのサイトからテンプレートをダウンロードして

    1. PC上で閲覧しようとして表示されるも1ページから動かない
    2. サーバーにアップして閲覧しようとしても同様表示されるも1ページから動かない
    3. ホワイトリストに登録するも変わらず
    って感じで。

    やはり訂正、AMP stories(ストーリーズ)が簡単に作れると思ったら、簡単だった。

    ただ単に一つ作ってみれば、かなり簡単にできました。

    使い方としては、非常に簡単に作れるので、サーバーさえ自前で持っていれば制作コストも押さえて簡単にAMP stories(ストーリーズ)が作れる。

    あえて大変だったのは写真を探すところでしょうか。基本的にマガジンやBlogを書かれている方は横で写真をとることが多いと思いますが、AMP stories(ストーリーズ)は縦です。もしAMP stories(ストーリーズ)も使われていくなら、縦向きの写真もとっておくと便利です。デジカメや一眼レフカメラなどよりも携帯だと縦向きになるので携帯だと簡単に取り出せるんのでよりいいかも。

    AMP stories(ストーリーズ)と相性がよいコンテンツと使い方

    既にWebサイトを持っている場合でも、使い方としても幅広く使えるかなって思っています。

    下記のものだと相性がよいと思います。

    • プロフィール
    • パンフレット
    • カタログ

    実店舗への集客のフックとして使えると思います。

    実際、パンフレットやカタログですと、差し替えとか考えるとコストは抑えられると思います。また読み込み速度が早く、どちらかというと画像や写真、動画との相性が良いと思います。

    マガジンやBlogなど長々と文章を読むとなると縦スクロールのほうが見やすいかも。

    例えば、名刺やショップなどのカタログ・パンフレットにQRコードに記載して見てもらい、簡単なオンラインでカタログとしてどんな企業・お店なのアピールできるし、キャンペーン情報を載せて更新して、簡単な情報だけAMP stories(ストーリーズ)でみてもらい、詳細は最後に各個人やお店のURLへリンクすることで細かいところは見てもらうとか。

    リンクも載せることができるので、離脱率も見ながらではあるが、コンバージョンに繋げやすいと思います。

    AMP stories(ストーリーズ)をいくつか作ってみた

    参考までにいくつか作ってみました。

    AMP stories(ストーリーズ)の#タグで共有しませんか?

    私もいくつか試しに作ってみましたが、「ぜひこんな感じで作ったよ?」とか「こんなの作ったよ!!」とかあると思います。

    そこで「#myampstories」という#タグで共有しませんか?

    そして各#タグをつなげてみて公開してみませんか?例えば、「#myampstories #自己紹介」とか「#myampstories #◯◯旅行」とか。

    こちらからtweetしましょう!!

    みなさんのAMP stories(ストーリーズ)が見れるのを楽しみにしています!!

    The post AMP stories(ストーリーズ)の作り方。どう使ってみる? first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    フル/レスポンシブAMP(アンプ)のWordPressテーマはどう? https://ocadweb.com/web/liquid_amp Mon, 21 May 2018 13:12:27 +0000 https://ocadweb.com/?p=9068 過去にも紹介したAMP(アンプ)について。AMP(アンプ)はモバイルだけのものではありません。 AMP(アンプ)もいろいろ進化してます。AMPが開始され、WordPressのプラグインを使いAMP対応...

    The post フル/レスポンシブAMP(アンプ)のWordPressテーマはどう? first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    過去にも紹介したAMP(アンプ)について。AMP(アンプ)はモバイルだけのものではありません。

    AMP(アンプ)もいろいろ進化してます。AMPが開始され、WordPressのプラグインを使いAMP対応してみましたが、いつのまにかAMPもやめていました。

    しかし、先月行われたAMPのイベントの情報を共有してもらい、AMPについて気になったことを紹介していきたいと思います。

    今回、フル/レスポンシブAMP(アンプ)とフル/レスポンシブAMP(アンプ)のWordPressテーマのご紹介をしたいと思います。

    AMP(Accelerated Mobile Pages/アンプ)とは

    AMPとは

    AMP(Accelerated Mobile Pages/アンプ)を、簡単に言うと「ウェブページを高速化して表示すること」。

    個人的には、ニュースサイトやECサイトのような情報が更新されるサイトに向いていると思っています。あとWordPressでプラグインはこれからのアップデートに期待したいと言う感じです。

    詳細は下記の関連記事を御覧ください。

    フル/レスポンシブAMPとは

    フル/レスポンシブAMPとは

    名称としては「フルAMP(アンプ)」なのか、「レスポンシブAMP(アンプ)」なのかどちらが良いのかわかりませんが、最近では当たり前になっているレスポンシブデザインのWEBサイト同様、モバイルAMP(アンプ)だけではなく、PCのサイトでもAMP(アンプ)表示ができるというものです。

    もちろんAMPは以前にも記載したかもしれないですが、すべてのサイトに対してメリットがあるわけではなく、写真や画像、映像が多く使われているサイトやマガジンやECサイトなどの情報が常にupdateされるものには向いているでしょう。

    個人的には一旦盛り下がったAMP(アンプ)も再燃しそうな感じです。

    理由は、

    1. AMPのテンプレートも各種用意され、フルAMPもあることを知って作りたくなったから。
    2. AMP stories(ストーリーズ)が面白そうで、これからいろんな用途でも利用できると思ったから。

    AMP stories(ストーリーズ)については次の記事で紹介したいと思います。

    フル/レスポンシブAMPのテンプレート

    AMPのテンプレート

    AMP Start Templates

    このフル/レスポンシブAMPのテンプレートをAMPの公式サイトで配布されています。まだ数は少ないですが、今後増えてくるかもしれないので、要チェックです。HTMLと異なり、AMP HTMLで記述しないといけませんが、今後知っておくと便利だと思いますし、実際にそのテンプレートを使って作ってみるのも面白いと思います。

    フル/レスポンシブAMP製WordPressテーマ「LIQUID AMP」

    フル/レスポンシブAMP製WordPressテーマ「LIQUID AMP」

    レスポンシブ/フルAMP対応WordPressテーマ「LIQUID AMP」

    さて、今回はフル/レスポンシブAMPをWordPressで使うとどうなるのか。実際にパートナーのWordPressのテンプレートを配布しているLIQUID PRESSでフル/レスポンシブAMP製のWordPressテーマを配布しているので、ご紹介したいと思います。

    AMPによってメリットはありますが、正直今の段階では、自作でモバイルAMPで制作するか、WordPressプラグインを使う方がよく、フル/レスポンシブAMP製WordPressテーマを使うのは難しいかもしれません。

    注意点としては、

    1. ほとんどのプラグインは動作しない。
    2. ウィジェットの配置は、AMP HTML/コンポーネント。
    3. WordPressのコメント機能は対応不可。
    4. ビジュアルエディタの使用は非推奨。

    ただ、上記注意点を理解した上で、フル/レスポンシブAMP製のWordPressテーマを使ってみると面白いと思いますよ。

    QiitaにLIQUID AMPの開発についての記事もありますのでよろしければこちらもご覧ください。

    The post フル/レスポンシブAMP(アンプ)のWordPressテーマはどう? first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    無料でWEB接客ツール&ランバムバナーを設置できるWordPressプラグイン「LIQUID CONNECT」 https://ocadweb.com/web/wp_liquidconnect https://ocadweb.com/web/wp_liquidconnect#respond Mon, 19 Mar 2018 21:45:10 +0000 https://ocadweb.com/?p=8969 今回Web接客ツールやランダムバナー機能を無料で搭載できるWordPressプラグインについて紹介します。そこそもWEB接客ツールやランダムバナーとはどういうものなのか簡単にご紹介します。 Web接客...

    The post 無料でWEB接客ツール&ランバムバナーを設置できるWordPressプラグイン「LIQUID CONNECT」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    今回Web接客ツールやランダムバナー機能を無料で搭載できるWordPressプラグインについて紹介します。そこそもWEB接客ツールやランダムバナーとはどういうものなのか簡単にご紹介します。

    Web接客ツール+ランダムバナー WordPressプラグイン「LIQUID CONNECT」

    WEB接客ツール・ランダムバナーとは?

    WordPressプラグイン:WEB接客ツール&ランバムバナー機能を搭載した「LIQUID CONNECT」

    WEB接客最近よく見かけるようになりましたが、Webサイトにポップアップなどで表示さえるバナーやお問い合わせフォーム。

    実際の店舗なら「いらっしゃいませ」とお声がけし、コミュニケーションがとれますが、WEB上でも簡単に質問などお問い合わせができるようになり、コミュニケーションをとることができるようになります。

    また、ランダムバナーは、どのお客様に対してはどのバナーをみてもらいたい、このWEBページではこのバナーを見てもらいたいなどの設定したり、ランダムにバナーをだして効果計測し、効果的なバナーの選別にも役立てることができます。

    もちろんサイドバーにバナーを設置してA/Bテストなどで効果計測できるので、アフィリエイトサイトでも効果計測を簡単にできます。

    WordPressプラグイン:無料で使うWEB接客ツール&ランバムバナー機能「LIQUID CONNECT」とは?

    WordPressプラグイン:WEB接客ツール&ランバムバナー機能を搭載した「LIQUID CONNECT」

    それでは無料でWEB接客ツール&ランバムバナーを設置できるWordPressプラグイン「LIQUID CONNECT」とはどんなものなのか。

    上記でご説明したものがWordPressプラグインとして簡単に設置できるようになります。

    用途は様々でアフィリエイトなどのバナーを設置やお問い合わせフォームなど設置できます。

    特徴としては4つ。

    A/Bテストができる

    複数のバナーを同時に何件でも実施でき、A/Bテストを行うことができます。

    それぞれの表示数とクリック数は、Googleアナリティクスイベントレポートで確認するとどのバナーが効果計測ができるようになります。

    ターゲットによってWEB接客ツール・バナーなどの出し分けができる

    ターゲットやタイミングをそれぞれ設定できます。

    例えば、「初めてサイトを訪問してくれたユーザーだけだしたい!」「このページだけ表示させたい!」など。

    表示期間の日時の設定も可能

    表示期間を設定して◯月だけだしたい、◯月◯日から◯月◯日だけだしたいなど設定可能。

    WEB接客ツール&ランバムバナーを簡単に設置ができる

    WordPressプラグイン:WEB接客ツール&ランバムバナー機能を搭載した「LIQUID CONNECT」

    最後にこれが重要で簡単に設置できるところ。

    複雑なコードを書いたり設定したりすることなく、ウェジェットを使ってそれぞれ設定をしていくだけです。

    Web接客ツール+ランダムバナー WordPressプラグイン「LIQUID CONNECT」

    WordPressプラグインだけでなく、テーマ・テンプレートも提供

    WordPressテーマ・テンプレート:LIQUID PRESS

    LIQUID PRESSではWordPressプラグインだけでなく、WordPressのテーマ・テンプレートも提供しています。

    SEO対策やレスポンシブもきちんとされており、マガジンタイプのBlogサイトからコーポレートサイト用のさわやかでおしゃれなテーマ・テンプレートも提供されています。

    合わせておすすめです。

    LIQUID PRESS

    ■LIQUID PRESSのWordPressテーマ紹介記事

    WordPressテーマ:必須機能「SEO・レスポンシブ・Bootstrap・商用利用可」を備えた簡単高機能な国産テーマまとめ

    The post 無料でWEB接客ツール&ランバムバナーを設置できるWordPressプラグイン「LIQUID CONNECT」 first appeared on WordPressやWebデザインなど紹介 Ocadweb.

    ]]>
    https://ocadweb.com/web/wp_liquidconnect/feed 0