2007年07月17日
ライブドアブログ(livedoorBlog)カスタマイズ [入門・実践編]
livedoorBlogカスタマイズをするなら
カスタマイズが大好きです。何かこう、モノを作る充実感を与えてくれるなぁ、と常々思っています。そのため、記事の更新よりも少しずつ少しずつ微妙にCSSを勉強してデザインを変えております。htmlもCSSも最初のわからなさは税法に似ていますが、わかってくると「面白い！！」･･･ということで、カスタマイズをした点や残しておきたい参照記事をその都度、ぺたぺた貼ってます。
おっと、その前に、livedoorBlogをお使いの方なら誰でも一度は思うことですが、「一番上に出ているヘッダー広告、とりたいな」とカスタマイズに挑戦する前に、次の記事をお読み下さい。
ヘッダー広告をカスタマイズする前に･･･
結論だけ言うと、「移動」させることすらダメみたいですね。BUSINESSだけではなくて、PROも変更ありにして欲しいですね･･･。
ブログ別！作成･カスタマイズ講座[07/05/28：追加]
私がお手本にしているサイトの１つです。サイトの見せ方はかなり参考にさせていただいています。こういうサイトは残念ながら途中で行進が止まってしまうものも多いのですが、今でも新しいネタを更新されているところがすばらしいですね。
「タグとは何か」、「スタイルシート(CSS)とは何か」…そんな基本中の基本を勉強したり、ちょっと変えたいなと思ったときに参考になるページをまずはご紹介します。
ＴＡＧindex
タグのことならここでほぼ解決します。まずはフォントタグやテーブルタグをしっかり使いこなせるようになると、ブログが美しくなります。また、質問に答えてくれる掲示板があるため、検索をすると過去の記事に自分が知りたい情報が載っていることもあります。
TAG index
http://www.tagindex.com/index.html
和色大辞典
「小豆(あずき)色 」「萌葱(もえぎ)色 」「柑子(こうじ)色 」など、日本の伝統色をすっきりとあらわしている色見本です。見ているだけでも楽しくなりますが、サイトを飾る色をお探しの方はいかがでしょうか。他にも、原色大辞典、洋色大辞典、web216、配色大辞典、パステルカラーなどのコンテンツがあります。
和色大辞典
http://www.colordic.org/w/
さて、これらも基礎知識をもとに、デザインを変更していきます。以下のサイトを見ていけば、少なくともこのブログ程度のカスタマイズはできることと思います。あとはあなたがどのようにサイトを彩りたいのか、魅せたいのかにかかっていると思います。
exciteblogのように個別に記事を編集する。
数十件の記事になってくると、livedoorBlogでは大変です。exciteのblogは個別に編集できるので、楽なんですよね。それを実現するためにHTML編集をしています。これができたときはほんとに感動しました。
固定トップページを作る
amebloでは記事とは別にフリースペースを１番上に設けることができます。メニューやお知らせのようなことを記述するにはもってこいなんですよね。ここでは他の記事と同じフォームを使っています。このサイトは「日記風」ではなく、「使える」サイトを目指しているので、最初に開いた画面ですべて解決するように考えていますが、さてどうでしょうか。
引用部分をはっきりさせる
あるブログを見ていて、「どうしてこのブログは引用したところが何種類も違う形で表現できるんだろう」と思って、いろいろ探したところ、引用タグを少し変えていくつも表現していたんですね。このブログでも、[赤][黄][青]の３色で使い分けをしています。さらに引用符の中も色を塗ることで、見た目も鮮やかになりました。
パンくずリストをつける
これも昔から検索するときに便利だなと思って使い続けています。たいてい検索をするとトップページよりも個別ページに飛ぶので、階層性がはっきりしているといいですよね。このサイトでは、個別に記事を読むさいに、記事の左上についていますので、ご参考にしてみてください。
前述のPetLoversOnlyさんのブログではわかりやすい説明でいろいろな技が紹介されています。いつもカスタマイズをする前に眺めて、「こういうデザインにしたいなぁ」とお手本にさせていただいています。
PetLoversOnly
http://blog.pekebatu.com/archives/cat_702617.html
カスタマイズも終わったら、サイトを見やすくしたり楽しくするために、こういうのを追加してはいかがでしょうか。
サムネイルを簡単につくる[07/05/11]追加
サムネイルが何かはみなまでいいませんが、マナーを守って作成したいものです。定番サイトはほぼすぐにサムネイルとして使えます♪
このサイトで使っている素材は
サイトを彩る素材を提供いただいているサイトです。非常にシンプルでありながら、細かいところまで作りこまれたデザイン感覚が素敵ですね。このサイトで使っている素材は、すべてこちらから右クリックでダウンロードさせていただいて、livedoorBlogの「ファイルのアップロード」を行っています。サイト自体の構造も、非常に参考になりますので、素材を使わないまでも、ブログデザインに興味がある方は一度ご覧になってみてはいかがでしょうか。
A Trial Product's 素材置き場
http://atp.boo.jp/
基本をおさえたら、あとはlivedoorナレッジで質問をしたり、過去の質問を読むとスムーズに思い通りのカスタマイズができるかもしれません。
livedoorナレッジ（ライブドア(ブログ)の質問）
また、検索ナンバー１の記事は、おそらくこちらかと思われます。
備忘のため、今後のカスタマイズにあたって参考となりそうな、今気になっているサイトを掲載しておきます。洗練したものにしたいですね。
また、「ホームページを作る人のネタ帳」では、ブログの長所と短所をわかりやすく解説しながら、コツを教えてくれます。興味深いですね。
更新履歴
[2007/04/04 初投稿]
[以後、随時更新中]
ヘッダー広告をカスタマイズする前に･･･結論だけ言うと、「移動」させることすらダメみたいですね。BUSINESSだけではなくて、PROも変更ありにして欲しいですね･･･。
ヘッダー広告の移動：PetLoversOnly♪
http://blog.pekebatu.com/archives/50471252.html#jump
ブログ別！作成･カスタマイズ講座[07/05/28：追加]私がお手本にしているサイトの１つです。サイトの見せ方はかなり参考にさせていただいています。こういうサイトは残念ながら途中で行進が止まってしまうものも多いのですが、今でも新しいネタを更新されているところがすばらしいですね。
ブログ別！作成･カスタマイズ講座
http://blog.info-rich.jp/
基本中の基本
「タグとは何か」、「スタイルシート(CSS)とは何か」…そんな基本中の基本を勉強したり、ちょっと変えたいなと思ったときに参考になるページをまずはご紹介します。
ＴＡＧindexタグのことならここでほぼ解決します。まずはフォントタグやテーブルタグをしっかり使いこなせるようになると、ブログが美しくなります。また、質問に答えてくれる掲示板があるため、検索をすると過去の記事に自分が知りたい情報が載っていることもあります。
TAG indexhttp://www.tagindex.com/index.html
和色大辞典「小豆(あずき)色 」「萌葱(もえぎ)色 」「柑子(こうじ)色 」など、日本の伝統色をすっきりとあらわしている色見本です。見ているだけでも楽しくなりますが、サイトを飾る色をお探しの方はいかがでしょうか。他にも、原色大辞典、洋色大辞典、web216、配色大辞典、パステルカラーなどのコンテンツがあります。
和色大辞典http://www.colordic.org/w/
実践編
さて、これらも基礎知識をもとに、デザインを変更していきます。以下のサイトを見ていけば、少なくともこのブログ程度のカスタマイズはできることと思います。あとはあなたがどのようにサイトを彩りたいのか、魅せたいのかにかかっていると思います。
exciteblogのように個別に記事を編集する。数十件の記事になってくると、livedoorBlogでは大変です。exciteのblogは個別に編集できるので、楽なんですよね。それを実現するためにHTML編集をしています。これができたときはほんとに感動しました。
「小春日和の陽射しの中で」：記事から直接編集画面へ
http://junike.livedoor.biz/archives/11784637.html
固定トップページを作るamebloでは記事とは別にフリースペースを１番上に設けることができます。メニューやお知らせのようなことを記述するにはもってこいなんですよね。ここでは他の記事と同じフォームを使っています。このサイトは「日記風」ではなく、「使える」サイトを目指しているので、最初に開いた画面ですべて解決するように考えていますが、さてどうでしょうか。
PetLoversOnly：投稿記事部分の固定
http://blog.pekebatu.com/archives/50844873.html
引用部分をはっきりさせるあるブログを見ていて、「どうしてこのブログは引用したところが何種類も違う形で表現できるんだろう」と思って、いろいろ探したところ、引用タグを少し変えていくつも表現していたんですね。このブログでも、[赤][黄][青]の３色で使い分けをしています。さらに引用符の中も色を塗ることで、見た目も鮮やかになりました。
East of R134：css-引用記事を使い分ける
http://koda.jugem.cc/?eid=201
パンくずリストをつけるこれも昔から検索するときに便利だなと思って使い続けています。たいてい検索をするとトップページよりも個別ページに飛ぶので、階層性がはっきりしているといいですよね。このサイトでは、個別に記事を読むさいに、記事の左上についていますので、ご参考にしてみてください。
渡る世間は○○ダ!!：Blogにパン屑リストをつけてみる
http://www.rhost.info/archives/9709207.html
カスタマイズといえば
前述のPetLoversOnlyさんのブログではわかりやすい説明でいろいろな技が紹介されています。いつもカスタマイズをする前に眺めて、「こういうデザインにしたいなぁ」とお手本にさせていただいています。
PetLoversOnlyhttp://blog.pekebatu.com/archives/cat_702617.html
その他：livedoorBlogに関するカスタマイズ
・livedoorBlogのテクニック集 地獄変00
・livedoor Blogのデザインをカスタマイズするwiki
・livedoorknowledge
おまけ
カスタマイズも終わったら、サイトを見やすくしたり楽しくするために、こういうのを追加してはいかがでしょうか。
サムネイルを簡単につくる[07/05/11]追加サムネイルが何かはみなまでいいませんが、マナーを守って作成したいものです。定番サイトはほぼすぐにサムネイルとして使えます♪
SimpleAPI：サムネイル化ツール
http://img.simpleapi.net/
このサイトで使っている素材はサイトを彩る素材を提供いただいているサイトです。非常にシンプルでありながら、細かいところまで作りこまれたデザイン感覚が素敵ですね。このサイトで使っている素材は、すべてこちらから右クリックでダウンロードさせていただいて、livedoorBlogの「ファイルのアップロード」を行っています。サイト自体の構造も、非常に参考になりますので、素材を使わないまでも、ブログデザインに興味がある方は一度ご覧になってみてはいかがでしょうか。
A Trial Product's 素材置き場http://atp.boo.jp/
基本をおさえたら、あとはlivedoorナレッジで質問をしたり、過去の質問を読むとスムーズに思い通りのカスタマイズができるかもしれません。
livedoorナレッジ（ライブドア(ブログ)の質問）また、検索ナンバー１の記事は、おそらくこちらかと思われます。
無料アバターの作成なら･･･
http://taxotak.livedoor.biz/archives/50196426.html
その他、残しておきたいリンク
備忘のため、今後のカスタマイズにあたって参考となりそうな、今気になっているサイトを掲載しておきます。洗練したものにしたいですね。
CSS Happy Life
ぽっとの陽だまり研究室
DesignWalker
DoodleOS
WEBデザイン BLOG
アイコンエディットオンライン
ネットのサラダボウル
超分析型アフィリエイトブログ
また、「ホームページを作る人のネタ帳」では、ブログの長所と短所をわかりやすく解説しながら、コツを教えてくれます。興味深いですね。
あのサイトの『どこが悪くて』『どこが良いのか』の診断結果１０サイト
http://e0166.blog89.fc2.com/blog-entry-259.html
更新履歴[2007/04/04 初投稿]
[以後、随時更新中]
：このマークがついているリンクは、新しいウィンドウで開きます。
