戯れ言葉

コンパクト月別アーカイブのカスタマイズ

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

 標準のプラグインの月別アーカイブでは行数が増えてきました。
 今までは高さを指定しそれを超えるものは、スクロールバーを表示させると云う方法をとってきました。
 でもスマホのFirefox ではこの スクロールバーの常時表示 が旨くいきません。
 で、何か良いプラグインがないものかと捜してみると
 FC2ブログの共有プラグインに
 コンパクト月別アーカイブというのを見付けました。
 というよりこれ以外に私が気に入るものがなかったと言う方が正解です。

 こんなかんじ。
 このプラグインはJavascript がオフになっている時には通常の月別アーカイブが表示されます。
 また 作者のページ でcss での修飾の方法も書かれていて参考になります。
 簡潔でいい感じです。
 でもちょっと省略されすぎで、もうちょっとどないにかならんのかなぁと。
 記事の投稿数も表示させたいし、あとマウスオーバーで右画像のように吹き出しが出るのですが、これはここに書いてある事のそのままの繰り返しなのでいらないし、ちょっと鬱陶しい感じがついて回ります。
 色々web 上で調べてみましたが、欲しい情報はありませんでした。
 
 そこで、自力でなんとかしてみようと云うことですが、当方、JS(Javascript)に関する知識は誠にプアーで、最近 HTML と CSS が改造が出来るようになったぐらいの知識とVBA が判るぐらいです。
 どうなるんでしょう。


 コンパクト月別アーカイブのソースを見てみます。

<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>&ensp;'; <!--/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>&ensp;'; <!--/archive--> al+='</dd></dl>';
 を
al+='<dt><%archive_year>年</dt><dd>'; ay=<%archive_year>; } al+='<a href="<%archive_link>"><%archive_month></a>&ensp;'; <!--/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 hige
 */
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 で細かな修飾が出来ます。
 つまり月毎で配置を固定することが出来ます。



/* 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: 10px;
  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;
}

 現在最終のcss。
 <dt> <dd> の範囲に margin-top , bottom が効かないので、padding で処理している。
 その他:font の横幅とサイドコラムの横幅に注意。
 私のサイドコラムの有効幅は254pxです。

 この記事の時点での私の月別アーカイブ。  春夏秋冬の切り分けにはなってません。
 冬は前年の12月から2月だし
 誰かこんな事を考慮したお洒落な月別アーカイブのプラグインを作ってくれないかなぁ


コピーして使用できるコード

<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">hige</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 hige
 */
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>
 

Comments 10

There are no comments yet.

Janedoe1471  

見やすく便利

これは、いいですね。
もともとのプラグインを、カスタマイズされたんですね。
過去記事の多いYahooブロガーさんには、おすすめです。
コミュニティのほうでも、紹介させていただきました。
設置法がわからないという方については、higeさんにお願いするということで。

そういえば、再配布の件ですが、Akiraさんのテンプレを改造しても、Akiraさんの名前がクレジットされていれば、それは、「再配布」には、あたらないと、思いますが。
Akiraさんのテンプレを改造して、それを「自分の名前」で他人に配布すれば、それは、「再配布」となって、禁止行為になるでしょうが、問題は、もともとの作者さんのクレジットが入っているかどうか、だと思います。

2019/06/29 (Sat) 16:14 | 返信を書く |   
hige

hige  

To Janedoe1471さん

お役に立てば良いのですが。

2019/06/29 (Sat) 18:06 | 再編集 | 返信を書く |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/06/29 (Sat) 18:18 | 返信を書く |   
hige

hige  

To 管理人のみ閲覧さん

どうも参考にされたサイトがレスポンシブとか要約表示に無関心なようですね。
かなり初心者向きにFC2の使い方を指南されているサイトなので、それに引っ張られたのかな。

2019/06/29 (Sat) 18:38 | 再編集 | 返信を書く |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/06/29 (Sat) 19:04 | 返信を書く |   
hige

hige  

To 管理人のみ閲覧さん

なるほど

Yahooにも要約表示の設定はあったんでしょうかねぇ。
以前コメントさせてもらったように、私も全文表示から要約表示にするのにかなりの期間が必要でした。
Akira氏の記事を読む度に気持ちが段々傾いていったと云うわけです。
特に沢山の写真を載せるものですから。

