ワードプレス講座：6日目

6日目の今日は、

サイトのカスタマイズ

をしていきます。

このカスタマイズこそ、ワードプレスの醍醐味！
ここはまさにこだわりポイントです。
自分の好きなデザインにすることも、
自分らしさの表現という意味ではもちろん大切ですが、
お店で言えば内装の部分なので、
来てほしいお客さんに合わせた雰囲気作りが
とっても大事になってきます。

常に
・どんな人に来てほしいのか
・どんな雰囲気の人だと思ってほしいのか
ということを意識して、サイトのデザインを決めていきましょう。

スキンを設定しよう

まっしゅ

サイト全体のデザインを
一括で変更できてしまいます！
超便利！

0:00 スキンの設定
0:46 スキンを設定する
2:08 スキンをプレビューで選ぶ
3:58 デザインを変える時に意識すること

サイドバーをカスタマイズしよう

ウィジェットという機能を使って
サイドバーをカスタマイズします

1:02…ウィジェットとは
2:11…サイドバーとサイドバースクロール追従
2:58…サイドバーをカスタマイズする

まっしゅ

サイドバーは、ワードプレスのデザインの中でも
特によく目に付く場所なので、
読者にどんな情報を与えたいか
よく考えて設定しましょう！

ヘッダーを設定しよう

ヘッダーにロゴと背景を設定する方法です。

ヘッダーとは、サイトの一番上の部分のこと。
そのページでも、最初に読者の目に付く場所なので、
ぜひ見た目にはこだわりたいところですね！

0:00 ヘッダーの設定
0:45 ヘッダーロゴの設定
1:22 ヘッダー背景の設定
1:51 キャッチフレーズを非表示にする
2:34 ヘッダーの高さを設定する

今回の動画では、ロゴをLOGASTERというサイトで。

背景は、次の講座で紹介しているCanvaを使って、
幅1240px・高さ300pxで作成しました。

ヘッダーのサイズは、PCのディスプレイサイズによっても見え方が変わるし、
ましてスマホにも対応しようとすると、なかなか思うように表示してくれません。。

自分が納得のいく形になるまで、
試行錯誤しながら作っていくことになります。

まっしゅ

ちょっと大変な作業になりますが、
じっくり取り組んでみてください！

Canvaの使い方

Webサイトを作っていくと、
前回の講座のようなヘッダーロゴや
アイキャッチといった
画像を作る場面が結構出てきます。

ブログ記事やサイトの雰囲気作りという意味でも
こだわっていきたいポイントですが、
専門のソフトを使うのは
コスト面でも技術面でもハードル高いですよね。。

そんな時に使えるのが、Canvaというデザインツールです。

https://www.canva.com/

直感的に使えて
おしゃれな素材も豊富。
普通に使う分には
無料でも十分に機能します。

※一部、Pro（有料版）でしか使えない素材（写真・フォントなど）や機能があります

この講座では、基本的な使い方をレクチャーしています。

0:00 Canvaの使い方
1:25 Canvaのオススメポイント
2:48 テンプレートを使ってデザインを作る
3:14 データのアップロード
3:26 写真を利用する
3:52 Pro（有料版）でできること
4:42 フレームを使ってみる

まっしゅ

まっしゅのサイトの画像も
ほとんどこのCanvaで作ってます！

アイキャッチ画像を設定しよう

ブログをSNSなどにシェアした時に表示される
アイキャッチ画像について、
作り方と設定の仕方についてレクチャーします。

0:00 アイキャッチとは
1:09 Canvaで作成します
1:20 サイズを指定する
1:59 背景の写真を追加する
2:46 テキスト(文字)を追加する
4:22 テキストを強調する
5:02 素材の位置を調整する
5:43 フレームを使ってプロフィール画像を効果的に載せる
6:50 テキストを読みやすくするオススメテクニック
8:09 完成したらダウンロードする
8:53 TinyPNGを使って画像のサイズを軽くする
9:59 作成した画像をアイキャッチに設定する
11:08 SNSに反映されない時の対処法
12:38 まとめ