複雑なCSS3を手軽に

マウスだけで要素ごとにデザインできる直感操作。
仕上がりをリアルタイムに確認しながら編集できる。
セレクタとベンダープレフィックスも自動で挿入。

CSS3コードメーカーを見る

ブラウザでサクッとRSS

気になるサイトの最新情報をチェックできる。
シンプルなデザインで見やすい。
追加・削除・並べ替え・タブ分類がカンタン。

RSSリーダーLightを見る

新着ブログパーツ

  • 好きな画像で作る東京オリンピックカウントダウン

    好きな画像で作る東京オリンピックカウントダウン
    DL数:144
    東京オリンピック開会日までをカウントダウンするブログパーツです。
    五輪マークの代わりにお好きな画像を入れることができます。
    
    本当はさくらの招致ロゴを使いたかったのですが権利の問題でできませんでした。
    五輪マークのままお使いいただいても構いません。
    
    配布タグの
    
    <style type="text/css">
    .Tokyo2020CountDown{
    	background:url();
    	width:180px;
    }
    </style>
    
    という部分に
    	background:url(http://~);
    と画像URLを入力するだけです。
    
    画像サイズはブログパーツ横幅の75%に自動調整されます。
    縦横比は維持されます。
    正方形の画像を使うとブログパーツ全体のサイズが黄金比になり美しいのでオススメです。
    
    	width:180px;
    を変えるとブログパーツの横幅を調節できます。
    高さは自動可変です。
    
    現在は日数だけのカウントですが開催日が近づくほど時間・分・秒と表示が増えていきます。
  • 【FC2】記事までツリー化する親子対応カテゴリ

    【FC2】記事までツリー化する親子対応カテゴリ
    DL数:136
    FC2ブログ用で唯一、記事までツリーに組み込めるカテゴリブログパーツです。
    
    設定不要で動作します。
    もちろん親子カテゴリにも対応済みです。
    
    フォルダっぽい開閉機能付きのシンプルなデザインです。
    フォントにはテンプレートの設定が反映されるのでデザインになじみます。
    
    CSSコーディングができる方向けにソース上部にコメント付きstyle要素を記述しておきました。
    自由にカスタマイズできます。
    
    記事が多すぎて展開したときに長くなりすぎる場合は、
    .MT-entry{	//記事リスト
    }
    の部分を
    .MT-entry{	//記事リスト
    	overflow:auto;
    	max-height:300px;
    }
    とすると高さ300px以上で記事リストにスクロールバーが表示されます。
  • 願いを叶えるドラゴンレーダー

    願いを叶えるドラゴンレーダー
    DL数:265
    ドラゴンボールを7つ集めて神龍に願いを叶えてもらおう!
    
    レーダーを頼りにあなたのブログに隠されたドラゴンボールをマウスで見つけ出すゲームです。
    1ページに一つずつ現れるので全部集める場合、読者が最低7ページを巡回してくれることになります。
    
    また、ボールはページの下半分でのみ出現するので読者に記事の半分以上を見てもらうことにもなります。
    
    「起動する」ボタンを押すと表示される黄色い点がマウスの現在位置です。
    ドラゴンボールのありかを示すレーダーの赤い点を目指してマウスを移動させてください。
    赤い点に黄色い点が重なる場所でドラゴンボールが自然に姿を現します。
    クリックするとゲットできます。
    
    7つ集めると神龍が現れて好きな願い事を聞いてくれます。
  • 懐かしのマインスイーパー

    懐かしのマインスイーパー
    DL数:364
    誰もが一度はハマったであろう、あのマインスイーパ―がブログパーツになりました。
    
    ブラウザによってデザインが多少違って見えますが、訪問者みんなが懐かしさを感じてくれるはずです。
    遊び方の解説はあえて省いてますのでルールやコツの紹介でちょっとした記事も書けます。
    
    訪問者ごとに記録したタイムを日本全国のプレーヤーと競うことができます。
    
    コード内の以下部分
     frame:"#ccc"//フレームの色
    の#cccをお好きなカラーコードに変えて盤面の外枠をオシャレにデザインできます。
    
    難易度によって地雷の数が増減します。
    「初級」「中級」「上級」すべてでハイスコアを出すと「特級」が追加されます。
    
    見た目の再現度はChromeが最も高く、IEが最も低いです。

新着改造コード

  • 時間帯によって背景を切り替えるコード

    時間帯によって背景を切り替えるコード
    DL数:219
    朝・昼・夜など時間帯に合わせた素敵なブログデザインを実現できます。
    設定はカンタン、コード内の
    
    img:[
    [,""],//[時刻(0~23),"背景画像URL"]
    [,""],
    ],
    
    という部分に切り替え時刻(24時間表記で0から23までの整数)と画像URLを入力するだけです。
    例えば、
    
    img:[
    [5,"http://~morning.jpg"],//[時刻(0~23),"背景画像URL"]
    [12,"http://~afternoon.jpg"],
    [17,"http://~evening.jpg"],
    [20,"http://~night.jpg"],
    ],
    
    というケースだと、5時から11時59分までmorning.jpgが背景になり、12時、17時でまた背景が変わり、20時から翌朝4時59分までnight.jpgが背景になります。
    1時間単位で画像を設定できるので最大24枚登録できます。
    必ず数字が小さい順番で入力してください。
    
    デフォルトでは5,10,16,20時に画像を設定してあります。そのままお使いいただいても構いません。
    
    手前の要素で背景が隠れてしまう場合はコード内の
    
    level:0,//背景の階層
    
    という部分の数字0を1,2,3・・・と大きくしていくとその分手前の要素の背景が透明になります。
    ちょうど良い表示具合になるよう調整してください。
    
    最後に、
    
    mode:[1,1] //背景画像の[パターン,スクロール追従]
    
    の左の数値でパターンの指定、右の数値でスクロール設定を変更できます。
    
    パターンは、1だと画像のサイズを画面いっぱいに拡大します。
    0だと画像のサイズを変えずに繰り返し表示して背景全体に敷き詰めます。
    
    スクロール追従は1でオン、0でオフです。
    画面をスクロールしても背景を固定しておきたい場合は0にしてください。
  • ブログの背景で画像スライドができる改造コード

    ブログの背景で画像スライドができる改造コード
    DL数:147
    ブログの背景があなたのオリジナルスライドに早変わり!
    設定はカンタン、コード内の
    
    img:["","",""],//["背景画像URL",・・・]
    
    という部分のダブルクォーテーション内にお好きな画像URLを入力するだけです。
    img:["http://~","http://~","http://~",・・・],
    という感じでカンマで区切って入力していくと背景が左から順に自動でスライドしていきます。
    
    time:[3,1],//スライドの[表示秒数,切替秒数]
    
    という部分でスライドをゆっくりにしたり高速で切り替えてアニメーション風にもできます。
    1.5秒など小数点も入力できます。
    
    デフォルトでは最下層の背景を書き換える設定になっています。
    テンプレートによっては手前の要素で背景が隠れてしまいます。
    その場合はコード内の
    
    level:0,//背景の階層
    
    という部分の数字0を1,2,3・・・と少しずつ大きくしてちょうど良い表示具合になるよう調整してください。
    
    最後に、
    
    mode:[1,1] //背景画像の[パターン,スクロール追従]
    
    の左の数値でパターンの指定、右の数値でスクロール設定を変更できます。
    
    パターンは、1だと画像のサイズを画面いっぱいに拡大します。
    0だと画像のサイズを変えずに繰り返し表示して背景全体に敷き詰めます。
    
    スクロール追従は1でオン、0でオフです。
    画面をスクロールしても背景を固定しておきたい場合は0にしてください。
  • 進化したAjaxでアメブロを光速表示

    進化したAjaxでアメブロを光速表示
    DL数:50
    WEBサイトを高速に書き換えるAjaxという技術を聞いたことがありますか?
    
    GooglMapやtwitterなんかでページの一部分だけを更新していくアレです。
    最低限必要な部分だけ書き換えることでブラウザの負担が軽くなるので表示が速くなります。
    
    この改造コードを使うとあなたのアメブロでもメジャーサイトのような高速書き換えが可能になるのです。
    
    正確にはAjaxにURL完全置換をプラスしたPjax(ピージャックス)という技術を使っています。
    
    記事リンクをクリックする度にスキンの共通部分はそのままで記事だけをサクサク書き換えてくれます。
    
    強烈な効果を発揮するのに使い方はとってもカンタン。
    配布タグを設置するだけで完了です。
    
    新旧スキンどちらでも自動判別して同じように動作します。
    
    こだわる方のためにカスタム要素も用意しておきました。
    
    コード内の
    
    load:["#000","★",50], //読込中画面の["カラーコード","画像URL",不透明度]
    
    の部分で読込中に表示する画面の設定ができます。
    画像はサイズ調整なしで中央表示されます。
    loading用の透過GIFを使うとカッコよく見えます。
    「loading画像」で検索するといろいろ見つかります。
    
    不透明度は0から100まで10刻みに設定できます。0で完全透明、100で不透明になります。
    カラーの不透明度だけが変わり、画像には影響しません。
    
    次にコード内の
    
    scroll:[1, 0.5],//スクロールの[戻り位置,速度]
    
    で書き換え完了時にヘッダー部分が隠れている場合に起こる自動スクロールの設定ができます。
    戻り位置には1か0を指定できます。
    デフォルトは1で書き換えた記事のちょっと上まで自動スクロールされます。
    0にするとページの最上部までスクロールします。
    
    速度は自動スクロールの速さを秒で指定します。
    デフォルトは0.5秒です。
    
    基本的にはここまでの設定で充分です。
    SEOを気にする方向けにIEブラウザの対策を用意しておきました。
    
    IE9以下のブラウザにはURLの完全置換機能がないためURLにハッシュ#をつける方法を利用しています。
    
    動作には問題ありませんが1つのページに対し#ありとなしの2つのURLが存在することになります。
    
    読者にとって便利ですがクローラーの評価を下げる可能性があります。
    
    コード内の
    
    ie:1, //IE9以下停止:0
    
    の部分を0に変えるとIE9以下ではPjaxが動作しないようになります。
    
    最後の
    
    func:[] //再呼び出し[関数]
    
    というコードは上級者向けに用意した読込後のコールバック関数の配列です。
    記事が書き換わるたびに関数を呼び出す必要がある場合に変数や関数そのものを代入してください。
    
    不具合が見つかった場合は教えてください。早急に修正します。
  • あなたのオリジナルページをブログに追加

    あなたのオリジナルページをブログに追加
    DL数:47
    ブログの右側にあなた専用のオリジナルページを創り出します。
    
    どう使うかはあなた次第。
    シンプルな機能に無限のカスタマイズ性を秘めています。
    
    特に設定しなくても配布タグの
    <!-- ▼▼▼ iBoard開始 -->から
    
    <!-- ▲▲▲ iBoard終了 -->の間に設置したHTMLタグでページができます。
    
    デフォルトではこのページ右のサンプル(画像は背景で内容は空)と同じ状態です。
    
    リンクのボタンは常に要素の最下部に表示されますがそれ以外は自由に変更できます。
    
    コード内の
    
    back:["#444","★",90],//背景の["カラーコード","画像URL","不透明度"]
    
    という部分でページの背景の設定ができます。
    画像は自動で画面ピッタリにサイズ調整されます。
    
    不透明度は0から100の間で10刻みに設定できます。
    0で完全に透明、100で不透明になります。
    
    コード内の
    
    start:[1], //最初から表示:[0]
    
    という部分で1を0に変えるとブログにアクセスする度に毎回展開された状態で表示されます。
    
    よっぽど意識したページ構成にしないとウザいだけなので変更はおすすめしません。
    
    コード内の
    
    button:[80,"★"] //ボタンの[幅,"画像URL"]
    
    の部分で開閉ボタンの設定ができます。
    
    幅の単位はpxです。画像は左のサンプルのように開と閉両方の画像を左右でくっつけて一枚にしてください。
    
    
    一応ページ左上が基準になるようposition:relative;を設定してありますが要素は普通のサイトと同じ感覚で配置するのがイイと思います。
    
    オモシロい使い方があったらぜひ教えてください。