【初心者向け】WordPressの優良無料テンプレートのインストール。~Simplicityをカスタマイズ~01

スポンサーリンク

はじめに

WordPressでブログを始めようと思っても、何から始めたらいいかわからないことだらけですよね。私もそうでした。

htmlやcssの基本的な知識はあるけど、実際のブログの運用や、デザインのカスタマイズなどはさっぱり。いろいろな人のサイトを参考に始めることにしました。

現在、このサイトはSimplicityという無料のテーマを使っているのですが、これから少しずつカスタマイズしていくつもりです。その軌跡を残しておくことが、誰かの役に立つのではないか、と思い記事にすることにしました。

私自身WordPressの知識が少ないので、間違っている点や非効率なことを書いているかもしれませんが、そこは大目に見てくださいな。

こういう技術系のブログは、書いてあることをその通りにやってもうまくいかないことが多いです。初心者だと、何が悪くてうまくいかないのか。検討がつかないので、ちょっとしたミスや勘違いでも、ものすごく時間を取られてしまいます。それはとってももったいないことなので、些細なことでもコメントで聞いてください。

あなたが疑問に思ったことは、他の誰かも持つ疑問のはず。あなたが質問することでみんなの役に立つのがインターネットの良さだと思っています。

WordPressのテーマ選び、ドメインの取得、サーバー契約

ここは、そのうち別の記事で書こうと思います。

テーマはSimplicity、ドメインはお名前.comで取得、サーバーはXサーバーのX10プランで契約し、WordPressの簡単インストール機能を使いました。

お気に入りのWordPressテーマをインストールして設定する方法

初めて自分の作ったサイトにアクセスすると、こんな画面でした。元から用意されていた「Twenty Fifteen」というテーマです。殺風景ですね。

Twenty-Fifteenの画面

ここから少しずつカスタマイズしていきます。

自分が使おうと決めたテーマ(テンプレート)をインストールします。今回はSimplicityですので、配布しているサイト(http://wp-simplicity.com/)から最新版をダウンロードしました。

「最新版のダウンロード」 → Simplicity開発版の「ダウンロードボタン」

最新版のダウンロード

最新版の親テーマ

あわせて、子テーマもダウンロードします。カスタマイズするときは子テーマを編集するとだけ覚えておきましょう。理由は、こちらで解説されています(http://nelog.jp/wordpress-child-theme)。

「子テーマのダウンロード」 → 子テーマ(無印)の「ダウンロードボタン」

最新版子テーマ

※他のテーマを使用する場合、「◯◯(テーマ名) インストール」などで検索すれば情報がありますので、調べてみてください。公式に配布されているテーマであれば、zipファイルを外部サイトでダウンロードせず、管理画面から直接インストールできます。

zipファイルがダウンロードできたので、これをWordPressにインストールします。

設定画面から、「外観」 → 「テーマ」 → 「新規追加」を選びます。

150715tuika

「テーマのアップロード」を選択し、「ファイルを選択」。先ほどダウンロードしたzipファイルを選択します。

テーマのアップロード

スクリーンショット 2015-07-15 15.26.36    スクリーンショット 2015-07-15 15.31.38

「いますぐインストール」からインストールします。

スクリーンショット 2015-07-15 15.32.05

「テーマのページに戻る」を選択し、同じ手順で、もう一つの子テーマのzipファイルもインストールします。

スクリーンショット 2015-07-15 15.33.26

このあたりのWordPressの設定画面は、慣れるまで大変だと思います。どこに何があるのやら。初めてのときは敷居が高いです。でも、少しずつわかってくるはずなので、「習うより慣れよ」の気持ちでいましょう。

「外観」 → 「テーマ」に戻ると、ダウンロードしたテーマが表示されています。子テーマの方を選び、「有効化」します。

スクリーンショット 2015-07-15 15.52.16

スクリーンショット 2015-07-15 15.52.30

「新しいテーマを有効化しました。サイトを表示する」と出るのでサイトを確認しましょう。

スクリーンショット 2015-07-15 15.53.03

これまでと画面構成が変わっていれば成功です。

新画面

ワードプレスの管理画面と、実際の画面を2つとも表示させる方法

先ほどはテーマの画面から「サイトを表示する」をクリックして、実際の画面を確認しましたが、管理画面から表示させることもできます。

設定画面左上の家のアイコンがついた「◯◯(ブログ名)」にカーソルを合わせ、「サイトを表示」でOKです。

スクリーンショット 2015-07-15 15.59.56

もしくは、アドレスバーにサイトのアドレスを直接打ち込んでも良いです。

私の場合、管理画面のアドレス「東大卒夫婦.com/wp-admin/」をお気に入りに登録しています。別のタブでサイトを表示させ、Ctrl + Tabのショートカットキーで二つの画面を素早く切り替えています。

お疲れ様でした。

★☆↓↓毎日更新しているアメブロ↓↓☆★
東大卒の理系夫婦〜共働き2歳差育児

LINE@やっています。ちゃこと直接話してみたい方はクリックを^^
育児中のママ向けのメッセージをたま〜に配信しています♪
友だち追加
にほんブログ村 教育ブログ 幼児教育へにほんブログ村 子育てブログ 2015年4月~16年3月生まれの子へにほんブログ村 子育てブログ 2017年4月~18年3月生まれの子へ

スポンサーリンク

ツイッターのフォローボタン
日頃感じていること、子育ての様子をツイートしています♪

スポンサーリンク

感想・質問をお書きください

名前の欄はニックネームで構いません。また、コメントはスパム防止のため、承認制となっています。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください