デザインカスタマイズ

★Bloggerは他の無料ブログサービスに比べカスタマイズ性が高いのも特徴のひとつ!

一般的な無料ブログサービスの場合には、テンプレートを適用したら、タイトルの大きさや位置、色など、決められた箇所のカスタマイズ画面があり、あまり大した変更を加えることができないのが一般的です。
もちろん、自作のテーマを使える場合もあるのでこの場合はかなりカスタマイズできますが、決して一般的ではないですし、素人には無理でしょう。
Bloggerの場合にはカスタマイズ画面が結構充実していて、素人でもかなりカスタマイズして、オリジナル的なデザインに変更することが可能です。

さらに、Bloggerは海外ユーザが多いので、インターネット上でたくさんのテンプレートが紹介されていて、それをダウンロードしてして利用することもできます。こうした点を考えると、Bloggerによるブログサイト運営はかなりオリジナリティの高いデザインを行うことができるといっていいでしょう。

1.管理画面からテンプレートをクリック。

左サイドのメニュー「テンプレート」をクリックするとテンプレートの一覧が表示されます。この画面はお好きなテンプレートを選択する画面ですが、実はここに並んでいるテンプレートの数はたいしたことはありません。カスタマイズが基本なので、ごく基本的なデザインを選択すると考えればいいでしょう。お好きなテンプレートを選択するとそのテンプレートが上の「ブログで使用中」に表示されます。次に、その下にある「カスタマイズ」をクリックしてください。

CapD20111102

 

2.テーマのカラーバリエーションと背景を選択

以下の場合は、シンプルなテンプレートを選択しています。
ここでは右上に並んだ4つのテンプレートの下にある小さなテンプレートから基本色のバリエーションを選択することができます。

CapD20111102_1

次に、左のメニューから「背景」を選択して、背景画像や背景色を変更します。
中央上に小さな色のボックスが並んでいますが、これは文字や背景に使う基本色です。お好きなものをクリックするとすぐに画面下の方にあるテンプレートに色が反映されますので、見て確認することができます。ここではおおよその色を決め、どうしても気に入らないところは後で変更します。

CapD20111102_4

背景画像を使用しているテンプレートを使用している場合には、「背景画像」をクリックすると以下のように背景に利用できる画像が開きます。お好きなものをクリックするとすぐに下のデザインに背景画像がで適用されます。下のような場合には、ブログの部分がほとんどなので少し画面を広げて背景を確認しましょう。

また、あらかじめ背景に利用したい画像を用意している場合には開いた画面の一番上のメニュー「画像をアップロード」をクリックしてファイルをアップロードして利用することができます。画像サイズは1800×1600です。
適用した変更が良ければ右上にある「ブログに適用」をクリックしてデザインを確定します。

CapD20111102_3CapD20111102_5

 

3.次にブログの左右幅を調整しましょう。

以前は、パソコンのモニターが小さかったので800px~900px以下がほとんどでした。今でも多くのサイトはこの程度ですが、最近のモニターは大きいものが多くなったので1000px~1100px程度でも大丈夫です。しかし、古いモニターを使っている方もまだいるので1200を超えるのは無理があるでしょう。

