お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

Cocoonカスタマイズ履歴メモ

アイキャッチ/カスタマイズメモカスタマイズ
スポンサーリンク

この記事にはブログデザインの主なカスタマイズ履歴と参考にしたサイトなどを備忘録的に書いています。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー32
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

トップページ作成(固定ページ使用)

大きく変更したところのみ抜粋します。

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(ポチップ)』を導入しました。

ポチップ最初のインストール方法と使い方を解説

売上アップにつながるポチップ便利機能を紹介

ポチップカスタマイズ/リンクボタンを並び替えてアピールする方法などを紹介

\収益化の工夫満載、ポチッププロ/

トップへ戻るボタンに画像を設定

top

2023/2/13
いつも交流させていただき、おしゃれなCocoonサイトを運営されているこいけさんの記事を参考にしてトップへ戻るボタンを画像に変更。

なんとシンプルと可愛いを併せ持ったオリジナルアイコンがダウンロードできます!私も使わせていただきました。

SWELL風比較表(テーブル)

テーブルのセル内にリンクボタンを置くカスタマイズ

テーブル/ボタン

リンクをボタン化する方法をこちらにまとめました。


また、背景に記号◎○△×を入れたSWELL風に比較表を作成。

カスタマイズメモ/比較表

ひとこと

ブログ運営では記事を書くこと・収益を上げることが最優先と言われますが、私は公開されているコードを多く取り入れながらデザインのカスタマイズを楽しんでいます。

ちなみにアクセスも徐々にアップ♪

今後についても随時、更新予定です。

Comment

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