コトノハ Roll を CSS でカスタマイズするサンプルページ

このページでは、コトノハで提供しているコトノハ Roll を CSS でカスタマイズしたサンプルを紹介しています。

もくじ（ページ内リンクです）

コトノハ Roll って何？

コトノハ でユーザ登録してお楽しみの方なら誰でも無料でお使いいただける、ブログやホームページなどに自分の○×やコメントを貼り付けるスクリプトです（別名、魔法の呪文。どうやら、このスクリプトを貼り付けると、渋谷あたりでモテモテになるという噂があるらしいですが、モテなかった場合の責任は負いません）。

コトノハにログインした状態で コトノハRoll のドキュメントをご覧いただくと、ブログなどに貼り付けるスクリプト（魔法の呪文）が出てきますので、そのスクリプトを貼付けたいページの HTML 上に貼り付けるだけで表示ができるようになります。

▲ページのトップへ

CSS って何？

コトノハ Roll のスクリプトを貼り付ける、というだけでは、単にシンプルな HTML が貼り付けられただけの状態になっています。それだけでは、思うような見た目になっていない場合もあります。

ところが、 CSS という、見栄えなどを指定する言語を別に記述することで、色や大きさ、幅や詰めなどの「見た目」を細かく調整することができるようになります。

建物で言うなら HTML が鉄骨（構造）に近い役割、 CSS は内装（インテリア）に近い役割という感じでしょうか。

このサンプルページでは、CSS を使って見た目をぐんと良くする方法を紹介しています。

CSS には、標準化団体（W3C）が策定した勧告（ガイドライン）があります。ところが、お使いのブラウザによっては、このガイドラインどおりに全てを描画できない記述もあるため、なんとかいろいろなブラウザでほぼ同じ見栄えを実現するために「CSS ハック」と呼ばれる裏技を使って記述することがよくあります。

このサンプルで CSS ハックを使っている場合は、ソースコードにコメント表記してあります。

▲ページのトップへ

サンプルページ閲覧のご注意

※このサンプルでは見栄えの違いが比較しやすいように全て　ユーザ名＝purprin(uname=purprin)／表示数＝５(max=5)を想定したダミーデータを表示しています。（実際の purprin の最新コトノハ Roll は pur*logのサイドバーに設置してあります）

※このサンプルページ自体にあてている CSS は必要最小限にとどめて、極力ブラウザの既定の見栄えから CSS をどのように書き換えればどのように変化するかをわかりやすくするようにしています。ただし、実際にお使いのブログなどで貼り付ける場合は、ほとんどのブログで外部 CSS をあらかじめ読み込んでいますので、その CSS デザインに依存した見栄えになることがほとんどです。

※サンプルコードはダウンロードしてお使いいただくことができます。全て文字コードは utf-8 で記述しています。注意が必要な箇所は適宜/*と*/の範囲で囲まれているコメントで注釈を入れています。

※pur*log 関連エントリもあわせてどうぞ。

▲ページのトップへ

何も CSS を適用していない場合の表示サンプル

特になにもしていないので、リストアイテムの中黒点も出ていますし、ブラウザでなにも設定していない状態でみていればなんとも無機質な感じです。

コメントなし

コメントあり

▲ページのトップへ

[サンプル１]CSS を適用した表示サンプル

このサンプルは、色をコトノハ風にアレンジしたものです。白い背景に似合うと思います。

[サンプル１]カスタマイズポイント

  1. CSS を適用していない場合に出現していた中黒点（・）を消去
  2. ○のコトの場合のリンク色と×のコトの場合のリンク色を色分けして、行の高さを調整
  3. コトの回答数のフォントサイズを調整して色を変更
  4. コメントのフォントサイズを調整して色を変更し、間隔を調整
  5. 囲んでいる枠線との距離（詰め・padding)を調整

▲ページのトップへ

コメントなし sample

コメントあり sample

▲ページのトップへ

[サンプル１]CSS コード

