テーマのツリー化
できました。とは言っても、開閉できない不完全なツリーです。
ただ、アメブロでテーマのツリー化をするのは凄く大変。
そもそも不可能だと言われていました。それが通説だったとか。
不完全なツリーですが、私が探した中ではこれが最良です。
ただこれに関しては少し複雑になってしまうので
簡単にやり方だけ、分かりやすく例を挙げて解説してみます。
◆親タイトル1
子テーマa
子テーマb
子テーマc
◆親タイトル2
子テーマd
子テーマe
◆親タイトル3
子テーマf
◆親タイトル4
子テーマg
子テーマh
子テーマi
このような表示を想定します。
まずフリースペースで親タイトルを指定します。プラグインではないので注意。
マイページから、フリースペースの編集画面へ飛んでください。
そして以下を記載。どこでもいいですが、分かりやすく一番上にでも。
これで親タイトルの指定は完了です。とっても簡単。
フリースペースに、ここで書いた文字が挿入されてしまいますが
最後までやればちゃんと消えるので大丈夫。
当然ですが、サイドバーにフリースペースを配置することをお忘れなく。
[◆親タイトル1]の部分を、好きな文字に変えて下さい。エンジェル戦記 とかね。
次に子テーマを指定します。
これが少し厄介。
まずテーマのURLを調べなければいけません。
私のブログを例に画像で解説してみます。
これが現時点での私のテーマリストです。
ブログ の部分が、◆親タイトル1 にあたります。
そしてその下の アメブロ が 子テーマa にあたります。
この 子テーマa のURLを調べる必要があります。
私の場合は右クリックから[アドレスをコピー]でいけますが、ブラウザによっては違うかも。
とりあえず自分のブログで飛んでみて、アドレスバーのURLを
コピーするだけでも勿論大丈夫です。
さて、ここで取得したアドレスを見てみましょう。
http://ameblo.jp/aixu/theme-10032825868.html
これが私のブログの 子テーマa にあたるURLです。
必要箇所は、赤色で示した数字群。これを以下のスクリプト内に記述します。
今度はフリープラグインに貼りつけて下さい。
非常に簡単なスクリプトです。
初歩的なjQueryなので、初心者にも易しいのではないかと。
内容を読み解くと、
要素（p.theme1）を（特定のURLを持つ）テーマの前に移動させる。
これにより、擬似ツリー化を実現させています。
英語なので簡単です。このp要素が、先程指定した◆親タイトル1を指しています。
これですんなり理解できてしまう人はいいのですが…どうでしょうか。
つまり私のブログで例えるなら
アメブロの前にブログを移動（表示）させる。
たったこれだけのことなんです。
親タイトルを追加する場合は、同じようにフリースペースへ書いていきます。
"theme2" とでも指定して下さい。
フリープラグインと連動していることが大事です。
ではもう一度私のブログを例にして解説してみます。
フリースペース
※改行を入れて見易くしていますが、絶対に改行しないで下さい。うまく表示されません。
フォントタグの指定もできるので、大きさや色なんかもこちらで指定して下さい。
一括に設定しようとしてもうまく表示されなかったりします。非常にデリケートな子です。
CSSで編集する場合は、こちらではあえて何も指定しないで下さい。
フリープラグイン
各親タイトルに指定する子テーマのURL（数字）は、必ず表示する位置の一つ下のものを選択して下さい。
今回の例で言えば
◆親タイトル2 なら 子テーマd
◆親タイトル3 なら 子テーマf
◆親タイトル4 なら 子テーマg
が、それぞれにあたります。
以上です。
不要になった場合は、全部消してしまえば元に戻ります。
今回はCSSを一切いじらないので、かなり特殊なパターンです。
普通はこんなことしません。
文字ではなく画像を表示したい場合はimg要素を指定すればできると思います。
が…
まだ私自身色々試している途中ですので断言できません。すみません。
なら公開すんなって話ですが。
と、実はこれ、私が作ったわけではありません。
こちらのブログを参考にさせていただきました。
ただ、どうも分かりづらいし…そのうち追記するような事を書かれていたのですが
なかなか更新してくれないので、痺れを切らして書いちゃいました。
勝手に見ておいて勝手に怒ってますよね。私って最低な人間かも。
このスクリプト、簡単なだけに、大した説明も要らないのかもしれませんが…。
ちょっとjQueryをかじっていればできちゃうと思います。ただ、こういうのって
アイデアなんですよね。少なくとも私はそう感じます。
今回のツリー化だって、他にも方法はあると思います。実際そうでしょう。
頭をよく使わないでとりあえず楽な方法だけやっていたら、そのうち悲惨な事になります。
何事も勉強です。脳に刺激を与えないと、すぐサボり始めます。
さて、最後になりましたが、今回の件については全て自己責任でお願いします。
コメントで質問して頂ければ答えられる範囲はお答えします。
【追記】
ちょっと記事にするのが早すぎたかもしれませんね…。デザイン超変わりました。
CSSでいじる場合は
これで編集可能です。
CSSの一番最後にでも追記して下さい。
また、これが使えるなら、わざわざフリースペースで編集する必要もないので
フリースペース内のフォントタグなどは削除して下さい。
ただ、アメブロでテーマのツリー化をするのは凄く大変。
そもそも不可能だと言われていました。それが通説だったとか。
不完全なツリーですが、私が探した中ではこれが最良です。
ただこれに関しては少し複雑になってしまうので
簡単にやり方だけ、分かりやすく例を挙げて解説してみます。
◆親タイトル1
子テーマa
子テーマb
子テーマc
◆親タイトル2
子テーマd
子テーマe
◆親タイトル3
子テーマf
◆親タイトル4
子テーマg
子テーマh
子テーマi
このような表示を想定します。
まずフリースペースで親タイトルを指定します。プラグインではないので注意。
マイページから、フリースペースの編集画面へ飛んでください。
そして以下を記載。どこでもいいですが、分かりやすく一番上にでも。
| <p class="theme1">◆親タイトル1</p> |
これで親タイトルの指定は完了です。とっても簡単。
フリースペースに、ここで書いた文字が挿入されてしまいますが
最後までやればちゃんと消えるので大丈夫。
当然ですが、サイドバーにフリースペースを配置することをお忘れなく。
[◆親タイトル1]の部分を、好きな文字に変えて下さい。エンジェル戦記 とかね。
次に子テーマを指定します。
これが少し厄介。
まずテーマのURLを調べなければいけません。
私のブログを例に画像で解説してみます。
これが現時点での私のテーマリストです。
ブログ の部分が、◆親タイトル1 にあたります。
そしてその下の アメブロ が 子テーマa にあたります。
この 子テーマa のURLを調べる必要があります。
私の場合は右クリックから[アドレスをコピー]でいけますが、ブラウザによっては違うかも。
とりあえず自分のブログで飛んでみて、アドレスバーのURLを
コピーするだけでも勿論大丈夫です。
さて、ここで取得したアドレスを見てみましょう。
http://ameblo.jp/aixu/theme-10032825868.html
これが私のブログの 子テーマa にあたるURLです。
必要箇所は、赤色で示した数字群。これを以下のスクリプト内に記述します。
今度はフリープラグインに貼りつけて下さい。
| <script> $(function(){ $("p.theme1").insertBefore("#theme_list li:has(a[href*='テーマのURL内の数字'])"); }); </script> |
非常に簡単なスクリプトです。
初歩的なjQueryなので、初心者にも易しいのではないかと。
内容を読み解くと、
要素（p.theme1）を（特定のURLを持つ）テーマの前に移動させる。
これにより、擬似ツリー化を実現させています。
英語なので簡単です。このp要素が、先程指定した◆親タイトル1を指しています。
これですんなり理解できてしまう人はいいのですが…どうでしょうか。
つまり私のブログで例えるなら
アメブロの前にブログを移動（表示）させる。
たったこれだけのことなんです。
親タイトルを追加する場合は、同じようにフリースペースへ書いていきます。
"theme2" とでも指定して下さい。
フリープラグインと連動していることが大事です。
ではもう一度私のブログを例にして解説してみます。
フリースペース
| <p class="theme1"><font size="3" color="#006633">ブログ</font></p> <p class="theme2"><font size="3" color="#006633">エンジェル戦記</font></p> <p class="theme3"><font size="3" color="#006633">音楽</font></p> <p class="theme4"><font size="3" color="#006633">その他</font></p> |
※改行を入れて見易くしていますが、絶対に改行しないで下さい。うまく表示されません。
フォントタグの指定もできるので、大きさや色なんかもこちらで指定して下さい。
一括に設定しようとしてもうまく表示されなかったりします。非常にデリケートな子です。
CSSで編集する場合は、こちらではあえて何も指定しないで下さい。
フリープラグイン
| <script type="text/javascript"> $(function(){ $("p.theme1").insertBefore("#theme_list li:has(a[href*='10032825868'])"); $("p.theme2").insertBefore("#theme_list li:has(a[href*='10032953831'])"); $("p.theme3").insertBefore("#theme_list li:has(a[href*='10033458961'])"); $("p.theme4").insertBefore("#theme_list li:has(a[href*='10032953812'])"); }); </script> |
各親タイトルに指定する子テーマのURL（数字）は、必ず表示する位置の一つ下のものを選択して下さい。
今回の例で言えば
◆親タイトル2 なら 子テーマd
◆親タイトル3 なら 子テーマf
◆親タイトル4 なら 子テーマg
が、それぞれにあたります。
以上です。
不要になった場合は、全部消してしまえば元に戻ります。
今回はCSSを一切いじらないので、かなり特殊なパターンです。
普通はこんなことしません。
文字ではなく画像を表示したい場合はimg要素を指定すればできると思います。
が…
まだ私自身色々試している途中ですので断言できません。すみません。
なら公開すんなって話ですが。
と、実はこれ、私が作ったわけではありません。
こちらのブログを参考にさせていただきました。
ただ、どうも分かりづらいし…そのうち追記するような事を書かれていたのですが
なかなか更新してくれないので、痺れを切らして書いちゃいました。
勝手に見ておいて勝手に怒ってますよね。私って最低な人間かも。
このスクリプト、簡単なだけに、大した説明も要らないのかもしれませんが…。
ちょっとjQueryをかじっていればできちゃうと思います。ただ、こういうのって
アイデアなんですよね。少なくとも私はそう感じます。
今回のツリー化だって、他にも方法はあると思います。実際そうでしょう。
頭をよく使わないでとりあえず楽な方法だけやっていたら、そのうち悲惨な事になります。
何事も勉強です。脳に刺激を与えないと、すぐサボり始めます。
さて、最後になりましたが、今回の件については全て自己責任でお願いします。
コメントで質問して頂ければ答えられる範囲はお答えします。
【追記】
ちょっと記事にするのが早すぎたかもしれませんね…。デザイン超変わりました。
CSSでいじる場合は
| #theme_list p{ font-size:16px; /*文字の大きさ*/ font-color:#000000; /*文字の色*/ font-familiy:'Andalus','Times New Roman'; /*フォント指定*/ margin:10px 0px 3px 0px; /*表示位置*/ } |
これで編集可能です。
CSSの一番最後にでも追記して下さい。
また、これが使えるなら、わざわざフリースペースで編集する必要もないので
フリースペース内のフォントタグなどは削除して下さい。