月別アーカイブ no..146.93.92 【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

このページの記事目次（タグ: 月別アーカイブ の検索結果 3 件）

スポンサーサイト [--/--/--]
それでもブログにカレンダーを使いますか？ [2010/07/15]
カレンダー代用ナビ付月別アーカイブ [2009/11/19]
月別アーカイブをコンパクトに表示する方法 [2009/11/10]

スポンサーサイト

--/--/-- (--) カテゴリー：スポンサー広告

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ～ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

それでもブログにカレンダーを使いますか？

2010/07/15 (木) カテゴリー：アクセス解析・SEO対策

カレンダー　
上: 公式プラグインを装飾したもの　
下: 空リンク非表示カレンダー

過去記事で紹介していたソースを一部変更したのでその紹介を兼ねて。。。　

相変わらず地味なデザインですが、いつも参考にさせて頂いている hatena chips さんの CSSでテーブルデザインをクオリティアップを参考に少しドレスアップしてみました。

個人的にはブログにカレンダーは必要ないのではないかな．．．と思っています。日付にカーソルを合わせたら「記事タイトルが分かる」とかいう機能があれば別かもしれないですけど、何が表示されるか分からないのでまずクリックすることはないです。

それに、SEO対策を考えるなら カレンダーではなくて 月別アーカイブ の方が優秀だと思います。あくまでも個人的意見ですが。どうでしょうか．．．？

追記：上の内容は FC2ブログの場合での話になります。ライブドアブログのカレンダーなどはとても便利な機能を備えているようです。（マウスオーバーで記事タイトルが分かり、移動するページも FC2ブログの日付クリックとは動作が異なる。月別のページのその記事の位置へ移動するリンクなので行き止まり感がなく便利です。）

現在の FC2ブログのカレンダーの場合、日付クリックで表示されるページは その日付のみの  ./blog-date-20080630.html（ ← 月単位のページでもなく固定リンクページでもないページ）です。

ライブドアブログのように... 例えば、移動先が ./blog-date-200806-0.html#30 （← 2008年6月の1ページ目#30日投稿記事の1つ目の位置に移動）のようなページ移動が使えるようになったらもう少し便利になるのかも。。。

スポンサーサイト

キーワード検索： FC2ブログカレンダー空リンク非表示月別アーカイブ SEO対策

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-146.html

2010/07/15 ～ | Comment (12) tweet? | ↑ ページ先頭へ ↑ |

カレンダー代用ナビ付月別アーカイブ

2009/11/19 (木) カテゴリー：ブログカスタマイズ上級

ブログにカレンダーを設置している方は結構多いと思いますが、そのカレンダー、右の図のような「今月」がハッキリわかるコンパクトな 月別アーカイブ に変えてみるというのはどうでしょうか？
（1つ前の記事の続きです。）

これは、共有プラグインに登録されている HS月別アーカイブ に少し手を加えたものですが、過去のアーカイブ表示の時には、ちゃんと「その月」が強調されるので、ページ送り・月選択のナビゲーションとしても有効だと思います。

月別のページとサイトマップで利用しています。（トップページには手書きのものを置いてます。）

[ 実際の… 月別の記事ページ はこちら ]

月別アーカイブ設置方法

　↓ 2010/07/15 改訂版のソースです。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

1.　テンプレートの <head> ～ </head> 部分

【参照：直接編集OK　整形済みコピー用ソース】

↑ 変数を利用しているので、必ずテンプレート内に記入してください。
スクリプトOFF用の設定は省略した場合、その上の色設定が反映されます。私は省略。。

上の内容を  と  で囲えば、月別の記事ページ表示状態の時だけ、その設定を反映させることも可能です。

2.　<body> 内の表示したい部分に ↓以下を記入

※共有プラグイン HS月別アーカイブ の内容を以下のものに変更してもOK！

【参照：直接編集OK　整形済みコピー用ソース】

<div id="hs-archives"><ul>

<li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月" class="da_<%archive_year><%archive_month>"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>

</ul></div>


