デフォルトテンプレートに満足しないで、おしゃれなブログを目指そう！
私が最初に選んだテンプレートでのデザインはこれです。
 |
| Blogger開設初期に選んだテンプレートデザイン |
下のは昔私が作った自分のオフィシャルサイトです。
 |
| 私が作ったオフィシャルサイト（もうありません～） |
私の現在の本業は３DCGクリエイター＆専門学校講師ですが、基本はグラフィックデザイナーです。WEBデザインは本職ではありませんが、それでも自分のサイトを作るときは、HTML、CSS、JavaScriptを書籍やサイトで一生懸命勉強し、素人ながらにもこだわりを入れ込んで組み立てることができました。
WEBデザインの難しいところは
●ロゴや画像や素材などのグラフィックを作る技術
●素材をWEBページに表示させるため＆機能させるための組み立てる技術
の二つが必要なところです。
でも多くの人たちが、グラフィックデザインやPCでのデザインを作れる技術を持ってはいないですよね。持っていない人が多いからこそ、Bloggerは簡単に好みのデザインにできる［テンプレートデザイナー］というものを用意してくれているわけです。
でもだんだん「もっとおしゃれにしたいな～」って思ってきているはず。
そしてそろそろテンプレートだとみんな同じに見えちゃって自分らしさが欲しくなるはず。
難しく感じるかもしれませんが、今回も手とり足とり簡単にカスタマイズできるように手ほどきしていますよ！
ワクワクの海外無料テンプレートサイト-The Cutest Blog on the Block-
Bloggerの左上に［次のブログ>>］ってありますよね？
これはBloggerで作られた世界中の人のブログへランダムに飛んでいくボタンです。
クリックしていると、様々なブログデザインが見れてとても面白いです。
でもふと気がつきます。
「あれ？このデザインどうやって作っているんだろう？テンプレートにないのに」
私もものすごくおしゃれなプロ級デザインを見つけ「けっこうデザイナーっていっぱいいるんだな」と驚きました。・・・・が、違いました。
世の中にそんなにデザイナーばっかりいるわけがありません。
プロ級デザインのブログの左上になにやら素敵なリンクを見つけました。
１）まずはクリックしてそのサイトを訪れましょう。
 |
| The Cutest Blog on the Blockのメニュー |
２）タイトル下のグレーのラインがメニューです。（上図）
私たちはBlogger使いですから［BLOGGER] をクリックします。
３）プルダウンに［BACKGROUNDS（背景）］［TEMPLATES（テンプレート）]［BANNERS（バナー）］とありますが、今回選ぶのは［BACKGROUNDS］です。
「テンプレートを作るんだから［TEMPLATES]じゃないの？」と勘違いしないでくださいね。どうやらリストにあるデザインをそのままつくるHTMLコードのようです。
ちょっと敷居が高いですね。そして種類も１０種類くらいしかありません。
私たちは千種類以上もある背景から自分好みのものをチョイスする楽しみを味わいましょう！
時間をかけて自分好みの背景をみつけよう！
 |
| The Cutest Blog on the Blockの背景デザインリスト |
あんまり好きじゃないな・・・なんてこの画像だけ見て判断しないでくださいね！
無料の背景画像が千種類以上あるわけですから、きっとあなたの好みのデザインが見つかるはずです。
1ページに10個の背景デザインが並んでいますね。
そしてサムネイル（サンプル画像）の下にページ番号があります。
1ページに10個×118ページもあるのだから、1200近いデザインがあるというわけです。
 |
| リストの下にページ番号があります |
とはいえ、1ページずつ見てたら疲れちゃって30ページくらいで飽きちゃうかもしれません（笑
■■■ 効率的な探し方 ■■■■■■■■■■■■■■■■
１）カテゴリーで表示する
 |
| カテゴリーのプルダウンメニュー |
ただカテゴリーに進むとBackボタンがありません。またカテゴリーを選び直したければ、再度プルダウンの［BACKGROUNDS］を選んでください。
２）［Suggested/Similar Images]（おすすめ/類似イメージ）から探していく
なんとなく「いいな」と感じたサムネイルをクリックしてみてください。
選んだ背景画像のページに飛ぶと、下の方に［Suggested/Similar Images]という６つのリストが出ますね。これは選ばれた画像の似たイメージを表示しているようです。
なんとなく「いいな」と感じたサムネイルをクリックしてみてください。
 |
