前の関連記事：Blogger:カレンダー(7)Calendar2_Bloggerモジュールの作成その1
Calendar2_Bloggerモジュールの導入方法
Calendar2_Blogger/Calendar2_Blogger.js at 7b5c39ad28333ab63602df32b10e82fcea9d950d · p--q/Calendar2_Blogger
これが完成したコードですが、このままだと大きいのでまず圧縮します。
linuxBean14.04(126)Closure CompilerでJavaScriptを圧縮するのClosure Compiler Applicationを使います。
Blogger:ページ番号付ページナビ(10)ボタンの折り返し表示をやめるでPageNavi2_Blogger.jsを圧縮したのと同じようにコマンドを作成します。
java -jar ~/closure-compiler/compiler.jar --js Calendar2_Blogger.js --js_output_file Calendar2_Blogger.min.js
22.9KiBから6.5KiBに圧縮できました。
<div id="calendar2_blogger"></div>
<script>
var Calendar2_Blogger=Calendar2_Blogger||function(){var b={y:null,m:null,em:null,max:150,posts:[],dic:{},order:"published",elem:null,dataPostsID:"datePosts",days:[],init:function(a){b.y=a.getFullYear();b.m=a.getMonth()+1;b.em=(new Date(b.y,b.m,0)).getDate();b.posts=[];b.dic={};b.days=b.L10N?"Sun Mon Tue Wed Thu Fri Sat".split(" "):"\u65e5\u6708\u706b\u6c34\u6728\u91d1\u571f".split("")},L10N:!1,enM:"Jan. Feb. Mar. Apr. May Jun. Jul. Aug. Sept. Oct. Nov. Dec.".split(" ")},f={_holidayC:"rgb(255, 0, 0)",
_SatC:"rgb(0, 51, 255)",getFeed:function(a){b.init(a);a=b.y+"-"+f.fm(b.m)+"-"+f.fm(b.em)+"T23:59:59%2B09:00";f.createURL(a)},createCalendar:function(){var a=g.calflxC();a.appendChild(g.arrowflxI("\u00ab","left_calendar"));var c=b.L10N?"published"==b.order?"":"updated":"published"==b.order?"":"\u66f4\u65b0\u65e5",c=b.y+"\u5e74"+b.m+"\u6708"+c;a.appendChild(g.titleflxI(c));a.appendChild(g.arrowflxI("\u00bb","right_calendar"));b.days.forEach(function(c,b){var e=g.calflxI(c);e.s=b;f._getDayC(e);a.appendChild(e)});
for(var e=(new Date(b.y,b.m-1,1)).getDay(),c=0;c<e;c++)a.appendChild(g.calflxI());for(var h,c=1;c<b.em+1;c++)c in b.dic?(h=g.dateflxIWithPost(c),b.dic[c].forEach(function(a){h.title+=h.title?"\n\u30fb"+a[1]:"\u30fb"+a[1]})):(h=g.calflxI(c),h.className="nopost"),h.s=(e+c-1)%7,f._getDayC(h),a.appendChild(h);e=(e+b.em)%7;if(0<e)for(c=0;c<7-e;c++)a.appendChild(g.calflxI());a.addEventListener("mousedown",d.mouseDown,!1);a.addEventListener("mouseover",d.mouseOver,!1);a.addEventListener("mouseout",d.mouseOut,
!1);b.elem.textContent=null;b.elem.appendChild(a);b.elem.appendChild(g.datePostsNode())},_getDayC:function(a){0==a.s?a.style.color=f._holidayC:6==a.s&&(a.style.color=f._SatC)},_writeScript:function(a){var c=d.createElem("script");c.type="text/javascript";c.src=a;document.getElementsByTagName("head")[0].appendChild(c)},createURL:function(a){a="/feeds/posts/summary?alt=json-in-script&orderby="+b.order+"&"+b.order+"-min="+b.y+"-"+f.fm(b.m)+"-01T00:00:00%2B09:00&"+b.order+"-max="+a;a+="&callback=Calendar2_Blogger.callback.getArticles&max-results="+
b.max;f._writeScript(a)},fm:function(a){return("0"+a).slice(-2)}},g={calflxC:function(){var a=d.createElem("div");a.style.display="flex";a.style.flexWrap="wrap";return a},calflxI:function(a){var c=d.createElem("div");c.textContent=a;c.style.flex="1 0 14%";c.style.textAlign="center";return c},dateflxIWithPost:function(a){var c=g.calflxI();c.className="post";c.textContent=a;c.style.backgroundColor="rgba(128,128,128,.2)";c.style.borderRadius="50%";c.style.cursor="pointer";return c},datePostsNode:function(){var a=
d.createElem("div");a.style.display="flex";a.id=b.dataPostsID;a.style.flexDirection="column";return a},_postflxC:function(){var a=d.createElem("div");a.style.display="flex";a.style.borderTop="dashed 1px rgba(128,128,128,.5)";a.style.paddingTop="5px";return a},_imgflxI:function(a){var c=d.createElem("div");c.style.flex="0 0 72px";var b=d.createElem("img");b.src=a[2];a=g._a(a);a.appendChild(b);c.appendChild(a);return c},_a:function(a){var c=d.createElem("a");c.href=a[0];return c},_titleflxI:function(a){var c=
d.createElem("div");c.style.alignSelf="center";c.style.padding="0 5px";var b=g._a(a);b.textContent=a[1];c.appendChild(b);return c},postNode:function(a){var c=g._postflxC();if(a[2]){var b=g._imgflxI(a);c.appendChild(b)}a=g._titleflxI(a);c.appendChild(a);return c},arrowflxI:function(a,c){var e=d.createElem("div");e.textContent=a;e.id=c;e.style.flex="0 0 14%";e.style.textAlign="center";e.style.cursor="pointer";e.title=b.L10N?"left_calendar"==c?"Newer":"Older":"left_calendar"==c?"\u7fcc\u6708\u3078":
"\u524d\u6708\u3078";return e},titleflxI:function(a){var c=d.createElem("div");c.textContent=a;c.id="title_calendar";c.style.flex="1 0 72%";c.style.textAlign="center";c.style.cursor="pointer";c.title=b.L10N?"Switching between published and updated":"\u516c\u958b\u65e5\u3068\u66f4\u65b0\u65e5\u3092\u5207\u308a\u66ff\u3048\u308b";return c}},d={_node:null,_timer:null,_rgbaC:null,_fontC:null,mouseDown:function(a){a=a.target;switch(a.className){case "post":d._node&&(d._node.style.backgroundColor=d._rgbaC);
d._node=a;var c=document.getElementById(b.dataPostsID);c.textContent=b.L10N?b.enM[b.m-1]+" "+a.textContent+", "+b.y:b.y+"\u5e74"+b.m+"\u6708"+a.textContent+"\u65e5("+b.days[a.s]+")";b.dic[a.textContent].forEach(function(a){c.appendChild(g.postNode(a))});break;case "nopost":c=document.getElementById(b.dataPostsID);c.textContent=null;d._node&&(d._node.style.backgroundColor=d._rgbaC,d._node=null);break;default:switch(a.id){case "title_calendar":b.order="published"==b.order?"updated":"published";a=new Date(b.y,
b.m-1,1);f.getFeed(a);break;case "left_calendar":a=new Date(b.y,b.m,1);f.getFeed(a);break;case "right_calendar":a=new Date(b.y,b.m-2,1),f.getFeed(a)}}},mouseOver:function(a){var b=a.target;if("post"==b.className){if(b.style.textDecoration="underline",d._fontC=window.getComputedStyle(a.target,"").color,b.style.color="#33aaff",d._rgbaC=window.getComputedStyle(a.target,"").backgroundColor,a=/\d+\.\d+/.exec(d._rgbaC)){a=Number(a[0]);var e=a+.3;b.style.backgroundColor=d._rgbaC.replace(a,1<e?1:e)}}else switch(b.id){case "title_calendar":case "left_calendar":case "right_calendar":b.style.textDecoration=
"underline",d._fontC=window.getComputedStyle(a.target,"").color,b.style.color="#33aaff"}},mouseOut:function(a){a=a.target;if("post"==a.className)a.style.textDecoration=null,a.style.color=d._fontC,a!==d._node&&(a.style.backgroundColor=d._rgbaC);else switch(a.id){case "title_calendar":case "left_calendar":case "right_calendar":a.style.textDecoration=null,a.style.color=d._fontC}},createElem:function(a){return document.createElement(a)}};return{callback:{getArticles:function(a){Array.prototype.push.apply(b.posts,
a.feed.entry);if(a.feed.openSearch$totalResults.$t<b.max){var c=/\d\d(?=T\d\d:\d\d:\d\d\.\d\d\d.\d\d:\d\d)/i;b.posts.forEach(function(a){var d=Number(c.exec(a[b.order].$t));b.dic[d]=b.dic[d]||[];b.dic[d].push([a.link[4].href,a.link[4].title,a.media$thumbnail?a.media$thumbnail.url:null])});f.createCalendar()}else{a=/(\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d)\.\d\d\d(.\d\d:\d\d)/i.exec(a.feed.entry[a.feed.entry.length-1][b.order].$t);var d=new Date;d.setTime((new Date(a[1]+a[2])).getTime()-1E3);b.m==d.getMonth()+
1&&(a=b.y+"-"+f.fm(b.m)+"-"+f.fm(d.getDate())+"T"+f.fm(d.getHours())+":"+f.fm(d.getMinutes())+":"+f.fm(d.getSeconds())+"%2B09:00",f.createURL(a))}}},all:function(a){b.elem=document.getElementById(a);b.elem&&(b.L10N=/.jp$/i.test(location.hostname)?!1:!0,a=/\/(20\d\d)\/([01]\d)\//.exec(document.URL),f.getFeed(a?new Date(a[1],Number(a[2])-1,1):new Date))}}}();Calendar2_Blogger.all("calendar2_blogger");
</script>
ページナビの導入と違って、あとはこのコードをHTML/JavaScriptガジェットに入れるだけです。どこにカレンダーを入れるのか考える
このブログはHTMLテンプレートをいじくりすぎてレイアウト画面でうまく編集できないのでレイアウトの変更は大変です。
カレンダーはサイドバーに入れようと思っていますので、まずウィジェットの状態を確認します。
まずレイアウト画面でBlogger：レイアウト編集(10)ウィジェットのIDを確認する方法の方法でサイドバーのウィジェットＩＤを確認しました。
テンプレートのHTMLを見るとPopularPosts2、Label2、Feed2のウィジェットはmobile='only'にしているのでモバイルサイトのみに表示されます。
他のウィジェットは逆にウェブバージョンのみに表示されます。
Feed1の中にアドセンスを埋め込んでいます。
アーカイブページとスタティックページのときはアドセンスを表示させないようにしています。
ページの種類はBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で学習しました。
HTML1ウィジェットは「過去の記事一覧へ」が入っています。
Blogger:こまごま変更(2)過去の記事一覧へのページ内ジャンプを作るで作ったものです。
カレンダーで投稿一覧が見れるのでもうこのウィジェットは削除することにします。
カレンダー、アドセンス、過去１週間の訪問数、人気記事NO.10、最近のコメント、ラベル、の順に表示させるように変更します。
ウィジェットＩＤとしては、カレンダー、アドセンス、Stats1、PopularPosts1、Feed1、Label1の順になります。
アドセンスはStats1の中に入れ込みます。
で、ウィジェットの順番の入れ替えはテンプレートのHTMLでやればよいのか、レイアウト画面でやればいいのかが問題です。
テンプレートがどっちでやればよかったか忘れてしまいました、、、
Blogger：テンプレート編集(7)投稿セクションでアイテムの並び替えが反映されない
これかな？
Blogger:モバイルサイト(9)mobile='only'にしたウィジェットに入れたガジェットの設定を変更する方法
この記事の頃はmobile='only'にしたウィジェットはレイアウト画面で表示されなかったのですが、今回はレイアウト画面に表示されていますね。
とりあえずCalendar2_BloggerモジュールをHTML/JavaScriptガジェットに導入。
まずはテンプレートのHTMLでFeed1の中のアドセンスを退避させます。
「過去の記事一覧へ」が入っているHTML1ウィジェットの中身をCalendar2_Bloggerモジュールの上記のコードに入れ替えることにしました。
とりあえずカレンダーが表示されるようになりました。
と、問題発覚。
投稿一覧を表示させると幅がはみ出てしまいます。
でもサムネイルがないときははみ出ません。
flexのコンテナははみ出ていないのにどうしてflexアイテムがはみ出るのでしょう。
はみ出ない投稿もあります。
投稿タイトルのflexShrinkを1にしても解決しません。
flexShrinkは元の要素の幅は削れないようなので当然のことです。
やはり文字を画像の下に回り込ませるしかないようです。
CSSで画像の横に文字を回り込ませる方法と解除する方法 | 9ineBB
flexboxでは画像の下に文字を回り込ませることはできないようですので、画像にfloat:leftを設定しました。
これでサイドバーからはみ出なくなりましたが、回り込んだ部分と間隔ができてカッコ悪いですね。
しかしこれを解決する方法はわかりませんでした。
ウィジェットの順番はFeed1の中のアドセンスの位置を固定するだけにしてもうこのまま変更しないことにしました。
モバイルサイトへのカレンダーの導入
ウェブバージョンとモバイルサイトのウィジェットの並び順を別個にしたいので、このブログではウィジェットを別にしています。
現在、PopularPosts2（人気の記事No5）、Label2（ラベル）、Feed2（最近のコメント）、アドセンス、という順にしています。
これをカレンダー、アドセンス、 Feed2（最近のコメント）、PopularPosts2（人気の記事No5）、Label2（ラベル）に変更します。
レイアウト画面でFeed2をPopularPosts2の上に移動させたらちゃんと配置を保存できました。
以前は保存できなかったので、Bloggerの編集ツールは徐々に改善されているようです。
モバイルサイトに表示させるカレンダーモジュールを入れるためのHTML/JavaScriptガジェットをまず空っぽのまま新たに追加しました。
ウィジェットIDを確認するとHTML6でした。
そのウィジェットをレイアウト画面でFeed2の上に移動させて配置を保存しました。
次にテンプレートのHTML編集画面でHTML6ウィジェットへ移動しそれにmobile='only'を追加しました。
これでテンプレートを保存するとウェブバージョンからは見えなくなるのでHTML6ウィジェットにCalendar2_Bloggerモジュールを入れて保存しました。
これでモバイルサイトのカレンダーを導入することが出来ました。
参考にしたサイト
CSSで画像の横に文字を回り込ませる方法と解除する方法 | 9ineBB
画像の周りに文字を回りこませるにはflexboxではなくfloatを使わないといけません。
0 件のコメント:
コメントを投稿