すべてのカテゴリ

こんにちは、Leycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回、Elementor Header & Footer Builderというプラグインを使用してヘッダーを作る方法をご紹介しました。今回は、「もっと詳しくヘッダーを作る方法を知りたい」という方のために、既存のLPにヘッダーを追加する手順を、３回に分けてご説明します。次のような章立てでご紹介する予定です。ヘッダーの作り方①ヘッダーに必要な情報をそろえましょうヘッダーの作り方②プラグインでヘッダーを作成しましょうヘッダーの作り方③LPにヘッダーを設置して完成させましょう今回の「ヘッダーの作り方③LPにヘッダーを設置して完成させましょう」では、前回で完成したヘッダーを実際にLPに表示させていきます。

こんにちは、Leycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回、Elementor Header & Footer Builderというプラグインを使用してヘッダーを作る方法をご紹介しました。今回は、「もっと詳しくヘッダーを作る方法を知りたい」という方のために、既存のLPにヘッダーを追加する手順を、３回に分けてご説明します。次のような章立てでご紹介する予定です。ヘッダーの作り方①ヘッダーに必要な情報をそろえましょうヘッダーの作り方②プラグインでヘッダーを作成しましょうヘッダーの作り方③LPにヘッダーを設置して完成させましょう今回の「ヘッダーの作り方②ヘッダーを作成しましょう」では、Elementer Header & Footer Builderでのヘッダーの作り方をご説明します。特に、・後から調整や変更がしやすい作り方・ハンバーガーメニューなどレスポンシブの方法について、わかりやすく解説したいと思っています。【はじめに】完成イメージはこちらです。・ヘッダーはサイトロゴとグローバルナビの組み合わせです。・グローバルナビをクリックすると、それぞれのセクション部分に移動できるようにします（ページ内ナビと呼びます）。※contactはお問い合わせページを作成していないので、今回はリンクなしです。・ヘッダーはずっと上に固定されており、ページをスクロールしても動きません。前回までに、ロゴとグローバルナビの準備が終わっています。今回は少し長くなりま

こんにちは、Leycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回、Elementor Header & Footer Builderというプラグインを使用してヘッダーを作る方法をご紹介しました。今回は、「もっと詳しくヘッダーを作る方法を知りたい」という方のために、既存のLPにヘッダーを追加する手順を、３回に分けてご説明します。次のような章立てでご紹介する予定です。ヘッダーの作り方①ヘッダーに必要な情報をそろえましょうヘッダーの作り方②ヘッダーを作成しましょうヘッダーの作り方③LPにヘッダーを設置して完成させましょう今回の「ヘッダーの作り方①ヘッダーに必要な情報をそろえましょう」では、次のようなことがマスターできます。・ヘッダーロゴの設定方法・グローバルナビの設定方法・ページ内リンクの作り方今回ご説明する内容は、Elementor以外でもWordPressでサイトを作る場合は役に立ちますので、ぜひ参考にしてみてください。【はじめに】完成イメージはこちらです。・ヘッダーはサイトロゴとグローバルナビの組み合わせです。・グローバルナビをクリックすると、それぞれのセクション部分に移動できるようにします（ページ内ナビと呼びます）。※contactはお問い合わせページを作成していないので、今回はリンクなしです。・ヘッダーはずっと上に固定されており、ページをスクロールしても動きません。それでは、ひとつずつ作っていきます。

