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

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

    全ての禁止タグを有効化する禁断の改造コード
    DL数:122
    効果はタイトルの通り。
    無料ブログで禁止・使用制限されているscript,iframe,param等どんなタグでも有効化します。
    
    恐ろしい効果の割に使い方はとってもカンタン。
    
    ①配布タグを各ブログのscriptタグOKエリアに設置する。
    
    ②コードの以下の部分に有効化したいタグ名を,で区切り""で囲んでください。
    
    tag:["script","iframe"] //有効化したい["タグ名"]
    
    ※例としてscriptとiframeをあらかじめ有効化してあります。
     不要なら消してください。
    
    ③禁止タグをブログ内の好きな場所に設置し、開始タグと終了タグの頭2文字を消して保存してください。
    
    例えば、scriptタグを禁止エリアに設置する場合、
    <script type="text/javascript">
    ・・・・
    </script>
    というタグを
    
    <ript type="text/javascript">
    ・・・・
    </ript>
    に変えておくだけです。
    
    たったこれだけの設定で完了です。
    
    ただし、いくつか条件があります。
    A,この配布タグそのものはscriptタグを許可されているエリアに設置すること。
    
    B,頭2文字を消したタグはHTMLとして出力されるエリアに設置すること。
    
    C,各ブログサービスの利用規約に違反しない事。
    
    現時点で有効化できないタグは見つかっていませんが、scriptタグは場合によって正常に動作しないことがあります。
    
    Twitterにでもご連絡いただければ可能な限り修正していきます。
  • アメブロのテーマが開閉式フォルダーに変わる

    アメブロのテーマが開閉式フォルダーに変わる
    DL数:157
    タイトルを読んであなたが思った通りの、もしくはそれ以上の効果を発揮します。
    
    今まで疑似的にツリーに見せるのが精いっぱいだったテーマがクリックで開閉するかっこいいフォルダーに変わります。
    
    もちろん階層をどこまでも掘り下げることができます。
    
    それだけでなくなんと!末端フォルダの記事名まで自動取得・リスト表示されます。
    
    アメブロ専用で新旧スキンを自動判別して同じように動作します。
    
    それではとってもカンタンな使い方。
    
    子孫フォルダとしてツリーに収納したいテーマのタイトルの先頭に全角スペースをつけておくだけで完了です。
    
    1個つけると子フォルダ、2個つけると孫フォルダ・・・という調子でどこまでも階層を深くできます。
    
    子孫フォルダのタイトルにはコード内の
    
    mark:["┣","┗"], //["中間","末尾"]子孫フォルダに追加する文字orタグ
    
    の部分に設定した文字やタグが自動で先頭に付加されます。
    
    例えばこれを以下のように
    mark:["<img src=・・・ />","<img src=・・・/>"],
    imgタグに変えるとオリジナルのアイコンが付けられます。
    (属性の値はシングルクォートで囲む)
    
    自動取得する記事名にはコード内の
    
    title:["【記事】","Article-Title"] //記事名に追加する["文字","クラス"]
    
    の部分に設定した文字やタグが自動で先頭に付加されます。
    さらに記事リンクタグの親要素にArticle-titleというCSSクラスが付加されます。
    
    これも以下のように
    title:["<img src=・・・ />","Article-Title"],
    imgタグに変えるとオリジナルのアイコンが付けられます。
    (属性の値はシングルクォートで囲む)
    
    クラス名も利用して
    Article-title>a{
     ・・・
    }
    CSSで記事名が目立つように装飾ができます。
    
    注意すべき点は子フォルダを持つテーマは開閉ボタンに変わるのでリンクできなくなるということです。
    
    そのテーマは必ず記事数を0にしておいてください。
    テーマの横につく(0)は自動で消えます。
    
    アナリティクスを使っている場合、フォルダの開閉もカウントするようにプログラムしておきました。
    
    解析結果に正しく反映されてない場合はTwitterやお問い合わせで教えてください。