→サンプル１の CSS をダウンロードする
Windows:右クリック→対象（リンク先）をファイルに保存｜Mac: Ctrl + クリック→別名でリンク先を保存



/* リスト全体を囲む領域 */
ul#kotonoha-roll {
    margin: 8px 15px;
}

/* リストの項目一つ一つの領域 */
ul#kotonoha-roll li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* ○の場合のリンク色（アンカー全般・リンク・訪問済み・アクティブ・マウスカーソルをあわせた時、の順） */
ul#kotonoha-roll li.kotonoha-maru a { color: #039; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-maru a:link { color: #039; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-maru a:visited { color: #039; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-maru a:active { color: #039; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-maru a:hover { color: #fff; text-decoration: none; background-color: #039; line-height:1.1; }

/* ×の場合のリンク色（アンカー全般・リンク・訪問済み・アクティブ・マウスカーソルをあわせた時、の順） */
ul#kotonoha-roll li.kotonoha-batsu a { color: #903; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-batsu a:link { color: #903; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-batsu a:visited { color: #903; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-batsu a:active { color: #903; text-decoration: none; line-height:1.1; }
ul#kotonoha-roll li.kotonoha-batsu a:hover { color: #fff; text-decoration: none; background-color: #903; line-height:1.1; }

/* コトの回答数表示 */
ul#kotonoha-roll li a span.kotonoha-count {
    color: #666;
    font-size: 10px;
}

/* コトに対するコメント表示 */
ul#kotonoha-roll li div.kotonoha-comment {
    margin: 4px 0 0 0;
    color: #666;
    font-size: 10px;
}

▲ページのトップへ

[サンプル２]○と×の色分け表示サンプル

このサンプルは、リンク色はシンプルに、かわりに○と×の記号に色をつけたものです。

[サンプル２]カスタマイズポイント

  1. CSS を適用していない場合に出現していた中黒点（・）を消去
  2. ○と×の記号を色分け、大きさを微調整
  3. リンク色は単色でシンプルに変更
  4. コトの回答数のフォントサイズを調整して色を変更
  5. コメントのフォントサイズを調整して色を変更
  6. 囲んでいる枠線との距離（詰め・padding)を調整

▲ページのトップへ

コメントなし sample

コメントあり sample

▲ページのトップへ

[サンプル２]CSS コード

→サンプル２の CSS をダウンロードする
Windows:右クリック→対象（リンク先）をファイルに保存｜Mac: Ctrl + クリック→別名でリンク先を保存


/* リスト全体を囲む領域 */
ul#kotonoha-roll {
    margin: 8px 15px;
}

/* リストの項目一つ一つの領域 */
ul#kotonoha-roll li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* ○記号 */
ul#kotonoha-roll li span.kotonoha-maru {
    font-size: 16px;   /* ○の記号は、指定されたフォントの種類・ブラウザの種類によって大きさがまちまちなので完全に同じ大きさにするのは難しく、比較的どのブラウザでも我慢できるであろう大きさを指定してあります */
    _font-size: 12px;  /* Win IE 6 だけが読み込むハック */
    font-weight: bold;
    color: #6ba9ff;
    text-indent: 8px;
    _text-indent: -1px;  /* Win IE 6 だけが読み込むハック */
    }

/* ×記号 */
ul#kotonoha-roll li span.kotonoha-batsu {
    font-size: 20px;
    _font-size: 16px;  /* Win IE 6 だけが読み込むハック */
    font-weight: bold;
    color: #ff8181;
    text-indent: 10px;
    _text-indent: -4px;  /* Win IE 6 だけが読み込むハック */
    }

/* リンク色（アンカー全般・リンク・訪問済み・アクティブ・マウスカーソルをあわせた時、の順） */
ul#kotonoha-roll li a { color: #36f; text-decoration: none; }
ul#kotonoha-roll li a:link { color: #36f; text-decoration: none; line-height:1.2; }
ul#kotonoha-roll li a:visited { color: #36f; text-decoration: none; line-height:1.2; }
ul#kotonoha-roll li a:active { color: #36f; text-decoration: none; line-height:1.2; }
ul#kotonoha-roll li a:hover { color: #36f; text-decoration: underline; line-height:1.2; }

