【WordPress】Cocoonでブログのデザインをデフォルトから変える方法

WordPress

あろうは、WordPressでCocoonテーマを使用しています。
今回は、ブログ開設後にデフォルトデザインから変更する方法について説明します。

スキンを設定してブログのデザインを変える

デフォルトからデザインを変えるためには「スキンの着せ替え」を行います、
WordPressのダッシュボードにあるCocoon設定から好みのデザインに変更します。
Cocoon設定が表示されていない人は、こちらの記事をご参照ください。

【WordPress】CocoonでCocoon設定を表示させる方法
こんにちは、あろう(@arrow)です。この記事では、ブログ開設後にCocoon設定が表示されない問題を解決します。この記事を読んでわかることサーバー契約後にCocoon設定を表示させる方法Cocoonではなく、Coco...
Cocoonテーマをインストールする方法
WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。

Cocoon設定をクリックするとタブがたくさん並んだ画面が表示されますので、
左上に表示されているスキンをクリックします。

画面を下スクロールすると「スキン一覧」というものが表示されるので、その中から自分の好みのデザインを選択します。
(スキン名の左にある写真マークにカーソルを合わせると、プレビューが表示されます。)

スキン一覧の下にある「表示スキン」「オリジナルスキン」はそのままなにも触らず大丈夫です。
好みのスキンを選択したら、画面下にある「変更をまとめて保存」を忘れずにクリックしてください。
これで変更は完了です!

どのように反映されているか、自分のブログを開いて確認してみてください。
画面上部にプレビュー画面は表示されていますが、全体像を確認した方が「思ってたのと違う!」が回避できます♪
いくつか試してみながら、お気に入りのデザインが見つかるといいですね(^▽^*)

ヘッダーに背景を入れる

ブログをぱっと見おしゃれにする方法は、やはりなんといってもブログ名の後ろの画像(=ヘッダー画像)ですね。
あろうはフリー素材を使用しています。フリー素材というのは、ブログに自由に貼っていい画像のことです。
※フリー素材でないと、著作権の侵害などの問題が出てきますので、ネット上から画像を入手する際はご注意ください。

あろうは「ODAN」というサイトにある画像を使用しています。
海外とかのフリー素材サイトを見れるサイトです。
検索画面で「ODAN」と入力すると一番上に表示されます。

好みの画像を見つけたらクリックをします。
「Free Download」の右にある「v」のようなところにカーソルを合わせるとダウンロードサイズを選択できます。
あまり画像サイズが大きすぎても使いづらいので、medium(120×○○)くらいで十分と思われます。
画像サイズを選択したら、「Free Download」をクリックします。これで画像のダウンロードは完了です。

続いて、ダウンロードした画像を背景画像に設定します。
WordPressのCocoon設定に戻ります。
ここで使用するのは左から3番目のヘッダーです。

下の方にある「ヘッダー背景画像」の選択ボタンをクリックします。

「画像を選択してください」という画面が出てくるので、
アップロードする画像を選択して、右下の「画像の選択」をクリックします。
上の図の選択ボタンの横にURLが表示されたらOKです。
画面下の「変更をまとめて保存」を忘れずにクリックします。
自分のサイトページで全体像を確認します。
なお、画像サイズを変更する方法もあります。

先ほどと同様、Coconn設定からヘッダーを選択し、「高さ」に数値を入力します。
800に入れると相当大きくなるので400位がほどよいかと思いますが、いろいろ数値を変更しながらちょうどよいサイズを探してみてください。
なお、「高さ」と「高さ(モバイル)」の2種類がありますが、ここで調節するのは「高さ」のみです。
「高さ(モバイル)」は空欄にしていれば、「高さ」を変えた際に自動的に変えてくれるので、よほどこだわりがない限りは空欄のままで問題ありません。

ヘッダーからサブタイトルを削除する

ヘッダーエリアに、ブログタイトルだけでなくサブタイトルも同じエリアに表示されていることがあります。
もしサブタイトルを表示させたくないときは、Cocoon設定からヘッダーを選択して「キャッチフレーズの配置」までスクロールし、「表示しない」を選択するとサブタイトルを非表示にできます。
変更したら、「変更をまとめて保存」を忘れずにクリックしましょう。

今回の記事のまとめです。

  • スキンを設定してブログのデザインを変える
  • ヘッダーに背景を入れる
  • ヘッダーからサブタイトルを削除する

これで、WordPressにまた一つ詳しくなりましたね。
これからも一緒に頑張っていきましょう~♪
それではっ!

コメント

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