スポンサーリンク

【初心者でもできる!】Cocoonカスタマイズまとめ!コピペで簡単開発

Cocoon
スポンサーリンク
本ページにはプロモーションが含まれています。
たろ
たろ

当ブログのカスタマイズを一挙大公開中!!

このブログはわいひらさんという方が作られたCocoonというワードプレスのテーマを使ってサイトを作っています。

もし同じCocoonを使っている方はこれから紹介する記事の通りにカスタマイズすることでこのブログと同じデザインの実装ができます♩

カスタマイズのレベルは使う言語数によって

  • 初級編(言語1つ:CSSのみ)
  • 中級編(言語2つ:CSS+PHP, CSS+JavaScript)
  • 上級編(言語3つ以上:CSS+PHP+JavaScript)

上記の3段階に分けています。

これから紹介する記事を参考にしていだき、カスタマイズを楽しんでいただけたら嬉しいです。

スポンサーリンク

初級編

初級編:
CSSのコードを貼り付けるだけで実現できる内容を紹介!!

おしゃれ目次にカスタマイズ!CSSコピペでOK

Cocoon CSSコピペで簡単実装!サイドバー目次のカスタマイズ

CSSコピペで一発!アーカイブをかわいくカスタマイズ

トップページ カテゴリのタブ切り替え

おしゃれな SNS ボタンに!CSSコピペカスタマイズ

下の画像のようなSNSボタンが作れます♩

SNS ボタン見出しをCSSでカスタマイズ

SNS フォローボタンをカスタマイズ

CSSコピペで一発!カテゴリをおしゃれにカスタマイズ

ホバーで記事をフワッと浮かせるカスタマイズ

「次のページ」ボタンを消す方法

ページネーションをおしゃれにカスタマイズ

Cocoon サイドバーの見出しコピペでカスタマイズ

吹き出し付きのプロィールCSSカスタマイズ

中級編

中級編:
CSS+JavaScript または CSS+PHPのコードを貼り付けてで実現できる内容を紹介!!

タイムラインで手順説明を表示する

次のようなタイムラインを表示します。

  • STEP01

    タイトル1
    ここにテキストここにテキストここにテキスト
  • STEP02

    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP03

    タイトル3
    ここにテキストここにテキストここにテキスト

カテゴリ・タグ・アーカイブなどの見出しをカスタマイズ

上級編

初級編:
CSS+JavaScript+PHPのコードを貼り付けるだけで実現できる内容を紹介!!

Cocoon
スポンサーリンク
FOLLOW
たろのプログラミング日記
タイトルとURLをコピーしました