人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

ページャーをアレンジする / エキサイトブログ

2018年 02月 25日

何度もアレンジして来たページャー


エキサイトのページャーは、何度もアレンジして来たパーツです。 拘って来た事のひとつは矢印ですが、最近までのデザインは「>」「>>」というエキサイト本来のフォントを使ったデザインです。

ページャーは実際は2種類あり、私は「表層モード」「深層モード」と勝手に名前を付けてます。
「表層モード」は自ブログの先頭から複数記事を纏めて表示するモードで、下の様なデザインです。

ページャーをアレンジする / エキサイトブログ_a0349576_14381023.png

「深層モード」は1記事ずつ表示し、前後ページにのみ移動できるデザインです。

ページャーをアレンジする / エキサイトブログ_a0349576_10280220.png

上の2図は本来のページャーをアレンジしたものですが、機能は全てのスキンと同様です。

一時期は全てグラフィックに置き換えたり、矢印のみをグラフィックとしたり、色々と弄って来たのですが、次第に拡大しても綺麗なベクターフォントを使う様になって来ました。 ただ、この矢印は余りしまりがなく(特にメイリオの場合)、FontAwesomeを試して見ました。


アレンジの問題点


●「Newer」「Older」の文字列に「FontAwesome」のマーク文字を詰め込む事は可能ですが、色が他の文字と同じだと目立ち過ぎてしまう事、周囲の文字との並びの配置やサイズが調節できないなどの問題が出て来ます。 既に「< Newer」「Older >」を「擬似要素」で表示しているので、使っていない「before擬似要素」「after擬似要素」で「<」「>」に相当するマーク文字を入れる必要があります。

●両端の「>>」に使うマーク文字も含めて行くと、案外と使えるマーク文字が無いものです。 以下は色々試したもの。

ページャーをアレンジする / エキサイトブログ_a0349576_15143227.png
ページャーをアレンジする / エキサイトブログ_a0349576_15145467.png
ページャーをアレンジする / エキサイトブログ_a0349576_15152684.png

最終的に、最後のデザインを採用しました。 なお、マーク文字を青色に着色しているのは、他の文字と同じ黒ではマークが目立ち過ぎるからです。

●特に深層モードで問題になった事ですが、「Older」側はある問題に引っかかりました。 下は、ページャーにオンマウスしない場合に隠されてた文字列を表示していて、ページャー内で文字の並ぶ方向を「→」で示しています。

ページャーをアレンジする / エキサイトブログ_a0349576_11111802.png

「Newer」は「before擬似要素」で「< Newer << 明石公園 …」と、左端に埋め込んで右側を隠し、簡単にボタンが出来ます。 これと対称の配置をするため、「Older」を「after擬似要素」で「明石公園 … >>」の右端に埋め込むと、上図の様に文字列右端の「Older」をボタン(inline-block)内に表示できなくなります。

実は今までは、「before擬似要素」で「Older > 明石公園 … >>」と左側に埋め込んで、右側を隠せたのですが、今回は「>」が別追加になり、「> 明石公園 … >> Older」の形にする必要が出来たのです。

これはCSS指定の「右端寄せ」などで出来そうに思いますが、これがテコでも駄目です。 そして辿り着いたのが、右側から文字を並べる言語に対応した「direction」プロパティです。 普通、「a要素上のテキスト」は左から右へ文字が並びますが、「direction: rtl;」指定でアラビア文字の様に逆並びになります。 また「unicode-bidi」指定が一緒に必要です。 これは、単語内部を「redlO」とするのか、単語はそのままとするのか等の指定で、ここでは「unicode-bidi: embed;」「unicode-bidi: plaintext;」が適し、特に後者が一番良さそうでした。

この指定で、コードが完全に対称化が出来、シンプルになります。

ページャーをアレンジする / エキサイトブログ_a0349576_12074530.png


〔追記〕
「unicode-bidi: plaintext;」は最適ですが、Edgeでサポートが無く甚だしく表示が崩れてしまう様です。 Chrome上で「unicode-bidi: embed;」の指定で目的の表示になる様に調整したものはEdgeでも問題が無い様なので、下のサンプルコードは「embed」のみを使ったものに改めました。

〔追記〕2018.02.27
「embed」使用では、Chrome / Firefox でタイトル先頭の記号文字がボタン上に表示される問題があり、深層モードに関しては以下のコードは改善が必要と判断しています。 ページャーをアレンジする(続1)(続2)を参照ください。



「表層モード」ページャーのアレンジ


今回のスキンアレンジの前提として、ウェブフォントの「FontAwesome」をブログ画面上で表示出来る様に「呼び込んでおく」必要があります。 これは、「@import」指定をスキンのCSSの最初の行に書き込む必要があります。 最近は以下のコードが推奨です。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

これによって、以下のページのフォントを利用できる様になります。


以下のコードは当方スキンで有効なコードですが、全ての公式スキンに適合するかは不明です。 以下はアレンジをする場合の参考として挙げるものです。

◎スキンCSSの表層部分に関連する部分を探し、以下のコードに置き換えるのが理想的。 表層部分が不明な場合は、スキンCSSの最後尾に書き込む。
◎上記ページより取得したFontAwesomeの文字コードで、以下の「青文字」部分を置き換えて、矢印を好みのデザインとする事が出来ます。
◎FontAwesomeの文字の位置ズレや大きさが不適当になる事があります。 それらはコード上の「赤文字」を書換えて、配置やサイズを調整します。
◎その他にも、ボタンの幅やページャー全体の幅調節が必要な場合もあります。


