忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.10│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

カレンダーとアーカイブをひとまとめに

プラグインはブログを続けていくとどんどん増えていきます。

FC2ブログの共有プラグインほうでいいアイディアがあったので、忍者ブログでもやれるかな?とトライしてみました。
まずはアーカイブをプルダウン化します。
忍者ブログ用のソースはアーカイブをプルダウンメニューにという記事の中にもあります。

今回はそれを元にカレンダーに合うように変更します。
変更した結果は下になります。
<script type="text/javascript">
function change(myURI){
if(myURI !="default"){
window.document.location.href=myURI;
}
}
</script>
<form name="archiveMenu" id="archiveMenu">
<p>
<select name="selectarchiveMenu" id="selectarchiveMenu"
onchange="change(this.form.selectarchiveMenu.value);" style="width:100px;">
<option value="default"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</option>
<!--plugin_archive-->
<option value="<!--$plugin_archive_link-->"><!--$plugin_archive_year-->年<!--$plugin_archive_mon-->月(<!--$plugin_archive_num-->)</option>
<!--/plugin_archive-->
</select>
</p>
</form>

ここでは一応幅を100pxとしています。カレンダーに組み込んだあとで、幅が合わない場合はwidth:100px;というところを書き換えてください。

このプルダウンメニュー化したアーカイブをカレンダーの「現在の月」が表示される部分に組み込みます。
<table class="CalendarMoveTable">
<tr class="CalendarMoveTr">
<td class="CalendarPrevTd">
<a href="<!--$plugin_calendar_prev_link-->"><!--$plugin_calendar_prev_mon--></a>
</td>
<td class="CalendarNowTd">
<!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon-->
</td>
<td class="CalendarNextTd">
<a href="<!--$plugin_calendar_next_link-->"><!--$plugin_calendar_next_mon--></a>
</td>
</tr>

</table>

<table class="CalendarTable">

<tr class="CalendarWdayTr">
<th class="CalendarWdaySun">日</th>
<th class="CalendarWday">月</th>
<th class="CalendarWday">火;</th>
<th class="CalendarWday">水</th>
<th class="CalendarWday">木</th>
<th class="CalendarWday">金</th>
<th class="CalendarWdaySat">土</th>
</tr>

<!--plugin_calendar-->
<tr class="CalendarTr">
<td class="CalendarTdSun"><!--$calendar_sun--></td>
<td class="CalendarTd"><!--$calendar_mon--></td>
<td class="CalendarTd"><!--$calendar_tue--></td>
<td class="CalendarTd"><!--$calendar_wed--></td>
<td class="CalendarTd"><!--$calendar_thu--></td>
<td class="CalendarTd"><!--$calendar_fri--></td>
<td class="CalendarTdSat"><!--$calendar_sat--></td>
</tr>
<!--/plugin_calendar-->

</table>

うえで赤く表示されているところ「現在の月」を表示する忍者ブログの独自タグです。
ここにプラグイン化したアーカイブを入れます。
挿入した結果は以下のようになります。
<table class="CalendarMoveTable">

<tr class="CalendarMoveTr">
<td class="CalendarPrevTd">
<a href="<!--$plugin_calendar_prev_link-->"><!--$plugin_calendar_prev_mon--></a>≪
</td>
<td class="CalendarNowTd">

<script type="text/javascript">
function change(myURI){
if(myURI !="default"){
window.document.location.href=myURI;
}
}
</script>
<form name="archiveMenu" id="archiveMenu">
<p>
<select name="selectarchiveMenu" id="selectarchiveMenu"
onchange="change(this.form.selectarchiveMenu.value);" style="width:100px;">
<option value="default"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</option>
<!--plugin_archive-->
<option value="<!--$plugin_archive_link-->"><!--$plugin_archive_year-->年<!--$plugin_archive_mon-->月(<!--$plugin_archive_num-->)</option>
<!--/plugin_archive-->
</select>
</p>
</form>

</td>
<td class="CalendarNextTd">
≫<a href="<!--$plugin_calendar_next_link-->"><!--$plugin_calendar_next_mon--></a>
</td>
</tr>

</table>

<table class="CalendarTable">

<tr class="CalendarWdayTr">
<th class="CalendarWdaySun">日</th>
<th class="CalendarWday">月</th>
<th class="CalendarWday">火</th>
<th class="CalendarWday">水</th>
<th class="CalendarWday">木</th>
<th class="CalendarWday">金</th>
<th class="CalendarWdaySat">土</th>
</tr>

<!--plugin_calendar-->
<tr class="CalendarTr">
<td class="CalendarTdSun"><!--$calendar_sun--></td>
<td class="CalendarTd"><!--$calendar_mon--></td>
<td class="CalendarTd"><!--$calendar_tue--></td>
<td class="CalendarTd"><!--$calendar_wed--></td>
<td class="CalendarTd"><!--$calendar_thu--></td>
<td class="CalendarTd"><!--$calendar_fri--></td>
<td class="CalendarTdSat"><!--$calendar_sat--></td>
</tr>
<!--/plugin_calendar-->

</table>

これで、アーカイブとカレンダーがひとつのプラグインで無理なく表示されます。
サンプルはこのブログのサイドのカレンダーです。



4/1追記:<!--plugin_archive-->の位置が間違ってました。

5/1:曜日が空白になってましたので、漢字で入れておきました。英語にしたい方は、該当部分を直してください。

9/23:火曜の「火」の横に「;」が入っちゃってました。入ってる方は取り除いてください~<(_ _)>
教えてくださった方、感謝です♪
PR
*COMMENT-コメント-
▽ひとまとめにしてみました(笑)
はじめまして。
忍ブロ初心者のPavです。
いつも密かに?覗かせていただいています。
カレンダーとアーカイブ、まとめたらスッキリするかなぁと記事を見て思ったのでチャレンジしました。
持ち前のセンスの無さでカッコ悪くて泣きそうですが・・・
今回の作業を記事にしたので、勝手ながらTBさせていただきました。
これからも勉強(・・と知恵を拝借させていただく?)為の参考にさせていただけたらと思いますので、どうぞよろしくお願いします。
△pavlobaさん、はじめまして♪
pavlobaさん、はじめまして♪

TB&コメントありがとうございます。
カレンダーとアーカイブ一緒にすると、スタイルシートのカレンダーの指定をいじる必要がでてくることがあります。
特に月移動のテーブルは、いじらないとプルダウンが見えないことがある・・・かも?

参考になることかけているかどうか分かりませんが、独断と偏見で書き綴りますのでどうぞよろしく(笑

追伸:記事にサンプルはサイドでと書いてあるくせにサンプルになるカレンダー非表示にしてました
どうもすいません<(_ _)>
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
カレンダーとアーカイブをひとまとめに
本日の作業は、プラグインを左→右に移してみました。 何となくブログであるワケですし、記事を見やすくする為にはコッチかなぁと思ったのです。 そして、プラグインの余白が前から気になっていたので調整。 チョット詰め過ぎかなぁとも思うのですが、しばらくこんなカンジで様子を見ることにしました。 あと、本日のメイン作業はカレンダーとアーカイブのカスタマイズ。 まず、アーカイブをプルダウンで表示させてみた。 これはあるふぁさんの「カスタマイズin忍者ブログ」の「アーカイブをプルダウンメニューに...
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
09

11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter