【 Elementor 講座 ③ 】
Web制作のプロが教える、超簡単ホームページ制作。
感動的サクサク感。【 最適なテーマ設定編 】
この記事は、動画の音声を書き起こしたものです。
Web制作のプロが教える、サクサク簡単、完全オリジナルホームページ制作。
ということで、今回がエレメンター講座の三回目です。
全くの初心者でもオリジナルホームページが作れちゃう、ワードプレスをベースとしたプラグインである「エレメンター」。
前回の動画では、エレメンターの簡単さや自由さ、直感的な操作性を体感していただきました。
そしてワードプレスにエレメンターをインストールする手順をご紹介しました。
それではいよいよ、実践編の基礎コースがスタートです。
と言いたいところですが、その前にもう一つ、必要なものを用意しましょう。
ワードプレスの重要な要素となる、「テーマ」についてお話します。
まず、ベースとなるワードプレス。
ワードプレスは、CMSと呼ばれるコンテンツマネージメントシステムです。
ホームページやブログを管理する、プラットフォームの役割をしています。
ベースとなるワードプレスに、様々な機能を拡張するプラグインとして、エレメンターなどを入れることができる。
そのプラグインとは別に、ワードプレスには「テーマ」と呼ばれるものがあります。
テーマとは、ホームページ全体のデザイン構成やサイト構造を規定する枠組みです。
Webページを作る際に、真っ白なキャンパスのような状態からでは、何から始めていいのか分かりません。
人は自由すぎると、返って何もできなくなってしまうこと、ありますよね。
Webページの型となる枠組みがあれば、あとは内容として文章や画像をはめ込んでいくだけです。
利用者のユーザビリティを考えての枠組みとして、ワードプレスには「テーマ」というものが必要になります。
実際にはそれらを規定するファイル群がテーマということで、世界中のWeb制作者がワードプレスのテーマを作っています。
Web上には無数の、無料や有料テーマがありますよね。
でも、優れたテーマを使えば使うほど、枠組みがあることの不自由さを感じるようになっていきます。
もう少しタイトルの幅があればなとか、ここは画像の数を増やしたいのにと。
これも人間の性(さが)です。
この相反する欲求を、絶妙に解決してくれるのがエレメンターなんです。
でもエレメンターは「プラグイン」なので、別にテーマを入れる必要があります。
そこでエレメンターのパフォーマンスを最高に引き出すテーマを、今回ご紹介します。
まず、ワードプレスの管理画面に移ってみましょう。
左のメニューから「外観」をクリックします。
そしてページの上にある「新規追加」に進みましょう。
こちらがテーマの新規追加ページです。
検索欄に「Hello」と入力してください。
さあ、こちらがハローエレメンターという、Webサイトビルダーのエレメンターに最適なテーマです。
というのも、ハローエレメンターというこちらのテーマは、プラグインであるエレメンターを制作しているエレメンターチームが、エレメンターのパフォーマンスを最大限引き出すために作ったシンプルなテーマなんです。
ページの読み込みスピードも爆速ですから、エレメンターをメインに考える場合、こちらのテーマをお勧めします。
それではインストールしていきましょう。
なお、テーマをインストールしたら「子テーマ」を作りましょうと推奨されことがあるかと思いますが、この動画ではサクサクWebページを作ることが目的なので、子テーマについてはスキップします。
ワードプレスの理解が進んでからでも十分です。
ではインストールが完了したら、有効化のボタンをクリックします。
さあ、これでハローエレメンターのテーマが適用されました。
それではテーマの、簡単な設定だけしてみましょうか。
では、ダッシュボードに進みます。
サイトをカスタマイズ、もしくは、外観にポインターを合わせると、ポップアップのカスタマイズからも進めます。
さあ続いて、サイト基本情報に進みます。
下に「サイトアイコンを選択」というものがありますけれども、
こちらで画像を選択すると、タブのこちらの画像、ファビコンと呼ばれるこちらの画像を設定することができます。
こちらは、メディアライブラリという、ワードプレスにすでに読み込まれている画像になります。
こちらは前回の動画でテンプレートを読み込んだ際にはいった画像ですね。
自分のファイルから選ぶ場合には、こちらのファイルをアップロードから選択してください。
それではこちらの画像の中から、この画像を借りてファビコンに設定したいと思います。
ファビコン画像はスクエア、正方形ですから、こちらで丁度いいところに合わせて、切り抜きをして設定します。
さあこれでファビコン画像が設定され、公開で適用になります。
さあこれで、サイトを別タブで開いてみます。
さあ、先ほど設定した画像がこちらに適用になっているのが分かります。
トップページ自体はこの様な、最初の投稿の画面なので、このようなシンプルな状態です。
さあ、これでエレメンターに最適なテーマを設定することかできました。
次回の動画では、実際にWebページを作ってみます。
そく実践で使える手順ですから、ぜひご覧ください。
では、また。