前回の記事では
シン・レンタルサーバーでサブドメインを設定する方法と、
WordPressのインストール方法についてお伝えいたしました。
今回の記事ではWordPressのテーマ「Cocoon」をオリジナルにカスタマイズする方法を解説していきたいと思います。
▼前回記事▼
▼りのんずにて利用しているレンタルサーバーはこちら▼
これまで色んなレンタルサーバーを使用してきましたが、
解説しているユーザー数も多く、求めている知りたい情報へたどり着きやすい為、
初心者にもおすすめのレンタルサーバーです♪
最終完成デザインはこちら
タイトル部分をカスタマイズする
Cocoonをインストールして一番最初のデザインが下記になります。
※2023年11月現在のスクリーンショットです。バージョンの更新に伴いデザインが変わる可能性があります。
こちらの赤枠部分のカスタマイズ方法になります。
①
左メニューバーの「外観」からカスタマイズを選択します。
②
下図のような編集画面が出てきますので、この画面からカスタマイズをしています。
タイトル・サブタイトルの変更
③
「サイトの基本情報」をクリックすると下記のウィンドウが開きます。
それぞれ
「サイトのタイトル」へサイト・ブログのタイトルを、
「キャッチフレーズ」へサイトの補足的な情報を記入することが可能です。
また、「サイトアイコン」に画像を設定すると、WordPressのタマゴマークからオリジナルのアイコンへ変更することが可能です。(通称：ファビコン)
オリジナルのアイコンが欲しいけれど、自分じゃ作り方が分からない！誰かに頼みたい！という方は
「ココナラ」や「ランサーズ」などのクリエイターに発注出来るサービスを利用すると良いです。
私自身も制作発注(有償)を受けておりますので、もしお困りでしたらお問合せフォームよりご相談ください。
「公開」ボタンを押すとホームページに反映されます。
ロゴの変更方法
サイト名をテキスト文字のままにしておくのも良いですが、
これではなかなかオリジナリティを出すことが出来ません。
その為、サイトのロゴ部分を画像データに変更していきます。
①
「Cocoon設定」から「Cocoon設定」を選び、右画面のタブの中から「ヘッダー」タブを探します。
ヘッダータブを開くと下図のような画面が開きます。
「ヘッダーレイアウト」でロゴを表示させる場所を選びます。
完成形の場合は真ん中に大きくロゴを表示させたい為、「センターロゴ(デフォルト)」を選択しています。
「ヘッダーロゴ」に設定したいロゴ画像を「選択」ボタンを押してアップロードしてください。
ヘッダーロゴ画像の推奨画像サイズは？
「りのんずろぐ」・「りのんのゆるオタライフ」ともにロゴ画像は
横800px×縦200pxで作成しています。
これより小さくすれば小さく表示されますし、大きくすれば大きくなります。
ヘッダーロゴは、WEB広告と異なりサイズに規定がありません。
好みに合わせて制作サイズを決めましょう。
ロゴを設定すると、このようなページに変わります。
一気にイメージが変わりますね！
◆おまけ
ヘッダーロゴの上に文字が入るのが嫌だ！という方は、
「キャッチフレーズの配置」を「表示しない」に変更すると文字を表示させないようにできます。
ヘッダー画像の変更方法
ヘッダー画像の変更は、サイトロゴを変更した箇所と同じページから変更が可能です。
画像を設定する場合は「ヘッダー背景画像」
色のみを設定する場合は「ヘッダー全体色」
からの設定が可能です。
「背景画像の全てを表示」を選択しておくと、
スマートフォンからブログを見た際にもヘッダー画像が全て表示されます。
※りのんずろぐでは、キャラクターとロゴが被ってしまう為このチェックボックスにチェックを入れていません。
自分のサイトのデザインやイメージに合わせて設定しましょう。
ヘッダー背景画像の推奨サイズは？
画像を設定する場合のサイズですが、
「りのんずろぐ」・「りのんのゆるオタライフ」では
横1600px×縦300pxにて作成しております。
こちらもバナー広告画像ではないので推奨サイズはありませんが、ロゴ画像より大きいサイズにしましょう。
またあまり小さいサイズだとPCから見た時に引き伸ばされてしまう為、キレイに表示されません。
ご注意ください。
ヘッダー背景画像を設定するとこのようなデザインになりました。
設定前と比べるとかなり印象が変わってきたのではないでしょうか。
スキンを設定する
ヘッダーとロゴを設定し、サイトの雰囲気が定まったところで「スキン」を設定します。
Cocoonはオリジナルスキンの種類が豊富な為、スキンを設定するだけで大きくサイトの印象が変わります。
「Cocoon設定」→「Cocoon設定」→「スキン」のタブを選択します。
するとプレビュー画面と、
「スキン一覧」が表示されるので、スキン一覧の中から好きなデザインを選びます。
どんなデザインか確認したい場合は、スキン名の横の画像マークにカーソルを載せるとサンプルデザインが表示されます。
「りのんずろぐ」では「みるらいと」
「りのんのゆるオタライフ」では「COLORS(イエロー)」
のスキンを利用しています。
ヘッダーロゴ・ヘッダー背景画像・スキンを変更したことによって、
こんな見た目に変わりました。
イエローベースでカワイイ仕上がりになってきているのではないでしょうか。
次の記事ではカテゴリーの作り方や、メニューバーの設定について解説したいと思います。
コメント