こんにちは

FWAFWA houseです

前回に引き続きWordPressのブログ作りを進めていきます

前の記事ではレンタルサーバーの契約〜WordPressの導入・テンプレートの設定までの奮闘記を書きましたよ♪

https://fwafwahouse.net/2019/08/10/%e5%88%9d%e5%bf%83%e8%80%85%e3%81%8cwordpress%e3%81%a7%e3%83%96%e3%83%ad%e3%82%b0%e3%82%92%e4%bd%9c%e3%82%8b%e5%a5%ae%e9%97%98%e8%a8%98%e2%91%a0/

そこでテンプレートにEmanon Freeという無料テンプレートを設定するところまで出来ました

今回はこのテンプレートを使って、ブログのタイトル画像とヘッダーのメニューを設定していく事にしました

1. ブログタイトル画像を作ろう!

あなたは今このブログをどのデバイスで見ていますか?

上に貼った画像はPCの画面ですがPCではタイトルの画像がちょっと小さく感じますね

でもこれがスマホ画面になるとこの通り

かなりミッチリしたサイズになります

タブレット画面だとこんな感じに

WordPressではこうしたデザインのサイズ感をサイドバーの切り替えボタンで簡単に切り替えられるんです

↓画像の一番下の部分に三つのディスプレイアイコンがあるのでここで切り替えます

このアイコンをクリックすると、右側にプレビュー画面が出ます

とっても便利で感動しました!

さて、肝心のタイトル画像ですが縦横比が重要になるようです

今の画像の前にはPC画面に合うように横長のタイトルも作ってみました

PC画面のプレビューでは良い感じだったのですがスマホ画面になると右端のハンバーガーメニューに画像が被ることが判明

色々と試した結果現在のシンプルなタイトル画像に落ち着きました

サイズは356ピクセル×86ピクセルです

ブログのタイトルもかなり悩んで決めました

大切なのは[どんな情報が載っているか分かるタイトル]かなって思っています

FWAFWA houseのブログはネットショップとネコぱんというキャラクターの情報が一番多くメインとなる予定なのでこのタイトルにしました

ブログのタイトルはSEOでも強い部分になるらしいので

検索されやすいワードを盛り込むのが大事みたいです

なのでもしかしたらちょっとタイトル変えるかもしれないですがしばらくはこれでいきますね♪

2. カテゴリ別ヘッダーメニューを設定しよう!

初心者の私が異様に苦労したメニュー設定に進みます

ここでつまづくのはWordPressに慣れていない初心者ならでは・・かもしれないです

WordPressのブログ制作で魅力的な部分の一つがこのメニューだと思います

テンプレートによってあったりなかったり形が違ったりするのですが

私はこのメニューが分かりやすい部分にあるテンプレートを探してEmanonを選んだと言っても過言ではありません

たまたま辿り着いたブログで、このブログ面白いなー!って思った時って

似たような記事他にもないかな?って思いませんか??

そんな時にすぐカテゴリ別の記事を探せるのがメニューです!

ごちゃごちゃ言っちゃったけど本題にGO!笑

ブログ記事をカテゴリ別に見れるメニューを作りたいので設定をしていきます

ここでWordPressのトラップが発動します

メニューの設定だからと左のバーからメニュー画面を開くと

上の画面では既に設定の後なので分かりにくいですが

メニュー構造のところに何もない画面が表示されました

選べるものがないけど!?ってなるのですが実はこの画面はあらかじめ設定した物を選択する画面なのでした

カテゴリ別のメニューを作りたい時はまずはカテゴリから設定をする必要があります

これに気づくのに30分ぐらいかかったで工藤

こっちが最初に設定するべきカテゴリ画面です

カテゴリ名は画面に表示される名前なので

ブログに訪れてくれた人が分かりやすい名前にしましょう♪

親カテゴリを選ぶと下層カテゴリが作れます

[FWAFWA house]というカテゴリの中には[新着ニュース][販売作品について]の二つの子カテゴリを作りましたよ

営業日やショップ内の変更点のお知らせは[新着ニュース]に

販売している作品については[販売作品について]に投稿していきます

スラッグってのはちょっと何言ってるかわかんないので今後の課題にします笑

必要なカテゴリを設定したらようやくメニュー画面に移ります

最初は何もなかったメニュー画面、でも最初から[メニュー項目を追加]の部分にカテゴリーってのがあったんです

気が付いてからだと分かりやすいなって思うのですが、不慣れだとこれだけじゃ分からん〜〜

カテゴリ設定で設定したカテゴリがずらっと出るので選択して[メニューに追加]します

すると何故か同階層にカテゴリが出ちゃうのでドラッグして親階層に掘り込みましょう!

これでカテゴリ別のメニュー設定が完了しました

こんな感じでヘッダー部分にカテゴリ別でメニューが表示されます

個人的にブログの左カラムや右カラムってスクロールしないとカテゴリにたどり着かないのが面倒に思います

テンプレートの見た目はまだここまでしかいじれないので

次回はブログの投稿について書こうかなと思います♪

カラーミーショップのテンプレートを使用して作成したネットショップも運営しています

良かったら見に来てください!

http://fwafwahouse.com

スポンサーリンク