忍者ブログ

刻ノ深淵

低周波音と耳鳴りに悩まされ不眠状態に陥る日々とアンチエイジング。只今、現状打破を試み奮闘中。

[PR]

[編集] 
×

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

[ブログカスタマイズ]忍者ブログ

IEをFirefoxと同じ表示にする。

[編集] 
忘れないうちに、メモメモ。
テンプレ記に書いたことのほぼコピペですが。。。

テンプレ作成中にぶち当たった壁。
IEとFirefox等で画面表示のされ方が違うこと。
IEではセンタリング表示されているのにFireFoxでは左だったり。
FireFoxではコメントや日付などの表記が見切れていたり。。。

修正するために調べているうち、IEとFireFoxではpaddingなどの定義が違うのでは??? と思ったらやはり違っていました。
今更知りました。
そして更に調べていくうちに、魔法の呪文を発見。
ソースの冒頭にある<!DOCTYPE>宣言。
今まであまり深く考えたことはなかったのですが、これが結構重要でした。

デェフォルトでは、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
となっていたのですが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と変更。

拍手[0回]

PR

[ブログカスタマイズ]忍者ブログ

続きを読むの折り畳み。

[編集] 
■続きを読むの折り畳みの方法。

上手く言えませんが、デェフォルトの『続きを読む』のリンクが何だか嫌だったのです。
シャッターのように頁はそのままで開閉する感じのが良くて、色々検索をかけて調べた結果、下記のブログサイト様の説明が一番分かりやすくて助かりました。
ありがとう御座いますっ！

■CHELLCY；忍者ブログ 続きを読む の折り畳み
　http://chellcy.blog.shinobi.jp/Entry/3/

1)HTML内の<head>～</head>に以下のJavaScriptを記述記述する。
<script language="javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>

2)HTML内の<!--if_not_entry-->～<!--/if_not_entry-->の中身を下記に差し替える。

<!--if_not_entry-->
<!--if_ps_text-->
<div id="varP<!--$entry_no-->" class="EntryPsText">
<a href="<!--$entry_link-->#<!--$entry_no-->" onclick="showMore(<!--$entry_no-->,'<!--$entry_link-->#<!--$entry_no-->');return false;"><!--$entry_ps_title--></a>
</div>
<div id="varXYZ<!--$entry_no-->" style="display: none" class="EntryText"><!--$entry_ps_text-->
<a href="#entry<!--$entry_no-->" onclick="showMore(<!--$entry_no-->,0);return true;">×Close</a>
</div>
<!--/if_ps_text-->
<!--/if_not_entry-->

拍手[3回]

[ブログカスタマイズ]忍者ブログ

休日表記カレンダー(横型・通常型)の設置。

[編集] 
■休日表記カレンダー(横型・通常)を設置する方法。 

1)   小粋空間様で配布されている休日表示用カレンダースクリプト(dayChecker.js)をダウンロードする。
 　
　■小粋空間；休日表示付リアルタイムカレンダー for FC2ブログ
　　 http://www.koikikukan.com/archives/2006/05/09-235138.php

 2) ダウンロードしてきた『dayChecker.js』をエディタで開き、徒然日記様で公開されている下記の『休日表示カレンダー色設定スクリプト』の使用す方、若しくは両方を追記して、ファイルをアップロードする。

　■徒然日記；忍者ブログ版休日表示カレンダー
　　http://suna77777.blog.shinobi.jp/Entry/11/

□休日表示カレンダー色設定スクリプト(横型カレンダー用)
// 休日表示カレンダー色設定スクリプト
// 横型カレンダー用 MT用改
function setLCWeekendAndHoliday( year, month ) {
    var element = document.getElementById( 'line_calendar' );
    var spans = element.getElementsByTagName( 'span' );
    var day;
    for ( i = 0; i < spans.length; i++) {
        if ( ( spans[i].getAttribute( 'class' ) == 'day' || spans[i].getAttribute( 'className' ) == 'day' ) ) {
            if ( spans[i].innerHTML.indexOf( "href" ) != -1) {
                day = spans[i].getElementsByTagName( "a" )[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            var dc = new dayChecker();                      // dayChecker()を実行
            if ( dc.isHoliday( year, month, day ) ) {
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'tholiday' );
                    spans[i].setAttribute( 'className', 'tholiday' );
                } else {
                    spans[i].setAttribute( 'class', 'holiday' );
                    spans[i].setAttribute( 'className', 'holiday' );
                }
            } else if ( dc.isSaturday( year, month, day ) ) {
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'tsaturday' );
                    spans[i].setAttribute( 'className', 'tsaturday' );
                } else {
                    spans[i].setAttribute( 'class', 'saturday' );
                    spans[i].setAttribute( 'className', 'saturday' );
                }
            } else if ( dc.isToday( year, month, day ) ) {
                spans[i].setAttribute( 'class', 'today' );
                spans[i].setAttribute( 'className', 'today' );
            }
        }
    }
}
 
