ブログやサイトのカスタマイズどうしていますか？
とくにブログだと過去記事がどんどん埋もれてしまうので、トップページからブログ全体が分かるようにしたい。ミニサイトを作るといってもトップページから全体にアクセスしやすくカスタマイズしたい。でも、いったいどうやってやればいいの？？
私のようにHTMLやCSSのコードはほとんどコピペしている人は、カスタマイズをしたくても思ったようにできなくてイライラ、結局あきらめたこともあると思います。
そんな人におすすめなのが無料のワードプレスプラグインElementorです。このプラグインを使うと、なんとドラッグ＆ドロップでトップページや個々の記事ページのカスタマイズができてしまいます。
（記事中のリンクにはアフィリエイトリンクが含まれています。詳しくはサイトポリシーをお読みください。）
無料プラグインElementorは、コード不要でページや個別ポストをカスタマイズできるプラグイン！
Elementorはオープンソースでつくられたワードプレスのページビルダー系のプラグインの一つです。しかもほとんどの機能が無料！！
使い方はいたって簡単。
すべてがドラッグ＆ドロップで画像やテキストを好きな場所に入れることができます。カラムの幅もドラッグして好きな幅に調整するだけ。
用意されたテンプレートを使うと自分で全体をデザインしなくてもサクサクとプロのようなページが出来上がります。
とまあ、なんとも便利なプラグイン。もちろんレスポンシブ対応！しかもスマホ、タブレット、PCに出しわけもできるというから、至れり尽くせりです。
そのうえ、基本的にはどのテーマを使っていてもOKというからびっくりです。これでもうトップページのカスタマイズができなくて、泣く泣くあきらめることはないでしょう。
ブログのトップページ、ミニサイトのトップページ、ランディングページなどなどどんどんカスタマイズしてみてください。
ブログデザインは、使う写真の印象も大きいですよね。わたしがブログで使っている大人かわいい系の写真サイトはこちらにまとめています。
その他のブログを書くときに愛用しているツールはBLOG TOOLSにあるので参考にしてくださいね。。
Elementorのインストール
ステップ１：Elementorをインストールする
プラグインの新規追加からElementorを検索します。似たような名前のプラグインがありますが、”Elementor Page Builder”を選んでインストール、アクティベイトしてください。
ステップ２：Elementorの基本設定をする
Elementorの基本設定を確認します。
私は基本設定はデフォルトのまま何も変えていません。参考までにこんな感じです。おそらくコンテンツ幅は使っているテーマや設定によって違うと思います。フルスクリーンもできそうですが、私のテーマだとサポートされてないようでした。
ステップ３：Elementorつくるページを用意する
さっそくブログのトップページをつくりましょう。まずは固定ページから新規追加を選びます。タイトルを入れてパーマリンクを決めます。タイトルを入力してからパーマリンクが表示されるまで時間がかかることがあります。
ここではHOME２としました。
Elementorで編集をクリックします。
ステップ４：Elementorを使ってページを編集する
あとは左側の要素から好きなものを選んでドラック＆ドロップでページをカスタマイズすればOKです。すごくわかりやすいので、使える人はここからはご自分でガシガシと使ってみてください。
テンプレートを使いたい方は、ここでテンプレートを入れてください。
ちなみにおしゃれな感じのテンプレートがそろっています。テンプレートは個別ページ、記事ページ用なので、ブログ全体のテーマが変わるわけではありません。念のため。
編集が終わったら要素ボックスの下にある保存をクリックして保存してください。
Elementorで作ったページを公開する
要素ボックスの下のいちばん左側の×をクリックしてElementorを終了します。普通の編集画面から公開をクリックします。
Elementorで作ったページをトップページに設定する
あとはつくったページをトップページに設定したら終了です。設定＞表示設定からフロントページの表示を変更します。作ったページをフロントページに選択します。
注意）使っているテーマによってはフロントページの設定ができない場合があります。
Elementorの基本的な使い方
ものすごくわかりやすいプラグインなので使ってみるのが一番ですが、ここで基本的な使い方を紹介しますね。
Elementorの基本的その１：新しいセクションを追加する
直接要素をドラッグしてもよいですし、新しいセクションの追加をクリックして分割したカラムを選んでから要素を追加してもよいです。
このカラムの幅も数もあとからでも変更できます。
Elementorの基本その２：テキストを入力
テキストボックスでは、ほぼブログ記事と同じようにテキストを編集できます。左のボックスの中で編集をします。リンクを入れたり、文字をハイライトしたり色を変えたりも簡単。
Elementorの基本その３：画像を入れてリンクをつける
画像ボックスを入れるとアップロードしている画像をいれることができます。画像にリンクをつける場合は、リンク先からCustom URLを選びリンク先のURLを入力してください。
スタイルや詳細からさらに画像サイズの変更やパディングの調整ができるので、よいようにアレンジしてくださいね。
Elementorの基本その４：スペーサーやカラム間の空白を調整する
スペーサーを入れると、要素間に空白をいれることができます。セクションの上や下にスペーサーを入れて、見やすいように調整してください。
カラム間のすき間はセクションから変更します。PCではよくてもスマホでみると画像間が詰まっていたり、タイトルのすぐ下に画像がきたりしたので、画像の下にスペーサーを入れて調整しました。
Elementorの基本その５：ソーシャルメディアアイコンを入れる
ソーシャルメディアのアイコンも簡単に挿入できます。スタイルから、色や形を変えることができます。
リンク先を自分のメディアのページに設定してくださいね。
Elementorの基本その６：カラムとセクションについて
セクションはその横につながっている構成です、下の図では4つのカラムが一つのセクションになっています。セクションを削除すると4つのカラムごと削除されます。
カラムは、一つ一つのボックスです。カラムをコピーすると、同じセクション内、つまりその横にカラムがコピーされます。セクションをコピーすると、その下にセクションがコピーされます。
カラム間のすき間も簡単に変えられます。カラムやセクションの背景はスタイルから設定できます。
Elementorの基本その７：セクションとセクションの間に新しいセクションを挿入する
これはやり方がよくわかりませんでした。セクションはドラッグできないようです。
セクションを挿入したいすぐ上のセクションを選択し、コピーマーク（上の図の赤で囲ってあるところの左から2番目のアイコン）をクリックしてコピーを作った後に、そのセクションの構成要素を消しました。
いい方法があれば、コメントかTwitterで教えていただけると嬉しいです！
Elementorの基本その８：最新の投稿を表示する
左の要素ボックスを下までスクロールするとウィジットが表示されます。ここから最新の投稿をドラッグして好きなところに入れてください。ここでは、テキストだけが表示されます。
この新着ポストやそのほかのポストをイメージ付きで表示するのは、有料版のElementor Proの仕様です。イメージのサイズとか簡単に変えられるので、こだわりたい人にはおススメ。
ちなみに有料版のElementor Proには、ネットショップで使う機能とか、メーリングリストへの登録など、ネットで稼ぐための機能がついています。
Elementorの基本その９：Shortcodeを利用する
うれしいことに要素のひとつにShotcodeがあります。使っているテーマのShortcodeやプラグインでShortcodeを入れていれば、ショートコードが使えます。
ハバグッデイ！の新着表示はショートコード（WP Canvas Shortcodes）を使っています。他のテーマでも使えるかどうか確認していないので、詳しくは次回に書きます。
別ブログハバグッデイ！のトップページでしていることの詳しい解説はこちらの記事です。>>無料プラグインElementorでトップページを楽々カスタマイズ。ハバグッデイ！のトップページの作り方
他のショートコード系のプラグインだとShortcodes Ultimateあたりが機能が豊富で使えそうです。
ただし、ハミングバードなどでショートコードがすでにテーマに入っていると、ショートコードが競合する場合もあるそうなのでご注意ください。
無料プラグインElementorの使い方まとめ
ページビルダー系のプラグインの中ではElementorはかなり使えるプラグインです。自分の好きなテーマをコード不要でここまでカスタマイズできるとはもはや感動的です。
しかも無料！！
使い方もお値段もやさしいこんなプラグインは見たことありません。これでもうトップページのカスタマイズも怖くない！
私も全部の機能を把握しているわけではないので、ぜひみなさん色々とつかって素敵なトップページを作ってくださいね。こんな便利な機能があるとか発見した方はコメントもらえると嬉しいです。
次回はハバグッデイのトップページのカスタマイズを少し詳しく紹介しますね。
今日はここまで。では！
Have a good day!
ブログのカスタマイズのおすすめ記事
ブログのカスタマイズも楽しいですが、もっとプロっぽく個性的に見える？ブログに簡単にするのには、最初からデザインのいい使いやすいテーマを選ぶのが結局のところ一番楽なんですよね。
このブログでは、SEOに強くて世界中の一流サイトで使用されているGenesisのFrameworkをもとに、子テーマのGallery Proでカスタマイズしています。すごくシンプルなデザインが気に入っています。
ちょっとお知らせ
TokoAruga.comのFacebookページで、アメリカの女性ブロガーさんのブログ運営報告、ブログ運営ノウハウ、海外アフィリエイトプログラムなどを紹介しています。
日本の一歩先を行く海外のブロガーさんの情報は役に立つ情報がたくさん。興味のある方はLikeしてフォローしてくださいね。
私のブログでは、海外でブログを仕事にするをテーマにしています。が、私自身のブロガーとしての実績はまだありません。
それでもこのブログを運営している理由、このブログのMissionを熱く書きました。このブログのコンセプトのようなものなので、もしこのブログが気に入った方にはぜひ読んでもらいたい記事です。
３か月ごとのブログ運営報告はこちらです。
まだまだ駆け出しなので、生暖かく見守ってくださいませ。
コメントを残す