![たろ](https://tarovlog.com/wp-content/uploads/2021/02/profile_icon_face.png)
たろ
当ブログのカスタマイズを一挙大公開中!!
このブログはわいひらさんという方が作られたCocoonというワードプレスのテーマを使ってサイトを作っています。
もし同じCocoonを使っている方はこれから紹介する記事の通りにカスタマイズすることでこのブログと同じデザインの実装ができます♩
カスタマイズのレベルは使う言語数によって
- 初級編(言語1つ:CSSのみ)
- 中級編(言語2つ:CSS+PHP, CSS+JavaScript)
- 上級編(言語3つ以上:CSS+PHP+JavaScript)
上記の3段階に分けています。
これから紹介する記事を参考にしていだき、カスタマイズを楽しんでいただけたら嬉しいです。
初級編
おしゃれ目次にカスタマイズ!CSSコピペでOK
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.061-1024x576.jpeg)
Cocoon CSSコピペで簡単実装!サイドバー目次のカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/03/cocoon-toc-sidebar_top_-1024x576.jpeg)
CSSコピペで一発!アーカイブをかわいくカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/02/cocoon-archive-css_top-1024x576.jpeg)
トップページ カテゴリのタブ切り替え
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.062-1024x576.jpeg)
おしゃれな SNS ボタンに!CSSコピペカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.064-1024x576.jpeg)
下の画像のようなSNSボタンが作れます♩
![](https://tarovlog.com/wp-content/uploads/2021/02/shs_share_pc-1024x236.png)
SNS ボタン見出しをCSSでカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.065-1024x576.jpeg)
SNS フォローボタンをカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.066-1024x576.jpeg)
CSSコピペで一発!カテゴリをおしゃれにカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.071-1024x576.jpeg)
ホバーで記事をフワッと浮かせるカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/03/cocoon-hover-article_top-1024x576.jpeg)
「次のページ」ボタンを消す方法
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.057-1024x576.jpeg)
ページネーションをおしゃれにカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.067-1024x576.jpeg)
Cocoon サイドバーの見出しコピペでカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/03/cocoon-toc-sidebar_top_-1024x576.jpeg)
吹き出し付きのプロィールCSSカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/04/cocoon-profile-css_top-1024x576.jpeg)
中級編
タイムラインで手順説明を表示する
![](https://tarovlog.com/wp-content/uploads/2021/02/tarovlog.060-1024x576.jpeg)
次のようなタイムラインを表示します。
STEP01
タイトル1ここにテキストここにテキストここにテキストSTEP02
タイトル2ここにテキストここにテキストここにテキストSTEP03
タイトル3ここにテキストここにテキストここにテキスト
カテゴリ・タグ・アーカイブなどの見出しをカスタマイズ
![](https://tarovlog.com/wp-content/uploads/2021/04/cocoon-lead-customize_top-1024x576.jpeg)
コメント
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームブログ運営 […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]
[…] ホームプログラミングWordPressCocoon […]