ホームページ(パン屋さんのサイト)を自分で低コストで作成する方法を詳しく図解入りで一から全て解説【WordPressテーマSWELL使用】

デモサイトUncle Jamが表示されたMacBook

パン屋さんをされている方に向けてホームページを作ってみましたので、
一緒に作ってみましょう。

パン屋さんはよくInstagramを上手に利用されています。
美味しそうなパンの写真は、見ていて今すぐにでも食べたくなる程とっても映えますね!
そそられます^ ^

そんなInstagramともリンクすることができる、自分のお店独自のホームページを作ってみませんか?

初めての方でも分かりやすい様に解説していますので、時間と根気さえあれば誰でも作れます。
是非一緒に作ってみてください。

どなたでもご自由に制作していただいて結構なのですが、このデモサイトをそのままご自身のポートフォリオとして掲載されるのはお控えください。

オススメ

既にご存知の方もおられると思いますが、パン屋さんを経営されている方は、Googleビジネスプロフィール(旧名Googleマイビジネス)に無料で登録すると、
Google Mapに登録したお店の詳しい紹介やサイトのURLを掲載できますので、宣伝効果は抜群です。

目次

作成するホームページのデモサイト

今回はこのような架空のサイトを作成していきます。

画像をクリックすると、デモサイトがご覧になれます。

デモサイトUncle Jamのファーストビュー

他のサイト以外を制作したい方はこちらをご覧ください。↓

あわせて読みたい

Q & A

Web制作(ホームページ制作)の知識が全くありませんが制作できますか?

全く初心者の方でも制作できるように、詳細に図解入りで解説していますので、その通りに進めていただくと制作できます。

テンプレですか?

テンプレートではありません。

デモサイトと同じデザインしか作れませんか?

いいえ。
制作過程で徐々にWordPressやテーマのSWELLの仕様に慣れてくると思いますので、「ここのこの部分は別のデモサイトに載っているデザインで作る」や「これと同じ項目をもう一つ増やそう」「これは必要ないので削除しよう」「ここの色や大きさをを変更しよう」などなどご自由にレイアウトやデザインしていただけます。

一度制作したサイトのデザインを変更できますか?

何度でも変更可能です。
ローカル環境でもサーバーアップロード環境でも可能です。

短期間で作れますか?

初めての方はかなり時間がかかると思いますので、時間に余裕を持って始められることをお勧めします。

ホームページ作成の工程

2パターン紹介しますので、
適した方で作成してください。

パターン1
XserverのWordPress簡単インストールで、サーバー上に直接サイトやブログを構築する方法です。
ご自身のサイトやブログを構築するのにおすすめです。

パターン2
ローカル環境(Local)でサイトやブログを作成し、出来上がってからAll-in-one WP Migrationを使ってXserverのWordPress簡単インストールで立ち上げたWordPressに引越しさせる方法です。
クライアントワークににはこちらがおすすめです。

【パターン1】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)
WordPressテーマSWELLをダウンロードします。
STEP
Xserverでレンタルサーバーとドメインを取得し(初期費用3,300円 約1,000円/月)、Xserver WordPress簡単インストールでWordPressをインストールし、SSL化します。
SWELLの親テーマ子テーマをインストールします。
STEP
SWELL子テーマを有効化し、サイトやブログを作成していきます。

【パターン2】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)

SWELLをダウンロードします。

子テーマもダウンロードします。

STEP
LOCAL(無料)を使用してローカル環境でWordPressを構築します。

LOCALをダウンロードし、SWELLとSWELLの子テーマもインストールし、ローカル環境(サーバー上にアップロードされていない環境)でWordPressのホームページを作成していきます。

STEP
ホームページ作成後、WordPressのプラグインAll-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、バックアップファイルとエクスポートファイルを作成します。

STEP
Xserverでレンタルサーバー契約した後(初期費用3,300円 約1,000円/月)、WordPress簡単インストールでWordPressを立ち上げ、All-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、先ほどのエクスポートファイルをインポートします。

どちらの方法で作成するにしても、WordPressテーマSWELLXserverが必要になります。

実質かかる費用はたったこれだけ!
初期費用17,600円 税込 (買い切りWordPressテーマSWELL価格)
初期費用3,300円 税込 (サーバー契約初期費用)
約1,000円/
月 (サーバーとドメイン代)

WordPressテーマSWELLダウンロードします。

日本人の了さんが直感的に簡単に楽しく素早く操作でき、細部までこだわって作られた、
WordPressテーマです。

