支援者募集中!仕事依頼はこちら

Cocoonカスタマイズまとめ!コピペで簡単!

Cocoonカスタマイズまとめ!コピペで簡単! Cocoonカスタマイズ

こんにちは、ぽんひろ(@ponhiroo)です。

Cocoonのカスタマイズ方法をまとめていきます!

Cocoonカスタマイズまとめ!【ぽんひろ式】

プロフィールをオシャレにカスタマイズ!

Cocoonプロフィールカスタマイズ ビフォアフター

詳細 Cocoonプロフィールカスタマイズ!おしゃれ可愛くして見た!

リスト(箇条書き)をオシャレにカスタマイズ!

  • リスト1
  • リスト2
  • リスト3

こういったリストを組み合わせ次第で40種類作るカスタマイズです。

詳細 【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK【カスタマイズ】

ボックスを作成!カスタマイズ!

ここにタイトルを入力します

ここにコンテンツを入力します。

ここにタイトルを入力します

ここにコンテンツを入力します。

このようなタイトル入力可のボックスの作り方です。

詳細 【Cocoon】コピペで簡単!タイトル入力可のおしゃれなボックスを作る!【カスタマイズ】

tableタグを使わない比較表!

【HTMLCSS】tableタグを使わない比較表デザイン!レスポンシブ対応!

コピペだけで出来るようにサンプルコードを用意しています。

詳細 【HTMLCSS】tableタグを使わない比較表デザイン!レスポンシブ対応!

今ココ!タイムラインを作成!

  1. 鶏肉、じゃがいも、玉ねぎ、にんじんを切る
  2. 全部炒める
  3. 沸騰したらあくをとり、弱火〜中火で15分くらい煮込む
  4. 火を止めルウを割りいれる。溶けたら弱火で10分くらい煮込む
  5. 完成!

このような今ココ!がわかるタイムラインの作り方です。

詳細 今ココ!がわかる順序を表すタイムラインをHTMLとCSSで作る

当ブログのように通知エリアを二つにするカスタマイズ。

Cocoonカスタマイズ 通知エリアを2つにする方法

詳細 通知エリアを2つにする方法

メニューをカスタマイズ!

Cocoonヘッダーメニューカスタマイズサンプル
PCのグローバルメニューを上部に固定し、追尾させるカスタマイズです。

詳細 【Cocoon】ヘッダーメニューをオシャレにカスタマイズ!上部に固定追尾!

スマホ時にヘッダー&メニューを固定する!

スマホメニュー固定と追尾

スマホでスクロール時にヘッダーを固定追尾させるカスタマイズです。
下スクロール時に隠れ、上スクロール時に表示されます。

詳細 【Cocoon】スマホでヘッダーを固定追尾!メニューも開けるようにする!

スマホ時にメニューを横スクロールできるようにする

cocoonスマホヘッダーナビ完成図

よく見るタイプのメニューのカスタマイズ方法です。

詳細 Cocoonのスマホメニューをカスタマイズ!コピペ可!横にスクロールできるようにするよ!

コメントフォームから不必要なものを消すカスタマイズ!

コメントフォームafter

これだけでコメントがされやすくなるのでオススメです。

詳細 WordPressのコメントフォームからメールアドレス欄やウェブ欄を消す方法!

トップページに関するカスタマイズ!

固定ページを使ってオリジナルのトップページを作る方法!

構築編とデザイン編に分かれています。

構築編

Cocoonトップページカスタマイズ

詳細 Cocoonカスタマイズ!SEOに強いオリジナルトップページを作る!【構築編】

切り替えタブを作る

Cocoonトップページにオシャレなタブ切り替えを作る

詳細 Cocoonトップページカスタマイズ!オシャレなカテゴリー切り替えタブを作る!【デザイン編】

おすすめ記事を表示

トップページにおすすめ記事を載せる Cocoonカスタマイズ

当ブログのようにおすすめ記事を目立たせる方法です。

デフォルト(最初のまま)のトップページでも利用できます。

詳細 おすすめ記事をトップに表示させる方法!

スキン「Season」を作りました!

CocoonスキンSeason(シーズン)

Cocoonのテンプレート機能であるスキンを作りました!
その紹介記事になります。

詳細 Cocoonスキン「Season(シーズン)」を作りました!【WordPress】

Cocoonでも使えるその他のカスタマイズ

ブログカスタマイズまとめ

その他のカスタマイズは下記記事にまとめてあります。

詳細 ブロガー、アフィリエイター向けカスタマイズまとめ

Cocoonカスタマイズ新着記事一覧

Cocoonカスタマイズ

【Cocoon】スマホで目次を追従させる方法

Cocoonカスタマイズ

【Cocoon】通知エリアを二つ表示させる

Cocoonカスタマイズ

【Cocoon】おすすめ記事をトップに表示させる方法!脱カルーセル!

Cocoonカスタマイズ

【Cocoon】トップページにオシャレなカテゴリ切り替えタブを作る!【デザイン編】

Cocoonカスタマイズ

【Cocoon】SEOに強いオリジナルトップページを作る!【構築編】

Cocoonカスタマイズ

【Cocoon】ヘッダーメニューをオシャレに!上部に固定追従!

Cocoonカスタマイズ

【Cocoon】プロフィールをオシャレで可愛くしてみた!

Cocoonカスタマイズ

【Cocoon】スマホヘッダー固定追尾!公式と別の方法で!

Cocoonカスタマイズ

今ココ!がわかる順序リストをHTMLとCSSで作る

Cocoonカスタマイズ

【Cocoon】スマホメニューを横スクロールできるようにする方法!

ページトップへ