メニューのカテゴリリストが、ちょっぴりオシャレになりました。
CATEGORYの文字にマウスをのせると、つらつらっと選択リストが現れ、それっぽいアイコンなども一緒に表示されます。（モバイル端末からは見れないのですけれど）
ここのところの雨つづきで部屋に降り込められ、机に向かう時間がふえたのでサボり気味のブログを更新しようとPCを立ち上げるも、肝心の写真はすでにネタ切れで記事は書けず、仕方ないので見栄えだけでも変えておこうとテンプレートをいぢってみた結果であります。
。。と、これだけではネタがウスイようにおもうので、珍しく解説などを試みてみようかと思います。
Bloggerのダッシュボードを見ると、テンプレートの選択画面に「HTMLの編集」というボタンがあり、ブログの見栄えをコードで直接編集できるようになっています。
中身は１０００行以上もある巨大ソースなので気弱なヒトはひいてしまうかもしれませんがHTMLやCSSをカジッたことがあるなら基本は同じなので、勘所をつかめれば理解可能です。
で、その勘所ですが、よく見ると<b:if>や<data:blog.xxx>といった見慣れないタグが混じっているのに気づくでしょう。これはその昔、ColdFusionとかMicrosoftASPとか（今となっては知ってるヒトの方が少ないので例えが悪いですけど）が採用していた、HTMLに埋め込こんどくとレンダリング時にサーバーサイドでロジックを実行してHTMLに変換してくれるというベンリなタグでして、これをウマく活用するとブログページの機能をカッチョよく拡張することができるっていうスグレモノです。詳細は別のサイトにおまかせするとして、主な種類を簡単に説明すると、
<data:xxx>タグ
Bloggerのページやウィジェットなどのデータに直接アクセスできるタグ。
<b:if>タグ、<b:loop>タグ
みたとおり、条件設定したりループしたりする分岐制御タグ。
<b:widget>タグ
ダッシュボードの「ウィジェット追加」で追加できる部品を参照できるタグ。
<b:section>タグ
widgetのレイアウトを決めるタグ。widgetタグとペアでつかう。
てなところです。
で、これを使ってくだんのカテゴリリストが入ったメニューバーを表現すると、
こんな感じになります。
テンプレートを編集し上のコードを適当な場所（<body>タグの下でかつ他の<b:section>タグと入れ子にならない位置。例えばこのコードはid='header'セクションの下あたりに入れてあります。)に挿入すると、ダッシュボードのレイアウトにそれまでは存在しなかった下のような枠が出現します。
「編集」をクリックするとウィジェットの設定画面が現れるので、
「新しいサイトの名前」:記事に設定したラベルを入力
「新しいサイトのURL：ラベルに対応するアイコンのURL
を入力し、保存します。
（アイコンは、ブログの静的ページに貼り付けておけば手軽に参照できますよ。）
つまり、カテゴリの追加変更がソースを直接いじるのではなくウィジェットから簡単に行えるってわけです。なかなかオシャレでしょ。
キモはハイライトしたwidgetタグの使い方。
上のリンクリストにはLinkList5って名前をつけてあるので<b:widget id='LinkList5'>タグの内では中身を<data:>で参照できるんです。data:link.targetはサイトのURLに該当し、data:link.nameはサイトの名前。値が複数あるので<b:loop>つかって全件取り出ししてます。<includable id='main'>がちょっと気になりますけど、これはwidgetの組み込みに必要なおまじないと思ってください。
ちなみに、<widget>タグは<section>タグの直下にないと機能しなかったり、別のセクションやwidgetとidがかぶっているとHTMLの編集でエラーになって受け付けてもらえなかったりと、レギュレーションがそこそこ厳しいので慣れないとストレスが溜まるかもしれません。ウマくできないからといってアタらないでくださいね。
あと、適用したらページが崩れて見れなくなるってことも考えられるので、変更前のバックアップは必ずとるようにしましょう。
マウスオーバーでメニューの文字がちょこちょこ動いたり、カテゴリ検索の結果にアイコンが表示されるのはCSSやJavaScriptのなせる技で、これにも別の一節がありますけれど、その解説は、今度があればまた今度。
以上、写真がないので苦しまぎれにコードを載せたみました・・・・・でした。
0 コメント:
コメント欄の表示