いっちゃんのラジオやってます(Anchor.fm)

Cocoonの初期設定とWordPressのアイキャッチ画像の作り方

Cocoonのカスタマイズ|Wordpressのおすすめテーマ
Cocoonのカスタマイズ(WordPress)

今日はお勧めWordPressテーマと簡単なカスタマイズについて書きます。

 

こんにちは。

いっちゃんです。@hi_icchan_jp

 

Q :WordPressのテーマ選びに迷ってます。

A  : テーマ選びに悩んだら、WordPressの無料テーマCocoonをお勧めします。

 

Icchan
Icchan
 
 

WordPressの編集も自分のスキルになりますよ!!

私がCocoon(WordPressの無料テーマ)をお勧めする理由

私がCocoon(WordPressの無料テーマ)をお勧めする理由は複数あります。

 

  • Cocoon(Wordpressの無料テーマ)はサイト高速化の工夫がされている
  • Cocoon(Wordpressの無料テーマ)はデザインがお洒落。
  • Cocoon(Wordpressの無料テーマ)はカルーセルがある。
  • Cocoon(Wordpressの無料テーマ)は無料とは思えない機能の充実。
  • Cocoon(Wordpressの無料テーマ)はカスタマイズしがいがある。

 

私のブログはSEOを考えると、自分のサイトの表示速度が落ちていたので、テーマの変更を考えました。

 

【CSS不要】Cocoonのエントリーカードをボックスで2分割するスキル
【簡単!】『Cocoon』のエントリーカードをでボックス形式の2分割にするスキル

 

 

そこでSEOを考えて、高速で表示され、かつデザインが美しいWordPress無料テーマのCocoonを選びました。

サーバーはWordPress自動インストール機能のあるXサーバーを使っています。

 

Xserverについてはこちら

 

Cocoon(Wordpressの無料テーマ)のデフォルトでのデザインは、非常にシンプルなので、自分でカスタマイズできる人にはやりがいがあります。

 

【CSS不要】Cocoonのエントリーカードをボックスで2分割するスキル
【簡単!】『Cocoon』のエントリーカードをでボックス形式の2分割にするスキル

 

ただし、Cocoon(Wordpressの無料テーマ)はシンプルなデザインなので、自分の好きなようにカスタマイズするには、FTPソフトなどを使って自分でCSSを調べて指定するなど、多少のスキルは必要です。

 

 

 

Cocoon(Wordpressの無料テーマ)はカルーセルを設定すると、有料テーマのような見た目にできます。

 

Icchan
Icchan
 

 

 

私はCocoon (Wordpressの無料テーマ)のカルーセルがとても気に入ってます。

 

 

【CSS不要】Cocoonのエントリーカードをボックスで2分割するスキル
【簡単!】『Cocoon』のエントリーカードをでボックス形式の2分割にするスキル

 

簡単にホームページを始めるならこちら

 

Cocoon(Wordpressの無料テーマ)のヘッダー付近のエリア名の説明

 

スキルを3つ持ちオリジナルで生きるブログを例として、Cocoon(Wordpressの無料テーマ)のヘッダー付近の呼び名を画像を用いて説明します。

 

  1. グローバルナビゲーション:メニューが入る場所です。
  2. カルーセル:ブログで書いた記事などを表示できます。
  3. ヘッダー:やじるしで示されているエリアがヘッダーです。
  4. ロゴ:ご自分でロゴを作った場合、ここにロゴが表示されます。

 

 

Cocoon(WordPressの無料テーマ)の画面は独特です。

Cocoon(WordPressの無料テーマのエリア別の呼び名は覚えておきましょう。

 

みんなの得意を売り買いするココナラの登録は以下

Cocoon(WordPress)は一番最初に背景色の設定をする。

WordPressのCocoonテーマはスキンを選んでから、最初に背景色を決める必要があります。

なぜならCocoon(WordPressの無料テーマには、ヘッダー、メイン記事、サイドバーの境界が無いからです。

 

背景色設定方法:ログイン→ダッシュボードCocoon設定全体サイト背景色で設定できます。

 

全体のページボタンを押して、サイト背景色で色を変更します。

 

 

Cocoon(WordPressの無料テーマのサイト背景色を決めないと、メインのエリアと、サイドバーの色分けもされておらず、メリハリの無い外観になってしまうからです。

 

 

Cocoon(WordPressの無料テーマ)のグローバルナビの背景色の設定

Cocoon(WordPressの無料テーマの背景色が設定出来たら、グローバルナビの色を決めると、サイト全体のポイントになります。

 

方法ダッシュボードCocoon設定全体ボタングローバルナビメニュー色の順に押す。

 

 

②Cocoon(WordPressの無料テーマ設定に入って全体のボタンを押してから真ん中あたりにあるサイト背景色でサイト全体の色を決めるだけで終了です。

 

Icchan
Icchan
 
 

簡単ですね^^

Cocoon(WordPressの無料テーマのサイトキーカラーの設定

Icchan
Icchan

Cocoon(WordPressの無料テーマ)でのサイトキーカラーは段落2 での色です。私のサイトでは水色になっています。

 

私のCocoon(WordPressの無料テーマ)のブログでは水色になってる部分です。

設定方法は以下です。

 

  1. ダッシュボード Cocoon設定
  2. 全体
  3. サイトキーカラーの設定

 

 

Cocoon(WordPressの無料テーマ)設定から全体ボタンを押して、サイトキーカラーを決めます。

 

 

Cocoon(WordPress)に合うアイキャッチ画像を作るアプリ

Icchan
Icchan

Cocoon(WordPressの無料テーマ)に合うアイキャッチ画像を作るアプリで私のお勧めは『Canva』です。

 

以下にCanvaの使い方を解説します。

  1. Canvaに登録する。
  2. 画面右下カスタマイズを押す。
  3. 画像サイズを決める。私は1305×550pxにしています。

 


 

アイキャッチ画像のサイズを入力したら、新しいデザインを作成ボタンを押す。

 

Icchan
Icchan

キャンバスが出来るので、以下のようにデザインを作ります。

 

  • ①背景で好きな壁紙を選ぶ
  • ②,③素材で四角のボックスを選択
  • ※色を変えたければ左上のボックスの変更ボタンで変更
  • ④、⑤透明度のボタンで50パーセントに調節
  • ⑥入れたい文字を入れる。

 

 

Canvaを用いてアイキャッチ画像作る方法を説明するにあたり、Canvaのサイトからスクリーンショットを取らせていただき、記事を書かせていただきました。

 

Attention Required! | Cloudflare

 

今回のCocoon|WordPressのテーマのカスタマイズは以上です。

 

Icchan
Icchan
 
 
 

皆さんのCocoon(WordPressの無料テーマ)ブログのデザインが素敵な外観になりますように。質の良いブログ作成で、自分のスキルをアップしていきましょう。

 

 

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