【cocoonサイト型】リニューアルしたトップページのこだわりポイントやデザインのヒント
そもそも何故、個人で運営している雑記ブログのトップページをサイト型にしたのか。 カスタマイズはどの様にして進めていったのか。 当サイトがワードプレス無料テーマのcocoonを利用して、現在の形になるまでの経緯を書き留めていこうと思います。 さらに実際にカスタマイズするため、ありがたいことに「コピペOK」と称して詳しいやり方をご紹介されているサイトがたくさんあるので、私が参考にしたブログやサイトを合わせてご紹介していこうと思います。
fujicolife.comそして今月、当サイトが 一周年 を迎えるということで。ベースはそこまで変更していませんが少しトップページのデザインをリニューアルしたので、ご報告も兼ねて今回のデザインのこだわりポイントと、デザインイメージを実現できたヒントをご紹介していきます。
- 以前までのデザイン
- 今回のデザイン
- こだわりポイント① 回転文字デザイン
- こだわりポイント② ページ内リンクのイラスト
- こだわりポイント③ ふわっと文字が動くアニメーション
- こだわりポイント④ 新着記事のアニメーション
- デザインのヒントはどこから？
- カスタマイズ、やってみたいけど難しそうだなと躊躇している方へ
- カスタマイズを振り返って
以前までのデザイン
◎ イラストを交えて柔らかく可愛いデザインに。 （素材は全て自分で描きました）◎ ”絵を描く”のイメージとして、絵の具っぽい要素を背景に差し込む。 （うにょってしている黄色い丸）◎ 背景の緑は芝生をイメージ。 （ガーデニングのコンテンツがあるので）
今回のデザイン
リニューアルしました！…といっても、基本はシンプルにしたいのでさほど変わっていない箇所も多いですが。今回のデザインのコンセプトはズバリ！「 ゆったりお家時間 」です！
こだわりポイント① 回転文字デザイン
こだわりポイント② ページ内リンクのイラスト
こだわりポイント③ ふわっと文字が動くアニメーション
こだわりポイント④ 新着記事のアニメーション
デザインのヒントはどこから？
SANKOU! | Webデザインギャラリー･参考サイト集 Webデザイン制作の参考になるステキなWebサイト･LPを集めたギャラリー。業種･テイストなどで絞込検索可能。最新トレンドをチェック！ sankoudesign.comカスタマイズ、やってみたいけど難しそうだなと躊躇している方へ
そんな方に朗報なのが、cocoonをお使いなら スキン を使う手もあります。
ART+BEAT MANIFESTO ss1.xrea.comcocoonのスキン「メイド・イン・ヘブン」を制作された方の運営するサイトなのですが、そもそもこのスキンが コーディングの知識がなくとも簡単にカスタマイズが出来る ようになっており、（スキン内にカスタマイザーがあり、そこからサイトカラーや見出しを自由に選択できるようになってます！）
- cocoonを使っているのでカスタマイズをやってみたい！
- でも、全く知識がなくてコードはいじれない…。
- サクッと全体をおしゃれにまとめたい！
カスタマイズを振り返って
関連記事
初心者がcocoonでサイト型トップページを完成させた方法と参考にしたブログ・サイトをご紹介 【Procreate】簡単！GIFアニメーションの作り方 サイトのトップページで使用しているこのイラストたち。実は簡単にGIFアニメーションにできちゃうんです！今回はこの「Procreate」を使ってできる簡単アニメーションの作り方をご紹介。 【画像あり】芝生にキノコが生えてきた！？今すぐできる予防対策をご紹介 プールで芝生が枯れた？芝生でプールをしてはいけない理由と対策をご紹介 Profile子育てや日々の生活に追われ、 余裕がなくなってイライラしてしまうことや、 お金や時間の不安に悩むことも。
・子育てのイライラやしんどさ ・余裕のない毎日をラクにする工夫 ・暮らしとお金の整え方
ふじこをフォローする Search Popular posts レモンを種から育ててみた。【意外と簡単】 2023.09.09 2025.05.28 【アゲハチョウ対策】レモンの木に防虫ネットつけてみたら効果抜群だった 2024.04.21 2024.09.22 葉が枯れてしまったウンベラータは復活する？我が家の事例と復活させた方法 2024.05.14 2024.09.20 元インテリアショップ店員がおすすめするリードディフューザー「CULTI（クルティ）」の魅力 2024.05.18 2024.10.10 リードディフューザーが香らなくなったと感じたら｜復活方法と長く楽しむコツ 2024.05.21 2024.10.13 Keyword Contents- 以前までのデザイン
- 今回のデザイン
- こだわりポイント① 回転文字デザイン
- こだわりポイント② ページ内リンクのイラスト
- こだわりポイント③ ふわっと文字が動くアニメーション
- こだわりポイント④ 新着記事のアニメーション
- デザインのヒントはどこから？
- カスタマイズ、やってみたいけど難しそうだなと躊躇している方へ
- カスタマイズを振り返って