/* コトの回答数表示 */
ul#kotonoha-roll li a span.kotonoha-count {
    color: #666;
    font-size: 10px;
}

/* コトに対するコメント表示 */
ul#kotonoha-roll li div.kotonoha-comment {
    margin: 4px 0 0 0;
    color: #666;
    font-size: 10px;
}

▲ページのトップへ

[サンプル３]トリッキーな CSS を駆使した、○と×を画像で表示するサンプル

このサンプルは、環境によって○と×の大きさを調整しづらい問題を解決すべく、なんと○と×を画像にして見栄えを洗練させたサンプルです。

このサンプルでは別途画像を用意しています。実際にこのサンプルをお使いの場合は、○と×に置き換える画像を各自ご用意いただき、任意のサーバにアップロードしたものをご利用ください。

○　×

▲サンプルで使っている画像です

[サンプル３]カスタマイズポイント

  1. CSS を適用していない場合に出現していた中黒点（・）を消去
  2. ○と×の記号を text-indent で大きな負の値をつけて画面の外に追いやり、見かけ上かくれてみえないようにする
  3. ○と×の記号の下に背景画像を指定する
  4. ○と×の記号を独立させて、他のテキストを右側に回り込ませる
  5. リンク色は、マウスカーソルをあてたときに背景色が変わるように詰めもあわせて微調整
  6. コトの回答数のフォントサイズを調整して色を変更
  7. コメントのフォントサイズを調整して色を変更
  8. 囲んでいる枠線との距離（詰め・padding)を調整
  9. この方法のままだと Windows IE6 でリストの最上端に謎の隙間が空くので、Win IE6 のみ読み込むハックを使ってマイナスのマージンを指定して回避どうやら設置されている方のいくつかで、必要ないと判断し削除

▲ページのトップへ

コメントなし sample

コメントあり sample

▲ページのトップへ

[サンプル３]CSS コード

→サンプル３の CSS をダウンロードする
Windows:右クリック→対象（リンク先）をファイルに保存｜Mac: Ctrl + クリック→別名でリンク先を保存



/* リスト全体を囲む領域 */
ul#kotonoha-roll {
    margin: 8px 15px;
    padding: 0;
}

/* リストの項目一つ一つの領域 */
ul#kotonoha-roll li {
    margin: 0 0 6px 0;
    padding: 0;
    width: 100%;
    clear: both;
    list-style-type: none;
    letter-spacing: 0.1ex;
}

/* ○記号 */
ul#kotonoha-roll li span.kotonoha-maru {
    display: block;
    float: left;
    width: 24px;  /* 用意する画像の大きさによって調整します。サンプルでは24x24px を使っています */
    height: 24px;  /* 用意する画像の大きさによって調整します。サンプルでは24x24px を使っています */
    background: url(/* 画像の場所のURLを記入 */) no-repeat -5px 0;  /* 用意した画像の置き場所を指定します。ここでは 24x24pxの正方形の画像を使っている都合上、左から-5px 、上から0の位置に微調整してあるものです。適宜用意した画像にあわせて調整してみてください */
    text-indent: -10000px;
    }

/* ×記号 */
ul#kotonoha-roll li span.kotonoha-batsu {
    display: block;
    float: left;
    width: 24px;  /* 用意する画像の大きさによって調整します。サンプルでは24x24px を使っています */
    height: 24px;  /* 用意する画像の大きさによって調整します。サンプルでは24x24px を使っています */
    background: url(/* 画像の場所のURLを記入 */) no-repeat -5px 0;  /* 用意した画像の置き場所を指定します。ここでは 24x24pxの正方形の画像を使っている都合上、左から-5px 、上から0の位置に微調整してあるものです。適宜用意した画像にあわせて調整してみてください */
    text-indent: -10000px;
    }

/* リンク色全般指定 */
ul#kotonoha-roll li a {
    margin-left: 24px;
    padding: 4px;
    display: block;
}

/* リンク色（アンカー全般・リンク・訪問済み・アクティブ・マウスカーソルをあわせた時、の順） */
ul#kotonoha-roll li a { color: #36f; text-decoration: none; background-color: #fff; }
ul#kotonoha-roll li a:link { color: #36f; text-decoration: none; line-height:1.2; background-color: #fff; }
ul#kotonoha-roll li a:visited { color: #36f; text-decoration: none; line-height:1.2; background-color: #fff; }
ul#kotonoha-roll li a:active { color: #36f; text-decoration: none; line-height:1.2; background-color: #fff; }
ul#kotonoha-roll li a:hover { color: #36f; text-decoration: none; line-height:1.2; background-color: #e5edff; }

/* コトの回答数表示 */
ul#kotonoha-roll li a span.kotonoha-count {
    color: #666;
    font-size: 10px;
}

/* コトに対するコメント表示 */
ul#kotonoha-roll li div.kotonoha-comment {
    margin: 4px 0 0 28px;
    color: #666;
    font-size: 10px;
}

▲ページのトップへ

CSS の読み込み方

CSS を読み込む方法は何通りかありますが、ここではポピュラーな２つの方法を紹介します。

詳しく知りたい方は「CSS 読み込み　方法」などの検索ワードで検索すると良いかもしれません。

また、今回の２つの方法についてはスタイルシートの基本 -- ごく簡単なHTMLの説明(The Web KANZAKI) もとても参考になると思います。

ファイルをアップロードできる環境をお持ちの方であれば、サーバの任意の場所に CSS を単独で設置して、HTML 側から link 要素を使って取り込む方法をおすすめします。

link 要素を使って「サンプル１」の CSS を読み込む方法

  1. サンプル１の CSS (sample1.css) を任意の場所にアップロードします。ここでは http://example.com/css/に置くものとして例を示します。
  2. HTML ファイル（ブログなら、テンプレートで用意されていることが多いです）の head 要素の中（他にも CSS を読み込んでいる場合は、必ずすでに読み込んである CSS の下に記述してください）に link 要素を書き込みます。赤く表示されているところが記述する場所です。http://example.com/css/は、実際に設置する URL に置き換えてください。 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>あなたのサイトのタイトル</title>
        <link rel="stylesheet" media="screen,tv" href="http://example.com/css/sample1.css" type="text/css" />
    </head>
（以下略）
  3. あらかじめ貼り付けられたコトノハ Roll にデザインが反映されているか確認します。

HTML 側に直接 style 要素で CSS を記述する方法

この方法は、CSS を別でアップロードできない環境のうち、HTML の編集が可能な場合におすすめします。

  1. HTML ファイル（ブログなら、テンプレートで用意されていることが多いです）の head 要素の中（他にも CSS を読み込んでいる場合は、必ずすでに読み込んである CSS の下に記述してください）に style 要素を書き込みます。赤く表示されているところが記述する場所です。ダウンロードした sample1.css をテキストエディタなどで開き、全てコピーして貼り付けます。 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>あなたのサイトのタイトル</title>
        <style type="text/css">
        ここに sample1.css の内容をそのままコピー＆ペーストする
        </style>
    </head>
（以下略）
  2. あらかじめ貼り付けられたコトノハ Roll にデザインが反映されているか確認します。

現在のところ、あまりサポートする余裕がなくて恐縮ですが、使ってみて不具合があった場合はお知らせ頂けると助かります（可能なかぎり対応いたします）。その他、コトノハ Roll をこんなデザインにしたよ！というようなご報告も随時お待ちしています。是非ブログへのトラックバックやコメントでお寄せください。こちらのエントリへどうぞ。

copyright © purprin some rights reserved.