ココログをスタイルシートだけでクールなデザインにする方法 その1 - 準備編

ココログ・ベーシックではテンプレートのカスタマイズができません。
しかし、スタイルシート(と画像)の編集だけで、かなりクールなデザインにできます。

このデザインが、

このようになります。

想定している読者

スタイルシート(CSS)が分かる人を対象にしています。
スタイルシートが分からない人は、「そういうものなんだ」と読んでいってください。必要に応じてググってください。

まず最初にやること

ブログの内容をイメージしたヘッダ画像を用意します。
画像を持っていない人は、フリーの画像(写真)サイトで、ピッタリな画像を探しましょう。
フリーな画像を使うときは、規約に注意しましょう。商用利用可か、画像の改変(トリミング)はOKか、クレジットを入れなければいけないか、など。

サイトで使用する色の選択

サイトで使用する文字色・背景色などを決定します。
サイトの統一感を出すためヘッダ画像で使用している色を使いましょう。私の場合、Photoshopのスポイトツールを使いました。

使用する色は、

• 文字色
• 背景色 - 白(#ffffff)をお勧めします。
• リンクの色
• 既に訪問したサイトのリンクの色
• ホバーの色
• アクセント色

です。
忘れないよう、メモ帳などに書いておきましょう。

ココログでいじるところ

スタイルシートの設定は、「ブログ」→「デザイン」→「カスタムCSSを編集」です。

画像(パーツ)のアップロードは、「コントロールパネル」→「ファイル」です。「images」というフォルダを作成して、そこに「ファイルのアップロード」していきます。

ワイヤフレームの作成

ブログデザインのワイヤフレームを作ります。
PhotoshopかGIMPで作るのがいいでしょう。
今後、これからパーツを切り出していきます。
納得のいくデザインを作成しましょう。