コンパクト月別アーカイブのカスタマイズ
標準のプラグインの月別アーカイブでは行数が増えてきました。
今までは高さを指定しそれを超えるものは、スクロールバーを表示させると云う方法をとってきました。
でもスマホのFirefox ではこの スクロールバーの常時表示 が旨くいきません。
で、何か良いプラグインがないものかと捜してみると、FC2ブログの共有プラグインにコンパクト月別アーカイブというのを見付けました。
というよりこれ以外に私が気に入るものがなかったと言う方が正解です。
そこでコンパクト月別アーカイブのソースを見てみます。
<div id="plugin-compact-monthly-archive">
<noscript>
<ul>
<!--archive-->
<li>
<a href="<%archive_link>"
title="<%archive_year>年<%archive_month>月 | <%blog_name>"
><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul>
</noscript>
</div>
<div style="text-align:right;" class="plugin-customtemplate">
plugin by <a href="http://customtemplate.blog112.fc2.com/" target="_blank" title="fc2blog用カスタムテンプレート">カスタムテンプレート</a>
</div>
<script type="text/javascript">
/*
* コンパクト月別アーカイブ ver1.0.0
* 2012/11/29
* (c) http://customtemplate.blog112.fc2.com/
*
* コンパクト月別アーカイブ(共有プラグイン)をCSSで装飾する方法
* http://customtemplate.blog112.fc2.com/blog-entry-65.html
*/
var ay=0; //archive year
var al='<dl>';//archive list
<!--archive-->
if(ay!=<%archive_year>){
if(al!='<dl>'){al+='</dd>';
}
al+='<dt><%archive_year>年</dt><dd>';
ay=<%archive_year>;
}
al+='<a href="<%archive_link>"
title="<%archive_year>年<%archive_month>月 | <%blog_name>"
><%archive_month></a> ';
<!--/archive-->
al+='</dd></dl>';
document.getElementById("plugin-compact-monthly-archive").innerHTML=al;
</script>
（注：上記コードは見易さを考えて私が勝手に改行を入れてますので、そのままコピーしても正常に動作しません。コピペできるコードはこの記事の最下段にあります。）
まず、マウスオーバー（ホバー）時の吹き出しをなくす為
title=" "
の部分を削除しました。コード中の 青色 の部分です。
al+='<dt><%archive_year>年</dt><dd>';
ay=<%archive_year>;
}
al+='<a href="<%archive_link>"
title="<%archive_year>年<%archive_month>月 | <%blog_name>"
><%archive_month></a> ';
<!--/archive-->
al+='</dd></dl>';
al+='<dt><%archive_year>年</dt><dd>';
ay=<%archive_year>;
}
al+='<a href="<%archive_link>"><%archive_month></a> ';
<!--/archive-->
al+='</dd></dl>';
こうしました。
次に月の表示がなんとも寂しいので「月」という漢字を入れるのと、
記事数を表示させます。記事数は <%archive_count> で表示されます。
al+='<a href="<%archive_link>"><%archive_month></a>
を
al+='<a href="<%archive_link>"><%archive_month>月(<%archive_count>)</a>
とします。
これでこの後に適当にスペースを入れCSSで修飾すれば一行が3ヶ月毎の表示になりました。
が、記事数が2桁と1桁が混在すると上下で表示位置がずれます。
これがVBA なら文字列操作で1桁の数値の前にスペースを入れて解決なんですが、私にはJava でのやり方が判りません。
眺めたり、Web で捜したり悩むこと数日。
<dl>の中には複数の<dd>を入れることが出来ると云う記事がヒントになって、<dd> の括り方を変更したら旨くいきました。
<div id="my-monthly-archive"><noscript><ul>
<!--archive-->
<li><a href="<%archive_link>月"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
<!--/archive-->
</ul></noscript></div>
<div style="text-align:right;" class="my-monthly-archive-org">original plugin by<br><a href="//customtemplate.blog112.fc2.com/" target="_blank">カスタムテンプレート</a></div>
<script type="text/javascript">
/*
* コンパクト月別アーカイブ ver1.0.0
* 2012/11/29
* (c) http://customtemplate.blog112.fc2.com/
*
* コンパクト月別アーカイブ(共有プラグイン)をCSSで装飾する方法
* http://customtemplate.blog112.fc2.com/blog-entry-65.html
* 2017/05/09
* customized by ｈｉｇｅ
*/
var ay=0; //archive year
var al='<dl>';//archive list
<!--archive-->
if(ay!=<%archive_year>){
if(al!='<dl>'){al+='</dd>';}
al+='<dt><%archive_year>年</dt>';
ay=<%archive_year>;
}
al+='<dd><a href="<%archive_link>"><%archive_month>月 (<%archive_count>)</a></dd>';
<!--/archive-->
al+='</dl>';
document.getElementById("my-monthly-archive").innerHTML=al;
</script>
現在最終のプラグインのhtml。
これで月毎の表示部分が分離されるのでcss で細かな修飾が出来ます。
つまり月毎で配置を固定することが出来ます。
最終のCSSとHTML（コピペで使用可能）
現在最終のCSS。
/* My 月別アーカイブ コンパクト */
#my-monthly-archive {
margin: 1em 0;
font-family: 'Lato', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'sans-serif';
line-height: 1.6;
}
#my-monthly-archive dt {
clear: left;
font-size: 120%;
padding-top: 10px;
}
#my-monthly-archive dd {
float: left;
margin-left: 1.5rem;
width: 70px;
word-break: keep-all;
}
.my-monthly-archive-org {
clear: left;
color: rgba( 100, 0, 0, 0.5);
padding-top: 20px;
line-height: 1.4;
}
<dt> <dd> の範囲に margin-top , bottom が効かないので、padding で処理している。
その他：font の横幅とサイドカラムの横幅に注意。
私のサイドコラムの有効幅は254pxです。
カラムに旨く収まらない時は、青文字の数値で調整して下さい。
margin-leftは個々の日付の左余白。
widthは同じく個々の日付の横幅を調整しています。
なお、日付の折り返しが3ヶ月毎に旨く折り返してくれるのは、このプラグインがサイドにある場合だけで、レスポンシブなテンプレの場合でブラウザの横幅が狭くなって、カラムが記事下に来たりしてカラムの横幅が広がると、日付の折り返し箇所は違ってきます。
コピーして使用できるHTML
<div id="my-monthly-archive"><noscript><ul>
<!--archive-->
<li><a href="<%archive_link>月"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
<!--/archive-->
</ul></noscript></div>
<div style="text-align:right;" class="my-monthly-archive-org">original plugin by<br><a href="http://customtemplate.blog112.fc2.com/" target="_blank">カスタムテンプレート</a>
</div>
<div style="text-align:right;" class="my-monthly-archive-org">customized by<br><a href="https://blgid1974.blog.fc2.com/blog-entry-983.html" target="_blank">ｈｉｇｅ</a>
</div>
<script>
/*
* コンパクト月別アーカイブ ver1.0.0
* 2012/11/29
* (c) http://customtemplate.blog112.fc2.com/
*
* コンパクト月別アーカイブ(共有プラグイン)をCSSで装飾する方法
* http://customtemplate.blog112.fc2.com/blog-entry-65.html
* 2017/05/09
* customized by ｈｉｇｅ
*/
var ay=0; //archive year
var al='<dl>';//archive list
<!--archive-->
if(ay!=<%archive_year>){
if(al!='<dl>'){al+='</dd>';}
al+='<dt><%archive_year>年</dt>';
ay=<%archive_year>;
}
al+='<dd><a href="<%archive_link>"><%archive_month>月 (<%archive_count>)</a></dd>';
<!--/archive-->
al+='</dl>';
document.getElementById("my-monthly-archive").innerHTML=al;
</script>
追記：2020 05 15
CSSの一部訂正
記事一部不備の訂正、追加
追記：2023 05 01
コピーして使用できるHTMLの、script要素のtype属性を削除