私が要約表示にした時は、身近では評判が良かったのですがねぇ。
要約表示にしてから延べ閲覧数が上がったような気がするのですが。
その前には、記事内に関連記事のリストを載せてからですかねぇ。
私の過去記事では連載ものがあるので、関連記事リストを辿って読んで下さる方は多いです。
(何れもFC2アクセス解析による)

2019/06/29 (Sat) 21:36 | 再編集 | 返信を書く |   

ロビンソン  

再配布について

こんにちは、お邪魔します。
こちらのコメントを拝見して、気になる点があったのでコメントさせていただきます。
Akiraさんのテンプレートのライセンスに関する禁止事項で「再配布は禁止」と明示してあり、Janedoe1471さんが書いている内容も含め、例外事項は書かれていません。
デザイナー名の表記は「必須事項」であり、これを満たしているから「再配布はOK」と言うのは、こじつけではないでしょうか。
コミュニティの皆さんの活動に水を指すつもりは毛頭ありませんが、製作者様が好意で提供しているテンプレートには、リスペクトを持って使うべきだと思います。
仮に利用者が知識や労力を使ってカスタマイズしたものでも、同様ではないでしょうか。

---
突然のコメントで失礼しました。
また、もしAkiraさんご自身の許可をいただいてのことなら、余計なおせっかいであり、お詫び申し上げます。

2019/08/09 (Fri) 14:24 | 再編集 | 返信を書く |   
hige

hige  

To ロビンソンさん

 これは迂闊でした。
 私が改造したテンプレは2件に提供させていただいてます。
 1件は実は私はほぼ関係者で、自分が改造したテンプレが一番使いやすかったので、これを更に小改造の後使用しました。
 もう1件はごく親しい方です。
 これ以外の方に提供する意思はなく、事実お断りしています。

 いずれにしろ誤解をされる様ないきさつがあったかもしれないことは、こちらの不手際でした。
 Akira氏には遅ればせながらただいま確認中です。

 あと、他にもテンプレの改造のお手伝いは幾つかさせていただいた記憶があります。

 ご忠告ありがとうございました。

 なお、ロビンソンさんには、
「Yahoo難民助け隊」 https://admin.blog.fc2.com/control.php?mode=sns_community&process=community_detail&community_key=33773
 に、お助けいただければ有り難いです。
 当コミュニティはJanedoe1471氏と私の二人だけのものではありません。Akira氏もおっしゃってる様に、沢山の方が回答に加わっていただければ、回答が偏向しなくて良いのですが。
 FC2自身が開いた様々なコミュニティは、今は閑古鳥。誰も答える方がおられません。まぁそれはそれなりの負の歴史はあるのですが。

 いずれにしろ、コメントをありがとうございました。

2019/08/09 (Fri) 18:05 | 再編集 | 返信を書く |   

ロビンソン  

To higeさん

こんばんは。
まず、余計なおせっかいと取られがちなコメントに返信してくださったhigeさんに敬意を表します。
Akiraさんのテンプレートを利用して、Akiraさんのブログをチェックしている我々は、ある意味繋がりがあるのだと思います。
ただ今、この件に関するAkiraさんの「どうぞお気になさらず」というスタンスも確認しました。

一つだけ、Akiraさんご本人が言うならともかく、同じテンプレート製作者という立場で、ましてやご本人のブログでいつもAkiraさんへの賛辞を書いている方が、こんな事を言うのか・・・と思ったのが正直なところです。
Akiraさんも言ってくれていますが、この件で尾を引かないように、またブログを訪問して参考にさせていただきますので、今後ともよろしくお願いします。

---
コミュニティへの参加は、折角のお誘いですが私のガラではないと思います(笑)
むしろ、他の皆さんから「どうしてあんなブログやっている奴を入れた」とhigeさんが責められると思います(爆)

2019/08/09 (Fri) 19:56 | 再編集 | 返信を書く |   
hige

hige  

To ロビンソンさん

返信ありがとうございます。
書き込みが行き違いになったようで。
又、Akira氏への鍵コメまで読んでいただき、すごい人! と ビックリ!

スタンスの違いがあるとは思います。思いは、HTMLなんかわからへん。んでどうしたらええん?
という人が一杯で。
助けようとして、勇み足はあるかもしれません。そこは思い入れを感じていただいて、別の観点からサポートをお願いしたい。


ロビンソンさんって「どうしてあんなブログやっている奴を入れた」と言われるほど悪党なんですか?
なんかそんな人ほどよく知っているという、世の習い。

今後もお付き合いを。

2019/08/09 (Fri) 20:45 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます