livedoorライブドアブログ(livedoorBlog)カスタマイズ
2007年04月17日
livedoorBlogカスタマイズをするなら
カスタマイズが大好きです。何かこう、モノを作る充実感を与えてくれるなぁ、と常々思っています。そのため、記事の更新よりも少しずつ少しずつ微妙にCSSを勉強してデザインを変えております。htmlもCSSも最初のわからなさは税法に似ていますが、わかってくると「面白い！！」･･･ということで、カスタマイズをした点や残しておきたい参照記事をその都度、ぺたぺた貼ってます。
ブログ別！作成･カスタマイズ講座私がお手本にしているサイトの１つです。サイトの見せ方はかなり参考にさせていただいています。
ブログ別！作成･カスタマイズ講座
基本中の基本
「タグとは何か」、「スタイルシート(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に関するカスタマイズ
おまけ
カスタマイズも終わったら、サイトを見やすくしたり楽しくするために、こういうのを追加してはいかがでしょうか。
サムネイルを簡単につくるサムネイルが何かはみなまでいいませんが、マナーを守って作成したいものです。定番サイトはほぼすぐにサムネイルとして使えます♪
SimpleAPI：サムネイル化ツール
http://img.simpleapi.net/
このサイトで使っている素材はサイトを彩る素材を提供いただいているサイトです。非常にシンプルでありながら、細かいところまで作りこまれたデザイン感覚が素敵ですね。このサイトで使っている素材は、すべてこちらから右クリックでダウンロードさせていただいて、livedoorBlogの「ファイルのアップロード」を行っています。サイト自体の構造も、非常に参考になりますので、素材を使わないまでも、ブログデザインに興味がある方は一度ご覧になってみてはいかがでしょうか。
A Trial Product's 素材置き場http://atp.boo.jp/
基本をおさえたら、あとはlivedoorナレッジで質問をしたり、過去の質問を読むとスムーズに思い通りのカスタマイズができるかもしれません。
livedoorナレッジ（ライブドア(ブログ)の質問）
その他、残しておきたいリンク
備忘のため、今後のカスタマイズにあたって参考となりそうな、今気になっているサイトを掲載しておきます。洗練したものにしたいですね。
また、「ホームページを作る人のネタ帳」では、ブログの長所と短所をわかりやすく解説しながら、コツを教えてくれます。興味深いですね。
あのサイトの『どこが悪くて』『どこが良いのか』の診断結果10サイト
http://e0166.blog89.fc2.com/blog-entry-259.html
←この記事は、調べ物のお役に立てましたでしょうか。管理人の励みになりますので、クリックよろしくお願いします（別窓(ウィンドウ)が開きます。）。
