more表示を折りたたみ表示に

通常、moreをクリックすると、詳細リンク(Parmalink)へ飛び、当該アイテム(記事)のみを表示する。
ちらっと、「続き」部分を見て、すぐに次の記事を見たい場合は、不便。
折りたたんだものをのばすようにmore部分を表示したり、また、折りたたむ・・・といように表示する方法。
スキンのメインの目次のhead部分に以下の記述をする。

<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>

ほんでもって、テンプレートのアイテムの続きへのリンクを下記のように記述。
<div id="varP<%itemid%>" style="text-align: right;">
<a href="<%itemlink%>#<%itemid%>" onclick="showMore(<%itemid%>,'<%itemlink%>#<%itemid%>');return false;">...続きを読む</a><br />
</div>
<div id="varXYZ<%itemid%>" style="display: none"><%more%><br />
<div style="text-align: right;">
<a href="#<%itemid%>" onclick="showMore(<%itemid%>,0);return true;">続きをたたむ</a>
</div>
</div>

preとTEXTAREAの面白い使い方

cssファイルのpreタグに、


<?php
pre 
{
    
font-family:         Monaco"ヒラギノ角ゴ Pro W3""Osaka−等幅""MS ゴシック"verdena;
    FONT-WEIGHT:         normal;
    FONT-SIZE:           x-small;
    COLOR:               #000000;
    LINE-HEIGHT:         140%;
    margin-bottom:       10px;
    margin-top:          10px;
    margin-right:        20px;
    margin-left:         20px;
    background:          #DDDDDD;
    PADDING-RIGHT:       10px;
    PADDING-LEFT:        10px;
    PADDING-BOTTOM:      10px;
    PADDING-TOP:         10px;
    border-style:        solid;
    border-color:        #BBBBBB;
    border-top-width:    1px;
    border-right-width:  1px;
    border-bottom-width1px;
    border-left-width:   1px;
}
?>

と記述し、同じく、TEXTAREAを


<?php
textarea {
    font-family:         Monaco"ヒラギノ角ゴ Pro W3""Osaka−等幅""MS ゴシック"verdena;
    color:               #333;
    background-color:    #FFF;
    font-size:           x-small;
    width:               95%;
}
?>

と記述する。
ある程度、長くなってしまうcodeをアイテム中に挿入するのに良い。
・・・と思ったが、brタグ挿入とpreがケンカして、pre内にbrタグが入りまくる。
これは、うっとおしい。
brタグの自動挿入を「しない」設定にしてみても、かえってややこしいだけである。
ふぅ・・・preだからか・・・

cssを別ファイルにする方法

cssファイルが最初から分離されている場合は良いが、htmlファイル内部にスタイルシートの内容が直接記述されている場合、後々のためにも、別ファイルとしておいた方が案配がよい。
理由はいくつもあるが、大きなものを挙げておくと、
1)大々的に見た目を更新することが容易である。
2)統一性のあるサイトの構築がしやすい。
3)検索エンジンのランキングルーチンに適しやすい。
※htmlファイル内の記述は出来る限り内容以外の記述(見た目などに関する記述)は少ない方がランキングが高くなる傾向にあるし、特にHeader部分が大きいのは余計によろしくない。
ということであろう。
さて、別ファイルとしての保存方法だが、

Read More