【初心者向け】お勧めのテーマSimplicityのインストールと簡単なカスタマイズ方法

ゆうそうとではWordPressの初級講習を行うことが多くなってきました。インストールや設定に続いてテーマを選択することになるのですが、たくさんあるテーマのうちどれがお勧めか?ということについてはかなり迷います。
テーマのプレビューなどが高機能でかっこよいものをそのまま使えれば良いのですが、画像コンテンツがたくさんあることが前提となっているとか、カスタマイズが大変とかいう場合が多いです。
私の今のおすすめのまず一番目はやはり、Simplicityです。ということで、初心者の方向けにSimplicityのインストールと簡単なカスタマイズ方法について書いてみようと思います。

Simplicity2のダウンロードとインストール

Simplicity@わいひら さんが作られている、シンプルで使いやすいテーマです。今までずいぶんたくさんの方にこのSimplicityをお勧めしてきました。

またこのblogでも何度か取り上げさせてもらいました。

私の周りにはアフィリエイトで収入を得ている方が多くいます。見ているうちに「自分もアフィリエイトで収入を上げてみたい」と思うようになりました。 ということでアフィリエイトサイトを
Simplicityでサイトを作る方が身近に増えています。みなさんが作ったサイトを見るとやはりトップにそのサイトに合う画像を置くというカスタマイズをしているようです。 普通にヘ

親テーマ、子テーマのダウンロード

Simplicityのインストールはまずファイルをダウンロードすることから始めます。

https://wp-simplicity.com/

こちらがSimplicityのWebサイトです。このサイト自身もテーマはSimplicityで作られています。

右ブロックにある Simplicity2 というボタンをクリック

このページに移動します。ファイルはこのページの下の方の、

ダウンロード というボタンをクリックします

simplicity2.2.7.zip というファイルがダウンロードされます。これはSimplicity2テーマ(親テーマ)となります。

  • この数字の部分はバージョンが上がると変わります。

次にカスタマイズが容易になるように最初から子テーマを使うことにします。子テーマは

ページ右ブロックにある Simplicity2 子テーマ というボタンをクリックします

このページに移動します。ファイルはこのページの下の方の、

ダウンロード をクリックします。

simplicity2-child20160110.zip というファイルがダウンロードされます。
* 数字の部分はバージョンが上がると変わることがあります。

テーマのインストール

今ダウンロードした2つのファイルを使ってインストールをします。

ダッシュボード 外観>テーマ をクリック

新規追加 をクリック

テーマのアップロード をクリック

親テーマからアップロードします。保存しておいた simplicity2.2.7.zip を指定して、今すぐインストール をクリック

インストールが終わるとこの表示になるので テーマの表示に戻る をクリック

再び 新規追加 をクリック

テーマのアップロード をクリックして

ファイルを選択 をクリックして、

先ほどダウンロードした子テーマ simplicity2-child20160110.zip を指定して、今すぐインストール をクリック

インストールが終わったら 有効化 をクリック。これでSimplicity2の子テーマが適用されました。

サイトを表示すると、このようになっています。

Simplicityの初期設定をする

Simplicityの初期設定をします。

アドミンバーの カスタマイズ をクリック。

レイアウト(全体・リスト) をクリック

初期状態だとこのようになっています。これを

完全レスポンシブ表示を有効 にチェックを入れて、保存して公開 をクリックします。

初期状態だと幅を縮めたときに、

記事がはみ出したり、横スクロールバーが出ていますが、完全レスポンシブ表示を有効 にすると、

このように、記事がはみ出さず横スクロールバーも出なくなります。忘れがちなので最初にこれをしておくといいと思います。

色やデザインを変更してみる

ここから自分のサイトに合わせて色やデザインを変更する簡単なカスタマイズをしていきます。今回は初心者向けに一番簡単に自分らしいサイトにできるように考えてみました。

ヘッダーに画像を入れる

ヘッダーに自分のWebサイトに合う画像を入れてみます。使いたい画像が特になければ

フリー素材写真

https://unsplash.com
https://www.pakutaso.com

などから、写真を利用するのもいいかと思います。利用方法などについては、

Webサイトで使う素材をいろいろなサイトで探して使っています。今回は「商用利用可能」「センスが良い」「高画質」「無料」の写真素材サイトunsplashについて書きます。

このblogは画像を使うことが多いのでアイキャッチ的に使う1つめの大きな画像はblog内で貼り付けた画像を適当に組み合わせたものを作って挿入しています。 しかし、たまにどうして

このあたりの記事をご参照ください。

画像をヘッダに指定するにはまず、ヘッダの高さを指定します。

アドミンバーの カスタマイズ をクリック。

ヘッダー をクリック

ヘッダーの高さ200 にして 保存して公開 をクリック

× をクリックして、いったんカスタマイズを終了します。ここでいったんカスタマイズを終了しないと今指定した高さ200が生きてこないので、ちょっと面倒ですがこの手順で行ってください。

先ほどと同じ手順でカスタマイズの画面を再度表示して、

ヘッダーをクリック

画面幅いっぱいにヘッダー画像を表示しようと思います。ヘッダー外側背景画像画像を選択 をクリック

ヘッダーとして使いたい画像を指定して(アップロードしていなければここでアップロードする)、画像の選択 をクリック

もう一カ所、メニューも幅いっぱいにしたいので グローバルナビを横幅いっぱいにする にチェックを入れてから、保存して公開 をクリック

表画面を見てみると

自分が指定した画像がヘッダーに表示され、画像とメニューは幅いっぱいになりました。

全体的な色を変更する

Simplicityの初期の状態だと灰色を中心とした色となっています。これを自分のサイトに合わせて変更します。

同じ手順でカスタマイズの画面を表示して、

をクリック

色を指定する画面になるので、





このように背景を薄い黄色にして、他は茶色の濃淡にしてみました。

保存して公開 をクリック

表画面を見ると、

このように色が変わっているのが分かります。

幅を縮めてスマホ表示をしたときも、

このようにカスタマイズされているのが分かります。

まとめ:Simplicityを使うときはヘッダ画像を入れて、色を変えるだけでだいぶ雰囲気が変わります

Simplicityを使うときはヘッダ画像を入れて、色を変えるだけでだいぶ雰囲気が変わります。

他にも、

「スライドショーを簡単に挿入できるプラグインSlideshowで画像・テキスト・ビデオスライドショーを作る」という記事で、Slideshowというプラグインを使って簡単に3種類

スライダーを入れたり、

トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウィジェットエリアを作りました。今回は私の周りでじんわ

トップページに文言を追加したり、することもできます。

Simplicityは他にも機能が豊富ですので、カスタマイズから色々いじってみるとより自分らしいサイトになると思います(^^)/

おまけ。今回のように色を変更するときに参考になるサイトを

WEBの色をどうしようかなぁと思ったときに良くお世話になるサイト3つを紹介します。

こちらでご紹介しています。よろしければこちらも見てみてください(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。
[スポンサードリンク]

コメントを残す