Pages - Menu

2013年3月2日土曜日

複数の記事が表示されているページに目次(Index)を表示

テンプレートのHTMLソースに目次のソースを追加する

あああ
  1. ブログのデザイン設定を表示する
  2. メニューからテンプレートを選択する
  3. HTMLの編集ボタンを押下してテンプレートのHTMLソースを表示
  4. 目次のCSSとHTMLソースを差し込み編集する
  5. テンプレートを保存ボタンを押下してHTMLソースを保存する
あああ

目次のCSSソース

テンプレートのHTMLソースでCSSが記述されているブロックに以下のCSSを追加する
.index-documents {
    background-color: #fafefd;
    border: 1px solid #22a7b1;

    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -goog-ms-border-radius: 5px;

    border-top-left-radius: 5px;
    border-top-right-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -goog-ms-border-top-left-radius: 5px;
    -goog-ms-border-top-right-radius: 5px;

    padding: 0px 15px 15px;
    margin-bottom: 20px;
}

目次のHTMLソース

テンプレートのHTMLソースで目次を表示させたい部分に以下のHTMLを追加する
<b:includable id='index-document'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='index-documents' id='blog-contents'>
      <h2>Index</h2>
      <div>
        <ul style='list-style-type: disc; margin: 0px; padding-left: 15px;'>
          <b:loop values='data:posts' var='post'>
            <li style='padding: 3px 0px 3px 0px;'><a expr:href='data:post.url'><data:post.title/></a></li>
          </b:loop>
        </ul>
      </div>
    </div>
  </b:if>
</b:includable>

記事に付けられているラベルをパンくずで表示

.breadcrumbs {
    background-color: #fafefd;
    border: 1px solid #22a7b1;

    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -goog-ms-border-radius: 5px;

    border-top-left-radius: 5px;
    border-top-right-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -goog-ms-border-top-left-radius: 5px;
    -goog-ms-border-top-right-radius: 5px;

    padding: 6.5px 15px;
    margin-bottom: 20px;
}
<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
        <b:else/>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <!-- breadcrumb for the post page -->
                <b:loop values='data:posts' var='post'>
                    <b:if cond='data:post.labels'>
                        <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
                            <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
                            <b:loop values='data:post.labels' var='label'>
                                <b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
                                </b:if>
                            </b:loop>
 &#187; <span><data:post.title/></span>
                        </div>
                    <b:else/>
                        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
                    </b:if>
                </b:loop>
            <b:else/>
                <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                    <!-- breadcrumb for the label archive page and search pages.. -->
                    <div class='breadcrumbs'>
                        <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
                    </div>
                <b:else/>
                    <b:if cond='data:blog.pageType == &quot;index&quot;'>
                        <div class='breadcrumbs'>
                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
                            <b:else/>
                                <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
                            </b:if>
                        </div>
                    </b:if>
                </b:if>
            </b:if>
        </b:if>
    </b:if>
</b:includable>

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>

    <b:include data='posts' name='breadcrumb'/>

2013年2月21日木曜日

ラベルガジェットをツリー階層化に改良(Awesome Incテンプレ補正あり)

ラベルのツリー階層化改造
headタグ内に入れる
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
ラベルウィジェットの最後に「ラベル階層化 と トグル処理 のscript」を入れる
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
    <b:if cond='data:title'>
        <h2><data:title/></h2>
    </b:if>
    <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
        :
        <b:include name='quickedit'/>