□休日表示カレンダー色設定スクリプト(通常型カレンダー用)
// 休日表示カレンダー色設定スクリプト
// 通常型カレンダー用 FC2用改
function setWeekendAndHoliday( y, m ) {
    var elements = document.getElementsByTagName( "table" );
    // 配列順序0のみを決め打ちで処理するのを止めて、summary内容をチェックして処理する方法に変更。
    for ( j = 0; j < elements.length; j++ ) {
        var element = elements[j].getAttribute( "summary" );
        var year = element.split( "/" )[0];
        var month = element.split( "/" )[1];
        if ( !( year == y && month == m ) ) {
            continue;
        }
        var spans = elements[j].getElementsByTagName( "td" );
        var day;
        for ( i = 0; i < spans.length; i++) {
            if (spans[i].getAttribute( "class" ) == "day" || spans[i].getAttribute( "className" ) == "day" ) {
                if ( spans[i].innerHTML.indexOf( "href" ) != -1 ) {
                    day = spans[i].getElementsByTagName( "a" )[0].innerHTML;
                } else {
                    day = spans[i].innerHTML;
                }
                var dc = new dayChecker();                      // dayChecker()を実行
                if ( dc.isHoliday( year, month, day ) ) {
                    if ( dc.isToday( year, month, day ) ) {
                        spans[i].setAttribute( 'class', 'tholiday' );
                        spans[i].setAttribute( 'className', 'tholiday' );
                    } else {
                        spans[i].setAttribute( 'class', 'holiday' );
                        spans[i].setAttribute( 'className', 'holiday' );
                    }
                } else if ( dc.isSaturday( year, month, day ) ) {
                    if ( dc.isToday( year, month, day ) ) {
                        spans[i].setAttribute( 'class', 'tsaturday' );
                        spans[i].setAttribute( 'className', 'tsaturday' );
                    } else {
                        spans[i].setAttribute( 'class', 'saturday' );
                        spans[i].setAttribute( 'className', 'saturday' );
                    }
                }
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'today' );
                    spans[i].setAttribute( 'className', 'today' );
                }
            }
        }
    }
}

 3) CSS内に小粋空間様で公開されている下記の『横型カレンダー用デザイン』のソースを追記する。
色などはデザインに合わせて変更する。

□CSSソース
/*-------------------------------------------------------
  横カレンダー用デザイン
-------------------------------------------------------*/
.holiday,
.holiday a:link {
 color: #e50003;
}
.saturday,
.saturday a:link {
color: #0000ff;
}
.tholiday {
display: block;
border: 1px solid #444444;
color: #e50003;
}
.tholiday a:link {
color: #e50003;
}
.tsaturday {
display: block;
border: 1px solid #444444;
color: #0000ff;
}
.tsaturday a:link {
color: #0000ff;
}
.today {
display: block;
color: #444444;
border: 1px solid #444444;
}

 4)  HTML内の横型カレンダーを設置したい場所に徒然日記様で公開されている以下のソースを挿入する。

□HTMLソース
<!-- 横並び型休日表示カレンダー開始 -->
<div id="line_calendar">
<a href="<!--$plugin_calendar_prev_link-->" title="<!--$plugin_calendar_prev_year-->年<!--$plugin_calendar_prev_mon-->月の記事一覧表示へ"><<</a> | <a href="<!--$g_url-->Date/<!--$plugin_calendar_now_year--><!--$plugin_calendar_now_mon-->/" title="<!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月の記事一覧表示へ"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</a> | <!--plugin_calendar_date--><span class="day"><!--$calendar_date_day--></span> <!--/plugin_calendar_date-->| <a href="<!--$plugin_calendar_next_link-->" title="<!--$plugin_calendar_next_year-->年<!--$plugin_calendar_next_mon-->月の記事一覧表示へ">>></a>
</div>
<script type="text/javascript">
<!--
setLCWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>
<!-- 横並び型休日表示カレンダー終了 -->
　
5)  通常型カレンダーに休日表記をしたい場合、
[管理画面]→[プラグインの設定]→[カレンダー]→[HTML編集]で記述されているソースを以下のソースに差し替える。
(通常カレンダーと同じデザインにする為、徒然日記様で公開されているものを参考に変更させて頂きました。)