| サムネイルをクリックすると選んだ背景ページに |
ここからどんどんクリックして探して行ってもいいですね。
「好きなものを選ぶ」 もちろんこれが基本です。
ブログ（HP作成）初心者の方には、押さえておきたいポイントをアドバイスしますね。
１：「好き」なだけで決めず、ブログのコンセプトに合わせる
みなさんは何をコンセプトにブログを書かれていますか？
デザイン＝コンセプトと言っても過言ではないのです。
２：中心の背景色に気をつける
中心の色は文字色に影響を与えます。両側の色は文字には影響がありません。
暗い色合いを選べば、白っぽい文字にしなければなりません。
それが悪いわけではありませんが、背景色によって文字の色も変えなければいけないことを覚えておいてください。
３：２種類の幅のどちらかを選ぶ（重要）
同じデザインでも３COLUMN（コラム）と２COLUMNの２種類の幅を持つものがあります。
簡単に言うと、ブログ本体の幅です。
ブログ本体の幅は、サイドバー（自己紹介やブログアーカイブがあるところ）を含んだ幅です。
自分のブログがどのくらいの幅か、確認してみてください。（下図）
［テンプレートデザイナー］＞［幅を調整］を表示してください。
ここであなたのブログの幅をいつでも自由に変更できますよね。
２コラムの場合：幅760ピクセルくらいでないと入りません。かなり狭いですね。
※デザイン名には2CLUMNとは書いていませんが、３COLUMNという名前でないものが2CLUMNです。
３コラムの場合：デザインにもよりますが幅960ピクセルくらい使用できます。
あまり狭いと日本語の場合、英文字と違いフォントが大きいですから読みにくくなってしまいます。
なので３コラムのデザインがおすすめです。
４：タイトルバナーはただのサンプルです（背景に組み込まれてはいません）
下の画像のように、タイトルが置かれる部分に最初からタイトルバナーデザインが置かれているデザインがありますが、これは組み合わせの例のようです。
両脇の背景が実際のデザインですのでバナーデザインは無視して、背景だけで判断しましょう。
もしタイトル部分のデザインを使用したい場合は、別に配置しなければなりません。
タイトルバナーのデザインはプルダウンメニューの［BANNERS］にありますが、配置したい場合は今回とは別のやり方になります。
ロゴや額に写真を入れ込んだりする場合はPhotoshopやGIMPなどの画像編集ソフトを使用して画像を作成します。
このやり方はまた今度レクチャーしますね！乞うご期待！
１種類に絞らずにたくさんのデザインを選んでおきましょう。
実際に何種類も配置して、ぴったりくるデザインを選んだほうがラクだし、楽しいですよ。
コピーしておくもの。
●コード（下画像の赤枠）
●そのデザインのURL
コードとURL、どちらかで構いませんし、両方でも良いです。
URLをとっておけば、いつでもそのデザインのページに行けますから便利ですよね。もちろんブックマークでも構いません。せっかく好きなデザインを見つけてもコピーし忘れると、あれどこだっけ？とまた探さないといけなくなりますよ！
さて今回はとても長文の記事になってしまいました。
なので一回区切って、実際に配置するテクニックは、次号に回したいと思います。
素敵なデザインをじっくり探してくださいね！
選ぶ基準のアドバイス
「好きなものを選ぶ」 もちろんこれが基本です。
ブログ（HP作成）初心者の方には、押さえておきたいポイントをアドバイスしますね。
１：「好き」なだけで決めず、ブログのコンセプトに合わせる
みなさんは何をコンセプトにブログを書かれていますか？
デザイン＝コンセプトと言っても過言ではないのです。
自分のブログコンセプトをより視覚化してくれているイメージや色合いを選びましょう。
２：中心の背景色に気をつける
中心の色は文字色に影響を与えます。両側の色は文字には影響がありません。
暗い色合いを選べば、白っぽい文字にしなければなりません。
それが悪いわけではありませんが、背景色によって文字の色も変えなければいけないことを覚えておいてください。
３：２種類の幅のどちらかを選ぶ（重要）
 |
| 左が３コラム、右が２コラム |
簡単に言うと、ブログ本体の幅です。
ブログ本体の幅は、サイドバー（自己紹介やブログアーカイブがあるところ）を含んだ幅です。
自分のブログがどのくらいの幅か、確認してみてください。（下図）
［テンプレートデザイナー］＞［幅を調整］を表示してください。
ここであなたのブログの幅をいつでも自由に変更できますよね。
２コラムの場合：幅760ピクセルくらいでないと入りません。かなり狭いですね。
※デザイン名には2CLUMNとは書いていませんが、３COLUMNという名前でないものが2CLUMNです。
３コラムの場合：デザインにもよりますが幅960ピクセルくらい使用できます。
あまり狭いと日本語の場合、英文字と違いフォントが大きいですから読みにくくなってしまいます。
なので３コラムのデザインがおすすめです。
４：タイトルバナーはただのサンプルです（背景に組み込まれてはいません）
下の画像のように、タイトルが置かれる部分に最初からタイトルバナーデザインが置かれているデザインがありますが、これは組み合わせの例のようです。
両脇の背景が実際のデザインですのでバナーデザインは無視して、背景だけで判断しましょう。
 |
| タイトルバナーが入っているデザインの例 |
タイトルバナーのデザインはプルダウンメニューの［BANNERS］にありますが、配置したい場合は今回とは別のやり方になります。
ロゴや額に写真を入れ込んだりする場合はPhotoshopやGIMPなどの画像編集ソフトを使用して画像を作成します。
このやり方はまた今度レクチャーしますね！乞うご期待！
デザインを選んだらメモ帳にコピーしておく
１種類に絞らずにたくさんのデザインを選んでおきましょう。
実際に何種類も配置して、ぴったりくるデザインを選んだほうがラクだし、楽しいですよ。
コピーしておくもの。
●コード（下画像の赤枠）
●そのデザインのURL
コードとURL、どちらかで構いませんし、両方でも良いです。
URLをとっておけば、いつでもそのデザインのページに行けますから便利ですよね。もちろんブックマークでも構いません。せっかく好きなデザインを見つけてもコピーし忘れると、あれどこだっけ？とまた探さないといけなくなりますよ！
なので一回区切って、実際に配置するテクニックは、次号に回したいと思います。
素敵なデザインをじっくり探してくださいね！
0 件のコメント:
コメントを投稿