まっしゅワードプレス講座: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というデザインツールです。

Attention Required! | Cloudflare

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

※一部、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 まとめ
まっしゅ
まっしゅ

アイキャッチ画像のサイズは
1200×630ピクセルがオススメです!

 

ホームイメージを設定しよう

トップページをSNSなどでシェアした時に
表示される画像を設定します。

0:00 ホームイメージの設定
0:48 Canvaでホームイメージを作る
3:38 ホームイメージを設定する
4:46 まとめ

ファビコンを設定しよう

ブラウザのタブやブックマークに表示される
アイコン(ファビコン)の設定をします。

0:00 ファビコンとは
0:47 ファビコンを作る
1:52 ファビコンの設定

まとめ

いかがでしたでしょうか。
サイトのカスタマイズには、終わりはありません。
ボタンの配置ひとつの違いでクリックしてもらえる確率が大きく変わったり、
ちょっとしたデザインの違いで
あっという間に離脱(閉じるボタンや戻るボタンを押され)
してしまうことがあります。
明日解説するアクセス解析とも関わってきますが、
少しずつサイトの改善をしていくことが必要です。
また、ここで紹介した以外にも、カスタマイズの方法はたくさんあるので、
ぜひご自分でも調べながら、サイト作りに取り組んでいってください!

“わたしビジネス”無料メール講座


新しい時代を
好きな時間に
好きな場所で
好きな人と
好きな仕事で
生きていく。

そんな生き方を実現する
新しい時代のビジネス講座
“わたしビジネス”
20日メール講座を
無料で配信しています!

・新しい時代のビジネスとは?
・お金の本質をガッツリ理解する
・オンラインで商品を販売する3つのテクニック
など、実践的かつ汎用的な
ビジネスの考え方やテクニックを
惜しげもなくお伝えします!

"わたしビジネス"20日無料メール講座の購読はこちら


           
メルマガの内容について詳しくはこちら
無料メール講座のご案内
新しい時代を 好きな時間に 好きな場所で 好きな人と 好きな仕事で 生きていく。 そんな生き方を実現する 新しい時代のビジネス講座を 無料メールマガジンで発信しています。 “今の仕事をずっと続けていて本当にいい...

まっしゅルーム