テンプレート: 先頭固定表示

先頭固定表示投稿です。

以下を確認してください。

  • 先頭に固定表示する投稿は、何らかの形で通常の投稿と差をつけてその違いが認識できるようにしてください。post_class() 関数を使って投稿の class を生成している場合、.sticky クラスにスタイルを追加できます。この方法が最適なやり方です。
  • ブログのインデックスページでは、もし時系列的に後の方に出現する投稿であったとしても一番先頭に表示されるべきです。
  • 時系列的に正しい位置でももう一度表示されるべきです。その際には固定表示向けの特別なスタイルは必要ありません。
  • 人気の投稿やコメントを一覧表示するプラグインやウィジェットを使っている場合、この先頭固定表示投稿が実際に人気があるのではない限りは常に上位表示されないようにしてください。

tetetetet


'menu-1',
'depth' => 3,
'container' => 'div',
'container_class' => 'test_menu',

'walker' => new cs_walker_nav_menu
) );
?>

class cs_walker_nav_menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$output .= "

";
}
function start_el( &$output, $item, $depth, $args ) {
if (in_array('menu-item-has-children', $item->classes)) {
// 親の場合
$output .= "\n" . $indent . '

  • '.$this->create_a_tag($item, $depth, $args);
    }
    else {
    // 子の場合
    $output .= '

  • ';
    $output .= $this->create_a_tag($item, $depth, $args);
    }
    }
    function end_el( &$output, $item, $depth, $args ) {
    if (in_array('menu-item-has-children', $item->classes)) {
    // 親の場合
    $output .= '
  • ';
    }
    else {
    // 子の場合
    $output .= '

    ';
    }
    }
    private function create_a_tag($item, $depth, $args) {
    // link attributes
    $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
    $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
    $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
    //$attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

    $item_output = sprintf( '%1$s%3$s%4$s%5$s%6$s',
    $args->before,
    $attributes,
    $args->link_before,
    apply_filters( 'the_title', $item->title, $item->ID ),
    $args->link_after,
    $args->after
    );
    return apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
    }

    1行分しか想定されていない見出しのデザインだと文字がはみ出してしまってあら大変。ものすごく長い日本語のタイトルが付いた記事の表示テストです。複数行になっても問題ないデザインだといいですね。あと前後の記事へのリンクを出力している場合や、パンくずリストを実装している場合なども表示にズレがないか確認しておきましょう。

    • 記事タイトル部分の見出しデザインが崩れていないか、文字が背景からはみ出していたりしないか確認しましょう。
    • previous_post_linkやnext_post_linkなどで前後の記事のタイトルを出力する場合も、レイアウト崩れが発生していないか確認しましょう。
    • その他、ウィジェットやプラグイン等でいろいろな場所に記事タイトルが出力されるケースが多いので併せて確認しましょう。
    • 用途に応じて、PHPのmb_substrmb_strlen関数を使って文字列をトリミングするという手もあります。

      ※その際、データの無害化 (サニタイズ) にも配慮するとより盤石です。

    マークアップ: HTML タグとフォーマット

    見出し

    見出し壱

    見出し弐

    見出し参

    見出し四

    見出し五
    見出し六

    引用 (Blockquote) テスト

    一行の引用。

    ハングリーであれ、愚かであれ。

    cite 参照を含む複数行の引用。

    これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。

    スタン・ゲッツ

    テーブル

    社員 給料
    山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。
    田中花子 1,000万円 ブログを書くために必要になる資金。
    山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
    中山愛子 10億円 特に理由は要りません。
    定義リストタイトル
    これは定義リストです。
    定義
    物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
    ギャラリー
    WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
    Gravatar (グラバター)
    グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

    非順序リスト (ネスト化)

    • リスト項目 1
      • リスト項目 1
        • リスト項目 1
        • リスト項目 2
        • リスト項目 3
        • リスト項目 4
      • リスト項目 2
      • リスト項目 3
      • リスト項目 4
    • リスト項目 2
    • リスト項目 3
    • リスト項目 4

    順序リスト (ネスト化)

    1. リスト項目 1
      1. リスト項目 1
        1. リスト項目 1
        2. リスト項目 2
        3. リスト項目 3
        4. リスト項目 4
      2. リスト項目 2
      3. リスト項目 3
      4. リスト項目 4
    2. リスト項目 2
    3. リスト項目 3
    4. リスト項目 4

    HTML 要素タグテスト

    他の HTML タグは FAQ をご覧ください。

    住所タグ

    以下は住所の例です。<address> タグを使用しています:

    〒100-0000

    東京都千代田区1-1-1

    日本

    anchor タグ (リンク)

    これは <anchor> (もしくはリンクとも呼ばれます) の例です。

    abbr タグ

    この abbr は文章の中にある <abbr> タグの例です。

    Acronym タグ (HTML5 では非推奨)

    これは <acronym> タグを使用した TLA です。

    Big タグ(HTML5 では非推奨)

    このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。

    Cite タグ

    “Code is poetry.” —WordPress

    Code タグ

    <code> タグはこのように使います: word-wrap: break-word;

    Delete タグ

    <del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。

    Emphasize タグ

    <em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。

    Insert タグ

    <ins> タグは挿入されたコンテンツを意味します。

    Keyboard タグ

    このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。

    Preformatted タグ

    <pre> タグは複数行のコードのスタイリングに使います。

    .post-title {
    
    	margin: 0 0 5px;
    
    	font-weight: bold;
    
    	font-size: 38px;
    
    	line-height: 1.2;
    
    	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
    
    }

    Quote タグ

    デベロッパーズ、デベロッパーズ, デベロッパーズ… –スティーブ・バルマー

    Strike タグ (HTML5 では非推奨)

    このタグは打ち消し線を表しています。

    Strong タグ

    このタグは太字テキストを表しています。

    Subscript タグ

    Subscript タグ <sub> を使うと H2O のような表示の際に「2」が下付きになります。

    Superscript タグ

    Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。

    Teletype タグ (HTML5 では非推奨)

    <tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル

    Variable タグ

    変数や引数を表す variables タグです。

    マークアップ: 画像の配置

    画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。

    画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。

    画像配置 580x300

    上記の画像は中央寄せになるはずです。

    画像配置 150x150このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。

    ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

    次は、とても大きな画像のテストです。そして、この画像には配置の指定がありません

    画像配置 1200x400

    上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。

    画像配置 300x200

    そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。

    そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。

    さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります !

    画像配置 580x300
    580×300 画像のキャプション例。

    上記の画像は中央寄せになるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。

    画像配置 150x150
    ちょっとしたキャプション

    このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。 

    ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

    それでは、とても大きな画像のテストです。そして、この画像にも配置の指定はありません

    画像配置 1200x400
    とても大きな画像のコメント

    上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。

    画像配置 300x200
    右側いるのほ良い気分です。

    そして今後は右寄せ画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです

    そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。

    それでは、これで終わりです。画像配置のテスト、お疲れ様でした !

    アクリロニトリルブタジエンスチレン樹脂 index.php