Studio TA Subsite の案内とお知らせ

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

2018年 02月 27日

「direction: rtl;」はブラウザによって様々な表示になる


おおまかには統一された文字の並びになるが、問題となった記号文字に対する文字配置に関しては、ブラウザによる表示が様々な事が判りました。

◎Chromeの「unicode-bidi: plaintext;」の指定は、IE11やEdgeではサポートされず「unicode-bidi: embed;」と同じ扱いになる。
◎この事を利用し「plaintext」指定で Chrome、IE11、Edgeで同じ結果となるコーディングをしたところ、今度は「plaintext」に対応する Firefoxで、Chromeと異なる表示になる場合を発見。
◎そこでCSSハックで Chromeのみに「plaintext」の指定をした所、Forefoxでまた別の場所が異常表示になる。

この様に、一部を修正すれば他所に問題が出る事が続きました。 要するに、細部でブラウザによる挙動の差異があるので、「direction」をこの場合の文字配置に利用する事は不適切と判断せざるを得なくなりました。



要素の並ぶ方向を変えるには「flex-direction: row-reverse;」を使う


ここで問題になっている事を整理します。

▪「a要素」に対して「before擬似要素」「after擬似要素」を指定する必要がある。
▪ 3要素は、「before擬似要素」「a要素」「after擬似要素」の順に表示される。
▪「a要素」はボタン実体で、「overflow: hidden;」指定で3要素の一部を表示する。
▪「a要素」のマウスフォバーでボタンサイズを拡げ、3要素全てを表示するデザイン。
▪ 一般にボタン上に3要素は左側から並び、アンフォバー時は右端が隠れる。
▪ しかし、右側ボタンは3要素を右側から表示し、アンフォバー時は左端を隠したい。

この必要で、要素の並びを逆順にする必要があり、苦労して来たわけです。「direction」に代わるプロパティとして思い浮かぶのは「flex」です。「flex」を指定した要素に「flex-direction: row-reverse;」を指定すれば、要素の並びを左右反対に出来るのでは。 早速テストして見ると、うまく行きました。 今度は、変な問題が出ないでしょう。

●「次のページ」を表示する「a要素」に対し「display: inline-flex;」「flex-direction: row-reverse;」を指定して、ページャー部のコードを書き直しました。



アレンジの概要


ウェブフォントの「FontAwesome」を使用するので、スキンCSSの編集で下の「@import」指定をCSSの 最初の行に書き込む 必要があります。

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

なお、以下のサンプルの「」と異なったデザインのマークを使用したい場合は、以下のページから好みのものを探してください。



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


以下のサンプルコードは、アレンジをする場合の参考として挙げたもので、全ての公式スキンに適合するかは不明です。

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

適合する公式スキンの場合で、ボタン文字の配置等を調整すれば、以下の例の様になります。 スキン本来のボタン枠線や背景色などの指定を受け継ぐので、それらのアレンジが必要な場合があります。

a0349576_18471028.png
a0349576_18482557.png

表層ページャーのアレンジサンプルCSS


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


/* 中央部の5択ボタン */
.pagerNavLink .current,
.pagerNavLink a,
.pagerNavLink a:hover {
line-height: 23px !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";
margin-left: -1px; }

.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 {
padding: 0 0 0 8px !important;
width: 46px !important; }

.nextpage a::before {
content: "\2003Older\2003\2003";
margin-left: -8px; }

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


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

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




深層ページャーのアレンジ


深層ページャーは、公式スキンに多種のセレクタと構造が散在します。 そのため、適応率の悪いサンプルしか提示出来ませんが、以下の3種をアレンジの叩き台に挙げます。

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

セレクタが適合する公式スキンの場合で、文字配置を最適に調整した場合、深層ページャーは下の様なデザインになります。(ページ背景色やボタンの枠線や背景色は同じとは限りません)

a0349576_06011541.png

セレクタが一部しか適合しない場合、下の様なデザインになる場合が多くあります。

a0349576_06421862.png

この様な場合で、深層ページャーが上下に2行にあふれない場合なら、「」の配置を調整して以下の様にして使う事が可能です。

a0349576_06422227.png

深層ページャーのアレンジ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 {
display: inline-flex !important;
flex-direction: row-reverse;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
display: inline-flex !important;
flex-direction: row-reverse;
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\2002\2003Older";
margin-right: 10px; }

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

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



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

/* 深層ページャー ****タイプ(2)********** */
#pageMove {
width: 80% !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: 2px;
left: 6px;
color: #0080c0; }

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


/* 次のページ */
#pageMove .next .older_page {
display: inline-flex !important;
flex-direction: row-reverse;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
display: inline-flex !important;
flex-direction: row-reverse;
white-space: nowrap;
position: relative; }

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

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

#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 {
display: inline-flex !important;
flex-direction: row-reverse;
position: relative;
width: 50px !important;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
display: inline-flex !important;
flex-direction: row-reverse;
white-space: nowrap;
position: relative; }

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

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

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





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


[PR]
by Ataron | 2018-02-27 21:05 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/28163600
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

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