I'llgosimply...

Wordpress

【2022年11月版】私がCocoonカスタマイズ参考にしたサイトまとめ

Wordpress
記事内に広告が含まれています。

こんにちは!momo(@illgosimply)です!

このブログは、無料テーマのcocoonを使っています。

スポンサーリンク

Cocoon って?

WordPressの無料テーマです。

Cocoonのすごいところ!
  • 無料
  • いろんな機能が充実している!
  • カスタマイズが無限大!
  • レスポンシブスタイルに対応
  • 軽い!

カスタマイズにあたって、多くのサイトを参考にしていただきました!

本当にありがとうございます。

参考にしたサイトをご紹介させてください。

スポンサーリンク

TOPデザインはサイト型(2022年11月時点のデザインです)

サイト型デザインにしています。

固定ページを作って、2カラムに最新投稿記事、人気記事。

最新投稿記事
Pick upと人気記事

Pick upは全記事からランダムで表示させています。

cocoonはこういったことができるショートコードが充実しています。

工夫して使うと、グッと充実したブログができてカスタマイズが楽しいです!

3カラムにカテゴリー別記事一覧を入れています。

スポンサーリンク

背景壁紙を固定してスクロール

PCでもタブレットでもスマホでも背景壁紙を固定してスクロールするようにしました。

【CSS】background-sizeで背景画像をレスポンシブに設定する方法|Gimmick log
CSSのbackground-size プロパティは、背景画像のサイズを指定できます。 表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。 同じ画像をそれぞれの値で表示したサンプルを作成しました...

ページ読み込み時のフェードイン

これがあるだけでグッとページが凝っているなぁと感じられますよね!(私だけかもしれない(笑))

ページ読み込み時にふわっとフェードインする CSS。

saip
Astro description

見出しを可愛らしく♡

かなり参考させていただいています、サルワカ様です。

サルワカ | サルでも分かる図解説明マガジン
サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ!

見出しH2はこんな感じ

アイコンをハートに変更、パッティングと角丸を調整。

見出しH3はこんな感じ

下破線を追加して、分かりやすくしてみました。

見出しはH2とH3のみCSS入れています(それ以降はリセット)

ページネーションを角丸に

記事一覧のページネーションを角丸にしました。

角丸にするだけで雰囲気が変わる〜!

この部分が一番cocoonっぽさが出る部分だと感じているので、変えるだけでもすごい変わると思います!

【Cocoon】ページネーション(ページ送り)をカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はページネーションのカスタマイズです。ページネーション(ページ送り)というのは、記事一覧の下にあるこういうやつですね↓「Cocoonっぽさ」がある部分なので、ここを変える

SNSシェア ボタンを小さく

SNSシェアボタンを小さくしました。

【Cocoon】SNSボタンの設定方法とカスタマイズ
WordPress/Cocoonを使ったブログでの『SNSシェアボタン』をカスタマイズします。コピペでOKなので「初心者だけどブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

参考にしたサイトまとめ

本当にお世話になりました!参考にしたサイトなしでは、ここまでカスタマイズできなかったです!

(順不同)

本当にありがとうございました。

コメント

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