以下の画面はブログの左右幅を調整する画面です。最大で1500pxまで可能ですが、一般的には1000px前後で十分でしょう。サイドバーを配置しないで1カラムの場合はもっと狭くしてもいいでしょうし、3カラム~4カラムの場合で、サイドバーをゆとりを持った幅にしたい場合には1100~1200px程度にするのも可能でしょう。(※3カラムのレイアウトを選んでいる場合には、サイドバーの調整がもう一つ表示されます。

CapD20111102_6

 

4.次に「レイアウト」をクリックしてカラム数や配置を設定しましょう。

「レイアウト」からはサイドバーなど(カラム)の数やその配置方法を選択することができます。あらかじめ選択しているレイアウトは2カラムで右にサイドバーとして配置されています。これを3カラムにすることも3カラムのサイドバーのどちらかをさらに2つに分けた4カラムに設定できます。

CapD20111102_7

上の設定を4カラムに変更したのが以下の設定です。

CapD20111102_8

4カラムに設定したので下のレイアウトもまた変更されています。本文の記事となるブログの更新が比較的少なくて、お知らせ程度に利用する場合には、カラム数を増やしてトップ画面の中にたくさんの情報を配置しておくのもひとつの方法です。当然ですが、中央のブログ部分は記事を書けば更新されて下に下がっていきますが、サイドバーの記事は固定的に表示することができるので、継続的にお知らせしたい記事はサイドバーを利用してみてください。

ちなみに、カラム数を増やした場合、サイトの幅を広げたくなりますが、それはひとつ前の「幅を調整」にもどって調整してください。

CapD20111102_9

 

5.細かな調整は「アドバンス」から行います。

「アドバンス」をクリックして開いたのが以下の画面です。背景色やタイトル文字の大きさやフォント、色など、その他の箇所もかなり様々にカスタマイズ可能です。ホームページに詳しい方なら「CSS」を加えてその他の要素も変更可能です。
以下の画像は「ブログのタイトル」をクリックしたところですが、下のブロックに表示されているデザインの中に選択箇所が赤い点線で示されますので、変更箇所を間違うこともないでしょう。

CapD20111102_10

 

6.もちろんオリジナルも他のサイトからのダウンロードテーマも利用できます。

上記のようなカスタマイズでは飽き足らない方は独自のテーマも利用できますし、インターネット上で探してダウンロードしたテンプレートも利用できます。以下は管理画面の「テンプレート」を選択した画面です。

CapD20111102

「カスタマイズ」の右隣にある「HTMLの編集」をクリックしてHTMLを書き換えることができます。クリックすると以下の画面が開きますので「続行」をクリック。するとHTMLの編集画面が開きます。この中を書き換えることもできますし、ダウンロードテンプレートの場合には、このHTMLをそっくり書き換えてしまいます。それで保存すれば変更が適用されます。

しかし、初心者は上記のBloggerのカスタマイズメニューから変更を行うことをお勧めします。

CapD20111102_11

CapD20111102_12

 

7.「テンプレート」からではない見た目の変更箇所

サイトのデザインに関しては「テンプレート」を修正しますが、サイト内に配置する各種要素は「レイアウト」を利用して配置したり削除したりします。中でもデザインに関わるところが少しありますが、そのひとつがサイトのタイトルをロゴにしたい場合です。

サイトタイトルをロゴに変更するには「レイアウト」の中の「(Header)」とあるレイアウトの一番上のガジェットから設定します。ガジェットの右下にある「編集」をクリックして開いた画面の中に「ファイルを選択」というボタンがあります。これをクリックしてあらかじめ用意したヘッダ用のロゴを選択して送信すればサイトのタイトルに摘要されます。

CapD20111102_13 CapD20111102_14

これでお好きなデザインを適用すればほとんどオリジナルといえるサイトを作り上げることができるでしょう。

おすすめプラグイン

■All in One SEO
SEO対策には欠かせない基本プラグイン。とりあえず、インストールしてタイトルとキーワードを書きこむだけでも意味はある。
■LightBox2, wp-jquery-lightbox
写真や画象を拡大表示してくれる定番プラグイン。wp-jquery-lightboxの方が最近はおすすめかも。
■Google XML Sitemaps
Google対策の定番。サイトマップを自動で作成してくれる。
■Contact Form 7
お問合せを作る定番。操作も簡単で項目の設定なども簡単。
■Really Simple CAPTCHA
上のContactForm7と合わせて利用するシンプルなキャプチャソフト。(スパムを避けるためのもの)
■Downloads Manager
テーマやお知らせ、書類のPDFなどをダウンロード管理するソフト。もちろん、ダウンロードカウンターあり。
■My Link Order
リンクを自由に並べ替えられるプラグイン。お客様の関係などで上下を入れ替えたいなどの場合に役立つ。
■WP-Cycle
数枚のヘッダー画像をFlashを利用したかのように交換するプラグイン。固定ページなどで固定画象にしたい場合は、別テンプレートを利用して調整。
■CKEditor for WordPress
高機能エディター。Blogエディターを使わないなら、インストールしてみて試すだけでもいい。
■Theme Switcher Reloaded
サイトのテーマを訪問者が自由に変更できるプラグイン。テーマの見本を見てもらう際などに有効。
随時追加予定・・・。

アーカイブ


PCを寄付してください!!

三陸の被災企業にパソコンを寄付してください!
新しいPCを買って使わなくなったものなど余ってるPCを被災地に寄付していただけませんか?詳しくは、以下の画像をクリックしていただくとサイト管理人が運営しているNPOサイトの説明のページに移ります。ご寄附のお申し出をしていただけるフォームをご用意していますのでそちらからご連絡ください。(※なお、ご寄附いただくPCはWindows XP以降のPCとし、メモリーは256MB以上搭載を希望します。)

■1次募集期間:2011年12月~2012年3月
※ご寄附いただいたパソコンの寄付先などは上記画像をクリックしていただくと開く「復興ルート45」のサイトに掲載いたします。

★Artisteerテーマ配布


Artisteerのテーマ見本は上のメニュー「WPテーマDW」をクリックして開いたページからダウンロードできます。Artisteer3.0で作れる高機能なテーマの内容がチェックいただけるはずです。

LightNEasyのご紹介

少し古くなりましたがLiteCMSのLightNEasyご紹介サイトです。よろしかったらご覧ください。

これまでの投稿一覧

気仙沼&一関の物件募集

金野不動産のホームページへ3月の東日本大震災で多くの方が家を失いました。被災地周辺のご出身で、気仙沼や一関などに中古住宅や売地、放置してある家や農地、山林等をお持ちではありませんか?地域の復興にぜひお役立てください。メールにてご連絡ください。

金野不動産のホームページへ
気仙沼市・金野不動産



にほんブログ村 IT技術ブログ CMSへ にほんブログ村 デザインブログ Webデザインへ
にほんブログ村 IT技術ブログ Webサイト構築へ