あけましておめでとうございます。2024年もよろしくお願いいたします。webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回までElementorを使ったwebページの制作方法をご紹介してきました。Elementorは無料版でもわかりやすく、簡単にサイトを作れるので、とても便利です。ただ、Elementor無料版ではちょっと作りづらいのが「ヘッダー」。（前回まで作っていたwebページにはヘッダーはロゴだけになっていました）使っているテーマのヘッダーをそのまま使う場合が多いかもしれません。ただ、Elementor無料版でも、プラグインを組み合わせてヘッダーをカスタマイズすることができます。今回は、ヘッダー作成に便利なプラグイン「Elementor Header & Footer Builder」をご紹介します。できるだけコストをおさえてwebページを作りたい方は、ぜひご覧ください。【はじめに】Elementor Header & Footer BuilderプラグインをインストールしましょうまずはWordPressの管理画面からプラグインをインストールします。メニューの「プラグイン」から「プラグインを追加」を選び、キーワード検索に「Elementor Header & Footer Builder」と入力しましょう。見つかったら、「今すぐインストール」→「有効化」を選択します。有効化まで完了していると、「メニュー」の

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回まで、WordPressのプラグイン「Elementor」を使ったサイト構築の方法をお伝えしてきました。最後まで一通り完成しましたが、実際に作ってみた方は、最初に用意したデザインと少しフッターの感じが違っていることに気づかれたのではないでしょうか？今回は、フッターの修正を例として、Elementorの細かな設定をご紹介していきます。「Elementor」でできることはわかったけど、もう少し使いこなしてみたいという方は、ぜひ参考になさってみてください。はじめに：デザインとElementorの画面の違いは、「サイズ」の違いそれでは早速、デザインとElementorで作ったサイトのフッター部分を見比べてみます。デザインのフッター部分Elementorで作ったサイトのフッター部分基本的な文字などは同じですが、個々のサイズがだいぶ違います。今回は、修正を３点に絞りました。①ボタンをもう少し横長にしたい②「COCO」のロゴが大きすぎる③上にゆとりがない感じがするでは、次からそれぞれのサイズを修正していきます。【Elementorでのサイズ調整方法①】コンテナ幅を調整まずは、「①ボタンをもう少し横長にしたい」を解決します。ボタンが横に伸ばせないのは、隣のメニューナビが入っているコンテナとボタンのコンテナが幅25％になっているためです。（コンテナとは、「画像」などが入った箱の部分のことを指

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでセクションを完成させます。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）今回、作っているwebページのデザインはこちらです。前回に続き、フッターを作っていきます。はじめに：前回作ったコンテナにウィジェットを入れていきます前回、基礎となるコンテナの作成をしています。こんな感じで、まだデフォルトのままです。ここから、それぞれのウィジェットを入れます。上のコンテナが４つの小さいコンテナに分かれているので、順番に設定していきましょう。【上のコンテナ作成①】一番左の部分にウィジェットを入れます一番左の部分は、ロゴ画像と「webデザイナー」というテキストです。右の編集画面から、それぞれの部分をクリックして左側に編集メニューを呼び出します。テキスト部分は次のように設定しました。色：#333333フォント：noto sans JP 16px Boldこれでこの部分は終了です。【上のコンテナ作成②】右から２番目の部分にウィジェットを入れますこ

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでセクションを完成させます。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）今回、作っているwebページのデザインはこちらです。今回から、フッターを作っていきます。はじめに：フッターのレイアウトを確認しましょうフッターは、さまざまなウィジェットが入っていますので、まずはそれらを確認してみます。また、配置としては、大まかに次のように考えられます。大きな赤いコンテナが２つあって、上のコンテナには４つ青いコンテナが入っているイメージです。それでは、実際に作っていきましょう。【フッターのレイアウト①】コンテナを準備しましょう最初に、先ほど確認した形のコンテナを作ります。コンテナの「＋」マークを押して、次の画面を出します。ここでは、右上の４つ縦並びのコンテナを選択。このようにできあがりました。下のコンテナは、ウィジェットが１つで直接コンテナに入れられるので、ここでは作成しません。今回、コンテナに背景色があるので、設定しておきます。コンテナ

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでセクションを完成させます。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）今回、作っているwebページのデザインはこちらです。今回は、「セクション③」のアコーディオン部分を作っていきます。はじめに：アコーディオンってどういうもの？アコーディオンとは、クリックすると折りたたまれている部分が出てくるように動くものを指します。サブメニューがたくさんある時や、今回のような「ご質問」の時によく使われます。情報量が多くて、まとめておきたい時によく使うものなので、ぜひマスターしてみてください。【アコーディオンの作り方①】編集画面にアコーディオンを追加しますエレメンターの編集画面を開き、左側のウィジェットメニューから「アコーディオン」を見つけてください。（下のほうにあるので、「ウィジェットの検索」から探してもOKです）もし、この画面になっていない方は、「elementor」の右脇にある９つの点のマークをクリックしてください。「アコーディオン」

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでセクションを完成させます。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）今回、作っているwebページのデザインはこちらです。はじめに：ボタンの作り方をマスターしましょう今回は「セクション①」のボタンを作っていきます。ボタンもElementorなら簡単に作ることができます。【ボタンの作り方①】ボタンを編集画面に追加しますまずは、左側のウィジェットメニューから「ボタン」を選びます。（もしウィジェットメニューが見えない方は、「画像を編集」などと書かれている部分の右脇の９つの点マークをクリックしてください）「ボタン」を追加する時には、コンテナの「＋」マークに向けてドラッグしてます。前に作った画像とテキスト部分のコンテナに入らないようにするためです。ボタンが編集画面に追加されました。この画面のまま、ボタンの基本設定をしていきます。設定項目はこちらです。・「タイプ」：デフォルトのままで大丈夫です。他を選択すると、ベースカラーが変わります

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでセクションを作ります。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）はじめに：ブロックはElementorの「カラム」をベースに作っていきます。今回作っているwebページのデザインはこちらです。前回から「セクション①」を作成しており、今回は、画像と小見出しで構成されている部分（今回は「ブロック」と呼びます）を作っていきます。ブロックは画像と小見出しのペアが３つあるので、まず１つのペアを「コンテナ」で作って、「コンテナ」を３つに複製する方法を使います。ではさっそく作っていきましょう。【ブロックの作り方①】画像を設定しましょう前回の作成の続きから始めます。見出しの下にある「＋」マークをクリックします。クリックすると、次のような画面になりますので、２つ横並びのもの（画像ではグレーの部分）を選んでください。このような四角が編集画面に追加されました。この２つの四角の部分を「コンテナ」と呼びます。２つの四角を入れた大きい部分も「コンテナ

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでセクションを作ります。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）はじめに：セクションの構造を確認ー「見出し」を作ります今回作っているwebページのデザインはこちらです。今回はこの中の「セクション①」を作っていきます。作業に入る前に、セクション①の構造を詳しく見ておきましょう。今回は、・「見出し」・「画像と小見出しの組み合わせが３つ」・「ボタン」の３つの中から、「見出し」部分を作っていきます。【見出しの作り方①】英語の見出しを作りましょうElementorでテキストを入力できるウィジェットは、おもに次の２つです。・見出し・テキストエディターどちらを使っても大丈夫ですが、今回は、・英語→見出し・日本語→テキストエディターを使っていきます。左のウィジェット一覧から、「見出し」を選びます。「見出し」をクリックすると、見出しが右側の編集画面に入りました。「Elementor」の文字の下にある「コンテンツ」の画面では、文字を入力して

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorでファーストビューを作ります。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）はじめに：ファーストビューに必要な素材を確認しましょう今回は「ファーストビュー」を作っていきます。全体の完成イメージは次の通りです。今回のファーストビューでは、・背景の画像・ロゴの２つの画像素材を使います。【ファーストビューの作り方①】背景画像を設定まず、Elementorの管理画面から、コンテナを１つ作ります。コンテナを設置できたら、左のメニューを次のように設定してください。「幅」と「最小の高さ」は単位に気をつけてください。設定ができたら、上の「レイアウト」から「スタイル」をクリックして移動します。上から順番に・「Background Type」の左端を選択・「画像の選択」を選ぶと、画像の選択画面になるので、画像をアップロードして設定・「位置」で画像の位置を設定します。最後に「更新」をクリックしておきましょう。【ファーストビューの作り方②】ロゴを設定

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現するお手伝いをする」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回から、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回から、Elementorを使って、実際にサイトを作ってみます。webサイトを自作したいという方は、ぜひご覧ください。（なお、ご自身のサーバーでWordPressとElementorが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）今回作成するサイトデザインはこちらです。はじめに：Elementorの基本設定をしましょうElementorは、自由に編集ができる便利なプラグインですが、いくつか先に準備をしておいたほうが、後の作業がしやすくなります。今回作ろうとしているサイトで、やっておいた方が良い基本設定を、いくつかご紹介しますので、ぜひ参考にしてみてください。【Elementorの初期設定①】色の設定では、Elementorの基本設定を出す手順からご紹介します。Elementorの編集画面の、左上の３本線をクリック。一番上の「サイト設定」を選択します。「グローバルカラー」で色の設定を、「グローバルフォント」でフォントの設定をします。今回は、色の設定をしたいので、「グローバルカラー」を選択。それぞれの部分をクリックすると変更できますので、今回は次のように登録しました。色

こんにちは、webデザイナーのLeycoです。「すべての人がwebを使って自由に表現するお手伝いをする」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。前回から、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。今回は、Elementorの導入方法をお伝えします。webサイトを自作したいという方は、ぜひご覧ください。（なお、今回からの内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）はじめに：Elementorの設定は簡単ですElementorは「ページビルダー」と呼ばれる、編集を簡単にしてくれるWordPressのプラグインです。編集画面がわかりやすいので、プログラミングの知識がなくてもサイト作成ができます。Elementorを設定する手順も簡単。さっそく、次からご紹介していきます。【Elementorの設定①】Elementorをインストールまずは、Elementorをインストールしましょう。WordPress管理画面の左側にあるメニュー「プラグイン」→「新規追加」で、右上の検索窓から「Elementor」と検索します。すると、「Elementor Website Builder」というプラグインが出てきます。（下の画像では左上）「今すぐインストール」をクリックして、インストールを開始します。次に「有効化」の文字が出てくるので、そ