ページ送りの矢印などの特殊文字(実体参照)を変更する方法

ページ送りの「次のページ」への矢印や、記事一覧ページにある「続きを読む」の指マークを変更する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. CSSで挿入している特殊記号(実体参照)を変更する方法です。CSS編集のみでHTML編集は行いません。

メリット

  1. 神は細部に宿るを具現化できます(キリッ

テンプレートのCSSで編集するコード

  1. CSS編集で次のコードを探します。

    /*記事 > 「続きを読む」*/
    .more-link{font-size:120%;display:block;margin-left:1em;}
    .more-link:hover{background:#ffc;}
    .more-link:before{content:"\261B";color:#222;margin-left:-1em;padding-right:0.5em;}
      /*上の行を1行まるごと削除すると、「続きを読む」の左に表示される指マークを消せます。*/
    
    /*拍手・ソーシャルボタン周囲の枠線非表示設定*/
    .fc2_footer img,.fc2_socialbtn,.fc2_socialbtn td,.fc2_socialbtn tr:hover{border:0;outline:0;}
    
    /*記事 > ページ送り*/
    #pager,#pager2{list-style-type:none;padding:0.3em;background:#eee;margin-bottom:14px;}
    #pager a,#pager2 a{display:block;}
    #pager a:hover,#pager2 a:hover{background:#ffc;}
    #pager-previous a:before,#pager-previous2 a:before{content:"\226A";padding-right:0.5em;}
    #pager-next a:before,#pager-next2 a:before{content:"\226B";padding-right:0.5em;}
    valid-seo-3c-112-entity-arrow-1.png
  2. 上記コード内および上図内で丸を付けた色の意味は次のとおりです。

    • 赤まる:「続きを読む」の指マーク(☛)
    • 青まる:「前ページ」の矢印(≪)
    • 緑まる:「次ページ」の矢印(≫)
  3. 変更したい部分を次項で載せているコード(実体参照)に変更します。

矢印関連記号(特殊文字、実体参照)サンプル一覧

  1. 矢印関連記号(実体参照)サンプル一覧は次のとおりです。なお、表示例(特殊文字)は分かりやすいように大きく表示しています。

    矢印
    表示例
    コード\21D0\21D2\21DA\21DB\21E6\21E8\226A\226B
    指マークや三角
    表示例
    コード\261A\261B\261C\261E\25C0\25B6\25C5\25BB
  2. 右向きしかなさそうなものは次のとおりです。

    黒塗り
    表示例
    コード\2794\2799\279B\279C\279D\279E\279F\27A0\27A1\27A2\27A3\27A4\27A5
    縁取り
    表示例
    コード\27A9\27AA\27AB\27AC\27AD\27AE\27AF\27B1\27B2\27BE
    弓矢の「矢」
    表示例
    コード\27B3\27B5\27B8\27BB\27BC\27BD
  3. 上記コードはCSS内に挿入できるように16進数で表示されています。HTML内に実体参照を挿入する場合は10進数で表示されているものを使います。

実体参照変更の具体例

  1. ここでは、「次ページ」の矢印を「≫」から「⇒」に変更する場合で例示します。次のコードを変更します。

    #pager-next a:before,#pager-next2 a:before{content:"\226B";padding-right:0.5em;}
    valid-seo-3c-112-entity-arrow-2.png
  2. 上記の表を参考に、次のとおり変更しました。

    #pager-next a:before,#pager-next2 a:before{content:"\21D2";padding-right:0.5em;}
    valid-seo-3c-112-entity-arrow-3.png
  3. 下図のとおり変更されました。

    valid-seo-3c-112-entity-arrow-4.png
  4. 同じ要領で、「前ページ」や「続きを読む」の特殊文字(実体参照)を変更できます。

サーバー移設後で文字コードがutf-8なら

  1. サーバー移設後で文字コードがutf-8であれば、実体参照でなくても上記表の表示例(特殊文字のまま)を直接コピペで利用できます。なんのことやらよく分からんという場合は、上述の実体参照を利用する方法で変更したほうが不測の事態にならないです。

  2. 当サイトはサーバー移設済みなので、CSS編集で特殊文字のまま「➜」に変更してみました。

    valid-seo-3c-112-entity-arrow-5.png
  3. 下図の通り、きちんと表示されます。

    valid-seo-3c-112-entity-arrow-6.png
  1. 他サイトの参考になるページへのリンクです。ありがとうございます。

今後のテンプレート改訂時には

  1. テンプレートの改訂時にこのページで述べた内容をCSS編集内にコメントアウトで追加する予定です。customtemplateはver1.2.1以降、valid-seoシリーズはver1.1.3以降なら上記コードやキャプチャー画像とCSS編集内の記載事項に多少の相違があると思います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)