<script type='text/javascript'>
//ラベル階層化
$(function(){

    // START: Awesome Inc. テンプレ補正
    var cssUL = {
        'marginTop'   : '0px',
        'marginRight' : '0px',
        'marginLeft'  : '0px',
        'paddingLeft' : '15px'
    };
    var cssLI = {
        'paddingRight'  : '0px',
        'paddingBottom' : '0px',
        'paddingLeft'   : '0px'
    };
    // START: Awesome Inc. テンプレ補正

    var DELIMITER = " > ";

    var list = $( 'div#Label1 div ul > li' );
    var dest = $( "<ul style='display: none;'/>" );
    var nodes = new Array();
    $( list ).each( function() {

        // START: Awesome Inc. テンプレ補正
        var tagName = $( this ).get( 0 ).tagName.toLowerCase();
        if ( tagName == 'li' ) {
            $( this ).css( cssLI );
        }
        // E N D: Awesome Inc. テンプレ補正

        var work;
        if ( $( this ).children( 'a' ).length > 0 ) {
            work = $( this ).children( 'a' ).text().split( DELIMITER );
            $( this ).children( 'a' ).text( work[ work.length - 1 ] );
        } else {
            work = $( this ).children( 'span:first' ).text().split( DELIMITER );
            $( this ).children( 'span:first' ).text( work[ work.length - 1 ] );
        }
        $( this ).addClass( "categoryLabel" );
        var key = "";
        var target = $( this );
        $( work ).each( function( i ) {
            if ( i == work.length - 1 ) {
                if ( key == "" ) {
                    dest.append( $( target ).clone( true ) );
                } else {
                    nodes[ key ].append( $( target ).clone( true ) );
                }
                $( target ).remove();
            }else{
                var parent = null;
                if ( i > 0 ) {
                    parent = nodes[ key ];
                    key = key + DELIMITER;
                }
                key = key + work[ i ];
                if ( nodes[ key ] == null ) {
                    var item = $( "<li class='categoryLabel'>" + work[ i ] + "</li>" );
                    var temp = $( "<ul style='display: none;'/>" );

                    // START: Awesome Inc. テンプレ補正
                    item.css( cssLI );
                    temp.css( cssUL );
                    // E N D: Awesome Inc. テンプレ補正

                    item.append( temp );
                    nodes[ key ] = temp;
                    if ( parent == null ) {
                        dest.append( item );
                    } else {
                        parent.append( item );
                    }
                }
            }
        } );
    } );
    $( 'div#Label1 div ul' ).html( $( dest ).html() );

    // START: Awesome Inc. テンプレ補正
    $( 'div#Label1 div ul' ).css( cssUL );
    // START: Awesome Inc. テンプレ補正

} );
//トグル処理
$( function() {
    var open = 'data:image/gif;base64,'
        + 'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACEYyPoAvG614LQFg7ZZbxoR8UADs=';
    var close = 'data:image/gif;base64,'
        + 'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACFIyPoAu2spyCyol7W3hxz850CFIA'
        + 'ADs=';
    $( '.categoryLabel:has(ul)' )
        .click( function( event ) {
            if ( this == event.target ) {
                $( this ).children().toggle();
                $( this ).css( 'list-style-image',
                    ( $( this ).children().is( ':hidden' ) ) ?
                    'url(' + close + ')' : 'url(' + open + ')' );
            }
        } )
        .css( 'cursor','pointer' );
    $( '.categoryLabel:has(ul)' ).css( {
        cursor: 'pointer',
        'list-style-image': 'url(' + close + ')'
    } );
    $( '.categoryLabel:not(:has(ul))' ).css( {
        cursor: 'pointer',
        'list-style-image': 'url(' + open + ')'
    } );  
    $( '#Label1Cover' ).show();
} );
</script>
    </div>
</b:includable>
</b:widget>

2013年2月11日月曜日

文字コード > JIS X 0208 系:エンコーディングのコードポイント

JIS X 0208系の代表的な文字符号化方式で、文字集合別のコードポイント範囲を一覧表で示す。

文字集合ISO-2022-JPShift_JISEUC-JP
JIS規格集合名区番JISESC Seq標準〃-MSCP
50220
標準CP932標準eucJP
-ms
CP
51932
JIS X 0211
(ASCII)
制御文字 C0集合00~
1F
×00~
1F
(ASCII)空白201B 28 4220
JIS X 0201
(ASCII)
ラテン文字21~
7E
1B 28 4221~
7E
(ASCII)制御文字 DELETE7F×7F
JIS X 0211制御文字 C1集合80~
9F
×××××××××
JIS X 0201半角片仮名文字
(7ビット符号版)
21~
5F
1B 28 49×21~
5F
半角片仮名文字
(8ビット符号版)
A1~
DF
A1~
DF
8EA1~
8EDF
JIS X 0208全角記号,全角英数字,
かな,カナ
1~
8区
2121~
2840
1B 24 422121~
2840
8140~
84BE
A1A1~
A8C0
NEC特殊文字13区×1B 24 42×2D21~
2D7C
×8740~
879C
×ADA1~
ADFC
JIS X 0208第1水準漢字16~
47区
3021~
4F53
1B 24 423021~
4F53
889F~
9872
B0A1~
CFD3
第2水準漢字(前半)48~
62区
5021~
5E7E
1B 24 425021~
5E7E
989F~
9FFC
D0A1~
DEFE
第2水準漢字(後半)63~
84区
5F21~
7426
1B 24 425F21~
7426
E040~
EAA5
DFA1~
F4A6
NEC選定IBM拡張89~
92区
×1B 24 42×7921~
7C7E
×ED40~
EEFC
××F9A1~
FCFE
ユーザ外字(前半)95~
104区
×MS) 1B 24 28 3F
CP) 1B 24 42
×2121~
2A7E
7F21~
887E
×F040~
F4FC
×F5A1~
FEFE
×
ユーザ外字(後半)105~
114区
×MS) 1B 24 28 3F
CP) 1B 24 42
×2B21~
347E
8921~
927E
×F540~
F9FC
×8FF5A1~
8FFEFE
×
IBM拡張文字115~
119区
××××9321~
972C
×FA40~
FC4B
××
IBM拡張文字
(JISX0212搭載外)
一部
抜粋
8FF3F3~
8FF4FE
JIS X 0212非漢字
(JISX0208の隙間)
1~
11区
2121~
2B77
1B 24 28 44×××××8FA1A1~
8FABF7
×
漢字
(JISX0208と重複)
16~
77区
3021~
6D63
1B 24 28 44×××××8FB0A1~
8FEDE3
×

エンコーディング概要

  • ISO-2022-JP系
    • 標準の「ISO-2022-JP」は「RFC1468」規定の構成に準拠する。
    • 「ISO-2022-JP」は「ASCII(JIS X 0208 ローマ字集合を内包)」「JIS X0208」の文字集合で構成する。
    • 「CP50220」はWindows実装で「ISO-2022-JP」に「JIS X 0201片仮名(7ビット符合)」「NEC特殊文字」「IBM拡張文字(> NEC選定IBM拡張文字)」「ユーザー外字」を追加した文字集合で構成する。
    • 「ISO-2022-JP-MS」は対応する文字集合がCP50220と同じであるが、CP50220の「ユーザー外字」を7ビットに置き換えている。
  • Shift_JIS系
    • 標準の「Shift_JIS」は「JIS X 0208:1997」規定の構成に準拠する。
    • 「Shift_JIS」は「JIS X 0211制御文字 C0集合」「JIS X 0201」「JIS X 0208」の文字集合で構成する。
    • 「CP932」はWindows実装で「Shift_JIS」に「NEC特殊文字」「IBM拡張文字(> NEC選定IBM拡張文字)」「ユーザー外字」を追加した文字集合で構成する。
    • PHP 限定の話しであるが、mbstring の Shift_JIS は上表基準に「NEC特殊文字」「NEC選定IBM拡張文字」の文字集合も対応している。
  • EUC-JP系
    • 標準の「EUC-JP」は「UI-OSF-USLP共同技術資料 日本語EUCの定義」規定の構成に準拠する。
    • 「EUC-JP」は「ASCII」「JIS X 0201片仮名(8ビット符合)」「JIS X 0208」「JIS X 0212」の文字集合で構成する。
    • 「CP51932」はWindows実装で「EUC-JP」から「JIS X 0212」を除き「NEC特殊文字」「NEC選定IBM拡張文字」を追加した文字集合で構成する。
    • 「eucJP-ms」は「EUC-JP」に「NEC特殊文字」「ユーザー外字」「JIS X 0212搭載外のIBM拡張文字」を追加した文字集合で構成する。
  • Windows実装系(CP932、CP50220、CP51932)
    • CP932 を基準に要点を明記する。
    • CP50220 の対応する文字集合は CP932 と同じ。
    • CP51932 の Windows 機種依存の文字集合が、CP932 の「IBM拡張文字」に対して「NEC選定IBM拡張文字」の割り当てで、そこは欠落する事なく変換できるが、「ユーザー外字」のマッピングが無いので携帯絵文字などは欠落する。


お勧め文字集合別のグリフ一覧外部資料


お勧めTips外部資料