Studio TA Subsite の案内とお知らせ

<   2018年 02月 ( 25 )   > この月の画像一覧

明石公園 2018.02.28 夜から荒れるぜ

2018年 02月 28日
今夜から天候悪化、春の嵐だという。 もう冬は終わりに近づいているのだ。 ハト達は何処で雨露を避けるのだろう。

池に着いたのは12時半、遅かったけれど50羽以上が集まって来ました。
エルトは以前の様に「エルト アズ ナンバーワン」といった振舞いです。

b0174191_20570954.jpg

食事の前に、出来るだけマーカーチェックをしたいわけで。 ハト達の襲撃に近い「はよ食わせ」攻撃に耐えて撮影。 左ユビはバッグを襲う愚かな事はしない。

b0174191_21024791.jpg

久しぶりのシロが、その後に控えていました。 彼も、大御所のマーカーらしい振舞いです。

b0174191_21032025.jpg

こちらも少し久しぶりのエル2、みんながやると調子に乗れるタイプ。

b0174191_21074521.jpg

この他には左アシを確認出来ただけで、後は不明。 きっとツメ白はいたんだろうけど。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 、画像はクリックで拡大表示します。



[PR]
by Ataron | 2018-02-28 21:09 | 鳥さんの写真 | Trackback | Comments(0)

明石公園 2018.02.26 エルトは本調子

2018年 02月 28日
少しスキンに嵌っていたので、2日遅れのアップロードです。

26日、天気が良い月曜、ほぼ正午に池に到着。 暖かな陽射しのせいで、長いのを下げたカメラマン達を何度も見かけました。 ハト様ポイントのベンチはカメラマンが占拠中。 少し北のベンチに向かうと、池上を舞っていたハト達は私に目を付けていたらしく、すぐに私の方に降りて来ました。

ハト達は約50羽、マーカーは左ユビ、エルト、ツメ白、そして少し久しぶりのチャメ。 チャメは、気軽に腕に乗って来てアピールしました。

b0174191_09212570.jpg

茶目のハトは時々居るので確実ではないが、この積極的なアピールはチャメだろうと思うのです。


この日は食事の買い出し日でした。 買い出しで休みの樹の下を通ると、左ユビやエルトが私を見つけて樹から降りて着いて来ました。 そしらぬ態度で通り過ぎると、彼等もなんとなく場違いを察したらしくほっとする。

約1時間後、ハト様ポイントで2度目の食事。 13時を過ぎて居ましたが、左ユビ、エルトを始め、およそ30羽が集まりました。 買い出しの後は大サービスです。 新しい食事の袋を開けて、食べたいだけ食事を出してやります。 大食漢の左ユビは、一度撤収して皆が帰ってからまた現れました。 エルトは食事の袋に直接たかって絶好調です。

b0174191_09213205.jpg


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2018-02-28 09:41 | 鳥さんの写真 | Trackback | Comments(0)

ページャーをアレンジする(続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)

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

2018年 02月 26日

問題のある「direction」プロパティ


非常に首尾よく導入出来たかに見えた「direction」プロパティですが、最初に対応が怪しいEdgeの問題に遭遇しました。 これは「unicode-bidi: plaintext;」を「unicode-bidi: embed;」に置き換えて改善したのですが、今度はまた別な問題が出て来ました。

下はChromeでの表示ですが、"」"(かぎ括弧)が変な所に表示され、ボタンの文字が左にズレています。

a0349576_19563299.png

「次のページ」のタイトルは、"「ブログ内検索」の検索ページを... >>"というものですが、ボタンにマウスを乗せて引用されたタイトルを見ると、頭の""がなくなっています。

a0349576_22154291.png

""は上図の場所に移動し、しかも向きが回転しています。 回転ではなく、""に対応する""の括弧に置き換わったと言うべきかも知れません。

この様な異常表示は、タイトル先頭に「括弧」がある場合らしく、場合はそう多くないでしょうが、放っておけません。



バグなのかと思ったが根は深く複雑な様子


下の様に DevToolsでタイトルを直接書き換え、色々なタイトルをテストすると、更に深刻な状況が判って来ました。

a0349576_20132421.png

●タイトルの先頭に半角の記号文字(アルファベットと数字を除いた全文字)があると、その文字はボタン側に飛ばされます。

a0349576_20235373.png

半角の括弧も同様に飛ばされますが、漢字の括弧と同様に対応する側の括弧に置き換わっています。

a0349576_20242762.png

●飛ばされるのは1文字ではなく、アルファベットと数字の半角、例えば"a""8"とかが出て来るまで、飛ばされてボタン上に現れます。

a0349576_20290218.png

