ブログ開設当初はテーマがSimplicity2でした。
後続のテーマとしてSEOにも対応、シンプルでカスタマイズしやすいCocoonにしたものの、なんとなくあか抜けない感。
シンプルですっきりしているのはSimplicityからもでしたが、どうしてもお堅い感じがするんですよね。
もちろん、その見た目がいいというサイトもたくさんあるのですが、なんとなく自分のテイストに合わず。
ただ、カスタマイズがとてもしやすいので、自分好みにある程度変えられること、カスタマイズ情報が多いのも魅力で使っていました。
そしてテーマ最大の個人的に気になる部分ですが、
ある程度のブラウザ幅がないとサイドバーが下に落ちる！
というもの。
STROKとかSANGOとか特に記事の横に必ずサイドバーが出るんですね。
同じブラウザの幅でもcocoonは出ないんですが、STORKやSANGOはサイドバーが出ます。
もちろんある程度、ブラウザの幅を狭めるとサイドバーも落ちるんですが、ブラウザ幅があまりなくてもサイドバーが出ているのが好みです。
あくまでも私の好みの問題ではあるのですが、サイトを見るときに、かつてのブログの傾向からサイドバーが落ちないのが当たり前という感覚でずっとやってきていたので、サイドバーがないのがイヤ。
また、サイドバーがあることでカテゴリから別の記事を見て回遊率を高めたり、他の記事に興味持ってもらうという目的もあります。
ですが、このサイドバーを確実に固定する方法というのが、どうしてもわかりませんでした。（CSSとか詳しければ別です）
だったら有料テーマ買ったほうがいいということになるのですが、そこまで出せる余裕がありません。（正直ベース）
もちろんCocoonカスタマイズでやっていたり公式に情報がないか探しましたが、これも見つからず。
半ばあきらめていたのですが、それを上回るすてきなカスタマイズを発見しました。
それが、「CocoonをSANGOのようなデザインにするカスタマイズ」です。
もちろん、ここには一番やりたかったサイドバーを着実に表示する方法はありません。
ただし、見た目をSANGO風にカスタマイズすることである程度満足のいく仕上がりになりました。
無料テーマだけどSANGO風の見た目にしたいという場合は、ぜひ参考にしてください。
お堅い感じのCocoonを柔らかくおしゃれにカスタマイズするサイト
もっとおしゃれにしたいな～、SANGOみたいにと思っていたら、SANGO風にカスタマイズをしているサイトを発見しました。
普通こういうのってある程度勉強しておいたほうが、自分好みにできるのはわかるのですが、やってくれている人がいるなら便乗したほうが早いです。
トップページからして、そのままSANGOです。
というわけで、こちらのサイトから拾える情報を拾って、自分のやりたい部分だけカスタマイズしてみました。
SANGOで大事なのはマテリアルデザイン
どこからカスタマイズしようかと見ていて、目についたのが以下の記事です。
こちらにマテリアルデザインに関するリンクがあるんですね。
そこであれこれリンクを見ていたところ、サンプルサイトにたどり着きました。
こちらで配色のテストができるので、自分の使いたい色、キーカラーなどを決めてあげると、他の配色についても決めることができます。
色見本帳などで一つ一つの色を見ながら組み合わせると、私自身決められなかったり、配色がはまらなかったりするので、パターン化されたものから選ぶとサイトカラーが決めやすいです。
もう一つ、40パターンのページも参考になります。
どちらもサンプルをクリックするとその配色見本が出てくるので、いろいろ試して着せ替えすることができます。
実際、この中で自分が使いたいものを選んでみて、しっくりくると思ったものをサイトにも適用しました。
それにしても、なんて便利なんでしょうか、このサンプル。
色コードがちゃんとついているので、そのままCocoonの設定にコピーしてしまえば完成します。
ただし、サンプルの色の組み合わせそのままは使いませんでした。
ある程度近い色、実際に配置してみたときの見映えなども考慮して、色の微調整をしています。
こういうの、地味に疲れますよね。
サイトのヘッダーの色ですら何度か調整していますので、それだけで時間がかかりました。
それでも、一から色を選んで作るよりは、組み合わせた色を適用するだけで済むので、あれこれ迷うよりは断然楽です。
ほぼコピペで終わる、ページのカスタマイズ
色だけでもだいぶすっきりしたのですが、さらにCocoonのSANGO化を進めました。
こうなったら、どこから見てもSANGOみたいなテーマにしていきます。
サイトの情報を隅々まで見て、まず手入れしたのがナビゲーションメニュ―。
デフォルトだと味気ないんですが。
ここに記載していあることをそのまま順番通りにやりました。
私のサイトはメインカラーをオレンジにしているのですが、紹介されているメニューの色が白の設定、文字がグレーなので、メインカラーの色に関係なく設定できるんですね。
あとは、メニューの幅とかフォントサイズの設定をcssに任せているので、実際何をどうしたのか考えることなく、メニューの見た目を変えることができました。
次にやったのが、トップページからしてSANGOっぽいデザインにするカスタマイズ。
以前はブログカードを一覧で並べていたデフォルト設定でした。
時々これだと普通っぽいかなと思って、2列にしてみたこともあったのですが、なんか落ち着かないので設定したもののすぐに元に戻してしまっていました。
ですが、今回はSANGO風です。
ページに記載してあったcssをそのまま投入。
また、サイトの背景色も記事に書いてあった色をそのままコピーして適用。
見た目、同じものができあがりました！
本当、ありがたいです。この記事！
というわけで、トップページの見た目とナビゲーションメニューを変えただけでほぼSANGOっぽいサイトが出来上がりました。
すごいのがリスブロの背景色。これ入れたらいいよというカラーコードが提示されているんですけど、これ、サルワカと同じ色なんですよ。
「どうやってその色判別したの？！」になりました。
きっとだいたい皆同じに違いない、ページネーションのカスタマイズ
すでにこのとき、リスブロにあるカスタマイズをある程度やっていて、疲れ切ってしまいました。
でも、四角いページネーションを丸くカスタマイズしないとSANGO風にはなりません。
そこで、ページネーションもカスタマイズ。
ここに記載してあったCSSを丸ごとコピペして終わり。
色も変えていません。
他のサイトも気になってチェックしてみたのですが、ここが同じ色の人、結構いますね。
本来ならばマテリアルデザインに合わせて、色も変えたいところですが、すでに全体の色を決めるだけでも疲れているので、手を付けるのをやめてしまいました。
ただ、ここを変更しなかったとしても、サイトの背景色をすでに手順通りに変えているので、ページネーションの色が溶け込んでいて、問題なしでした。
まとめ
もともとはCocoonのサイドバーをSANGOのように表示できないかで調べていたことでしたが、いつのまにかCocoonの見た目がSANGOになっていたので、満足してしまいました。
Cocoonが好きだけど、お堅いイメージをちょっとでも変えてSANGOに近づけたいという場合、ぜひともリンク先の情報を参考にしてください。
コメント