ゆうそうとではWordPressの初級講習を行うことが多くなってきました。インストールや設定に続いてテーマを選択することになるのですが、たくさんあるテーマのうちどれがお勧めか？ということについてはかなり迷います。
テーマのプレビューなどが高機能でかっこよいものをそのまま使えれば良いのですが、画像コンテンツがたくさんあることが前提となっているとか、カスタマイズが大変とかいう場合が多いです。
私の今のおすすめのまず一番目はやはり、Simplicityです。ということで、初心者の方向けにSimplicityのインストールと簡単なカスタマイズ方法について書いてみようと思います。
Simplicity2のダウンロードとインストール
Simplicityは @わいひら さんが作られている、シンプルで使いやすいテーマです。今までずいぶんたくさんの方にこのSimplicityをお勧めしてきました。
またこのblogでも何度か取り上げさせてもらいました。
[ryus_blogcard url=”https://usortblog.com//simplicity/”]
[ryus_blogcard url=”https://usortblog.com//simplicity-full-width-header-image/”]
親テーマ、子テーマのダウンロード
Simplicityのインストールはまずファイルをダウンロードすることから始めます。
こちらがSimplicityのWebサイトです。このサイト自身もテーマはSimplicityで作られています。
右ブロックにある Simplicity2 というボタンをクリック
このページに移動します。ファイルはこのページの下の方の、
ダウンロード というボタンをクリックします
simplicity2.2.7.zip というファイルがダウンロードされます。これはSimplicity2テーマ（親テーマ）となります。
- この数字の部分はバージョンが上がると変わります。
次にカスタマイズが容易になるように最初から子テーマを使うことにします。子テーマは
ページ右ブロックにある Simplicity2 子テーマ というボタンをクリックします
このページに移動します。ファイルはこのページの下の方の、
ダウンロード をクリックします。
simplicity2-child20160110.zip というファイルがダウンロードされます。
* 数字の部分はバージョンが上がると変わることがあります。
テーマのインストール
今ダウンロードした２つのファイルを使ってインストールをします。
ダッシュボード 外観＞テーマ をクリック
新規追加 をクリック
テーマのアップロード をクリック
親テーマからアップロードします。保存しておいた simplicity2.2.7.zip を指定して、今すぐインストール をクリック
インストールが終わるとこの表示になるので テーマの表示に戻る をクリック
再び 新規追加 をクリック
テーマのアップロード をクリックして
ファイルを選択 をクリックして、
先ほどダウンロードした子テーマ simplicity2-child20160110.zip を指定して、今すぐインストール をクリック
インストールが終わったら 有効化 をクリック。これでSimplicity2の子テーマが適用されました。
サイトを表示すると、このようになっています。
Simplicityの初期設定をする
Simplicityの初期設定をします。
アドミンバーの カスタマイズ をクリック。
レイアウト（全体・リスト） をクリック
初期状態だとこのようになっています。これを
完全レスポンシブ表示を有効 にチェックを入れて、保存して公開 をクリックします。
初期状態だと幅を縮めたときに、
記事がはみ出したり、横スクロールバーが出ていますが、完全レスポンシブ表示を有効 にすると、
このように、記事がはみ出さず横スクロールバーも出なくなります。忘れがちなので最初にこれをしておくといいと思います。
色やデザインを変更してみる
ここから自分のサイトに合わせて色やデザインを変更する簡単なカスタマイズをしていきます。今回は初心者向けに一番簡単に自分らしいサイトにできるように考えてみました。
ヘッダーに画像を入れる
ヘッダーに自分のWebサイトに合う画像を入れてみます。使いたい画像が特になければ
フリー素材写真
https://unsplash.com
https://www.pakutaso.com
などから、写真を利用するのもいいかと思います。利用方法などについては、
[ryus_blogcard url=”https://usortblog.com//cc0-licenseo-free-photo-unsplash/”]
[ryus_blogcard url=”https://usortblog.com//free-photo-site-201510/”]
このあたりの記事をご参照ください。
画像をヘッダに指定するにはまず、ヘッダの高さを指定します。
アドミンバーの カスタマイズ をクリック。
ヘッダー をクリック
ヘッダーの高さ を 200 にして 保存して公開 をクリック
× をクリックして、いったんカスタマイズを終了します。ここでいったんカスタマイズを終了しないと今指定した高さ200が生きてこないので、ちょっと面倒ですがこの手順で行ってください。
先ほどと同じ手順でカスタマイズの画面を再度表示して、
ヘッダーをクリック
画面幅いっぱいにヘッダー画像を表示しようと思います。ヘッダー外側背景画像 の 画像を選択 をクリック
ヘッダーとして使いたい画像を指定して（アップロードしていなければここでアップロードする）、画像の選択 をクリック
もう一カ所、メニューも幅いっぱいにしたいので グローバルナビを横幅いっぱいにする にチェックを入れてから、保存して公開 をクリック
表画面を見てみると
自分が指定した画像がヘッダーに表示され、画像とメニューは幅いっぱいになりました。
全体的な色を変更する
Simplicityの初期の状態だと灰色を中心とした色となっています。これを自分のサイトに合わせて変更します。
同じ手順でカスタマイズの画面を表示して、
色 をクリック
色を指定する画面になるので、
このように背景を薄い黄色にして、他は茶色の濃淡にしてみました。
保存して公開 をクリック
表画面を見ると、
このように色が変わっているのが分かります。
幅を縮めてスマホ表示をしたときも、
このようにカスタマイズされているのが分かります。
まとめ：Simplicityを使うときはヘッダ画像を入れて、色を変えるだけでだいぶ雰囲気が変わります
Simplicityを使うときはヘッダ画像を入れて、色を変えるだけでだいぶ雰囲気が変わります。
他にも、
[ryus_blogcard url=”https://usortblog.com//slideshow-simplicity/”]
スライダーを入れたり、
[ryus_blogcard url=”https://usortblog.com//toppage-widget-simplicity/”]
トップページに文言を追加したり、することもできます。
Simplicityは他にも機能が豊富ですので、カスタマイズから色々いじってみるとより自分らしいサイトになると思います(^^)/
おまけ。今回のように色を変更するときに参考になるサイトを
[ryus_blogcard url=”https://usortblog.com//websitecolorref/”]
こちらでご紹介しています。よろしければこちらも見てみてください(^^)/
コメント
コメント一覧 （3件）
タイトルの下のキャッチコピーを2段組にして、フォントを大きくする方法は
ありますでしょうか？
デフォルトだとbloginfo(‘description’)は、一行表示で字も小さいので、キャッチコピーを大きくしたいと考えています。
とりあえず、header.phpを触らないとだめだとおもい、simplicity2.phpに手を加え2段表示にしました。
ありがとうございました。
八木さん、こんにちは！時間が出来たら試してみようと思いつつ時間が経ってしまいました。時間ができたらわたしもトライしてみたいと思います！