ブログでもとても人気のテーマですので、
サイト制作した後にブログを始めてみるのもいいですね!
もちろん買い切り価格ですので、追加料金は発生しません。

今回は完全ノーコードでの制作ですが、追加CSSでより機能性やデザイン性の高いものが作れます。

商品名WordPressテーマ SWELL
販売価格¥17,600(税込み)
※お支払いは一度限りです。月額や年額ではありません。
販売元株式会社LOOS
動作必須環境PHP7.3以上

WordPress5.5以上 (推奨 : 5.6 ~)

※必須環境をみたしてない場合は、エラーが発生します。推奨バージョン未満では、ブロック機能が一部使えません。
※WordPress.comでは利用できません。SWELLはインストール型WordPress.org向け商品です。
対応ブラウザEdge / Chrome / Firefox / Safari (各最新版)
決済方法クレジットカード ( VISA / Master / AMEX / JCB )
※銀行振込での購入は対応できません。
ライセンスSWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます
SWELL公式サイトより引用
  • SWELLをダウンロードしたら、子テーマもダウンロードしましょう。
    (子テーマはSWELL会員サイト SWELLERS’ のマイページにあります。)
  • 親テーマも子テーマもダウンロードした後、zipファイルのままで大丈夫です。

わからないことがあれば、会員サイトのフォーラムで検索や質問ができます。
(フォーラムへは、ガイドラインをよく読んで参加しましょう。)

サブスクではありませんので、一度の購入で複数のブログやサイトが作れます。

Xserverでサーバーとドメインを取得します。

Xserver

エックスサーバー

Xserverのお申し込み方法の解説になります。↓

お名前.com

コチラは特にドメインが1円〜という破格で人気ですね!

もちろんレンタルサーバーもありますが、
サーバーとドメインを別会社にしたい方は、ドメインだけはお名前.comって方法もあります。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■

     ■お名前.com

Xserver WordPress簡単インストールとSSL設定の解説になります。
申し込みが終わればここまで設定しておいてくださいね。↓

【パターン2】の方のみ Local設定

LocalでWordPressをローカル環境構築していきますので、こちらをご覧になって設定してくださいね。↓

WordPressにSWELLをインストールする

では!頑張って作っていきましょう!
とても時間がかかりますので、無理をしない様に途中休憩を適度に取りながら、水分も忘れず補給しながら進めていってくださいね!

WordPressにログインします。

【パターン1】の方は、Xserver簡単インストールしたWordPress
【パターン2】の方は、Local環境で構築したWordPressです。

外観→テーマアップロードをクリックします。


swellのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


今すぐインストールをクリックします。


今度はswell_childのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


今すぐインストールをクリックします。


今度は有効化をクリックします。


親テーマSWELLがインストールされていて、子テーマSWEL CHILDが有効になっていればOKです。

基本的に今有効になっている子テーマを使って制作していきます。

画像をメディアに入れます

今回使用する画像です。

メディアから新規追加をクリックします。


ダウンロードして解凍した画像全てを、ファイルをドロップしてアップロードにドラッグ&ドロップします。
これで画像が入りました。

画像や動画について

画像や動画はご自身で用意、またはweb上で見つけたものを使用される場合の参考になさってください。

画像・動画フリーダウンロードサイト

デザインツール

無料の範囲でも素敵なデザインが作れます。
有料1,000円/月にすると、背景透過やたくさんの素材を使用することができかなり充実しています。

■Canva

7500万点の素材が無料

画像加工サイト

私は頻繁に利用させていただいており、助かっています。

BANNER KOUBOU

画像サイズの変更

画像が大きいと重くなりサイト表示が遅くなります。
画像サイズの変更方法はこちらをご覧ください。↓

画像サイズの目安

大体の目安です。
このサイズじゃないといけないってことではありませんので、
その辺りは臨機応変にご使用ください。

メインビジュアル1600px
中サイズ1000px
小サイズ600px

画像を圧縮してくれる無料サイト

ドラッグ&ドロップで使用でき、
圧縮して、ファイルサイズを小さくしてくれます。

TinyPNG

動画を圧縮してくれる無料サイト

こちらもドラッグ&ドロップで使用できます。

VideoSmaller

背景削除してくれる無料サイト

画像の背景を削除してくれます。

ロゴなどによく使用します。

removebg

固定ページを作ります

まずは固定ページを作っていきます。

