【WordPress】初めてのブログ・デザインを変えてみる【Cocoon】

Blogを始めてみる

こんにちは、Zukkaです。

前回は「作っておきたい3つの固定ページの設定」を説明しました。

どうでしょう、WordPressの画面には少し慣れてきましたか?少し慣れてくると、WordPressのシンプルな画面が少し物足りなく感じたり、サイドメニューの表示が少し気になったりしてませんか?

本格的にデザインするのはもう少し後で良いと思いますが、少しだけいい感じの見た目に整えていきましょう。

ブログの見た目を整える

管理画面左のメニューの上家のマーク仮タイトルにマウスを乗せ、下のサイトを表示を右クリック、新しいタブで開くをクリックすると、新しいタブで自分のブログのトップページが表示されます。

まだ何もデザインされていないので、WordPress の初期画面になっています。

そのままだと少し使いにくいので、やはりブログの内容に合わせたり、自分の好きな雰囲気だったり、何かしらデザインを加えて良い感じの見た目にしておきたいですよね。

では順番に説明していきます。

テーマの設定

まずはテーマの設定をします。

サーバーの契約の時にテーマを選択したので、ここでは無料のテーマ「Cocoon」の設定をします。

左のメニューから外観テーマをクリックします。

テーマの画面のテーマの一覧からCocoonの親テーマ有効化します。

続いてCocoonの子テーマ有効化します。

親テーマはデザインや機能の基本のデータ子テーマはカスタマイズしたデータなので、必ず両方のテーマを有効化しておきましょう。子テーマの有効化をしないと、親テーマのバージョンアップされたときにせっかくカスタマイズした内容も消えてしまう場合があります。

テーマを有効化した後にブログのトップページを表示して確認してみてください。初期画面に比べると、シンプルですがだいぶブログっぽいデザインに変わっています。

もう少し、デザインを整えていきましょう。

スキンの設定

スキンは、用意されたテンプレートで画面全体のデザインをかっこよくできる着せ替え機能です。

左のメニューからCocoon設定をクリックします。

Cocoon設定の画面の上の見出しからスキンをクリックします。

画面を下にスクロールして、スキン一覧から好きなものを選択します。

デフォルトでは無しが選択されているので、それぞれのスキンの写真マークにカーソルを乗せると、実際のデザインの画面がプレビューされるので、確認しながら選んでみましょう。

私が使用しているのは、y.hiroaki さんのカラフルラインというスキンです。

選択したら、左下の変更をまとめて保存をクリックします。

保存すると一番上にプレビューが表示されるので、見ながら決めると分かりやすいですね。

ヘッダーの設定

タイトルとキャッチフレーズ

ご自分のブログ名はもう決まりましたか?決まったら早速タイトルを入力していきましょう。

左のメニューから設定一般をクリックします。

一般設定の画面で、サイトのタイトルに入力します。

キャッチフレーズがあればその下のキャッチフレーズに入力します。

キャッチフレーズにはデフォルトで「Just another WordPress site」と入力されていますので、必要ない場合は消しておきましょう

タイトル、キャッチフレーズ共に、そのブログがどういうブログなのかを分かってもらう大切な部分です。自分の書きたいブログの内容が伝わりやすく、覚えてもらいやすいタイトルを考えましょう。

入力したら、左下の変更を保存をクリックします。

おまけ・画像を入れてみる

他の人のブログなどを見ていると、タイトルの所の写真がかっこいいなあ…って思ったりしますよね。

やってみましょう!

選んだスキンのヘッダー部分に画像を入れるスペースがある場合、自分で撮影した写真などを入れてみましょう。自分で撮影した写真がない場合は、無料でフリー素材を使用できるサイトからダウンロードしてみましょう。

他の人が撮影したフリー素材ではない写真や、他の人がSNSなどに載せている写真を無許可で使用してはいけません!

私が使用しているフリー素材は