上の真ん中は、本当のタイトルは "8+6=を計算する" というものです。 本来"8" で始まったものは飛ばされないはずが、これらが数式と判断されたのか、"=" "8+6"と何等かの基準で分断した上で飛ばされています。
また上の右端、半角括弧で挟まれた"123"は、本来は半角数字"1"から後は飛ばされないはずが、括弧でくくられているので纏めて飛ばされた様です。

こういった飛ばしには明らかな基準があり、「direction: rtl;」の機能に従っているらしく、単なるバグでは無いと思えます。

●全角文字(漢字)についても、ほぼ同様の基準がある様です。

a0349576_20395608.png

「ひらがな」「カタカナ」「数字」等は飛ばされませんが、タイトル先頭にある「記号文字」「括弧」等やその連続は、上図の様に飛ばされます。



タイトル先頭の飛ばしを引き起こす条件


下は先頭の "「" が飛ばされるタイトル例のHTMLです。

a0349576_20545003.png

「before擬似要素」は FontAwesomeの「>」マークを表示させ、「position: absolute;」でタイトル後方のボタン位置に移動します。「after擬似要素」は「Older」の文字をタイトル後方に表示させるコードです。

タイトル幅は色々と変わるので、「position: absolute;」を使用しないとボタンの定位置に「>」マークを置けません。 このコードで「absolute」指定は必須です。 しかし、この「absolute」指定を入れるとタイトル先頭文字の飛ばしが生じます。 何らかの関係がある様ですが、「direction」指定のある場で「position: absolute;」を使用すると、その文字配列に影響する事は事実です。

また、これを嫌って「before擬似要素」自体を削除しても、再び飛ばしが生じます。 どうも「absolute」指定が無くても「擬似要素」自体が相性が悪い様です。

これではどうにもならないのですが、Edgeの非対応で撤回した「unicode-bidi: plaintext;」を指定すると「direction: rtl;」の飛ばしが無くなり、全く問題なく使えます。 どうもこれが正しい指定の様に思え、遅れたブラウザ Edgeなどは無視したくなります。

とは言え、現在はコードを見直して、回避策、代案を練っている所です。




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


[PR]
by Ataron | 2018-02-26 21:37 | ブログスキンのアレンジ | Trackback | Comments(0)

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

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; }







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


[PR]
by Ataron | 2018-02-25 13:56 | ブログスキンのアレンジ | Trackback | Comments(0)

明石公園 2018.02.23 チャメ2なら覚えられる

2018年 02月 23日
晴れて、寒さはまあまあ。 公園には13時過ぎで遅かったが、ハト達は待っていたかの様子。 私の姿を見つけたのか、対岸から大群でやって来ました。

およそ60羽、これは飛び立って帰る時の撮影での確認です。 シャッフルが何度もある場合は不正確になりますが、一度に来て一斉に帰って行く場合は、食事の時の写真から確認するより正確です。

b0174191_08491813.jpg

マーカーは、左アシ、マギ3、マギ2、エルト。 マギ2とエルトにはパンを手渡ししました。 他は確認出来ず、群が多過ぎるとありがちな状態です。

足の悪い茶目のハト君が今日も居たので、「チャメ2」というマーカーにします。

b0174191_09014011.jpg


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2018-02-23 23:55 | 鳥さんの写真 | Trackback | Comments(0)

明石公園 2018.02.21 みんなの憧れ

2018年 02月 21日
曇りがちな日。 公園に11時半、いつもよりは早めです。

ハト達はおよそ30羽ほどで少な目でしたが、食事をあっさり平らげました。 マーカーは、左アシ、左ユビ、マギ2、マギ3、ツメ白。 マギニイはほとんど毎回顔を出し、出席率は一番かも。

b0174191_22050625.jpg

最近はツメ白に似たヤツが多く、確かにツメ白と言い難くなって来ました。 特徴がもう少しはっきりしていたら、出席率は多い結果になるかも。

b0174191_22084535.jpg


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2018-02-21 22:17 | 鳥さんの写真 | Trackback | Comments(4)

明石公園 よりピョンチャンに捧ぐ

2018年 02月 20日
カーリングは面白い、うーむそして、誰もあんまり言わないなぁ。

b0174191_21180853.jpg



ところで、明日21日からエキサイトも晴れてSSLに完全移行する事になります。 何か起こるのか、なんにもなくすんなり移行するのか、ブログ内検索はこのところ「https://」で開かなくなっているので、それが変わるのでしょうか。 他の所はほぼ「https://」で開くみたいだけど。 少し位変な事があったら面白いのですが。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。




[PR]
by Ataron | 2018-02-20 21:19 | 鳥さんの写真 | Trackback | Comments(0)

