Twitterはこちら仕事依頼はこちら

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!

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

当ブログはCocoonを使っています。

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

Cocoonでも使えるその他のカスタマイズはこちらから!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

左タイトル
  • リスト1
  • リスト2
  • リスト3
右タイトル
  • リスト1
  • リスト2
  • リスト3

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

ブログカードデザイン

【Cocoon】ブログカードカスタマイズ!「クリック(タップ)して読む」を自動表示!
Cocoonのブログカードをカスタマイズ!デザインをスッキリさせ、PCで見たときはクリックをして読む、スマホで見たときはタップして読むを自動で表示させます。これだけでもクリック率が上がる可能性ありますのでお試しあれ!

詳細 ブログカードカスタマイズ!「クリック(タップ)して読む」を自動表示!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメントフォームafter

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

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

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

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

トップページをサイト型へ

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

詳細 【超簡単!】Cocoonトップページをスッキリとサイト型へカスタマイズ!

おすすめ記事を表示

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

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

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

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

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

CocoonスキンSeason(シーズン)

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

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

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

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

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

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

【Cocoon】サイドバー目次追尾カスタマイズ!スクロール付き

【Cocoon】ブログカードカスタマイズ!「クリック(タップ)して読む」を自動表示!

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

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

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

【超簡単!】Cocoonトップページをスッキリとサイト型へカスタマイズ!

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

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

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

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

ページトップへ