PAKUTASO(ぱくたそ)

O-DAN(オーダン)

からお借りしているものが多いです。

PAKUTASOは、風景や人物のフリー素材がたくさんあり、登録なしで利用できます。

O-DANは、海外のおしゃれなフリー素材がたくさんあり、日本語で検索できて便利です。

他にもイラストのフリー素材がたくさんある「いらすとや」なども有名です。

デメリットとして、手軽に使えるサイトの写真は他の方たちもたくさん使用しているので、被ってしまうことも多いです。

クオリティの高い画像を使用したい、他の人被らない画像を使用したいという方は、PIXTAなどの有料の素材サイトを利用するのが良いでしょう。

それぞれサイトの利用方法が違うので、規約などをよく読んで使用しましょう。またブログの収益化を考えている方は、商用利用できる素材かどうかを確認して使用しましょう。

画像を設定する場合は、左のメニューからCocoon設定をクリックし、上の見出しのヘッダーをクリックします。

ヘッダー背景画像選択ボタンをクリックして、ファイルを選択をクリックして画像を選びます。

左下の変更をまとめて保存をクリックして、プレビューで確認してみましょう。

グローバルメニューの設定

グローバルメニューは、ヘッダーの下に表示されるメニューです。

このブログにどんな記事があるのか、分かりやすく表示しましょう。

左のメニューから外観メニューをクリックします。

メニュー画面のメニューを編集タブで、一番上の新しいメニューを作成しましょうをクリックします。

メニュー構造でメニュー名を入力して、メニューを作成ボタンをクリックします。

左のメニュー項目を追加からメニューに表示させたい項目にチェックを入れて、メニューに追加ボタンをクリックして追加します。

追加出来たら、メニュー設定ヘッダーメニューにチェックを入れて、左下のメニューを保存ボタンをクリックしします。

フッターメニュの設定

フッターメニューはページの一番下にあるフッターに表示されるメニューです。

フッターには、お問い合わせ、プライバシーポリシーなど、ブログに必要だけど、記事以外で、あまり見る人が少ない項目を表示させます。

左のメニュー外観メニューをクリックします。

メニュー画面のメニューを編集タブで、一番上の新しいメニューを作成しましょうをクリックします。

メニュー構造でメニュー名を入力して、メニューを作成ボタンをクリックします。

左のメニュー項目を追加からメニューに表示させたい項目にチェックを入れて、メニューに追加ボタンをクリックして追加します。

追加出来たら、メニュー設定フッターメニューにチェックを入れて、左下のメニューを保存ボタンをクリックしします。

サイドバーの設定

ブログの画面の右側に表示されているのがサイドバーです。

ブログ内を検索できる検索バーや、最新の記事、人気の記事など、読者が欲しい情報を表示しましょう。

左のメニュー外観ウィジェットをクリックします。

ウィジェット画面のサイドバーの▼をプルダウンして表示します。

ブロック」という項目がいくつか入っていますが、デザインを統一するために一度すべて削除します。

左側の利用できるウィジェットの中から、検索、最近の投稿、アーカイブ、カテゴリーなどサイドバーに表示させたい項目をドラッグして、サイドバーの下に入れていきます。

自分のブログのトップページを表示して確認してみましょう。

まとめ

まだ固定ページ以外の記事がない場合、表示される項目が少ないのであまりピンと来ないかもしれませんが、最初のCocoonのデザインと比べてみると、だいぶブログらしいデザインになっていると思います。

これで、記事を投稿する前にやっておいた方がいい設定や、ある程度の見た目を整える作業は終了です。この先記事を投稿していくうちに、ちょいちょい気になるところが出てくると思いますので、その都度「WordPress、Cocoon、○○○○」で検索してみて解決していきましょう。

あとはとにかく記事をたくさん書いて投稿して、自分のブログをスタートさせましょう!

私も、これがまだ7本目の投稿です。

一緒にがんばっていきましょう!