明石公園 2018.02.19 エル2も居たのね

2018年 02月 19日
寒さが戻った曇り空、公園に12時過ぎ。 ハト達は50羽以上、とても腹を空かしている様です。

マーカーは、左ユビ、左アシ、マギ、マギ2、マギ3、エルト、そしてエル2が居ました。

b0174191_22532612.jpg

エル2を確認するのは久しぶりで、以前の様にはアタックして来ません。 また馴れて来ると変わりそうですが。 左アシは、足に絡んでいた糸が取れていました。 パンの手渡しを試みるが、今日は周りが多くて駄目でした。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2018-02-19 22:58 | 鳥さんの写真 | Trackback | Comments(0)

最初のページ表示の瞬間をデザインする / エキサイトブログ

2018年 02月 18日

ブログページ表示の最初でもたつく事がある


SSL移行に関係する問題なのか、ブログ表示の最初に、以前に気にならなかった状態が一瞬表示されます。 表示される時間はアクセスした場合で異なります。 長い場合でも1秒足らずですが、下の様にヘッダーの背景画像がロードされず、みっともない感じです。

a0349576_14471562.png

私のスキンのペースデザインは何年も昔のもので、ヘッダー部の背景に軽い画像を2個使う、「ロードの遅い環境」でも問題の出難いタイプのスキンデザインです。 現在は大きな(重たい)背景画像を使う公式スキンも珍しくないのですが、私は本文の画像を見易くするために、ヘッダーや背景などはシンプルな方が良いという方針のアレンジです。

それにもかかわらず、軽い背景画像のロードでもたつくのは問題です。 今後も改善しない可能性があり得るので、少し対策をしました。 重たい背景画像を使うスキンでロード待ちが気になる場合は、このページの対策が少しは参考になるかも知れません。



ブログページが表示されるまでのステップ


ブログページが表示されるまでのステップを細かく観察してみます。 一旦ページが表示された後、ページャーで移動する場合は、ブラウザのキャシュが機能しますから、あくまでも最初にページを開く場合を調べました。 これはスキンによっても異なる可能性がありますが、以下は私の環境を前提とした話です。

下は、ページを開く最初の1秒位のおおまかなステップです。

a0349576_15105822.png

興味深いのはページャーと右メニューが最後に呼び込まれる事です。 私のスキンの場合、下部ブロックを「本文」と「右メニュー」が分割しているので、先に表示された「本文」が「右メニュー」で後から押されて幅変化します。 こういう変形は無い方がスムーズですが、今のところ改善方法がみつかりません。



背景画像がロードされるまで 背景色で時間稼ぎする


ヘッダー背景画像が遅れる場合、最も簡単な対処方法は、デフォルトの背景色を指定しておく事でしょう。

#HEADER {
background-color: #b8dcef;
background-image: url("//pds.exblog.jp/pds/xxxxxxxxx.gif");

上は一般例ですが、「background-color: #b8dcef」という背景色の指定と、「//pds.exblog.jp/pds/xxxxxxxxx.gif」という背景画像の指定を同時に行っています。 後方に背景画像を指定しているので、背景画像が無い状態(未ロード)では背景色の方が表示され「間つなぎ」になり、背景画像がロードされると、それが優先表示されるという塩梅です。

「間つなぎ」の表示は下の様になります。

a0349576_16052213.png

Htmlのヘッダーへの書き込みやスクリプト等を使えないエキサイトでは、この方法が妥当と思います。 立体感などはないですが、白い素のヘッダーに比べると本来の背景画像に似た色の背景色があれば、かなり印象が違います。



メニューをフェードイン表示する


実は、最初にページ全体のフェードインを試したのですが、これも効果があります。 背景画像が無い最初の表示をぼかしてしまうわけです。 しかし、このロード遅れは最初にページを開く時だけで、ページャー移動時などでは遅れがなくなります。 ところが、ぺージのフェードインはページャー移動でも常に実行されるので、ちょっと「余計」な印象で却下しました。 これは好みの問題ですが。

一方、右メニューの表示遅延、本文の押し戻しに関しては、ページャー移動時も毎回生じます。 そこで、メニューをフェイドイン表示してみる、ちょっと良い感じになりました。 メニューにはこのフェードインを採用する事に。

#R_MENU {
display: table-cell;
width: 180px;
animation: fadeIn .5s ease-out 0s 1 normal; }

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1} }


上は一般的なメニューの例ですが、太字の部分が「0.5sec」のフェードインをさせる指定です。 こういう指定を「body」等に指定すれば、ページ全体のフェードインになります。




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



[PR]
by Ataron | 2018-02-18 16:36 | ブログスキンのアレンジ | Trackback | Comments(0)