すたすた式
Blogger QooQ
QooQver1.31のガジェット・ウィジェットをversion1からversion2に変更したときの個人的メモです。
準備編
Blog widget編
資料編
以下、ガジェット・ウィジェットはwidget。version1、version2はそれぞれv1、v2とします。
今回は元テンプレートのCSSを最大限利用したいので、できるだけ現行のwidgetを利用、データタグの変更によって運用したいと考えています。
CSSを新しく書くことをいとわなければ、v2ネイティブのwidgetの利用をオススメします。
今回処理するwidgetは
その他のwidgetも処理は同じだと思います。
あくまで実験的なものです。本番環境での使用は想定していません。
当面の理解のうえで試してみたらこうなったという水準です。正確性はないので留意してください。
もし試す場合は、ぜひ開発用ブログを作成して試してください。
必要に応じ、各widgetに対して以下の処理を行いました。
includable
面倒であればこの項目は省略可能。
以下の順番で作業
</b:widget>
各widgetのv2のincludableタグを生成します。
管理画面「テーマ」「カスタマイズ▼」「HTMLの編集」画面に下記をコピペして「保存」
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:defaultwidgetversion='2' b:layoutsVersion='3'> <head> <b:comment> <b:skin/> </b:comment> </head> <body> <b:section id="main" showaddelement='yes'> <b:widget id="Blog1" title="" type="Blog"/> </b:section> </body> </html>
管理画面「レイアウト」で各widgetを追加。
右下の「保存」をクリック。
管理画面「テーマ」「カスタマイズ▼」「HTMLの編集」で各v2のwidgetのincludableタグをどこかにコピペしておく。
【Blogger】b:includable タグの中身一括削除ツール | 水の中にはサメがいる！さんのツールをつかって、先ほどコピペしたincludableタグの中身を削除して閉じる。
各widgetの</b:widget>の直上に中身を削除して閉じたincludableタグをコピペ。
v1のデータタグをv2用に変更。
v2に対応しているデータタグがない場合は、代替のデータタグを使用。
下記を</b:widget>の直上にコピペ
<b:includable id='content'/> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'/> <b:includable id='pageList'/>
<b:includable id='behindImageStyle'/> <b:includable id='image'/>
<b:includable id='content'/> <b:includable id='searchForm'/> <b:includable id='searchSubmit'/>
データタグの変更
data:showThumbnails (PopularPosts) Blogger Code PE
data:postDisplay.showFeaturedImage (FeaturedPost|PopularPosts) Blogger Code PE
3か所
data:showSnippets (PopularPosts) Blogger Code PE
data:postDisplay.showSnippet (FeaturedPost|PopularPosts) Blogger Code PE
4か所
data:posts[i].href (PopularPosts) Blogger Code PE
data:posts[i].url (Blog|FeaturedPost|PopularPosts) Blogger Code PE
2か所
data:posts[i].snippet (Blog|PopularPosts) Blogger Code PE
data:posts[i].snippets.short (Blog|FeaturedPost|PopularPosts) Blogger Code PE
data:posts[i].thumbnail (PopularPosts) Blogger Code PE
data:posts[i].featuredImage (Blog|FeaturedPost|PopularPosts) Blogger Code PE
以下も検討
<b:includable id='cloud'/> <b:includable id='content'/> <b:includable id='list'/>
<b:includable id='content'/> <b:includable id='hierarchy'/>
置き換え可能なincludableタグがある
id='interval'は置き換え可能
元テンプレート
<b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='interval'> <ul class='hierarchy'> <li expr:class='"archivedate " + data:interval.expclass'> <b:include cond='data:interval.toggleId' data='interval' name='toggle'/> <a class='post-count-link' expr:href='data:interval.url'> <data:interval.name/> </a> <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span> <b:include cond='data:interval.data' data='interval.data' name='interval'/> <b:include cond='data:interval.posts' data='interval.posts' name='posts'/> </li> </ul> </b:loop> </b:includable>
v2
<b:includable id='interval' var='intervals'> <ul class='hierarchy'> <b:loop values='data:intervals' var='interval'> <li class='archivedate'> <div class='hierarchy-title'> <a class='post-count-link' expr:href='data:interval.url'> <data:interval.name/> <span class='post-count'><data:interval.post-count/></span> </a> </div> <div class='hierarchy-content'> <b:include cond='data:interval.data' data='interval.data' name='interval'/> <b:include cond='data:interval.posts' data='interval.posts' name='posts'/> </div> </li> </b:loop> </ul> </b:includable>
interval : Liste hiérarchique des archives (V1) Blogger Code PE
interval : Liste hiérarchique des archives (V2) Blogger Code PE
id='flat'は置き換え可能
<b:includable id='flat' var='data'> <ul class='flat'> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable>
<b:includable id='flat'> <ul class='flat'> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'> <data:i.name/><span class='post-count'><data:i.post-count/></span> </a> </li> </b:loop> </ul> </b:includable>
flat : Liste simple du gadget BlogArchive (V1) Blogger Code PE
flat : Liste simple du gadget BlogArchive (V2) Blogger Code PE
自分の環境ではid='main'が上書きされてしまいました。
元テンプレートのCSSを使いたい場合は、Attribution widgetに明示的にversion='1'を追加。
version='1'
<b:widget id='Attribution1' locked='false' title='' type='Attribution'> ↓ <b:widget id='Attribution1' locked='false' title='' type='Attribution' version='1'>
v2の場合はCSSで調整。
例：
.blogger { text-align: center; } .svg-icon-24 { vertical-align: bottom; }
vertical-alignの値はmiddleとかでも。
Bloggerのアイコンがいらなければ
.svg-icon-24 { display: none;
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