表層ページャーのアレンジCSS



/* 表層ページャー ***************** */
.pagerNavLink {
white-space: nowrap;
width: 100%; }


/* 中央部の5択ボタン */
.pagerNavLink .current,
.pagerNavLink a,
.pagerNavLink a:hover {
line-height: 24px !important;
overflow: hidden;
position: relative; }

.pagerNavLink .current {
color: #000 !important;
background: #ddd !important;
font-weight: normal !important; }

.pagerNavLink a:hover {
color: #000 !important;
background: #eee !important;
text-decoration: none !important; }


/* 左端のジャンプボタン */
.first a {
width: 24px; }

.first a::before {
content: "\f053\f053";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
margin-right: 15px;
position: relative;
top: 0px;
left: 3px; }


/* 前のページ */
.pagerNavLink .previous a {
padding: 0 0 0 4px !important;
width: 50px !important; }

.previous a::before {
content: "\2006\2003Newer\2002"; }

.previous a::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: absolute;
top: 0px;
left: 3px; }


/* 次のページ */
.pagerNavLink .nextpage {
margin: 0 11px 0 10px !important; }

.pagerNavLink .nextpage a {
direction: rtl;
unicode-bidi: embed;
padding: 0 0 0 8px !important;
width: 46px !important; }

.nextpage a::after {
content: "\2003\2003Older";
margin-right: 17px; }

.nextpage a::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: absolute;
top: 0px;
right: 3px; }


/* 右端のジャンプボタン */
.last a {
direction: rtl;
unicode-bidi: embed;
width: 24px; }

.last a::before {
content: "\f054\f054\2003\2003";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: relative;
top: 0px;
left: -3px; }






「深層モード」ページャーのアレンジ


こちらは、エキサイトが旧ページャーの形式を継いだため、公式スキンに多数のセレクタと構造が散在します。 それを画一的にアレンジする事は出来ず、「表層モード」より更に適応性の悪いサンプルしか提示出来ません。 FontAwesomeを使ったアレンジの叩き台として、一応以下の3種のサンプルコードを挙げておきます。

当方で33件のユーザーページを調べたところ、10件が適合、19件が調節が必要だが使用可、4件は本文幅が小さ過ぎる等の理由で崩れて不可、という結果でした。


◎「@import」指定は、「表層モード」と同様です。「表層モード」のアレンジで指定した場合は、2度指定する必要はありません。
◎以下の3種の内で、一番の適当なもの1種を探して利用します。
◎スキンCSSの深層部分に関連する部分を探し、以下のコードに置き換えるのが理想的。 深層部分が不明な場合は、スキンCSSの最後尾に書き込む。
◎上記ページより取得したFontAwesomeの文字コードで、以下の「青文字」部分を置き換えて、矢印を好みのデザインとする事が出来ます。
◎FontAwesomeの文字の位置ズレや大きさが不適当になる事があります。 それらはコード上の「赤文字」を書換えて、配置やサイズを調整します。
◎その他にも、ボタンの幅やページャー全体の幅調節が必要な場合もあります。


深層ページャーのアレンジCSS (タイプ1)

/* 深層ページャー *****タイプ(1)********* */
#pager {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

#pager .pre,
#pager .next {
width: 40% !important; }

#pager .pre a,
#pager .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

#pager .pre a:hover,
#pager .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
#pager .pre .newer_page {
position: relative;
width: 45px !important;
margin-right: -200px;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 7px;
color: #0080c0; }

#pager .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
#pager .next .older_page {
direction: rtl;
unicode-bidi: embed;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 7px;
color: #0080c0; }

.older_page::after {
content: "\2003Older";
margin-right: 12px; }

#pager .next .older_page:hover {
width: 300px !important; }



深層ページャーのアレンジCSS (タイプ2)

/* 深層ページャー ****タイプ(2)********** */
#pageMove {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important; }

#pageMove .pre a,
#pageMove .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

#pageMove .pre a:hover,
#pageMove .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
#pageMove .pre .newer_page {
position: relative;
width: 45px !important;
margin-right: -200px;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: -1px;
left: 0px;
color: #0080c0; }

#pageMove .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
#pageMove .next .older_page {
direction: rtl;
unicode-bidi: embed;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: -1px;
right: 0px;
color: #0080c0; }

.older_page::after {
content: "\2003Older";
margin-right: 12px; }

#pageMove .next .older_page:hover {
width: 300px !important; }


深層ページャーのアレンジCSS (タイプ3)

/* 深層ページャー *****タイプ(3)********* */
.pageTool {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

.pageTool .pre {
margin-right: -80%; }

.pageTool .next {
margin-left: -80%; }

.pageTool .pre a,
.pageTool .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

.pageTool .pre a:hover,
.pageTool .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
.pageTool .pre .newer_page {
position: relative;
width: 50px !important;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 7px;
color: #0080c0; }

.pageTool .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
.pageTool .next .older_page {
direction: rtl;
unicode-bidi: embed;
position: relative;
width: 50px !important;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 7px;
color: #0080c0; }

.older_page::after {
content: "\2003Older";
margin-right: 12px; }

.pageTool .next .older_page:hover {
width: 300px !important; }







この記事はカテゴリ「スキン編集」にトラックバックしています。


by Ataron | 2018-02-25 13:56 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。