この記事にはブログデザインの主なカスタマイズ履歴と参考にしたサイトなどを備忘録的に書いています。
- ブログ好きな40代主婦
- CocoonサイトをCSSでフルカスタマイズ
- JavaScriptを勉強中
- ドメインパワー32
- ワードプレスで２サイトを運営しています
です
トップページ作成（固定ページ使用）
大きく変更したところのみ抜粋します。
Cocoonトップページに自作タブ切り替えを導入
固定ページ＋タブ切り替えを使用してトップページを作成しました。
Cocoonサイト型トップページ作成
新着記事順に並んでいたトップページをサイト型に変更。
見た目と動線が大きく変わり、アクセス数にも影響が出る部分です。
カテゴリーをサブディレクトリ化／Xserver（エックスサーバー）／
メインだった海釣りカテゴリーをまるごとサブディレクトリに移行し別サイト化しました。
参考サイト 5分で完了】サブディレクトリの作り方を全手順画像付きで解説【エックスサーバー編】
トラブル時、Xserver（エックスサーバー）の自動バックアップは最強！
実はディレクトリ化は成功したのですが、最後の最後でURLの置換にプラグインを使ったところ途中でパソコンが固まり、結果サイトが壊れてしまうという非常事態が起こっています。（重大なエラーが発生と通知があり管理画面にも入れず絶望的）
どうにもできずエックスサーバーのバックアップに頼り…
MySQL復元でようやく復旧できました！！
ブログ存続の窮地を救ってもらったエックスサーバーには感謝ばかりです。
SWELL風アイコンボックス
Cocoon独自のボックスデザイン（アイコンボックス）の変更をおこないました。
2023/1/18
人気有料テーマSWELL風のデザインを採用。
Cocoonデフォルトからレイアウト、アイコンともに変更しています。
SWELL風波型境界線
セクション境界線を波型にする
境界線を波型にするために波を自分で作ることができるジェネレータを利用しました。波の形を自分好みで調整でき、コードはコピペでそのまま使えるので便利です。
参考サイト 【HTM/CSS】svgで境界線を波線にする方法
うねうね動作を追加
さらに波がうねうねと動く進化版をTwitterで見かけたこと、カスタマイズ記事が公開されていたからことから実装。（SWELLカスタマイズ扱いですがコード自体はCocoonでも使えます）
参考サイト SVGモーフィングで「流体シェイプ」をウネウネさせる – SWELLカスタマイズ
後日、このカスタマイズ記事を書かれたクロード鰥夫（ヤモヲ）さんとTwitterで繋がるご縁があり感激です。
Pochipp（ポチップを導入）
アフィリエイト商品リンク作成にブロックエディタ用プラグイン『Pochipp(ポチップ)』を導入しました。
ポチップ最初のインストール方法と使い方を解説
売上アップにつながるポチップ便利機能を紹介
ポチップカスタマイズ／リンクボタンを並び替えてアピールする方法などを紹介
トップへ戻るボタンに画像を設定
2023/2/13
いつも交流させていただき、おしゃれなCocoonサイトを運営されているこいけさんの記事を参考にしてトップへ戻るボタンを画像に変更。
なんとシンプルと可愛いを併せ持ったオリジナルアイコンがダウンロードできます！私も使わせていただきました。
SWELL風比較表（テーブル）
テーブルのセル内にリンクボタンを置くカスタマイズ
リンクをボタン化する方法をこちらにまとめました。
また、背景に記号◎○△×を入れたSWELL風に比較表を作成。
ひとこと
ブログ運営では記事を書くこと・収益を上げることが最優先と言われますが、私は公開されているコードを多く取り入れながらデザインのカスタマイズを楽しんでいます。
ちなみにアクセスも徐々にアップ♪
今後についても随時、更新予定です。
Comment