無料ブログでも、Wordpressで作った独自ドメインのブログでも、ブログを作るときには「テンプレート」(Wordpressならテーマ)を使うことがほとんどだと思います。

HTMLやCSS、Javascriptなどといったプログラミングの知識がほぼゼロでもテンプレートを使えば即、本格的なブログやサイトが出来上がるのが嬉しいところですね^^

 

このブログは賢威で作っていますが、賢威テンプレートのブログは非常に多い。

自分が使い始めたからよけいに気づくようになったのか、調べものをしていてたどり着いたブログやサイトが「賢威」で作られていたというパターンが最近本当によくあるんです。

「賢威のテンプレートをそのまんま使ってます!」みたいなサイトもありますが、パッと見では気が付かないくらい上手にデザインをカスタマイズしているサイトも多々あります

パッと見で「あ、これ賢威だ」っていうよりは記事を最後まで読んでいって、なんとな~く「このレイアウトとかデザインの雰囲気とかみたことあるな」って思うと賢威だった。っていう場合がほとんどです。

 

個人的に賢威というテンプレートを使っている感想としては、

  • コードが本当にきれいでカスタマイズしやすい
  • SEOに強いと謳っているだけあって内部構造がしっかり設計されている
  • デザインはもうちょっと頑張ってほしい

という感じです。

デザインだけの話だったら、個人ブログはStingerのほうがよっぽどいい感じに 仕上がっていく気がしますし、Wordpressの無料テーマでも「賢威よりいいな」と思うようなデザインはそこそこあるんです。

でも、やっぱりその内部構造の設計とかコーディングのほうを考えると、どうしても賢威から離れられない^^;

 

デザインのカスタマイズをするのと、内部構造を最適化するのとどっちが簡単かといったら、やっぱりデザインを変えるほうかな、と思うので。今のところ賢威をベースにデザインにカスタマイズしてくという方向でこのブログは進んでいます。(もう一つのブログのほうは、今は賢威を使っていますが、自分の勉強のついでにオリジナルテーマを現在作成中。)

 

ちなみに「賢威賢威って連発してるけど何それ?」と思った方は「賢威」公式サイトをご覧ください。アフィリエイトをやっている人は結構知っている人が多いですが、アフィリエイト専用というわけじゃなくて、企業サイトなんかにも結構採用されているテンプレートです。付属のSEO対策マニュアルもかなり勉強になりました。

 

ちょっと脇道にそれてしまいましたが、この記事では、ブログやサイトにテンプレートを使用していてもオリジナリティを出して印象付けたいときに、あまりCSSとかHTMLとかの知識が初歩レベルでもOKで、しかも時間もあまりかからない方法を3つ挙げてみます。(※CSS, HTMLの知識が全くないという方には以降、意味不明な説明になっちゃうかもしれませんm(_ _)m)

  • 背景色を変えたり背景画像を設定する
  • ブログのロゴやタイトルの文字をオリジナルにする
  • ヘッダー画像をオリジナルにする

この3つのどれかを変えるだけでもサイトの印象ってかなり変わるもんなんですよ。不思議と。

 

もちろん、ブログを運営する上ではコンテンツを充実させることが最重要 なので、デザインには最初からこだわらないでテンプレートをそのまま使ってもそれで十分だったりします

ただ、ある程度アクセスも集まってくるようになって「ブランディング」ということを考えた場合、単に読みやすいだけでなく印象に残りやすいものであったほうがいいですね。上に挙げたような方法でちょっと印象を変えるだけでも、読者さんの記憶に残りやすくなるなどブランディング効果を期待できます。

 

また、ブログがちょっと自分仕様になったりするだけでなんだか愛着もわいてきたりして「ブログをちゃんと育てていくぞ」とモチベーションアップになったりもします^^ (私は記事を書く気力がなくなってくるとカスタマイズに走ります笑)

 

記事が充実してきたら、あるいは、ブログのデザインがなんか気に入らなくて記事を書く気にもなれないときは、以下の3つの方法でブログやサイトをカスタマイズしてみてください。

ブログやサイトの背景色を変えたり背景画像を設定する

背景色を変更する

ベースの色(背景色)は、大抵の場合、テンプレートのCSSファイルで、サイト全体の背景を設定している部分の色コードを変更すると変えられます。例えば賢威テンプレートの場合、design.css内の#containerのbackground-colorの値を変更することでブログのベース色を変えることができます。具体的には以下の#fffff1の部分を変更します。

#fffff1というのは、色を16進数で表したもので、この6ケタの文字・数字を変えることで微妙な色合いも指定することができます。

 

背景の色を選ぶ時にはこんなオンラインツールもオススメです。↓↓

http://color.hailpixel.com/

色選択オンラインツール

非常にシンプルな機能で使いやすい。

表示されたページでカーソルを動かすとそれに合わせて色が変化するので背景色にしたいと思う色が出たらクリック!

 

するとCSSで設定するための色の値が表示されるので、それをコピーしてCSSファイルで、サイトの背景色を設定している部分を変更すればOKです。

15分もあればできちゃいそうですね^^

 

背景画像を設定する

もう少し上級者なら、背景色ではなく、背景画像を変えるという手もあります。私のこのブログも薄いタイル状の背景画像を使っています。以下のサイトではかなりクオリティの高い背景画像が無料でダウンロードできるのでオススメです^^

http://subtlepatterns.com/

背景画像

背景に使いたい画像をクリックすると以下のように詳細が表示されます。

Downloadボタンをクリックすればzipファイル形式で画像がダウンロードできます。

背景画像ダウンロード

ダウンロードした画像をサイトの背景に適用したい場合、一般的なHTMLテンプレートなら、imagesとかimageとかいう名前のついているフォルダ内に画像を追加しておきます。Wordpressの場合は、画像ファイルをメディアに追加してURLをコピーしておきます。

その後、CSSファイル内でサイト全体の背景を設定している箇所を見つけてbackgroundを設定します。賢威テーマの場合を例にとると、design.cssの#mainのカッコ内に以下のように設定します。

 

たったこれだけなのに、ブログの雰囲気が結構変わるから不思議^^ ぜひやってみてください。

 

ブログのロゴやタイトルの文字をオリジナルにする

最近見つけたプロ並みのロゴとタイトルが無料で作れるオンラインサイトをご紹介します。

http://www.squarespace.com/logo

以下のようなページが表示されたら、ロゴに使いたい文字を入力して→をクリックします。

ロゴ作成サイト

サイトのロゴを選べたり、タイトルやサブタイトルを入力できる画面が出てきます。それぞれ設定し配置なども調整してみてください。出来上がったら左下のSAVE LOGOをクリックします。

ロゴとタイトルの設定

ダウンロード画面が表示されるので左側の無料のダウンロードを選択します。

logo3

 

Png形式で即、作成したロゴとタイトルの画像がダウンロードされます。

※無料版の場合、ダウンロード画像の中にサイトの情報がウォーターマークで入ってしまうので画像エディタで消してから使ってくださいね。

 

賢威テーマで、ダウンロードした画像をブログタイトルに適用する方法は以下のサイトで分かりやすく解説してくれていますので参考にしてみてください。

賢威6.1 ヘッダーテキストを画像に変更する設定

 

 

ヘッダー画像をオリジナルにする

ブログタイトルをテキストから画像に変えるだけではなく、画像にブログタイトルを埋め込んでヘッダー全体を変更するという手もあります。ただ、色んなサイトやブログを見ていると、あまりヘッダー画像は使わないでロゴとタイトルだけ画像で使うほうが最近の主流なのかなという気がしました。

 

このあたりは好みの問題ですね。

ヘッダー画像を使いたい場合、使う画像を選ぶには以下の商用利用OK、クレジット表記なしでOKな無料素材サイトは結構オススメです^^