この記事にはブログデザインの主なカスタマイズ履歴と参考にしたサイトなどを備忘録的に書いていきます。随時更新。
トップページ
2022／大きく変更したところのみ抜粋します。
トップページに自作タブ切り替えを導入
固定ページ＋タブ切り替えを使用してトップページを作成しました。
サイト型トップページ作成
新着記事順に並んでいたトップページをサイト型に変更。
見た目と動線が大きく変わり、アクセス数にも影響が出る部分です。
トップページにパララックスを導入
スクロールするとコンテンツと画像がパラパラと切り替わるトップページを作成。
このページではbackground-attachment:fixed（背景画像を固定してスクロールしないようにするCSSプロパティ）が「Safari」で効かないことを考慮し、position:stickyを使用しています。
プロフィール欄に背景画像を入れる
要素いっぱいに画像を配置し、さらに背景固定。そこに疑似要素を重ねて文字が見えやすいように元の画像を白っぽく透過させています。
一部カテゴリーをサブディレクトリ化
2022/11/31
メインだった海釣りカテゴリーをまるごとサブディレクトリに移行し別サイト化することに。
手順はこちらのサイトを参考にしました。
実はディレクトリ化はこちらのサイトの解説のおかげで成功したのですが、最後の最後でURLの置換にプラグインを使ったところ途中でパソコンが固まり、結果サイトが壊れてしまうという非常事態が起こっています。（重大なエラーが発生とメールがきて管理画面にも入れずリカバリーモードで作業）
どうにもできずXserver（エックスサーバー）のバックアップに助けて頂きましたが、今回のケースではデータベース復元では改善せず…
MySQL復元でようやく復旧することができました。
雪降るトップページでイメチェン
続いて、サイトに季節感を出せるかなとトップページに雪を降らせてみました。
１２月にはヒラヒラ雪が降るトップページのブログ仲間がたくさん^^
公開されているCSSのおかげで実装時間は１～２分ほどであっという間に雪降るトップページの完成。
他にも舞い散る桜、紙吹雪バージョンなどもあり応用できそうですね。
トップページ微調整
2023/1/17
アピールエリア画像変更、ピックアップ（カテゴリー）を追加し、全体的に微調整しています。
トップページ画像、レイアウト（全景）
アイコンボックス
Cocoon独自のボックスデザインの変更をおこないました。
記事内アイコンボックスデザイン
2023/1/18
人気有料テーマSWELL風のデザインを採用。
Cocoonデフォルトからレイアウト、アイコンともに変更しています。
波型境界線
セクション境界線を波型にする
2023/1/19
境界線を波型にするために波を自分で作ることができるジェネレータを利用しました。波の形を自分好みで調整でき、コードはコピペでそのまま使えるので便利です。
うねうね動作を追加
さらに波がうねうねと動く進化版をTwitterで見かけたこと、カスタマイズ記事が公開されていたからことから実装。（SWELLカスタマイズ扱いですがコード自体はCocoonでも使えます）
後日、このカスタマイズ記事を書かれたクロード鰥夫（ヤモヲ）さんとTwitterで繋がるご縁があり感激です。
ポチップを導入（アフィリエイト商品リンク）
2023/2/12
アフィリエイト商品リンク作成にブロックエディタ用プラグイン『ポチップ』を導入しました。
トップへ戻るボタンに画像を設定
2023/2/13
いつも交流させていただき、おしゃれなCocoonサイトを運営されているこいけさんの記事を参考にしてトップへ戻るボタンを画像に変更。
なんとシンプルと可愛いを併せ持ったオリジナルアイコンがダウンロードできます！私も使わせていただきました。
SWELL風比較表（テーブル）
2023/3/6
背景に記号◎○△×を入れたSWELL風に比較表を作成。
ひとこと
ブログ運営では記事を書くこと・収益を上げることが最優先と言われますが、私は公開されているコードを多く取り入れながらデザインのカスタマイズを楽しんでいます。
ちなみにアクセスも徐々にアップ♪
楽しみ方は人それぞれだと思います。
今後についても随時、更新予定！
Comment