【CSS/HTML】Bloggerのページャーの文字表記の変更と画像を使ったカスタマイズの方法

概要

「MinimaBlack」のページャーですが…

デザインテンプレートのページャーは…

似たり寄ったりでこんなものです…

「データタグ」で呼び出されますので…日本語環境での表示は…

「古い投稿」「ホーム」「新しい投稿」ですから…迷わずカスタマイズです

当サイトのページャー

当サイトでは文字入り画像を…

「CSS Sprites」で表示させています…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


更には…2013年から…投稿ページにはページャーを表示させていません…

 ブログにページャーは必要か？…という考察とデザイン変更中のアレコレ


まぁ…参考程度に暇な方は…読んでおいて下さい

それでは…段階的にカスタマイズしてみましょう…

「CSS」で文字列を装飾する

「CSS」でページャーは…たぶん…この程度しか記述されていません…

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}

日本人の感覚では「float」が逆で…

「ホーム」に関しては設定すらされていません…

「ホーム」は…通常…このようなリンクで表示されます…

<div class="blog-pager" id="blog-pager">
<a class="home-link" href="URL">ホーム</a>
</div>

なので…「ホーム」を装飾する場合は…

このクラス名「.home-link」で「CSS」を記述します…

ページャー全体の「幅」「枠線」「背景」などを設定する場合は…

「CSS」の…3行目「#blog-pager」に追記します…

まぁ…お好みですから…色々と弄ってみて下さい…

「HTML」で違う文字列に変更する

文字列自体を変更する場合は「HTML」を変更します…

それぞれ対応する「データタグ」は…

日本語環境では…こんな感じだと思われます…

/* 「古い投稿」 */　<data:olderPageTitle/>
/* 「ホーム」 */　<data:homeMsg/>
/* 「新しい投稿」 */　<data:newerPageTitle/>

「HTMLの編集」から「Ctrl + F」で検索して…

「データタグ」を…お好きな文字列と置換すれば OKです…

「base64」か「CSS Sprites」で画像を使ってデザインする

画像を使う場合はタイトル属性を記述すれば…

デフォルトでツールチップは表示されますので…

 「jQuery」「jQuery UI」第８回「Tooltip」マウスホバーでカーソルに追随して情報を表示


必ずしも文字入り画像である必要はありませんが…

単純に画像タグを「データタグ」と置換するのは…お薦めしません

「HTTPリクエスト」が増加して読み込み遅延の元凶になります…

<img src='URL' alt='説明' title='タイトル' width='数字' height='数字' border='0'/>

このような画像タグを…どうしても使いたい場合は…

「URL」の部分を「Base64」の生データに変換して記述するのが良いでしょう…

画像をbase64エンコードするツール / Syncer  


因みに…画像の幅や高さの値も…

読み込み遅延の元凶になり得ますから…しっかりと記述しましょう…

しかしながら…お薦めは…「CSS Sprites」です…

「概要」に置いてある過去記事をお読みになって構築して下さい…

構築したら…このようなタグと置換します…

<span class='画像のクラス名' title='タイトル'/>

「Font Awesome」の「Webフォント」でデザインする

文字入り画像を作成するのが面倒だ…ってな方には…

そもそも…ページャーだと認識できない方は…極少数でしょうから…

「Font Awesome」の「Webフォント」でデザインするのが良いでしょう…

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】

過去記事から設定したら…上記…「データタグ」を…

「Font Awesome」のタグと置換します…

<i class="fa fa-hand-o-left fa-3x fa-fw pull-left" title="Older Posts"/>
<i class="fa fa-home fa-3x fa-fw" title="Home"/>
<i class="fa fa-hand-o-right fa-3x fa-fw pull-right" title="Newer Posts"/>

普通の矢印系アイコンも…当然ながら…各種揃っていますので…

お好みのアイコンが…たぶん…見つかるでしょう…

以上です…最後までお読みいただきましてありがとうございます…

Tips Universal Header Sidebar Footer Current-Label : Main