動的なモジュールの呼び出し
ブラウザのF12検証ツールで見ると、サイドバーガジェットの「月間アーカイブ」はHTMLで構造だけ記述し、Ajax *1 でモジュールを動的に書き出しています。
<div id="menubar"> <!-- アーカイブか、カレンダーか --> <div class="hatena-module hatena-module-archive" data-archive-type="calendar" data-archive-url="https://<!-- 自分のURL -->/archive"> <div class="hamon-hirogaru1 hamon-hirogaru2 hatena-module-title"><!-- 任意のタイトル --></div> <div class="mannaka hatena-module-body"></div> </div> </div>
このコードで「月間アーカイブ」を任意の場所に書き出せます。
といっても、カレンダーを置く場所はやはりサイドバーくらい、かも知れませんね。
月別アーカイブであればサイトナビゲーションの役割も果たしますので、メニューバーなど、活躍の場は広がるかもしれません。
もちろん、通常のHTML同様にCSSによるデザインもOKですので、クラスを追加して背景色やフォントを変えてみるなど、カスタマイズフリーです♪
デフォルトとカレンダーの選択はこちらを書き換えればOK~
data-archive-type="calendar"
data-archive-type="default"
<div class="hatena-module hatena-module-archive" data-archive-type="<!-- ここを書き換え -->" data-archive-url="http://(自分のurl)/archive">
*1: Ajax（エイジャックス、アジャックス）は、JavaScriptとXMLの略語で、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法です。
Ajaxは、Webページを表示したまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法です。（Twitterのいいねボタンなど）
Ajaxは、JavaScriptの拡張機能やXML、DOMなどの既存の機能を組み合わせて実現し、ウェブの表現力を高め、コンテンツをリッチにします。ブラウザのみで専用アプリケーションのような動作を可能にした技術であり、代表的なものはGoogleマップやGmailです。
Ajaxは、サーバーと通信した状態で処理を行うことが可能です。つまり、ページを更新することなくページの内容を入れ替えることができる、非同期処理を可能にします。
