初心者でも簡単でかっこいいサイトに!「Cocoon」のデザインカスタマイズ

ブログ作成

WordPressのテーマ「Cocoon」を利用してサイトを開設し、WordPressでの投稿など基本的なことはできるようなったけど、サイトのデザインをもっと自分好みに変更したい。

テーマを適用するだけでは、他のサイトと同じようなサイトになるので、誰もが最初に感じることです。

けれども、どこの設定を変更すればよいのかわからない、
という方にちょっとしたデザインの変更方法を説明します。

そんなに難しくない設定で、見た目がテンプレートよりは良くなるので
試していただければと思います。

私のサイトにも適用されているものもありますが、設定の変更はあくまで自己責任でお願いします。

固定ページの設定方法

例えばサイトの紹介ページでしたり、問い合わせのページなど、
ヘッダー部分やフッター部分に固定のページを作成したいけれどどうすればよいかわからない、
という方に、まずは固定ページの作成方法を解説します。

WordPress左側にある「固定ページ」から「新規追加」をクリックします。



ブログに投稿している要領と同じように「固定ページ」の内容を記載し、
公開」することで固定ページの作成が完了します。


ここで、注意が必要なのが「パーマリンク」の設定です。
URLスラッグに入力した内容がURLの最後の部分となります。


公開完了後、固定ページのURLをアドレスバーに直接入力し、ページが表示されるか確認します。
ページの表示が確認できたら、固定ページへのリンクを作成してみましょう。

WordPressでのヘッダーやフッターの設定

固定ページを作成した後は、
作成したページをヘッダー部分やフッター部分からリンクできるように設定していきましょう。

WordPress左側にある「外観」から「メニュー」をクリックします。


新規のメニュー作成画面が表示されるので、
メニュー構造にある「メニュー名」を入力し、「メニューを作成」をクリックします。

もし、新規メニュー作成画面が表示されない場合は、
「新しいメニューを作成しましょう」をクリック後メニュー名を作成します。

左側にある[メニュー項目を追加]からメニュー項目を追加することができます。

今回は、上記で解説した「固定ページ」を追加したいと思うので、
「固定ページ」の中から作成した固定ページにチェックを入れ、
「メニューに追加」をクリックします。

選択した固定メニューが画面右側に追加されるので、
同様の方法でメニューに追加したいページを追加し、
[メニュー設定]にてどの部分にメニューを表示するかチェック後、
「メニューを保存」をクリックします。

上記のイメージ画像では「ヘッダーメニュー」にチェックを入れているので、
ヘッダーメニューの表示設定になっています。

フッターメニューの設定を行う場合は、新たに「メニュー名」からメニューを作成し、
同様に設定進めた後、「フッターメニュー」にチェックを入れることでフッターに適用されます。

ヘッダーにあるタイトルの設定

ホームページにおいて、ヘッダー部分はどのページにも表示される重量な部分です。
WordPressのデフォルトでは、サイトのタイトルが文字で表示されるだけのものとなります。

シックなページでそのままのほうがデザイン的に良いサイトもありますが、
cocoonでは自分で用意したサイトロゴを簡単に設定することができます。


WordPress左側にある「Cocoon設定」から「Cocoon設定」をクリックします。


Cocoon設定の「ヘッダー」タブをクリックします。


ヘッダーロゴ欄の「選択」をクリックし、画像ファイルを選択します。

画像ファイルがアップロードされていない場合は、画像ファイルをアップロードした後選択します。


画像選択後、上部または、下部にある「変更をまとめて保存」をクリックし、
適用されていることを確認します。

関連記事の表示設定変更方法

Cocoonでは、投稿本文の下部に「関連記事」が表示されるようになっています。

こちらの表示方法を他のホームページと同じデフォルトではなく、
自分のサイトに合った表示にしたいという方に、Cocoonでの関連記事設定を説明します。

WordPress左側にある「Cocoon設定」から「Cocoon設定」をクリックします。


Cocoon設定の「投稿」タブをクリックします。


「関連記事設定」欄にある「表示タイプ」から
簡単に表示方法を変更することができます。
今回は、[ミニカード]を選択してみましょう。

また、関連記事の表示数は「表示数」より変更が可能です。


次に、関連記事ごとに枠線をつけたい場合は、
「枠線の表示」項目にチェックを入れます。


編集が完了後は、「変更をまとめて保存」をクリック
設定が反映されているか確認します。

まとめ

デザインに関しては、やはり知識がないと変更するのが簡単ではありませんが、
ある程度、決まったデザインは、上記のようにテンプレートのようなもので、
いとも簡単に変更できてしまう個所もあります。

知識に関しては自身で調べることで成長していくので、
まずは、やりたいことを調べて経験を増やしていくことが大事です。

だんだんと知識が増えていくと応用できることも多くなるので、
あきらめずコツコツと、より良いホームページになるように頑張りましょう。

タイトルとURLをコピーしました