Twitterはこちら instagramはコチラ

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】

wordpress_Cocoon_スキン変更 Cocoon
スポンサーリンク

管理人のひろくまです

今回はワードプレスの優良テーマ「Cocoonスキンの設定の説明です。

 

注)こちらの記事は「Cocoon」というテーマをインストールしないと使えません。

▶ Cocoonのインストール手順はこちらで紹介してます。

初心者ブログ_初めにWordPressのテーマを決めよう【Cocoon】

 

ブログ初心者でも最初にスキンの設定を行えば

いつでもサイト全体のデザインをかんたん且つ自由にお洒落なカスタマイズできます。

ブログをはじめたばかりの初心者方は是非活用してみてください。

スポンサーリンク
▶ PayPay モール

▼ Achargeでは ★PC本体 + 4画面モニター セット★などデイトレ・クリエイター向けPC 販売中!

スキンとは?

スキンとはCocoonのテーマを使用していれば誰でも簡単にサイト全体をイメージをプロのようなデザインに1発で変更してくれます。

Cocoonスキンとは、スタイルシートを変更させることで、ブログの外観を簡単に変更させることができる機能です。 通常、ブログの外観を変更したい場合、WordPressテーマ自体を別のものに変更したり、CSSをいじったりする必要がありますが、Cocoonであれば設定だけで変更することができます。

「引用:Cocoon

 

現在cocoonのスキンの種類は全79種類

▶ デサインの一例です

Cocoon_スキン一覧79種類一例Cocoon_スキン一覧79種類一例

 

スキンの変更手順

まずはCocoonでのスキンの変更手順です。設定は簡単すぎなので閲覧注意です。

 

Cocoonの設定をクリックする

 

01ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】‗cocoon設定

  • ワードプレスの左のメニューバーにある「Cocoon 設定」をクリックします

 

 

スキンを選択する

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】‗_スキンのクリック

  • 左上あたりにある「スキン」をクリックします。

 

 

スキン一覧のアイコンで確認

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】_スキン設定

使ってみたいデザインのスキンを選択します。

題名の左の画像アイコンにカーソルを合わせます。

デザインのプレビューが表示されます。

スキンを保存する

 

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】_変更をまとめて保存

スキンを選択したら

「変更をまとめて保存」をクリックしましょう!

プレビューの確認

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】_プレビューの確認

設定が完了すると

一番上の「スキン設定」欄に設定したプレビューの確認が行えます。

まとめ:Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】

  1. スキンとは?
  2. スキンの変更手順
    1. Cocoonの設定をクリックする
    2. スキンを選択する
    3. スキン一覧のアイコンで確認
    4. スキンを保存する
    5. プレビューの確認
  3. まとめ:Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】

色々試してお気に入りのスキンにチェンジしちゃいましょう!

 

▶ノートPC マルチモニター化 あれこれ

ノートPCを使うメリットとは

ノートPCって何台マルチモニター化できるの

3画面マルチディスプレイモニター 設定手順 Win10版

ノートPCの外部出力端子を確認してみよう

ディスプレイ変換-アダプターとは?

ノートPCでマルチモニター 接続手順【接続タイプ別解説】

ノートPC 標準の出力端子でデュアル マルチモニター化 設定手順

ディスプレイ変換-アダプターとは?

【USB 専用】マルチディスプレイ変換アダプタ一覧

【Type-C 専用】マルチディスプレイ変換アダプタ一覧

おすすめマルチディスプレイ変換アダプタ一覧 【Type-C USB】

Cocoonカスタマイズ
スポンサーリンク
ひろくまをフォローする

▶ Cocoon 全般

「初心者ブログ向け」初めにWordPressのテーマを決めよう【Cocoon】

【初心者向け】カルーセルって何?Cocoonで設定してみよう!

「おすすめカードウィジェット」Cocoonでサイドバーにもカスタマイズ
18_スマホ画面の確認方法とは

Cocoon アンダーラインを引いてみる01

無料テーマCocoonの「おすすめカード」設置でクリック率アップを狙おう!

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】
「おすすめカード」or「カルーセル」どちらが使いやすい?【Cocoonカスタマイズ】

Cocoon ボックス(アイコン)装飾スタイル一覧

Cocoon ボックス(案内)使い方

19_Cocoon ボックス(案内 白抜き)合わせ技 手順

Cocoon ボックス(白抜き)で箇条書きを囲む 手順

Cocoon ボックス(白抜き)間違えたやり方

Cocoon ヘッダー関連記事

【画像】サイトの印象ガラリと変えるヘッダーのカスタマイズ!Cocoon初心者向け

Cocoon設定でヘッダーの文字色・背景色を変えてサイトのイメージアップ

無料テーマCocoonの「おすすめカード」設置でクリック率アップを狙おう!

 

ワードプレスのCocoon (コクーン) 設定でヘッダーの追従させる手順【画像付】

 メニューバー作成⇒Cocoonでおしゃれなレイアウト変更

 ワードプレスのヘッダーの高さは何pxがベスト?【かんたん設定画像付】

【Cocoonの設定】ワードプレスのヘッダー・キャッチフレーズ」配置替え方法

ワードプレスのCocoonでヘッダーロゴをカスタマイズ【ロゴ背景は透明に】

グローバールメニューにお洒落なアイコンをサクッとつけよう!

ひろくまblog
タイトルとURLをコピーしました