この度、当サイトのトップページをリニューアルしました！！（パチパチ）
めちゃめちゃ時間もかかったけど…大満足の出来！！
そもそも何故、個人で運営している雑記ブログのトップページをサイト型にしたのか。
カスタマイズはどの様にして進めていったのか。
当サイトがワードプレス無料テーマのcocoonを利用して、現在の形になるまでの経緯を書き留めていこうと思います。
さらに実際にカスタマイズするため、ありがたいことに「コピペOK」と称して詳しいやり方をご紹介されているサイトがたくさんあるので、私が参考にしたブログやサイトを合わせてご紹介していこうと思います。
- cocoonを利用している。
- cocoonのカスタマイズに興味がある。
- カスタマイズをどのように進めていけばいいか分からない。
- 自分のサイトもセンスのいいデザインにしたい。
そもそも何故トップページをサイト型にしたの？
実は…、当サイトは開設して既に７ヶ月が経とうとしています。それなのに記事数は数えられる程度だし、それでものすごくPVを稼いでいるかと言われるともちろんそんなことはありません。
ブログを始めたきっかけも、たまたま友人がブログをやっていて「私もやってみようかな」なんてふわっとした理由で。ぶっちゃけ初めは記事のカテゴリーもしっかり考えておらず、今思えば無計画にも程がありました…。
そんな私も今年に入って、心機一転（？）。
せっかく始めたブログ運営。本気出してやらなきゃ！と、謎にスイッチが入り、じゃあまずは何する？となった時に、”サイトのデザインを整える”ということに着目しました。
元々イラストを描くことが好きで、ブログのアイキャッチは自身で描いたイラスト素材を使って制作し、統一感と独自性を重視してきました。するとどうでしょう。
「イラストに合わせたカラーでボタンの色も変えてみたいなあ…。」
「見出しも調べたらいろんなデザインにすることが出来るんだなあ…。（検索ぽちー）」
え…？
「cocoonでこんな素敵なサイトのデザインが作れるの！？
（…ｳｽﾞｳｽﾞ）やってみたい！！！！！」
…と、こんな流れで、私のcocoonカスタマイズの門は開かれたのでした。
Webデザインには興味があったのでちょうどいい機会だ…！
要するに自分の気に入ったデザインでブログ運営できるならそっちの方が更新のモチベーションにも繋がるし、自分自身が楽しめるブログでないと、他人様に気に入ってもらおうなんておこがましい話だなということで、私はまずサイトデザインのカスタマイズに挑戦することを決めました。
Webデザイン、やったことあるの？
さて。
サイトのデザインをカスタマイズ出来ることを知り、早速何から始めようかとまずはGoogle先生で検索してみたところ、ある問題にぶち当たりました。それは…、
知識が全くなかったこと。
だってね。
「cocoon 見出し カスタマイズ」と調べて出てきた記事を見てみたら、見出しには【コピペOK】なんて書いてあるもんだから、こちとら楽勝じゃん♪と勘違い。蓋を開けてみれば見たことのない英単語がずらり。
HTML？CSS？なんじゃそりゃああああああ！！！
そうです。私、今年に入った時点ではWebデザインの知識は全くのゼロなのです。（ここでいうカスタマイズ作業は「コーディング」と呼ばれるのかな）学校の授業でも、独学でも。今まで生きてきた中で一切触れてこなかったのです。
そんな私でもここまで形にすることが出来ました！
では、具体的にどの様にして作業を進めていったのか。
もっと効率いいやり方あるんじゃ…？となる点もあるかもしれませんが、初心者なりにあーでもないこーでもないといった試行錯誤する時間も楽しかったりするので。あくまで個人的なやり方ということだけ頭の片隅に入れていただきながら読んでいただけると嬉しいです。
let’s！カスタマイズ！
さあ、決心が固まったところで早速作業に取り掛かりましょう！
まずは大まかなイメージを決める
どんなトップページにしたいのか？
かっこいい系？可愛い系？おしゃれ系？
まずは自分の作りたいイメージを固めるところから始めます。ここがブレてしまうとデザインも「これじゃない感」が出てきます…。
素敵なサイトはどんなカテゴリーであっても”統一感”があるのです。
私のブログはカテゴリーとしては主に「ガーデニング」と「暮らし」について。後は自分で描いたイラストもデザインの一部にしたいなと考えていたので、かっこいいというより可愛いイメージかな？
…と、このように箇条書きでもいいのでイメージを書き出していくと最終的にまとめやすいです。
参考にしたいブログやサイトを探してみる
自分のやりたいデザインの方向性が決まれば、次はお手本を探してみましょう。
デザインのヒントは様々なところから得ることが出来ますよ。
まずはお手軽にGoogleで画像検索。
なぜ画像検索なのか。それは自分の好みのデザインが一目で探せるから！
例えば使われているテーマカラーだったり、フォント等文字だけで探すよりアイキャッチから探した方がサイトのイメージも湧きやすいですよね。
私はcocoonを使用していたので、「cocoon カスタマイズ おしゃれ」で出てきた記事から自分好みのデザインを探しました。
そこでまず見つけたのがyokoさんのブログ。
おしゃれなアイキャッチに惹かれサイトに飛んでみれば、シンプルでスッキリしたデザインにイエローがアクセントとなって爽やかでとても見やすいページとなっており、センスがあるってこういうことなのかーと思わずにはいられなかったとても素敵なブログです。
私もyokoさんの記事を参考にトップページの一部をカスタマイズしました。（ページ下部のデザイン）
このカスタマイズの方法は下記の記事で詳しく説明して下さっているので、気になる方は是非ご覧ください。
次に、yokoさんのページから知ったはっちゃんさんのブログ。
cocoonのカスタマイズと言えばこの方！と言っても過言ではないはっちゃんさん。まず訪問した瞬間目に飛び込んでくる素敵なデザインに私は目を奪われました…。同じテーマを使っているとは思えない…！
はっちゃんさんのブログはまさに私のようなカスタマイズ初心者にも分かりやすく丁寧に説明が書かれており、一から十まではっちゃんさんのブログ内で解決出来るくらいカスタマイズについての記事が豊富なので、気になる方は是非一度と言わず何度も訪問するべきサイトです！そして何よりお人柄が良い…。超初歩的な質問にも丁寧に答えて下さったり、私のカスタマイズが完成させられたのもはっちゃんさんのサポートがあったからです…。本当にありがとうございました！
私が特に参考にさせていただいた記事はこちら。
一部有料コンテンツも含みますが、金額以上に有意義すぎる内容です！
最後に私がトップページをカスタマイズする上で、デザインとしてすごくインスピレーションを受けたサイトがコイケさんのブログ。
コイケさんのブログははっちゃんさんの記事から見つけました。
そんなコイケさんのサイトは、上記で紹介したお二人のサイトとはまた一変。シンプルなデザインの中に遊び心があるというか。とにかくデザインが可愛い…！記事ページのフレームが本を開いた様なデザインになっていたり、鉛筆がゆらゆら動いていたり…。「コイケノート」というブログタイトル通りコンセプトに合ったデザインで、何度も訪れたくなるようなサイトなのです。
私もこんな見ていてワクワクするようなデザインに出来たらいいなあ…といった思いから、本格的にカスタマイズを始めるきっかけとなりました。
私のトップページも一部こちらの記事を参考にカスタマイズしました。（新着記事の部分）
このやり方はhtmlなどは使わず【カスタマイズ不要】とのことだったので、気軽に挑戦出来ましたよ！
予備知識をつけよう
すでにhtmlやCSSの知識がある方は不要ですが、私のようにまず
「HTML」の意味から覚えなきゃいけないような超初心者の方々へ。
HTMLとは、HyperText Markup Languageの略で、マークアップ言語の1つです。マークアップとは、文章の構成や役割を示すことを意味します。HTMLはWebサイトを作成する際に、コンピューターへ構成指示を出し、表示したい文章や写真などの情報を形作ります。
引用元:ユーキャン
ちなみに合わせて使う「CSS」とは、
CSSとは、Cascading Style Sheetsの略で、HTMLを装飾してWebサイトをきれいに見せる役割があります。HTMLとCSSの違いは指定する対象で、HTMLは文書の構造を、CSSは色やサイズなど装飾を指定します。CSSはHTMLのように単体では使用できず、必ずHTMLとセットで使用します。
引用元:ユーキャン
やりたいデザインのイメージが固まり、サイトのお手本もいくつか見た。そしてやっと作業に取り掛かるぞ！…となっても意味を理解できないまま作業なんて出来ないですよね。
コードがコピペOKだったとしても、ある程度単語を理解していないとどんどん訳が分からなくなっていく…なんてことになりかねません。
ですので、私はとにかく出てくる単語の意味を都度調べるという作業も同時にこなしました。もちろんまだ完璧に理解した訳ではありませんが…。ある程度「この単語はどこのことを指しているのか」ということは理解できるようになりました。すごい進歩！！！（自画自賛）
やっぱり学ぶことって楽しいんだよなあ〜♪
正直この作業も面倒だなあ…と思っちゃう方にはあまりカスタマイズはおすすめ出来ません。新しいことを始めるってこういう地道な努力も少なからず必要だなと思うので。ぜひ楽しみながらカスタマイズをやってみましょう！
ちなみにこんな本を購入しました。
初心者にも分かりやすく、基礎の基礎から丁寧に説明があるのでかなり読みやすかったです！
実装したいCSSを探そう
基本的な知識が入ったところで、いよいよカスタマイズをしてみましょう！
例えば。
比較的カスタマイズしやすい見出しのデザインを変えてみたい。そんな時はGoogleで、
「見出し CSS 下線」
と、検索すれば見出しに下線が入ったデザインがズラッと出てきます！この時にまた画像検索すれば好みの感じを直感で探しやすいですよ。
後はサイト先でHTMLとCSSをコピペさせていただき、自身のサイトに実装するだけ！
…と、めちゃくちゃ簡単に説明してますが。
じゃあ実際どうすんのよ！？ということなんですが、はっちゃん大先生がこれまた詳しくカスタマイズのやり方を記事にされているので是非参考にしてみて下さい。
私もカスタマイズを実装するにあたって、根本的なやり方は毎度Googleで調べたり、参考書片手に確認しながらの作業をしています。ぶっちゃけ詳しい解説が出来る程私も詳しくないので…。今回は割愛させて下さい。
もっともっと勉強するぞーっっ！！！
サイト型トップページにして何か変わった？
とうとうサイトのカスタマイズが完成し、初めてページ公開した日。
「やっと完成出来たー！」とXでポストしたのですが、あれよあれよという間にたくさんのいいねやお褒めの言葉も一緒にいただけて！気づけば今まで見たことの無い数のリアクションをいただいておりました…。
嬉しすぎる〜！！
サイトを見てXをフォローして下さった方もいて、（自分からフォローしにいけない小心者）ブログ仲間も増えてやる気もさらに上がったし、Xは交流もしやすいので家で一人で作業することがほとんどの私ですが、繋がりが増えたみたいで嬉しい変化になりました！
そして何より、カスタマイズしたことで更に自分のサイトが好きになれたこと。これが一番大きいです。
元々趣味の雑記ブログなので、カスタマイズは趣味の延長みたいな感じでのんびり進めたし、知識ゼロからのスタートは分からないことが多すぎて心が折れそうになる時もありました…。が、やはり分からないからこそ、インプットする時間もワクワク出来たし、初めてカスタマイズが反映出来た時のあの高揚感。パズルのピースがピタッとハマった時のような嬉しさ。なんだかゲームをしているような感覚で作業を楽しむことが出来ました。
この様に、少しでも自分のサイトを素敵にしてみたい！と考えている方には是非サイトのカスタマイズに挑戦してみてほしいです！！そして、今までカスタマイズに興味がなかった人も、「自分にも出来るかも…？」と、思えるきっかけになれたら嬉しいなと思います。
最後までご覧いただきありがとうございました！
