アメブロのテーマが開閉式フォルダーに変わる

  • アメブロのテーマが開閉式フォルダーに変わる
  • アメブロのテーマが開閉式フォルダーに変わる 設置タグ

DL数:157 登録日:2013-02-25 15:45:40
タイトルを読んであなたが思った通りの、もしくはそれ以上の効果を発揮します。

今まで疑似的にツリーに見せるのが精いっぱいだったテーマがクリックで開閉するかっこいいフォルダーに変わります。

もちろん階層をどこまでも掘り下げることができます。

それだけでなくなんと!末端フォルダの記事名まで自動取得・リスト表示されます。

アメブロ専用で新旧スキンを自動判別して同じように動作します。

それではとってもカンタンな使い方。

子孫フォルダとしてツリーに収納したいテーマのタイトルの先頭に全角スペースをつけておくだけで完了です。

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やお問い合わせで教えてください。
  • 時間帯によって背景を切り替えるコード

    時間帯によって背景を切り替えるコード
    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;を設定してありますが要素は普通のサイトと同じ感覚で配置するのがイイと思います。
    
    オモシロい使い方があったらぜひ教えてください。

設置タグご利用時の注意

大原則として設置タグの利用は完全に自己責任です。
以下の事項をよく理解したうえでお使いください。
設置タグ利用により発生したあらゆる被害・損失について当サイトおよび運営会社は一切の責任を負いません。

①設置タグの外部ファイルは各クリエイターが管理しています。

外部ファイルを読み込むタイプのプログラムはクリエイターがいつでも自由に改変できます。
バグの修正を全てのタグに反映できるというメリットがある一方で悪意のあるプログラムに置き換えることも可能ということになります。
当サイトはクリエイターの善意と良心によって成り立っており、ユーザーの自己責任においてタグを配布しております。

②バグ・リンク切れ・サーバーダウンを前提として使う。

外部ファイルを読み込むタイプのプログラムはファイルを設置しているサーバーが解約されたり、ダウンした場合にプログラムは動作しなくなります。
また、あらゆるプログラムにはバグがつきものです。
当サイトはもちろん、クリエイター本人でも対処できない場合がありますので、万一サービスが停止してもブログ運営に影響がない範囲でご利用ください。

③各ブログサービスの規約を理解して設置する。

便利なプログラムもブログサービスによってはその規約に違反していることがあります。
突然アカウントが消されてしまうことのないよう、注意してタグを利用してください。

④クリエイターに無断で改変・複製・再配布を行わない。

一部を除き、公開されているプログラムにも著作権があります。
利用に関して疑問や要望がある場合はクリエイターに直接確認してください。

上記のことをご理解いただいたうえで、設置タグを利用してください。