【カスタマイズ】ワードプレステーマ「Cocoon」に変えてからの当サイトのデザイン変更点

ワードプレスのテーマをCocoonに変更してから、もうすぐ10カ月ぐらい経ったかなと。
今振り返ってみれば、全部自分の自己満なんですが、いろいろ変更やカスタマイズしてきたなと思いまして、このへんで何を変更したか、まとめようと思いました。

別にまとめる必要はないんですが、たまに「これCocoonなんですか?」と聞かれる事もあり、どこをどう変えたかを書いとく事によって「これCocoonですよー」って伝わるかなと思って書いていきます。
基本的に変更・カスタマイズしていった順番で書いていきます。

スポンサーリンク

ランダムスタイルチェンジシステム

勝手に「ランダムスタイルチェンジシステム」と呼んでるだけのサイトカラーとか無視したカスタマイズです。
サイトが更新・リロードされるとid属性の値がランダムに変わり、スタイルが切り替わる仕組みです。
よくわからなければ、百聞は一見に如かず、このサイトを更新してみてください。

サイトを始めて制作した頃、もう何年も前ですがランダムで表示される「おみくじ」を実装してました。
そう黒歴史です。
今まで自作も含め、いろんなワードプレスのテーマ使ってきましたが、なぜか「黒歴史」の部分を形を変え継承させています。

方法はワードプレステーマ「ライオンブログ」の頃から行ってる方法で、ワードプレスのphpを使ってランダムにid属性を変更してます。

トップページのファーストビューに動画表示

東田ダダーントップページのファーストビューの動画
トップページのファーストビューの動画

東田ダダーントップページ、スクロールするとグローバルナビゲーションが変化
スクロールでグローバルナビゲーションが変化

単純に動画を使った背景を実装したいなと、サイト速度をフル無視で実装。
「5Gの時代が来るからね!」と、5Gの話聞いてからは「5G」を大義名分にしてます。

それと同時にトップページのグローバルメニューだけ、表示位置を動画に被せ透明にし、画面の1/3ぐらいスクロールで透明から色をつけるようにしました。

狙いとしてはランディングページと同じ考えでスクロールで変化を付けて下のコンテンツ見てよーって考えです。
動画も画面いっぱいではなく、80%ぐらいの高さにし下のコンテンツをチラ見せしてます。

サムネイル画像ホバー時のグラデーションエフェクト

画像ホバー時のエフェクト

なんか派手にしたいなーという衝動で、ホバー時の変化ならクールじゃない?クールランニングじゃない?最近、金曜ロードショーでやらなくなりましたね、「クールランニング」。

方法はcssで疑似要素にグラデーションのアニメーションを用意し、ホバーした時に表示させるだけ。
「Read More」という文字も疑似要素で表示しているので、beforeとafterどちらも使って表現。

ちょっと大変だったのが、Cocoonの既存のスタイルとがっちゃんこしてしまうところ。
beforeとafterをどちらも使っていたので、スタイルがぶつかるぶつかる。
問題ないようにスタイルを上書きするのが、少しだけ大変でした。

目次カスタマイズ

東田ダダーンのブログ記事の目次

目次は永遠に悩んでしまうところ。
結局、よくありそうなデザインに落ち着きましたが、小見出し箇所のボーダーが自分的に気に入ってるところです。
CSSのみ変更でカスタマイズ。

スマホ時のアイコンの変更

スマホ通常時のフッターアイコン

AMP表示時のフッターアイコン

Cocoonにしてからずっと、「トップページ」アイコンを変更したいなぁって思っていました。
けっこうこの部分で「このサイトCocoonだな」って言うのがわかる感じがして、べっ別に嫌とかじゃないですよ!?
Cocoonにはもちろん感謝してますよ!?

でも、個性を出したいなと思っていたところ、スマホ表示時のフッターアイコンのカスタマイズが実装されたので、早速変更。

icomoonでロゴをフォント登録して、メニューのカスタマイズからクラス付与して表示させてます。

流れるテキストでヘッドライン表示

検索流入から見に来てくれたユーザーに新しい記事も見てほしいなぁと思って実装したのが、流れるヘッドライン表示。

Cocoonを使ってる限りなるべく表示速度を遅くしたくないので、Javascript等をできる限り追加したくないなぁと思っており、そこでCSSのみで実装してみました。

ローディング画面の追加

東田ダダーンのローディング画面

ロゴ画像の簡易なアニメーションとローディングバーをつけてローディング画面を追加しました。
JSとCSSで実装。

トップページを固定ページに変更

トップページを固定ページに変更

雑記ブログなので、いい加減ちゃんとまとめないといけないなと思い変更。
Cocoonの編集機能で基本的には簡単に作成できるのですが、こだわり発動でテンプレ作成しました。

後から気づいたこと

後から気づいたのですが、作成した固定ページにアイキャッチ画像の設定をしないと、Cocoonの設定画面でデフォルトのOGP画像の設定していても、「noimage」用の画像が表示されます。
なので、トップページを固定ページに変更する場合は、忘れずにサムネイルも設定しましょう。

つまりアイキャッチ画像を設定しないと、どういう事が起きるかと言うと、
例えばトップページをリンクしてもらった際、それがリンクカード式の場合に表示されるサムネイルが表示されない、もしくは「no-image」で設定した画像が表示される事になります。

トップページの記事一覧を切り替えタブでカテゴリ別に変更

カテゴリ別タブ切り替えイメージ

トップページを更に変更し、切り替えタブで記事一覧を切り替えれるように変更しました。

その他の変更

プッシュ通知「push7」のカスタマイズ

push7の通知場所変更カスタマイズ

Cocoonとは関係ないですが、更新した事を通知してくれるPush7の「登録してくれませんか?」のお願い通知の場所を変更カスタマイズ。CSSのみ。

過去に変更した内容

スクロールで遅れて表示させる

表示速度改善の為、実装してましたがやめました。

ボツにした内容

ページ遷移時のアニメーション

リロードでランダムで色が変わる当サイトですが、その色が変わる変化をページ遷移時のアニメーションで表現したいなぁと試行錯誤。
完成はしたのですが、なんかクドイなぁと思い、結局断念。

イメージ的には以下のデモの感じです。

カスタマイズ振り返りまとめ

おそらく大まかなカスタマイズは上記だけだと思いますが、細かいのはもっと変更したかもしれないです。
基本的にはいろんなサイトを見て、面白いデザインや動きがあったら、実装できるか試してます。
その中で、取り込めそうと思うものは取り込んだり、新しく思いつくものは作ってみたりしています。

お客さんがいるわけでもなく、自分の好きなように自由にサイトをカスタマイズできるのは楽しいです。
最初の方から言っている「自己満」でしかないのですが、気づいたらこれって「趣味」だなって思いました。

どれだけ、ガワをいじくったって重要なのは中身
当分は記事制作に専念しようと思います。たぶん。

追伸

あっ、404いじるの忘れてたなぁ・・
なんか面白いの思いつくまでは、そのままかなぁ。

コメント

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