Press "Enter" to skip to content

テーマの設定とカスタマイズ

まずWebサイト作りを極めるにはテーマの選択から始めよう!

テーマを探す

WordPress テーマ検索

ダッシュボードのメニューから[テーマ]をクリックして選択します。

最初は推奨テーマが列挙されていますが、今回は公式が制作したテーマを選択したいので、画面一番下にある[すべてのテーマを表示]をクリックします。

WordPress twenty 検索

公式が制作した「Twentyシリーズ」を検索します。

検索窓の右端で[無料]をクリックし「twenty」と検索しましょう。

WordPress twenty fifteen

今回は「Twenty Fifteen」(意味:2015)をクリックで選択してみましょう。

テーマの有効化とカスタマイズ

WordPressでテーマの有効化

[このデザインを有効化]をクリックします。
きちんと「無料」ということも確認しておきましょうね。

有効化するとこのようなポップアップが表示されます。

[サイトをカスタマイズ]をクリックします。

WordPress デザイン カスタマイズ

注.もしポップアップを非表示にしてしまっても、ダッシュボードのメニューから[デザイン]>[カスタマイズ]をクリックすることでテーマのカスタマイズを行えます。

注目すべきポイント

Webサイトのデザインで重要なポイントは3つです。

  1. トップページ
  2. メインメニュー
  3. サイドメニュー(あるいはフッター)

今回のテーマカスタマイズではこの3つのポイントに焦点を当てていきたいと思います。

トップページの確認

実際どんなデザインになっているのか、マウスホイールをくるくると回転させて上から下まで見てみましょう。今回選んだテーマはツーカラムのデザインなので「サイトタイトル>ホーム画面>最新記事>フッター」そして「サイドバーが左側」という配置でできていますね。

メニューは欲しいよね、やっぱり

メインメニューがなくて、今後固定ページなどを追加していったときに困りそうですね。ということでメインメニューを表示させましょう。

カスタマイズツールバーの[メニュー]をクリックします。

メニュー画面では、「Primary」というメニューがデフォルトで用意されています。今回はこの「Primary」を使いますが、新規でメニューを作ることもできます。

では[Primary]をクリックしましょう。

メニュー名はお好きなように変更できます。今回は「メインメニュー」と書き換えておきましょう。

さてこの「メインメニュー」にはホームとブログフィードという固定ページの2つがメニュー項目として用意されていますね。

ここで重要なのは「メニューの位置」です。

「メニューの位置」で「メインメニュー」の置き場所を選ぶことができます。[メイン]にチェックを入れましょう。

これで「メインメニュー」がWebサイト上で表示されるようになりました。

サイトのタイトル下に「メインメニュー」が表示されているのがわかると思います。

サイドバーにウィジェットを追加したい

とりあえずメインメニュー関係の編集は終わりとしておきます。画面左のツールバーから[<]をクリックして「最初のメニュー画面」まで戻りましょう。

[ウィジェット]をクリックして選択しましょう。

ここでウィジェットエリアに配置するものを管理することができます。

今回選んだテーマはサイドバーにウィジェットが追加されます。

[ウィジェットを追加]をクリックします。

今回は例として「カテゴリー」と「人気の投稿とページ」を選択して、ウィジェットエリアに追加しましょう。

これでメインメニューの下にあるウィジェットエリアに「カテゴリー」と「人気の投稿とページ」が追加されました。このようにしてサイドバーを充実させていきます。

デザインしたサイトを公開

WordPress デザイン 公開

デザインが終わったら、[公開]ボタンをクリック、次に[X]ボタンをクリックしてカスタマイズを終了しましょう。

ここで間違えて[X]ボタンを[公開]よりも先に押すとやり直しになるかもしれませんのでご注意を。

サイトのキャッチフレーズ

テーマのカスタマイズで公開をしたわけですが、実はまだ世界中に向けて公開されているわけではありません。非公開状態です。
今のうちにサイトのキャッチフレーズを書いておきましょう。

ダッシュボードの[管理]>[設定]をクリックします。

サイトのタイトルやキャッチフレーズの設定画面がでてきます。
ここでどのようなサイトなのかを入力しておきましょう。

書き終わったら右上にある赤いボタン[設定を保存]をクリックしておきましょう。

サイトの立ち上げ

テーマのカスタマイズとサイトのキャッチフレーズができたところで、「サイトの立ち上げ」(公開状態にする)を行いましょう。

キャッチフレーズを設定した画面を下にスクロールすると「サイトの立ち上げ」が見えてきます。

WordPress サイトの立ち上げ

[サイトの立ち上げ]ボタンをクリックします。

サイトのアドレス購入と有料プランをすすめられますが、その気がない方は迷わず一番したの[「購入」をスキップ]をクリックして、プランも無料プランで続行しましょう。

プライバシー設定

WordPress プライバシー設定

同じく[管理]>[設定]画面でプライバシー設定を行うことができます。

ここは皆様のお好きなように設定しましょう。
サイトのカスタマイズ中やコンテンツが少ないうちは、非公開でも良いかもしれませんね。

ホームの編集

順番が変な感じもしますが、ホーム画面の編集を行いましょう。
ホーム画面はテーマのカスタマイズでは行えません。
実のところこれは固定ページなのです。
なので固定ページの「ホーム」というページを編集します。

ダッシュボードの[サイト]>[固定ページ]をクリックして、固定ページの一覧を表示させましょう。

一覧の中から「ホーム」を見つけてクリックしましょう。

これでホーム画面の編集ができます。

これがホーム(固定ページ)の編集画面となります。
ここでホームのタイトルやカバー写真を編集できるわけですが、編集方法は通常の固定ページや投稿の編集と同じです。
細かい編集方法、エディターの使い方については別の記事にて詳しく解説していきます。

今回はおそらくいらないであろう「ブログをフォローしてください」という若干古臭いデザインを消してみましょう。

見出しの「ブログをフォローしてください」をクリックして選択して、ブロックのツールバーを表示させます。そしてツールバー右端の3点リーダーをクリックして、[ブロックを削除]をクリックします。

これで見出しを消すことができました。あとは同じ要領で「新しいコンテンツ…」とその下にあるショートコードブロックを選択して削除しましょう。

ここまでまっさらな状態にしたら、編集を終えましょう。

(ホーム画面で表示させたいコンテンツがあれば、それを追加してもOKです)

画面右上の[更新]をクリックします。

画面左上の[<]ボタンをクリックしてダッシュボードに戻りましょう。

これでホーム画面の編集は終わりです。

終わり

テーマの選択からカスタマイズまで早足で駆け抜けてきましたが、どうでしたでしょうか。

メニューやホーム画面の編集は皆様個人個人で、方向性や趣味が異なるでしょうから、今後の編集は皆様のお好きなようにやっていただくしかありません。

疑問点はコメントしていただければ、回答できるかもしれません。

それでは今回はこれにて、終わります。

次はこちらから

Be First to Comment

コメントを残す

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