こんにちは！momo(@illgosimply)です！
このブログは、無料テーマのcocoonを使っています。
Cocoon って？
WordPressの無料テーマです。
Cocoonのすごいところ！
- 無料
- いろんな機能が充実している！
- カスタマイズが無限大！
- レスポンシブスタイルに対応
- 軽い！
カスタマイズにあたって、多くのサイトを参考にしていただきました！
本当にありがとうございます。
参考にしたサイトをご紹介させてください。
TOPデザインはサイト型（2022年11月時点のデザインです）
サイト型デザインにしています。
固定ページを作って、２カラムに最新投稿記事、人気記事。
Pick upは全記事からランダムで表示させています。
cocoonはこういったことができるショートコードが充実しています。
工夫して使うと、グッと充実したブログができてカスタマイズが楽しいです！
3カラムにカテゴリー別記事一覧を入れています。
背景壁紙を固定してスクロール
PCでもタブレットでもスマホでも背景壁紙を固定してスクロールするようにしました。
【CSS】background-sizeで背景画像をレスポンシブに設定する方法｜Gimmick log
CSSのbackground-size プロパティは、背景画像のサイズを指定できます。 表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。 同じ画像をそれぞれの値で表示したサンプルを作成しました...
gimmicklog.com
ページ読み込み時のフェードイン
これがあるだけでグッとページが凝っているなぁと感じられますよね！（私だけかもしれない(笑)）
ページ読み込み時にふわっとフェードインする CSS。
saip
Astro description
s41t0h.jp
見出しを可愛らしく♡
かなり参考させていただいています、サルワカ様です。
サルワカ | サルでも分かる図解説明マガジン
サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ！
saruwakakun.com
見出しH2はこんな感じ
アイコンをハートに変更、パッティングと角丸を調整。
見出しH3はこんな感じ
下破線を追加して、分かりやすくしてみました。
見出しはH2とH3のみCSS入れています（それ以降はリセット）
ページネーションを角丸に
記事一覧のページネーションを角丸にしました。
この部分が一番cocoonっぽさが出る部分だと感じているので、変えるだけでもすごい変わると思います！
【Cocoon】ページネーション（ページ送り）をカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はページネーションのカスタマイズです。ページネーション（ページ送り）というのは、記事一覧の下にあるこういうやつですね↓「Cocoonっぽさ」がある部分なので、ここを変える
web-ashibi.net
SNSシェア ボタンを小さく
SNSシェアボタンを小さくしました。
【Cocoon】SNSボタンの設定方法とカスタマイズ
WordPress/Cocoonを使ったブログでの『SNSシェアボタン』をカスタマイズします。コピペでOKなので「初心者だけどブログをおしゃれにデザインしたい！」という方にもおすすめです。モバイル表示にも対応しています。
yujiblog.org
参考にしたサイトまとめ
本当にお世話になりました！参考にしたサイトなしでは、ここまでカスタマイズできなかったです！
（順不同）
本当にありがとうございました。
コメント