□通常型カレンダー(休日表記)ソース

<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 summary="<!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon-->" class="CalendarTable">
<tr class="CalendarWdayTr">
<th class="CalendarWdaySun">S</th>
<th class="CalendarWday">M</th>
<th class="CalendarWday">T</th>
<th class="CalendarWday">W</th>
<th class="CalendarWday">T</th>
<th class="CalendarWday">F</th>
<th class="CalendarWdaySat">S</th>
</tr>
<!--plugin_calendar-->
<tr>
<td class="holiday"><!--$calendar_sun--></td>
<td class="day"><!--$calendar_mon--></td>
<td class="day"><!--$calendar_tue--></td>
<td class="day"><!--$calendar_wed--></td>
<td class="day"><!--$calendar_thu--></td>
<td class="day"><!--$calendar_fri--></td>
<td class="saturday"><!--$calendar_sat--></td>
</tr>
<!--/plugin_calendar-->
</table>

<script type="text/javascript">
<!--
setWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>

6) HTML内の<head>～</head> に下記の内容を記述して保存。
<script type="text/javascript" src="http://file.******.blog.shinobi.jp/dayChecker.js"></script>

拍手[0回]

[ブログカスタマイズ]忍者ブログ

横型カレンダーの設置(休日表記なし)。

[編集] 
■横型カレンダー(休日表記なし)を設置する方法。

1) HTML内に横型カレンダーを表示したい場所に下記のソースを挿入する。
□HTMLソース 
<!--横カレンダー-->
<div id="CalendarBlock">
<div class="Calendar">
&lt;&lt;
<a href="<!--$plugin_calendar_prev_link-->"><!--$plugin_calendar_prev_mon--></a>&nbsp;&nbsp;
<!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon-->&nbsp;&nbsp;
<!--plugin_calendar_date-->
<!--$calendar_date_day-->&nbsp;
<!--/plugin_calendar_date-->
&nbsp;&nbsp;
<a href="<!--$plugin_calendar_next_link-->"><!--$plugin_calendar_next_mon--></a>
&gt;&gt;
</div>
</div>
<!--/横カレンダー-->
 
2) CSS内に下記のように『横カレンダー用デザイン』のソースを追記する。
□CSSソース
/*-------------------------------------------------------
  横カレンダー用デザイン
-------------------------------------------------------*/
#CalendarBlock {
color:#000000;
font-family: Georgia;
font-size: 10px;
}
.Calendar {
}

拍手[0回]

[ブログカスタマイズ]忍者ブログ

プラグインブロックの余白などの変更。

[編集] 

■プラグインブロックの余白などの変更。
別に書くほどのことではないのですが、忘れると困るので。
自分がっ(笑)。

□プラグインブロック上部(このブログの場合『カレンダー』の文字の上の部分)の空間をなくす。
/*プラグイン表示箇所全体の設定*/
.PluginBlock {
width: 220px;
margin: 30px 0px 0px;
text-align: left;
float: left;
}
青文字部分を
margin: 0px 0px 0px;
に変更。

□プラグインブロックの横幅が220pxに指定してあったのですが、横幅200pxの広告バナーをフリーエリアに掲載すると微妙にデザインが崩れた為の調整。
/*プラグイン表示箇所の背景や余白設定*/
.PluginInnerBlock {
padding:10px;
}

青文字部分を
padding: 5px;
に変更。

□これも横幅200pxの広告バナーをフリーエリアに掲載すると微妙にデザインが崩れた為の調整。
/*プラグインが表示される場所の設定*/
.PluginContents {
padding: 10px;
border-bottom:1px dashed #440044;
}

青文字部分を
padding: 5px;
に変更。

了

拍手[0回]