管理画面の固定ページ固定ページ一覧をクリックします。

Privacy policySample Pageはゴミ箱へ移動をクリックして削除します。


管理画面の固定ページ新規追加をクリックします。


ポップアップの右上の をクリックして閉じます。


homeと入力し、公開を2度クリックします。
(公開をクリックすることで保存されますので、覚えておいてくださいね。)

左上の をクリックして管理画面に戻ります。


パーマリンク

ページを作成する時にタイトルが日本語だと、長〜〜い訳のわからないurlになったり(https://〇/%e7%a7%81%e3%81%9f%e3%81%a1%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)

なので、わかりやすい英語表記(スラッグ)にしておきましょう!

そのページの、画面右側→固定ページパーマリンクのurlスラッグを日本語ではなくわかりやすい英語表記に変えましょう!!


同様に、blog, contact, about Uncle Jam, bucket, croissant, donutの固定ページも作成します。

お疲れ様です。
首や肩が凝っていませんか?
グルグル回して一息ついてくださいね。

外観カスタマイズとメニュー

管理画面の外観のカスタマイズをクリックします。

WordPress設定

WordPress設定をクリックします。


サイト基本情報をクリックします。


キャッチフレーズを消します。

サイトアイコンを選択をクリックします。


左上メディアライブラリから画像をクリックし、選択をクリックします。


切り抜かないをクリックします。


公開をクリックします。

をクリックして戻ります。


ホームページ設定をクリックします。


ホームページの表示は固定ページを選びます。

ホームページはhome、投稿ページはblogを選びます。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


サイト全体設定

サイト全体設定をクリックします。


基本カラーをクリックします。


メインカラーの色を#f7c872に変更します。

公開をクリックします。

をクリックして戻ります。


基本デザインをクリックします。


全体の質感の全体に丸みをもたせるにチェックを入れます。

べースとなるフォントヒイラギノゴシック>メイリオを選択します。


ページ背景画像

ページ背景画像(PC)画像を選択をクリックします。


画像を選び画像を選択をクリックします。


画像サイズは、横100%を選びます。

その他の設定は、固定表示するにチェックを入れます。


公開をクリックします。

をクリックして戻ります。


パンくずリストをクリックします。


ホームの文字列をhomeと入力します。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


ヘッダー

ヘッダーをクリックします。


ヘッダー背景色は、#faebcdに変更します。

画像を選択をクリックします。


画像を選び、画像を選択をクリックします。


ヘッダーのレイアウト(PC)は、ヘッダーナビを下にを選びます。

ヘッダーのレイアウト(SP)は、ロゴ:中央/メニュー:右を選びます。


ヘッダーバー設定表示設定のチェックを外します。

キャッチフレーズ設定キャッチフレーズの表示位置は、表示しないを選びます。


ヘッダーメニュー(グローバルナビ)設定は、ブロックの出現を選びます。


検索ボタン設定検索ボタンの表示位置(PC)は、ヘッダーメニューに表示を選びます。


公開をクリックします。

をクリックして戻ります。


フッター

フッターをクリックします。


フッター背景色を#faebcdにします。


その他の設定フッターにSNSアイコンリストを表示するにチェックを入れます。


公開をクリックします。

をクリックして戻ります。


サイドバー

サイドバーをクリックします。


トップページにサイドバーを表示すると、固定ページにサイドバーを表示するのチェックを外します。

公開をクリックします。

をクリックして戻ります。


トップページ

トップページをクリックします。


メインビジュアルをクリックします。


表示設定メインビジュアルの高さ設定は、ウィンドウサイズにフィットさせるを選びます。

フィルター処理は、なしを選びます。


各スライドの設定メインテキスト[1]のテキストのサンプルを削除します。

画像を選択をクリックします。


画像を選び、画像を選択をクリックします。

同様に、スライド[2] スライド[3] も画像を選択します。


公開をクリックします。

をクリックして戻ります。


記事スライダーをクリックします。


設置しないを選択します。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


メニュー

メニューをクリックします。


メニュー名グローバルメニューと入力します。

メニューの位置グローバルナビスマホ開閉メニュー内にチェックを入れます。

次をクリックします。


項目を追加をクリックします。


右側固定ページの、home blog contactをクリックすると、左側に追加されます。

もし順序が違っていたら、ドラックドロップで移動してください。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


ウィジェット

ウィジェットをクリックします。


フッター(PC)1 をクリックします。


ウィジェットを追加をクリックします。


画像をクリックします。


画像を追加をクリックします。


画像を選び、ウィジェットに追加をクリックします。


リンク先に、https://uncle-jam.localと入力します。


フッター(PC)2 をクリックします。


ウィジェットを追加をクリックします。


テキストをクリックします。


テキストを入力します。

ウィジェットを追加をクリックします。


Instagramのバナーを貼る

画像をクリックします。


画像を選び、ウィジェットに追加をクリックします。


リンク先に、インスタグラムのurlを入力します。

公開をクリックします。

をクリックして戻ります。


Google Mapを埋め込む

次にフッターの右側にGoogleマップを埋め込みますので、ここで一旦WordPressから離れて、Googleマップを開いてください。

共有をクリックします。


地図を埋め込むをクリックします。

左側のサイズはを選びます。

HTMLをコピーをクリックします。


WordPressに戻ります。

フッター(PC)3をクリックします。


ウィジェットを追加をクリックします。


カスタムHTMLをクリックします。


先ほどGoogleマップでコピーしたものを、内容に貼り付けます。

この中で、width=”400″width=”100%”に書き換えます。

公開をクリックします。

をクリックして戻りますし、 をクリックするとサイトが表示されます。


お疲れ様でした!
これでヘッダーとフッター部分ができましたね。
休憩とるなりして、無理のないようにしてくださいね。
次はトップページの内容部分を作っていきますね。

サイトを表示  管理画面

サイトを表示するには、管理画面左上あたりのサイト名をホバーすると、サイトを表示の文字が現れますので、クリックします。


管理画面に戻るには、サイト左上あたりのサイト名をホバーすると、ダッシュボードの文字が現れますので、クリックします。

気をつけていただきたい事

これからブロックエディターで制作していきますが、こちらからはお知らせしませんので、ご自分のタイミングで頻繁にセーブしていってください。(でないと、せっかく作ったのが消えてしまいます。)

セーブは画面右上、公開を1回クリックもしくは2回クリックします。
(Localで作成されている方は、公開をクリックしてもサーバー上にはアップされません。セーブされるだけです。)

テキストの改行は、シフトを押しながらエンターキーで、普通に改行されます。

エンターキーだけで改行すると、1段落分のスペースが空きます

どこの なのか注意してください。

わかリにくければ ↓

画面左下で確認できます。

ブロックの位置を上下移動させたい時は、そのブロック場所をクリックして四角で囲われるように指定して をクリックして移動します。

トップページ home

about Uncle Jam

管理画面の固定ページ固定ページ一覧をクリックします。


home編集をクリックします。


ポップアップの右上 をクリックして閉じます。


をクリックします。

見出しをクリックします。


画面右側ブロックの見出しセクション用をクリックします。

この画面が表示されていなければ、右上の をクリックすると表示されます。


インライン画像

見出し部分にabout Uncle Jamと入力し、シフトを押しながらエンターを押すとカーソルが左図の位置にきます。

ツールバーの をクリックします。


インライン画像をクリックします。


メディアライブラリをクリックします。


画像を選び選択をクリックします。


をクリックします。

段落をクリックします。


テキストを入力した後エンターを押し、 をクリックします。

すべてを表示をクリックします。


画面左側のブロックのSWELLボタンをクリックします。


画面右側ブロックのMOREボタンをクリックします。

ボタンにmoreと入力します。

ボタンのurlは unclejam.local/about-uncle-jam と入力します。


about Uncle Jamの場所をクリックし、シフトを押しながらボタンまで指定し、 をクリックします。

グループ化をクリックします。


画面右側ブロックで、ボーダー設定04スタイルスティッチをクリックします。


をクリックします。

画像をクリックします。


画像を選び選択をクリックします。


をクリックします。

すべてを表示をクリックします。


画面左ブロックのスペーサーをクリックします。

これがスペース(余白)になります。


画面右側ブロックのピクセル値での高さ50にします。


画面左上の をクリックして管理画面に戻ります。

blog

blogのセクションを作成していきます。

まずは投稿記事を作っていきます。

管理画面の投稿の新規追加をクリックします。


タイトル本文を入力します。


画面右側上部の投稿をクリックします。


アイキャッチ画像のアイキャッチ画像を設定をクリックします。


画像を選び、アイキャッチ画像を設定をクリックします。


公開を2回クリックします。

公開をクリックすることで保存されますので、忘れないようにしてくださいね。


同様に、パンの窯食パンの記事も作成します。


管理画面から、固定ページhome編集に戻ります。


をクリックしてすべてを表示をクリックします。


画面左ブロックのフルワイドをクリックします。


インライン画像

見出し部分にblogと入力し、シフトを押しながらエンターを押します。

すると左図の位置にカーソルがきます。

ツールバーの をクリックします。


インライン画像をクリックします。


画像を選び選択をクリックします。


エンターを押したら出現する をクリックし、すべて表示をクリックします。


画面左側ブロックの、投稿リストをクリックします。


画面右側ブロックのレイアウトを選択テキスト型を選びます。


左図の をクリックします。


画面左側ブロックのSWELLボタンをクリックします。


画面右側ブロックのスタイルのMOREボタンをクリックします。

ボタンのテキストはmoreと入力します。

ボタンのurlは unclejam.local/blog と入力します。


パンの紹介

パンの紹介のセクションを制作していきます。

プラグインを入れますので、 をクリックして管理画面に戻ってくださいね。

管理画面のプラグイン新規追加をクリックします。


追記

プラグインのBlocks Animation: CSS Animations for Gutenberg Blocksをインストールして動きを付ける説明をしていますが、Snow Monkey Editorでも同様に動きをつけることが出来ますので追記させていただきます。

追記になってしまい申し訳ありません。お好きな方でなさってください。

個人的にはSnow Monkey Editorがお勧めです。

既にBlocks Animation: CSS Animations for Gutenberg Blocksをインストール後にSnow Monkey Editorに変更されたい方は、Blocks Animation: CSS Animations for Gutenberg Blocksを削除して、改めてSnow Monkey Editorをインストール有効化をしてください。

削除の方法

管理画面のプラグインインストール済みプラグインをクリックします。


Blocks Animation: CSS Animations for Gutenberg Blocks無効化をクリックします。


削除をクリックします。


これで削除できました。

次にSnow Monkey Editorをインストール有効化します。

管理画面のプラグイン新規追加をクリックします。


右上のキーワードにSnow Monkey Editorと入力し、表示されたSnow Monkey Editor今すぐインストールをクリックします。


有効化をクリックします。


これでSnow Monkey Editorがインストールされて使えるようになりました。

設定の説明は、後のBlocks Animation: CSS Animations for Gutenberg Blocksの設定のところで追記させていただきます。

プラグインの検索のところに、Blocks Animation: CSS Animations for Gutenberg Blocksと入力します。

動きを付けるためのプラグインです。


今すぐインストールをクリックします。

有効化をクリックします。


固定ページのhomeの編集をクリックします。

をクリックし、すべて表示をクリックします。


画面左側のブロックのカラムをクリックします。


50/50をクリックします。


左側の をクリックします。

画像をクリックします。

無ければすべて表示をクリックし、画面左側のブロックから画像をクリックします。


画像を選び選択をクリックします。


右側の をクリックし、見出しをクリックします。


インライン画像

bucketと入力し、ツールバーの をクリックします。

インライン画像をクリックします。


画像を選び、選択をクリックします。


シフトを押しながらエンターを押します

すると左図の位置にカーソルがきます。

ツールバーの をクリックします。


画像を選び選択をクリックします。


左の位置にカーソルがある状態でエンターを押します。


テキストを入力しエンターを押します。

をクリックします。

すべて表示をクリックします。


画面左側ブロックのSWELLボタンをクリックします。


ボタンの上にmoreと入力します。

urlは uncle-jam.local/bucket と入力します。


追記

Snow Monkey Editorで動きを付ける(プラグイン)

画面左下のカラムをクリックします。

bucketのエリアが指定されます。


画面右側ブロックで、アニメーション
アニメーションフェード・インアップを選びます。

遅延0.2にします。
(お好みで設定してくださいね。)

下から上にフワッと表示されます。


をクリックして、すべて表示をクリックし、画面左ブロックからスペーサーをクリックします。

画面右側ブロックのスペーサー設定80にします。

同様に croissant donut を作成します。

croissant部分は画像とテキスト部分が右左逆になります。

ボタンのurlはそれぞれ
uncle-jam.local/croissant
uncle-jam.local/donut
になります。

Blocks Animation: CSS Animations for Gutenberg Blocks(動きをつけるプラグイン)

画面左下のカラムをクリックします。

bucketのエリアが指定されます。


画面右側ブロックで、Animations
AnimationFade in Up
Delay100 Milliseconds
SpeedSlow
にします。

※このAnimationsは先ほどプラグインでインストールし有効化したものになります。(下から上にフワッと表示されます。)


をクリックして、すべて表示をクリックし、画面左ブロックからスペーサーをクリックします。

画面右側ブロックのスペーサー設定80にします。

同様に croissant donut を作成します。

croissant部分は画像とテキスト部分が右左逆になります。

ボタンのurlはそれぞれ
uncle-jam.local/croissant
uncle-jam.local/donut
になります。


お疲れ様です!
トップページは以上になりますが、できましたでしょうか?
できるだけどなたにでも分かりやすく解説しているつもりですが、
分からないところや、おかしな所があれば修正致しますので、教えていただけると幸いです。

固定ページ about Uncle Jam

次にabout Uncle Jamのページを制作していきます。

管理画面から固定ページabout Uncle Jam編集をクリックします。


テキストを入力します。

をクリックし画像をクリックします。


画像を選び選択をクリックします。

画像の大きさをを動かして調節します。


テキスト部分をクリックし、シフトを押したまま画像をクリックすると、左図のようにテキストと画像が指定されます。

ツールバーの をクリックし、グループ化をクリックします。


画面右側ブロックで、ボーダー設定04と、スタイルスティッチをクリックします。


about Uncle Jamのページは以上です。

次はそれぞれのパンの紹介ページを作成していきます。

固定ページ bucket croissant donut

管理画面固定ページのbucket編集をクリックします。

をクリックし、すべて表示をクリックします。


画面左ブロックで、カラムをクリックします。


カラムの33/33/33をクリックします。


をクリックします。

画像をクリックします。


画像を選び選択をクリックします。


キャプションを追加のところにカーソルを置き、エンターを押します。


テキストを入力し、ツールバーでテキストを中央寄せをクリックします。

明太子フランスの文字の右側にカーソルがきている状態でエンターを押します。


値段を入力し、再びツールバーでテキストを中央寄せをクリックします。


画像をクリックし、そのままシフトを押しながらパンの名前と価格をクリックします。

をクリックし、グループ化をクリックします。


右側ブロックのスタイル浮き出しをクリックします。


同様に残りのベーコンエピ、カンパーニュを作成します。

croissant donutページも作り方は同じですので、見直しながら作成してくださいね。

固定ページ contact

よく頑張ってここまで出来上がりましたね!
後少しです!

contact(お問い合わせフォーム)の詳しい作り方は、こちらをご覧ください。↓

以上でほぼ出来上がりました!!
いや〜本当にお疲れ様でした!!
やりましたね〜
よく頑張った自分をいっぱい褒めてあげてくださいね!
次は一部のフォント(Googleフォント)に変更する方法です。

一部をGoogleフォントに変更

フォント(文字のデザイン)を変えるだけで、随分サイトの雰囲気が変わるものです。
詳しい方法についてはここでは割愛しますので、コピペで試してみてくださいね。

詳しい説明はこちらになります。
少しWeb制作の知識が必要になります。↓

管理画面の外観のカスタマイズをクリックします。


追加CSSをクリックします。


下のコードをコピペします。

@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

.is-style-section_ttl, .c-gnav, .c-pageTitle, .menu-item {
	font-family: 'Yomogi', cursive;
}

公開をクリックし、 をクリックし戻ります。


【パターン2】で作成された方はLocalからXserverにアップロード

今の状態ではまだローカル環境ですので、

作ったサイトを、サーバー上に公開する方法です。

こちらで詳しく説明してますのでご覧ください。

その他のプラグイン

・Snow Monkey Forms

・Blocks Animation: CSS Animations for Gutenberg Blocks

・All in one WP Migration

以上の3つは既に入れていますが、その他セキュリティーの為のお勧めプラグインなどは、
SWELLの公式サイトをご覧ください。

私は他にWP Multibyte Patch と All In One WP Securityを入れています。

作成してみていかがでしたでしょうか。
初めての事でかなり大変だったとは思いますが、
自分で作り上げた事で、自信と愛着が湧いてきませんかw

アップロードしてからも、デザインをご自分の好みにいつでも変更できますので、ぜひ色々触ってみて満足できるサイトに進化させていってくださいね。

最後まで本当にお疲れ様でした!

〜本日も最後まで読んでいただき、ありがとうございました。〜

他のサイトも制作されたい方は、こちらをご覧ください。↓

あわせて読みたい
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる