上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テンプレートを少しだけカスタマイズすれば、オリジナリティが出せます。当サイトテンプレートの中には、カスタマイズを推奨しているモノがいくつかあります。
 それの説明も合わせて、ロゴデザインの定番を考えていきましょう。



簡単なロゴ作成


 ロゴのイメージの作成です。
 フリーフォントサイトの紹介も織りまぜながら…
(旧スタンダード・ホワイトテンプレート使用)


Angleterre Book Font | dafont.com

Angleterre Book


Free Font: Aquaduct

Aquaduct


Pulse Sans Virgin Font | dafont.com

pulse sans virgin


青二書道教室

青柳衡山フォント2


ふい字置き場

ふい字


 こんな感じで、ロゴを変えるだけで、かなりオリジナル感が出てくると思います。もちろん、写真やテクスチャなどのバナーを挿入することもできます。
 ぜひお試しあれ。



おまけ・失敗しないロゴ作成


 ウェブサイトのテンプレート、色々バラエティに富んでいるように見えますが、実際は大量のウェブサイトが出来るごとに、大枠の「定番ウェブサイトデザイン」といえるモノが定着してきています。

 基本はコレ。
 HTMLの構造の観点から、一番ベストな形が左本文、右サイドバー、後はヘッダーとフッター。

ロゴデザイン

 この形が一番自然に組めるウェブレイアウトの形で、しかもコレが「標準化」したかのようなイメージまでするほどの定番レイアウトです。どんなに凝ったテンプレートでも、基本はここから出発しているモノが大多数を占めています。

 用途によってはドラスティックにデザインを変えるべきだと思いますが、たいした理由もなくこの定番レイアウトを壊すのは、逆にリスクが高くなってしまいます。
 そんなこんなで、最近はロゴを置く場所まで定番化しています。あの左上が2カラムテンプレートにおいては一番バランスも良く、分かりやすい。

 と言う訳で、あの場所こそ、現在のウェブサイトでは「黄金」の場所。まず間違いはありません。


■デザイン耳寄り情報☆

 テンプレダウンロード、ありがとうございます☆
 中でも、ロゴを変えてみようと言うテンションがちょっと高い人へ、デザインの秘密のコツ(…でもないですが)です。

 ロゴデザインのコツは、色数をなるべく抑えることです。2~3色ぐらい、おとなしいぐらいが上手くいくコツです。ウチのテンプレートは、カスタマイズも想定して作ってあるので、色も極力使っていません。意外とどんなのでも合うとは思いますが…
 例えば、写真を多く使っているサイトでは、写真のイメージに近い色、絵文字を使っている人は、絵文字に近いイメージ、後は、色彩マニアのホームページなんかを覗くのもいいかも。(→チェックの壁紙作成ツールと色彩マニアサイト


■関連記事
CUTIE PHOTOSHOP 現在執筆中!イチオシ!
手軽にライバルに差を付けるロゴテクニック
手軽にライバルに差を付けるロゴテクニック

Love Photoshop
世界のデザイン

ウェブサービス


 「ウェブサービス」以下はどれも海外サイトなので、日本語は使えない場合があります。
 日本語を使うときは、フリーのお絵かきソフトやフォトショップなどを利用して作成してください。

 また、フォントには著作権があります。利用規約をよく読んで使ってください。フリーフォントでも、「商用サイトはダメ」とかもあります。
 解釈が難しいのですが…ブログサービスには広告表示がつきもので、これは商用利用にあたるのか?
 難しいところです。



キュート・チョコ、スタンダード・ホワイトHTML編集


 ここの説明部分で使えるテンプレートはこちら。
Standard-white
Standard-cute-chocolate

「テンプレートの管理」画面の、2つのボックスの上の方「~~~のHTMLの編集」ボックスに注目。
 そこをちょっとだけスクロールすると…下図のような記述があります。ココに赤字の部分を挿入します。

<!--●バナー●☆★☆ヘッダー画像のカスタマイズHTMLの位置☆★☆-->
<div id="banner">
<a href="<%url>"><img src="●http://から始まる画像URL●" alt="<%blog_name>" /></a>
</div>

●http://から始まる画像URL●」この部分は、画像をアップロードして、プレビュー表示した時のURLに書き換えます。




■追記・修正(キュートチョコ・スタンダードホワイト、初期版)

 もしも、ヘッダーバナースタイルシートの制御を行う場合、スタイルシートに以下のようなコメント部分があります。表示にもSEO上もそのまま使っていただいても問題ありません。

「/* ☆ヘッダー画像のカスタマイズ・CSSの位置☆ --------------- */」

 これ、場所を間違えていました(汗)スイマセン。
 現在「#header{ ~ }」の場所をカスタマイズするように指定していますが、これは誤りで、その直下の「#banner{ ~ }」がヘッダー画像を制御している場所です。
 もしもスタイルシートから細かい制御をする方は、コチラの方、注意をお願いいたします。

 HTML部分は問題ありませんので、そのままコメント部分をカスタマイズしてください。
 現在は修正版に直っています。(2010/3/16)

追記、修正2
 修正されていたと思ってたら、修正されていませんでした~、失礼しました。
 現在は、問題部分は修正され、正常な表示に戻っています。(3/30)
 また、サイドバーの表示部分の見づらい部分を修正しました。

 もしもすでにテンプレートをカスタマイズされている方は、



 コチラの記述を「スタイルシートの設定」→「スタイルシート編集」側(下のほう)のテキストボックスの、最終行など、どこでも構いませんので、挿入してみてください。
 おかしくなった時のため、バックアップを取っておく(テンプレートの「複製」のボタンをクリック)と安全です。

 かなりサイドバーリスト部分が見やすくなると思います。



■カスタマイズ一覧
テンプレート簡単カスタマイズ
このエントリーをはてなブックマークに追加
Fri.03.12.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。