<script type="text/javascript">
// <![CDATA[
function mnkCreateArchives(idName){
var rows = 2; //★年毎の行数
var cols = Math.floor(12/rows);
if(cols*rows!=12){ return; } // parameter check
var target = this.document.getElementById(idName);
var links = target.getElementsByTagName('a');
var dt = new Array();
var i, j = -1, cury = 0;
for(i=0; i<links.length; i++){
links[i].innerHTML.match(/(¥d+)¥D+(¥d+)¥D+(¥d+)/);
if(cury!=RegExp.$1){
cury = RegExp.$1;
dt[++j] = new Array(cury,'01','02','03','04','05','06','07','08','09','10','11','12');
}
var mon = Number(RegExp.$2);
dt[j][mon] = '<a href="' + links[i].href + '" title="' + links[i].innerHTML + '" class="' + links[i].className + '">' + dt[j][mon] + '</a>';
}
var rec = '<table width="100%">';
var sep = '';
for(i=dt.length-1;i>=0;i--){
rec += '<tr><th colspan="' + cols + '">' + sep + dt[i][0] + '年</th></tr>';
for(var r=0; r<rows; r++){
rec += '<tr>';
for(j=1; j<=cols; j++){ rec += '<td>' + dt[i][j+r*cols] + '</td>'; }
rec += '</tr>';
}
sep = '<div></div>';
}
rec += '</table>';
target.innerHTML = rec;
return;
}
mnkCreateArchives('hs-archives');
// ]]>
</script>

■色文字部分は共有プラグインの設定とは異なる部分です。
表の並び順を時系列順（古い年の 1月～12月 → 新しい年の 1月～12月）と並べたかったので、作者の veefourさんにその方法を教えて頂きました。

デフォルトの状態（新しい年の 1月～12月 → 古い年の 1月～12月）で並べたい場合は　 for(i=0;i<dt.length;i++){　と書き換えて使ってください。

レイアウトの関係などで、スクリプトOFFの場合に表示させたくなければ、<ul> 部分に <ul style="display:none"> などを設定しておけば大丈夫です。ナビゲーションとしても使うのであれば、なるべくページ上部が便利かも。。。

3.　スタイルシートに ↓以下を記入

【参照：直接編集OK　整形済みコピー用ソース】

/* HS月別アーカイブ */
#hs-archives th {
font-weight:bold;
}
#hs-archives td {
border-top:solid 1px #f5f5f5;
border-right:solid 1px #ccc;
border-bottom:solid 1px #ccc;
border-left:solid 1px #f5f5f5;
line-height:1.3;
text-align:center;
background:#f5f5f5;
color:#999;
}
#hs-archives td a {
display:block;
background:#fefefe;
}

