ホームページの作り方

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法

「Cocoon」で作成したサイトのデザインを簡単に変更する

 

当ページの想定利用者

  • WordPressテーマ「Cocoon」で作成したサイトのデザインを変更したい
  • 初心者でも簡単に手早くデザイン変更する方法ってある?
  • WordPressテーマ「Cocoon」のスキン機能って?
  • スキン機能を使ってホームページデザインを変更する手順について知りたい

 

この記事では、上記のようなご要望やお悩みにお応えする有意義な情報を掲載しています。
ガイド

 

「ホームページ作成サービス」を使わずにホームページを作る

昨今では多くの「ホームページ作成サービス」が登場しており、従来はデザイン会社などに発注するなどして作成していたホームページが、パソコン初心者でも簡単に作ることができるようになりました。

ただしそうした便利なサービスは、ホームページを運営するうえである程度の制約・デメリットが存在します。

 

100%思い通りのホームページ作成はできない

「ホームページ作成サービス」を使えば、極めてスピーディーに一通り完成されたホームページを作ることができますが、一方でユーザーが作り込める余地が少ないので、真に理想的なホームページ作成は行えないのが現状です。

 

集客力を向上させることにも限界がある

また「ホームページ作成サービス」を利用する場合、SEO(検索エンジン最適化)というGoogle検索などからホームページに訪れるユーザーの数を増やすための施策が十分に行えない可能性が高いです。

例えば根本的にSEO対策に関連する特定の項目にタッチすることができなかったり、公開可能なページ数が限られているため情報発信の量に制限がかかってしまい、結果としてSEO効果が十分に発揮されないなどの問題が挙げられます。

 

ユーザーに直接的な不利益を与える可能性も・・・

さらにホームページデザインのカスタマイズにも限界があるので、ユーザーの導線を意識したベストなコンテンツのレイアウトが行えないことで、ユーザーがホームページ内の情報にリーチすることができず、多くの機会損失を被る恐れなどもあります。

 

以上のようなデメリットが「ホームページ作成サービス」を利用することには挙げられるため、下記の記事でホームページを自ら作成する方法について解説してきました。

関連リンク【ホームページ自作の準備】WordPressでホームページを自作するための準備|ワードプレスなら高い集客力を持つ理想的なサイトが作れる!

 

スキン機能を使ってサイトのデザインを変更する

WordPressテーマ「Cocoon」に備わるスキン機能とは、ホームページのデザインを用意されたテンプレートから選んで変更することができる便利機能です。

今回はそのスキン機能を使って作成したホームページのデザインを変更する方法について解説していきます。

わずか数クリックで着せ替えるようにデザイン変更できる優れた機能なので、初心者の方に特におすすめですよ。

 

本記事を読めば、「Cocoon」のスキン機能の使い方はバッチリ理解できます!
ガイド

 

 

本記事の内容

 

「Cocoon」スキン機能の使い方|管理画面にアクセスする

まずはWordPressテーマ「Cocoon」のスキン機能を使ってデザイン変更するために、WordPress管理画面にログインしましょう。

 

WordPress管理画面へのログイン方法

WordPressの管理画面にアクセスするには、下記の管理画面URLにアクセスしてログインする必要があります。

https://独自ドメイン/wp-admin/

 

例えば「machi-pan.tokyo」という独自ドメインの場合、【https://machi-pan.tokyo/wp-admin/】となります。

なおhttpのあとに付く「s」は付かないこともあるので、上記の形式でアクセスできなかった場合は「s」を抜いてアクセスしてみましょう。

 

サーバーの管理画面からアクセスする

独自ドメインがよく分からなくなってしまった場合は、契約しているサーバーの管理画面を経由してWordPress管理画面にアクセスを試みるといいでしょう。

当サイトではConoHa WINGのサーバーサービスを用いたWordPressでホームページ作成をおすすめしているので、ここではConoHa WINGの管理画面を参考に例示していきます。

 

ConoHa WINGにログインする

まずは下のURLからConoHa WINGにログインしましょう。

>>レンタルサーバー「ConoHa WING」にログインする

 

サイト管理画面からWordPress管理画面にアクセスする

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|管理画面にアクセスする

ConoHa WING管理画面が表示されたら、画面左にある「サイト管理」をクリックしましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|管理画面にアクセスする:続いて「アプリケーションインストール」と書かれた下にあるURLをクリックして新たなメニューを表示させて、「管理画面URL」項目の横に表示されているURLをクリックしましょう。

続いて「アプリケーションインストール」と書かれた下にあるURLをクリックして新たなメニューを表示させて、「管理画面URL」項目の横に表示されているURLをクリックしましょう。

これでWordPress管理画面にアクセスすることができます。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|管理画面にアクセスする:あとはユーザー名またはメールアドレスとパスワードを入力して、WordPressにログインするだけです。

あとはユーザー名またはメールアドレスとパスワードを入力して、WordPressにログインするだけです。

 

>>目次へ戻る

「Cocoon」スキン機能の使い方|スキンを使ってデザイン変更する

