こんにちは!momo(@illgosimply)です!
このブログは、無料テーマのcocoonを使っています。
Cocoon って?
WordPressの無料テーマです。
Cocoonのすごいところ!
- 無料
- いろんな機能が充実している!
- カスタマイズが無限大!
- レスポンシブスタイルに対応
- 軽い!
カスタマイズにあたって、多くのサイトを参考にしていただきました!
本当にありがとうございます。
参考にしたサイトをご紹介させてください。
TOPデザインはサイト型(2022年11月時点のデザインです)
サイト型デザインにしています。
固定ページを作って、2カラムに最新投稿記事、人気記事。
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なので「初心者だけどブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。
参考にしたサイトまとめ
本当にお世話になりました!参考にしたサイトなしでは、ここまでカスタマイズできなかったです!
(順不同)
本当にありがとうございました。
ポチップ
コメント