戯れ言葉

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

カテゴリ: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 で細かな修飾が出来ます。

つまり月毎で配置を固定することが出来ます。

最終の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ヶ月毎に旨く折り返してくれるのは、このプラグインがサイドにある場合だけで、レスポンシブなテンプレの場合でブラウザの横幅が狭くなって、カラムが記事下に来たりしてカラムの横幅が広がると、日付の折り返し箇所は違ってきます。

コンパクト月別アーカイブ新

この記事の時点での私の月別アーカイブ。

春夏秋冬の切り分けにはなってません。

冬は前年の12月から2月だし

誰かこんな事を考慮したお洒落な月別アーカイブのプラグインを作ってくれないかなぁ

コピーして使用できる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">hige</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 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>
  

追記:2020 05 15
CSSの一部訂正
記事一部不備の訂正、追加

追記:2023 05 01
コピーして使用できるHTMLの、script要素のtype属性を削除

スポンサーサイト



Comments 18

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 | 再編集 | 返信を書く |   

bon  

No title

はじめまして。
コンパクト月別アーカイブを使っています。シンプルなのは良いのですが、シンプルすぎると思っていたところにこちらのブログを見つけました。
CSSまでは難しかったので、
・マウスホバーの吹き出しを消す
・月の漢字を表示する
・記事数を表示する
ここまでを一つずつ作業させていただきました。
higeさんのされたように3か月ずつ整列しているわけではありませんが、月と記事数が表示されたことでわかりやすくなりました。ありがとうございます。

現状ではhigeさんのリンク無しですが、このまま使わせて頂いてよろしいでしょうか。
リンクが必要でしたらおっしゃっていただきましたら作業いたします。
よろしくお願い致します。

2020/05/14 (Thu) 21:01 | 再編集 | 返信を書く |   
hige

hige  

To bonさん

いらっしゃいませ。
採用していただいてありがとうございます。

まずHTMLの部分は、記事の最後にあるコードをプラグインにそのままコピぺ(コピーして貼付)していただければいいのですが。「カスタムテンプレート」というのは作者名ですので、今のままですと「カスタムテンプレート」氏の作成と取られてしまいます。出来れば改造したのは私:higeである旨のクレジットを入れていただく方が誤解がなくていいと思います。

あとCSSは記事の最後からひとつ前の「現在最終のcss。」を、テンプレートのスタイルシートの最後にコピペして下さい。Akira氏のテンプレではサイドカラムの横幅が同じなのでそれで旨くいくと思います。

もし、詳細な導入の仕方が必要でしたらご連絡下さい。

2020/05/14 (Thu) 22:14 | 再編集 | 返信を書く |   

bon  

To higeさん

こんばんは。お返事ありがとうございます。

仰る通りですね、ご覧になる方の混乱を招かないためにもhigeさんのリンクを入れたほうが良いと思いました。ありがとうございます。

そして早速やってみたのですが、うまくいきません…CSSとHTMLを貼り付けるだけで良いと思うのですが、何か間違えているのかもしれません。ご覧いただけますでしょうか。
私はテンプレートのサイドカラムを320pxに変更しているので、そのためでしょうか。
書き換える部分がありましたら教えて下さい。お手数をお掛けしますが、よろしくお願い致します。

2020/05/14 (Thu) 22:39 | 再編集 | 返信を書く |   
hige

hige  

To bonさん

早速やっていただいたんですね。
旨くいかないと云うことですので、bonさんのサイドカラムを拝見させていただきました。
確かにbonさんのテンプレではサイドカラムの横幅を320pxに広げておられるので私と同じ表示にはなっていませんね。
あと、私の方は後日少し手を入れてました。
ごめんなさい。
ですのでその分についての変更分も加えて、変更していただきたい場所を記します。
CSSの下記の赤字部分を変更して下さい。

元記事のCSS
#my-monthly-archive dd {
float: left;
margin-left: 10px;
width: 70px;
word-break: keep-all;
}
の内赤字部分を

下記の赤字部分に変更
#my-monthly-archive dd {
float: left;
margin-left: 1.5rem;
width: 80px;
word-break: keep-all;
}

私のこの方法では、
margin-left で日付の左側に1.5文字分の余白
width で日付の横幅を80px
で、それぞれのサイズを調整しています。

なにかあればこれで微調整してみて下さい。(例えばFontが変わると文字の横幅も変わってきたりとかで)

この様な私のやり方では、ウィンドウの横幅が狭くなってサイドカラムが記事下に移動した時は、カラム自体の横幅がずっと広くなりますので、日付の折り返す場所は違ってきます。

宜しくお願いします。

2020/05/15 (Fri) 10:14 | 再編集 | 返信を書く |   

bon  

To higeさん

わかりやすくご教示下さりありがとうございます。
赤字の部分を変更したところ、きれいに整列しました。現在のブログはまだ3か月分なのですが、10年以上分の記事がある旧ブログで確認したら効果は歴然です。やはり、このようにピシッと揃うと見栄えがよいですね。
(念のため旧ブログのアドレスも貼らせていただきます。https://bon3te.blog.fc2.comです。)

PC、スマホ縦、横など様々な横幅のデバイスで確認してみましたところ、おっしゃるように1年分が3行から4行になる場合があるようですが、まったく問題ありません。
コンパクト月別アーカイブのデフォルトでは字が詰まりすぎている感じがしていたので、程よく間隔がありつつ一年分をコンパクトにまとめることができ、理想の形にすることができました。

このようなカスタマイズをご提供下さり、また親切にアドバイス下さり本当にありがとうございました。

2020/05/15 (Fri) 20:16 | 再編集 | 返信を書く |   
hige

hige  

To bonさん

旨くいったようですね。お役に立てて良かったです。
旧ブログも拝見させていただきました。10年以上のブログ歴をお持ちでしたか。

確かAkira氏のブログのコメント欄にて拝見させていただいてる記憶があります。

今後とも宜しくお付き合いのほどを。

2020/05/15 (Fri) 20:39 | 再編集 | 返信を書く |   

bon  

To higeさんTo higeさん

ご確認下さりありがとうございます。月別アーカイブ、本当に嬉しいです。

Akiraさんにお世話になっている関係で、higeさんのブログも何度か拝見しておりました。higeさんに私のことを認識して頂いているかわからなかったので、ご挨拶が遅くなり申し訳ございません。

今回カスタマイズを見つけたのは本当にたまたまだったのですが、Akiraさんのブログでお見かけした方なので、安心してお願いできたと思います。こちらこそ、今後ともよろしくお願い致します。

2020/05/15 (Fri) 22:14 | 再編集 | 返信を書く |   
hige

hige  

To bonさん

いえいえとんでもありません。

2020/05/15 (Fri) 22:48 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

 お名前とか
 ブログやホームページのURLをどうぞ

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