ここからはWordPressテーマ「Cocoon」のスキン機能を使ってデザイン変更する方法について、解説していきます。

 

 

スキン一覧を表示する

まずはWordPress「Cocoon」にあらかじめ用意されたスキンの一覧を表示させましょう。

 

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する

ダッシュボードページが表示されたら、画面左側にある「Cocoon設定」をクリックしましょう。

 

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する:「Cocoon設定」画面が表示されたら、操作画面上部にある「スキン」タブが選択されていることを確認します。

「Cocoon設定」画面が表示されたら、操作画面上部にある「スキン」タブが選択されていることを確認します。

 

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する:「スキン」タブが選択されていることが確認できたら、操作画面を少し下へスクロールさせましょう。  「スキン一覧」という項目に多数のスキンが確認できるはずです。

「スキン」タブが選択されていることが確認できたら、操作画面を少し下へスクロールさせましょう。

「スキン一覧」という項目に多数のスキンが確認できるはずです。

この中から特定のスキンを選んで、作成したホームページのデザインを変更しましょう。

 

>>「スキンを使ってデザイン変更する手順」トップへ戻る

>>目次へ戻る

スキンを選択する

まずは各スキンがどのようなデザインなのかチェックしてみましょう。

 

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する:各スキン名の左に表示されているアイコンにマウスカーソルを合わせると、スキンのプレビューを見ることができます。

各スキン名の左に表示されているアイコンにマウスカーソルを合わせると、スキンのプレビューを見ることができます。

 

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する:さらにスキン名をクリックするとデモページにアクセスすることができます。  より詳しくスキンのデザインについて知りたい場合は、スキン名をクリックしてみるといいでしょう。

さらにスキン名をクリックするとデモページにアクセスすることができます。

より詳しくスキンのデザインについて知りたい場合は、スキン名をクリックしてみるといいでしょう。

 

>>「スキンを使ってデザイン変更する手順」トップへ戻る

>>目次へ戻る

スキンの選択を確定する

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する:変更したいスキンが決まったら、左端にあるボタンにチェックを入れて、画面上部か下部にある「変更をまとめ保存」をクリックしましょう。  これで作成したホームページがスキンのデザインに変更されました。

変更したいスキンが決まったら、左端にあるボタンにチェックを入れて、画面上部か下部にある「変更をまとめ保存」をクリックしましょう。

これで作成したホームページがスキンのデザインに変更されました。

 

スキンが適用されたホームページをチェックする

【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法|スキンを使ってデザイン変更する:スキンが適用されたホームページのデザインをチェックするには、管理画面上部にあるホームページ名をクリックしましょう。  これでスキンのデザインが反映されたホームページのトップページが表示されます。

スキンが適用されたホームページのデザインをチェックするには、管理画面上部にあるホームページ名をクリックしましょう。

これでスキンのデザインが反映されたホームページのトップページが表示されます。

 

実際に適用されたデザインが思ったものと違った場合は、再度「Cocoon設定」ページを開いてスキンを変更しましょう。

 

これでスキンによるデザイン変更は完了です。
ガイド

 

>>「スキンを使ってデザイン変更する手順」トップへ戻る

>>目次へ戻る

「Cocoon」スキン機能の使い方|まとめ

「【WordPress:スキンの使い方】WordPressテーマ「Cocoon」のスキン機能を使ってホームページのデザインを手軽に変更する方法」と題して、WordPressテーマ「Cocoon」で作成したホームページのデザインをスキン機能を使って変更する方法について、詳しく解説してきました。

 

スキン機能を使って、サクッとデザイン変更しましょう!

WordPressで作成したホームページのデザイン変更は、ゼロから自分自身で設定しなければならないため、なかなか骨の折れる作業です。

そんな大変な作業は「Cocoon」のスキン機能を使って、サクッとカンタンにデザイン変更してしまいましょう。

かなり細かいところまで作り込まれたスキンも数多く用意されているので、ぜひお気に入りのスキンを探してみてくださいね。

 

サイトデザインはユーザーの印象にダイレクトに影響するので、スキン機能をフル活用して積極的にサイトの見栄えを整えておきましょう!
ガイド

 

【まとめ】無料で簡単にホームページが作れるサービス

【ホームページの作り方】画像で分かりやすく作り方を解説!初心者でも完全無料で作れるホームページ作成サービスをご紹介|無料サービスの落とし穴に要注意!|アイキャッチ画像

「専門知識が無い初心者だけど、ちょっとしたホームページを無料で簡単に作りたい」

そんな望みを叶えてくれる無料の「ホームページ作成サービス」についてまとめた記事を公開しています。

お金をかけずに見栄えの良いホームページを作成できるサービスを厳選してご紹介しているので、興味のある方は要チェック!

関連リンク初心者でも完全無料で作れるホームページ作成サービスをご紹介

 

本記事があなたの望みに適ったホームページ作りに何らかの貢献ができれば、嬉しく思います。
ガイド

-ホームページの作り方
-, ,

© 2021 初心者のためのホームページ作成ガイド