本稿ではWordPressのパーマリンクやページのURL設定について解説します。最初にやっておくべき基本解説ですの...テンプレートは、WordPressに適用しているテーマによっても変わってきますが、基本的に主に以下の3種類を活用できます。全幅(デフォルトテンプレートのサイドバー無しバージョン)ランディングページについては、下記の記事を参考にご覧いただけます。2018.12.29ランディングページとして使えるWordPressテーマを紹介します第一印象は、視覚的要素が強く、人に大きな影響を与えます。それが営業マンであろうと、恋愛であろうと、商品であろうと。同じことがウェブサイトにも言えるわけです。誤解を招かないように付け加えるならば、見た目だけが...ここまでで、作りたいページのベースになる形を用途に合わせて設定するということです。実際にエディターを使う前に、セクションとカラムについて理解しておきましょう。Elementorのエディターではセクションとカラムを組み合わせてページを作り上げていきます。セクションは以下のように横につながっているワンブロックです。一方で、カラムはその中に入っている一つ一つの箱というイメージです。下記では、視覚的にわかりやすく3カラムのセクションに画像のエレメントを3つ並べて設置した状態です。設置方法やエレメントについては、後述の説明を参考にご覧ください。それぞれコピーや並び替えが直感的に可能ですが、カラムをコピーするとセクション内の一つの箱がコピーされ、セクションをコピーするとセクション内のすべてがコピーされます。セクションを削除するとセクション内のすべてのカラムが削除されるの注意して確認しておきましょう。カラムやセクションの隙間や背景などは後ほど解説する各エレメントのスタイルタブから詳細に設定することができます。Elementorのエディターを使ってページを構築していく作りたいページのベースが決まり、セクションとカラムの概念を理解したら、「Elementorで編集」をクリックしてみましょう。Elementor独自のエディターが表示されるので、このエディターを使ってページを組み立てていきます。上記のように左のエレメントが並んでるエリアから右にドラッグしてページを作りますが、最初に+をクリックして、そのセクションのカラム数を決定します。基本はセクションのカラム数を決めて新しいセクションを追加、その中に左のエレメントを追加していくという流れの繰り返しで、ページを作り上げていきます。上記の例では、ワンカラムのセクションを選択して、「見出し」のエレメントを設置した状態です。一通り作り上げた後からでもセクションごとにドラッグ&ドロップで自由に並び替えが可能です。ちなみにここで、+の右側のファイルのアイコンを選択すると、あらかじめ用意されているページ単位のテンプレートを適用することもできます。無料版でもいくつか活用できるテンプレートがあり、レストランやホテルなど、ジャンルのわかる名前がついているで、初めてでも選択しやすいです。あなたの作りたいサイトにあったページテンプレートがあれば、テキストや写真を入れ替えるだけで簡単にページが完成します。Elementorのエディタの使い方ここからは、Elementorエディタの具体的な使い方を説明いたします。ご覧の通り、左側のエレメントのエリアには、数多くのアイコンが並んでいます。そのどれもが直感的に操作できるのですが、よく使うエレメントからピックアップして基本的な操作方法をご紹介いたします。見出し右の画面の+マークでセクションを決めた後、左サイドバーの下記のボタンをクリックするとエレメント一覧が表示されます。エレメント一覧から「見出し」エレメントをドラッグ&ドロップすると「見出し」の編集が可能です。こちらには3種類のタブが用意されていて、クリックするとそれぞれ直感的に操作可能です。コンテンツタブコンテンツタブでは、テキストを直接入力できて、サイズや適用しているHTMLタグをワンタッチで変更できたり、配置についてもワンクリックで編集完了です。スタイルタブスタイルタブでは、文字色、書体に加えて、テキストシャドウなどをワンタッチで設定できます。ここに表示されているボタンモードという項目では、見出しに適用するエフェクトを設定できます。違いがわかりにくいので、背景画像を設定してから試してみてください。それぞれの項目をクリックするとさらに細かい設定が可能です。書体の項目をクリックすれば、フォントやサイズはもちろん、行の高さや、字間などもつまみをドラッグして変化をプレビューしながら設定できます。コードを用いることなく思い通りのページを作成可能ですね。詳細タブ詳細タブでは、マージンやパディングに加えて、モーションエフェクトなど、その他の詳細な設定もできます。見出し一つでもかなり詳細に設定していただけるということです。通常ですと、デベロッパーツールを使いながら細かい変更箇所を確認した上で、CSSを調整する必要がありますが、Elementorではプレビューを確認しながら、そのまま更新できるので効率的です。マージンやパディングの細かな調整には、慣れが必要ですからね。モーションエフェクトも用意されているものの中から、プレビューを見ながら瞬時に設定できます。複雑なコードを用いる必要はまったくありません。以下のようにドロップダウンメニューから任意の動きを選択するだけです。その他にもテキストの背景色をセットしたり、テキストを囲むボーダーを設定することも簡単な操作のみで完結します。カーソルホバー時に適用するデザインも合わせて設定可能です。初心者の方にとってもありがたい機能ですね。背景やボーダーの項目では、ホバーした際により目立たせるようにホバー時のCSSを設定することもできます。コードはもちろん不要ですので、こちらで簡単に設定してみましょう。レスポンシブの項目でスマホやタブレットなどのモバイル端末で閲覧時にどのように表示するかという設定が可能です。PCでは表示して、スマホでは表示しないなどの設定がワンタッチでできます。要領の大きな動画を見せるのはPCのみで、モバイル端末では別のものを表示するなどの設定も簡単にできるということです。ここでは「見出し」のエレメントを例に説明いたしましたが、その他のエレメントでも基本的に「スタイルタブ」か「詳細タブ」またはその両方が用意されているので、同様の細かい設定が簡単にできます。画像カルーセルこちらのエレメントで画像カルーセルスライダーを簡単に設定できます。任意の画像をこのように複数枚選択し、表示するスライド枚数やリンクの有無などを設定して実装完了です。スタイルタブなどで、ユーザーをナビゲートするための画像下部にあるドットアイコン、画像の両サイドにある矢印のアイコンのサイズや位置、色まで詳細に設定できます。画像を囲む枠もお好みで設定可能です。画像を囲むボーダーの幅や、色、ボーダーの角の丸みなども数値を入力するだけで簡単に設定できます。コンテンツタブの追加オプションでは、スライドの自動再生の有無、アニメーションの効果や、速度や向きまで設定可能です。画像に合わせた設定がこの箇所だけで具体的に設定できますね。ボタン記事中にボタンを表示させることも簡単です。単なるテキストリンクより目立たせることもできますし、心理的に押したくなることもあります。こちらもコードを使わずに初心者でも簡単に設置可能です。上記のようにボタンエレメントを追加すると簡単に設定されるので、各タブの項目をお好みで設定します。配置箇所やサイズの他、テキストシャドウやホバー時のアニメーションなどを一括で設定可能です。基本的にその他のエレメントと操作方法は同じですので、直感的に操作できるでしょう。ボタンエレメント内には、さらに直感的に操作できるようにアイコンを設定できます。コンテンツタブの中からアイコンの項目をクリックすると下記のような画面が表示されます。LIBRARYに表示されている無数のアイコンの中から自由に挿入することが可能です。ボタンの用途に合わせたアイコンを選んで設定することによりクリックされやすくなり、コンバージョンに繋がります。有料版であれば、オリジナルのアイコンをアップロードすることも可能です。タブ記事内にタブエリアをつくって、スペースを有効活用することもできます。他のエレメントと同様にスタイルや詳細タブで細かい設定が可能です。コンテンツタブでは、タブ内に入力するテキストはもちろん、メディアも挿入することができます。垂直か、水平タイプから任意にタブの形を選択できます。コンテンツの数に合わせて任意の数だけタブを追加することもできて、タブ項目右端のアイコンをクリックしてタブに内容ごとコピーや、ドラッグ&ドロップで後から並び替えまで可能です。アコーディオンアコーディオンメニューを設置しスペースの有効活用をし、必要なユーザーにのみクリックして表示してもらうような情報を記載することもできます。上記のタブとの使い分け方についてですが、タブはいずれかのタブエリアが常に開いている仕様です。一方で、アコーディオンメニューならデフォルトでは閉じている仕様ですので、ユーザーがアクションを起こさない限り目隠しできるような使い方でできます。LIBRARYから選択することができます。アイコンの位置やテキストとの間隔も自由に設定可能です。動画の挿入もワンタッチです。Dailymotionなどの主要な動画サイトのURLを入力するだけで可能な他に、独自のMP4動画を挿入することもできます。便利なオプション機能として上記のように、自動再生や、ミュート、ループのON/OFF、プレイヤーコントロール、ダウンロードボタンの表示/非表示のスイッチが用意されています。マップも住所を入力するだけで表示可能です。ズーム具合や、高さなども見たままの操作で簡単に編集できます。Elementorのレスポンシブモードで確認してみるWebサイト制作では、スマホやタブレットなどのモバイル端末での閲覧を想定して、モバイル端末でどのような表示になるかを確認することも大切です。Elementorでは、エディターの画面左下部にレスポンシブモードが用意されています。下記箇所をクリックして、それぞれの端末での表示をプレビューして確認してみましょう。この機能で瞬時にモバイル端末での表示が確認できます。モバイル端末で2カラム表示にする方法レスポンシブモードでスマホ端末での画面に設定すると、PC画面で2カラムの箇所が1カラムで縦に並んで表示される箇所があります。下記の例では、タブエリアとアコーディオンのエリアが縦に並んで表示されていますね。この箇所をPCと同じように横並びに表示させたい場合は、スマホ環境でのカラムの幅を50%にする必要があります。下記のように横並びにしたいエレメントにカーソルを合わせて左上のアイコンをクリックします。表示されるカラム幅の横のアイコンがスマホのアイコンになっていることを確認し、50と入力してください。続いて横に並べたいもう一つのエレメントの同じ箇所にも同様に50と入力します。以上の操作で、下記のように綺麗に横並びになるはずです。大前提としてPC環境でセクションの構造を2カラムに設定していることが条件です。セクションの構造についてはこちらまとめWordPressを初めて使う人でもElementorを活用すれば、初心者が作ったとは思えない本格的なページを直感的に制作することができます。今回紹介した基本的な操作以外にも数多くのエレメントが用意されていて、正直その機能性は無料とは思えないレベルです。使い方に慣れ、さらに機能を拡張したい場合は有料版も用意されていますので、ぜひ活用してみてください。追記:(2019/10/20)「Elementor」はレイアウトに影響を及ぼすプラグインの為、テーマや他のプラグインとの緩衝が起きやすいプラグインでもあります。当方でも不具合が起きましたので、どのように対処したかを下記の記事に書いておきます。2019.10.20人気プラグイン「Elementor」を導入してみたら上手く動かない!?WordPressでなにか不具合が起きたときの対処方法WordPressの魅力は、自分好みのテーマを入れることで、統一されたデザインで記事を作って行くことができるところです。デザインプラス編集部WordPressプラグインページビルダーキーワードのトレンドを簡単に調査可能。...2020.02.11ワードやエクセルの表をテーブルタグに変換する便利なツール・ジェネレータ集2020.02.10上質な癒しを感覚レベルで訴えかける。Macでzip圧縮する時に注意しておきたいこと。2019.12.28【初心者向け】Gitとは何なのか。基本用語やその仕組みをまとめています。2019.12.27WEBマーケティングより広義のデジタルマーケティングについて基本から考える2019.09.18今更聞けない?Webサイトのアクセス解析やマーケティングにおいて知っておくべき基本用語2019.09.17読み手の心を動かすコピーライターの仕事とは?ライティングやコピーの基本要素を知ろう2019.07.21国内有力ウェブメディア17サイトの記事更新頻度を調査してみた。No.1】人はコンテンツのどこをどう評価するのか。コンテンツマーケティングに関する重要な話2019.07.01スクリーンショットの撮り方でここまで変わる!かっこいい記事にする為の10のテクニック2019.04.07強烈なインパクトでユーザーの視線を鷲掴みにするWordPressテーマ【MAXX】のトップページについて2017.01.26ファーストビューで動画を使うと見る側にどう伝わっているかという考察記事2019.12.15プロ級の会員制サイト運営をあなたの手に。No.1】人はコンテンツのどこをどう評価するのか。