スタイルシート部分はお好みで。。。何も設定しなくてもOKで、↑上はこのサイトでの設定です。作者さんのサイトに詳しい説明が書かれていますので、そちらを参照してください。
[ 参照： HS月別アーカイブ V1.00について - veefour's digital life ]

ちなみに ↑これは昔使っていた 1列アレンジ。これも便利でした！

このスタイルシートの原理を使うと、色々なエリアで「今どこ機能」を追加することができますよ♪　例えばカテゴリー別の記事ページとか。ちょこっとスタイルを追加するだけでも出来ちゃいます！

キーワード検索： FC2ブログ月別アーカイブ javascript

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-93.html

2009/11/19 ～ | Comment (1) tweet? | ↑ ページ先頭へ ↑ |

月別アーカイブをコンパクトに表示する方法

2009/11/10 (火) カテゴリー：ブログカスタマイズ上級

ブログを続けていると、どんどん増えてくるもの。繰り返しの「変数」を使って表示している月別アーカイブのリストやユーザータグリスト，リンクリストなど。　

それらを、コンパクトに表示する方法は探せばいくつもあるようですが．．．今回は、私のテンプレートの上部ナビゲーション部分でも使える方法として、4つの方法 を紹介します。ソースは FC2ブログ共有テンプレートari_seoシリーズ用をベースにしていますが、3つの方法は、それ以外の場合にも使えるものです。

まずは、実際に サンプルページ をご覧ください。（ソースも載せてます）

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

1.　スクロールバーを使ったアーカイブリスト

「設定した縦幅を超えたら、スクロールバーを表示する」という単純なもので、スタイルをちょこっと追加しただけの単純なものです。当然スクリプトも使用していないので、もっともシンプルで手軽に設定できます。

2.　手書き展開型アーカイブリスト

これもスクリプト未使用です。というか直接ソースを書いただけのもの。全て自動で処理したい方には少し面倒に感じるかも知れませんが、月別アーカイブなら月に1度書き直すだけでOKなんです。 2009年 » 2008年 » となっている部分もリンクになっています。また、手書きなので、時系列は新しい順，古い順どちらでも設定できます。

3.　自動折りたたみアーカイブリスト

Harukiya Archives　（解説ページ → 外部スクリプト：リスト要素の省略表示と展開）
↑ 残念ながら、サイトは閉鎖状態のようですが．．．（閲覧は可能）

これ！ちょっと凄くないですか！！単純なリスト形式のものなら、個々に設定した件数分だけ初めに表示できます。ベースになる javascript もシンプルなもので、1つで共有できます。また、スクリプトOFFの場合には通常の表示になる親切設計です。

リスト形式なら何でも折りたためるので、月別アーカイブだけでなくユーザータグリスト，リンクリスト，最近のコメント一覧，新着記事一覧，カテゴリーリストなどにも適応できます。長くなりすぎて困る場合だけでなく、敢えて表示件数を増やして、最初はそれの一部を表示するなんてことまで出来るので面白いかも。。。

4.　手書き折りたたみアーカイブリスト

これもかなりコンパクト！ FC2ブログの共有プラグインとしても登録されている
「プラグインの折りたたみ」 FC2ブログのテンプレート工房（作者: いたおさん）を使わせていただき、ナビゲーションメニュー用にアレンジ、スクリプトOFF環境などにも対応させたものです。これもベースになる javascript は1つでOKで、サンプルページの ↓ ソースを表示 ↓ 部分やこのテンプレートの右サイドバーにある List OPEN » 部分はこのスクリプトを使っています。かなり使えて便利です！

IDの重複はNGですが、それさえ気をつければ記事中にでも使えます！また、スクリプトOFFの場合は（何事も無かったかのように）通常の表示になります。

プラグイン紹介 : コンパクトアーカイブ関連

ごく一部ですが、使いやすそうな FC2ブログの共有プラグインを紹介します。プラグイン名をクリックすると、このページのサイドバー（右上）に一時的に表示できます。

HS月別アーカイブ　作者: veefour さん
このサイトの月別の記事ページとサイトマップで実際に使っているものです。
プラグインに少し手を加えて「その月」や「今月」が目立つようにしています。
[ カレンダー代用ナビ付月別アーカイブ ]
月別アーカイブ　作者: anderson11 さん
シンプルアーカイブ　作者: 45degrees さん

ちなみに... このサイトのトップページで使っているものはただの手書きです。

[ 関連記事：カレンダー代用ナビ付月別アーカイブ ]
[ 関連記事：カテゴリーリストに「現在地表示機能」を ]

キーワード検索： FC2ブログ月別アーカイブ折りたたみ javascript

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-92.html

2009/11/10 ～ | Comment (8) tweet? | ↑ ページ先頭へ ↑ |

申し訳ありません。　お探しの記事は現在、このユーザータグ（Keyword）を設定していない可能性があります。右上の検索BOXで再度用語を短めに入力していただくと記事が見つかる場合があります。

月別アーカイブ 【 ありのごとくあつまりて 】

スポンサーサイト

それでも ブログにカレンダー を使いますか？

カレンダー代用 ナビ付月別アーカイブ

月別アーカイブ 設置方法

1. テンプレートの <head> ～ </head> 部分

2. <body> 内の表示したい部分に ↓以下を記入

3. スタイルシート に ↓以下を記入

月別アーカイブをコンパクトに表示する方法

1. スクロールバーを使った アーカイブリスト

2. 手書き展開型 アーカイブリスト

3. 自動折りたたみ アーカイブリスト

4. 手書き折りたたみ アーカイブリスト

プラグイン紹介 : コンパクトアーカイブ関連

月別アーカイブ【ありのごとくあつまりて】

それでもブログにカレンダーを使いますか？

カレンダー代用ナビ付月別アーカイブ

月別アーカイブ設置方法

1.　テンプレートの <head> ～ </head> 部分

2.　<body> 内の表示したい部分に ↓以下を記入

3.　スタイルシートに ↓以下を記入

1.　スクロールバーを使ったアーカイブリスト

2.　手書き展開型アーカイブリスト

3.　自動折りたたみアーカイブリスト

4.　手書き折りたたみアーカイブリスト