コトノハ Roll をブログに貼り付けて自分流カスタマイズを【その２】 - pur*log

pur*log Top
Tag
Archives
Last update : 2008-02-11T02:28:01+9:00

コトノハ Roll をブログに貼り付けて自分流カスタマイズを【その２】

2006-09-10T19:47:28+09:00

Tag: blogparts, CSS, design, kotonoha, コトノハ

前回につづき、本題です。実際に CSS を適用したサンプルとコードをまとめました。

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

実際にカスタマイズした見本と共に、CSS のサンプルコードもあわせて提供していますので是非ご利用ください。コトノハ Roll を思う存分カスタマイズするヒントになれば幸いです。

それぞれの CSS を適用させたコトノハ Roll のスクリーンショット

スクリーンショットで見るとこんな感じになります。サンプル3 では○と×の表示に画像を使う方法を紹介しています。

実現方法、ソースコードはサンプルページで記載しています。

サンプル１（コトノハ風）

sample1

サンプル２（○と×の色分け）

sample3

サンプル３（トリッキーな CSS を駆使した○×を画像で表現するデザイン）

sample3

カスタマイズした方はお気軽にトラックバックをお寄せください

コトノハ Roll のパワーアップに伴って、いろいろな魅せ方ができるようになりました。もし、他に素敵な魅せ方がありましたら是非お知らせください(o e o)/

関連記事

by purprin
at September 10, 2006 19:47
in Web

« Prev entry
Next entry »

TrackBacks

Trackback List

コトノハRollをカスタマイズ from SOLVALOU.NET

コトノハのデザイン担当purprinさんがコトノハRollのカスタマイズ方法をブ...

September 11, 2006 1:50 AM

Comments

* Gravatarに登録(FREE)するとあなたのアバターが表示されます。

- オオヒダ
- さっそくコトノハRollカスタマイズしてみました。
  かわゆくなりました。あざーす(o e o)/
September 11, 2006 1:51 AM
- purprin
- あざーす(o e o)/
  
  今度は背景色にあわせた○×画像を用意してみまーす！
September 11, 2006 11:57 PM
- ら。
- 勤務中だがいじりたくなった。どうしてくれる、ご両人。むう。
September 13, 2006 3:49 PM
- purprin
- > ら。さん
  こんにちは。勤務中とはいわずに（苦笑）是非帰ってからもいじってみてください♪
September 13, 2006 11:29 PM
- ら。
- こんな感じになりました。
September 14, 2006 11:46 PM
- purprin
- > ら。さん
  わー！早速ためしていただきありがとうございます。
  ○と×が互い違いになってて楽しいデザインですね！
September 15, 2006 12:10 AM

Post a comment

コメント投稿フォーム:

Name
E-mail

URL

投稿者情報を記憶

Comment(html can't be used.): Please your comment.

コトノハ - ○×ソーシャルで私が回答した最新のコト５件を表示しています。クリックすると別窓でその「コト」に移動します。

→ purprin のコトリスト

Movable Type 3.3 よりタグが正式にサポートされたの...
W-ZERO3[es] で使えるデスクトップテーマを制作しました。...
Movable Type 3.3 から導入された Widget 機...