Studio TA Subsite の案内とお知らせ

<   2015年 03月 ( 16 )   > この月の画像一覧

明石公園 2015.03.28~29 行楽客が増える一方

2015年 03月 29日
土日が休みで、日参するのはパッカード。土曜は晴れの良い天気で、暖か過ぎて防寒着が間抜けな私でした。

ポイントですぐにママが現れて物資伝達。 パンのヘタも尽きた終わりの頃にやって来たヒヨっち、やたらギーギーと啼いて「パンくれよ」の意思表示するのですが。
b0174191_19371542.jpg
黄色い花粉を顔に着けてます。 食物も増えつつある時期やけど。
b0174191_19372419.jpg
土曜、やはりキッズ2の姿なし。 ママは何も教えてくれない。

日曜は午前は雨で午後に晴れ出し、公園に赴いたのは5時近くです。 なるだけ物資伝達の間をあけたかったのと、遅い方が行楽客が少ないと考えたからです。 人気はまあまあでしたが、ママはなかなか現れず。 およそ半時間ウロウロして、ようやく小川の傍に出て来たのを見つけました。 先日隠したのを出して食べている様子です。 物資を出すとすぐスイッチが入り、いつもの様に隠しに行きましたが、今日は物資が少なめ。 実は待ってる間に、大池の鳥さんと私が半分ほど消費してしまったからで。

やはりキッズ2は来ずで、物資伝達がすぐ終わりました。 帰りかけると水場でシロっちが水浴びをしてます。
b0174191_20022145.jpg
暖かくなったもので、公園が静かになる日暮れ時を待っていたかの雰囲気で、のんびりやってます。 ツグミやシロハラ達が減ったなあと思ってたのですが、水場の周囲に何羽も出て来ていて追いかけ合いをしたりしてます。
b0174191_20083189.jpg
彼等が居ると、なんか嬉しい私なのです。 そこらじゅうからキキッと啼き声がしています。 余り啼かないツグミも、夕暮れ時は仲間の場所を確かめたりしているのでしょうか?
b0174191_20084312.jpg
少し暗くなってもまだ暖かい夕暮でした。

+

EOS7D + EF70-200mm F4L IS USM で撮影、画像はクリックで拡大表示します。






[PR]
by Ataron | 2015-03-29 20:14 | 鳥さんの写真 | Comments(0)

Exブログ ページャー変更に対処する (6) 表層モード総集編

2015年 03月 29日
前稿の「変更に対処する(5)」で、デザイン上の統一を図った深層ページャーを載せ、これに併せて表層の新ページャー側のデザインまで調整した最終版を以下に載せます。

万一ですが、私のアレンジを参考にされる方がいた場合、だんだん更新する「変更に対処する」のどれを手本にしたら良いか迷うはず。 で、「変更に対処する(5)」と、この「変更に対処する(6)」とを総集編として一段落させることにしました。 この2編がページャーアレンジの現在の完成形です。

+

Htmlに関しては「ページャー変更に対処する (5)」を参照ください。 Html上でid名が「LEFT」のdiv要素が、新ページャー(表層)とページャー(深層)の親要素になっています。

その前提で、以下が新ページャーのCSS追加項目です。
div#LEFT {
padding: 15px 0px 50px; /* 上側ぺージャーの配置高さ位置に関係します */
position: relative; } /* この親要素を新ページャー移動の基準位置に指定 */

.pagerNavLink {
font-family: inherit !important; /* 新ぺージャーのスイッチ文字のフォント */
font-size: 16px !important; /* 新ぺージャーのスイッチ文字のサイズ */
white-space: nowrap; /* スイッチ列の改行崩れを防止 */
position: absolute; /* 新ページャー配置の絶対位置化指定 */
top: 10px; /* 親要素LEFTの上辺から10pxの高さに配置 */
width: 100%; } /* センタリングに必須 */

.pagerNavLink .current, .pagerNavLink a, .pagerNavLink a:hover {
padding: 1px 4px 0px !important; /* スイッチ枠の高さ幅の調整 */
line-height: 24px !important; } /* スイッチ枠内での文字位置調整 */

.pagerNavLink .current {
color: #COLOR6 !important; /* 選択スイッチの文字色 */
background: #COLOR7 !important; /* 選択中スイッチの文字背景色=スイッチ色 */
border: 1px solid #COLOR8 !important; /* 選択中スイッチの枠色 */
box-shadow: 4px 4px 6px #aaa; /* 選択中スイッチの影 */
overflow: hidden; } /* スイッチの行中の上下配置ズレ防止に必須 */

.pagerNavLink a {
color: #COLOR1 !important;/* スイッチの文字色 */
background: #COLOR2 !important;/* スイッチの文字背景色=スイッチ色 */
border: 1px solid #COLOR3 !important;/* スイッチの枠色 */
box-shadow: 4px 4px 6px #aaa; /* スイッチの影 */
overflow: hidden; } /* スイッチ幅から溢れたスイッチ文字を隠す */

.pagerNavLink a:hover {
color: #COLOR4 !important; /* hover時のスイッチの文字色 */
background: #COLOR5 !important; /* hover時のスイッチの文字背景色=スイッチ色 */
text-decoration: none !important; } /* hover時のスイッチ文字のアンダーライン無し */

.previous a::before {
content: "< Newer  "; } /*「前のページ」の文字列に「< Newer  」を追加挿入 */

.nextpage a::before {
content: "Older >  "; } /*「次のページ」の文字列に「Older >  」を追加挿入 */

.pagerNavLink .previous {
margin: 0px 52px 0px 0px !important; } /*「前のページ」スイッチの横配置間隔調整 */

.pagerNavLink .previous a {
padding: 1px 0px 0px 4px !important; /*「前のページ」スイッチ枠の高さ幅の調整 */
width: 76px !important; } /*「前のページ」スイッチ枠幅の調整 */

.pagerNavLink .nextpage {
margin: 0px 34px 0px 16px !important; } /*「次のページ」スイッチの横配置間隔調整 */

.pagerNavLink .nextpage a {
padding: 1px 0px 0px 14px !important; /*「次のページ」スイッチ枠の高さ幅の調整 */
width: 64px !important; } /*「次のページ」スイッチ枠幅の調整 */

以上のCSSに記述されている新ページャーに関するセレクタは、全てエキサイトのシステム側からHtmlに書き込まれるものです。 従って、これらの名前はユーザー側で変えることは出来ません。
上記CSSの項目は、現用のCSSに追加記入することで、デザインアレンジが実現します。 但し、COLOR1COLOR8 には、周囲の配色を考慮したカラーコードを書き込む必要があります。 更に、このコード指定は「変更に対処する(5)」でのコードと統一を持たせるのがベターでしょう。



[PR]
by Ataron | 2015-03-29 15:52 | ブログスキンのアレンジ | Comments(0)

Exブログ ページャー変更に対処する (5) 深層モード総集編

2015年 03月 29日
この項は従来の深層で働くページャーのアレンジです。

新ページャーは複数記事(私の様に単数設定も可)を縦に並べ、その列を切替えて表示するモードです。 これは、カテゴリー/タグ/月等の検索結果表示用のページャーを、記事全体の表示にも応用したものですね。 従来からデザインを若干変え、ジャンプ機能を少し強化しています。

これに対し、記事を一件ずつピックアップ表示するモード(私は深層と言ってます)のページャーも、従来通り働きます。 表層モードでもコメント表示や発信が出来て、深層モードは無くても問題はなく、また逆に表層モードが無くても決定的に困ることはありません。 要は、記事アクセスの便利さで選択すれば良いという形です。

但し、外部から検索などでアクセスした場合、必ず単一記事の深層モードとなります。 表層モードはざっと見渡し易い便利機能で、外部から検索して開いた人にとっては、余分なページが連なってたらたまりませんから当然ですね。

深層モード(従来の単一表示)のページャーの特徴は、前後記事のタイトルが簡略表示されることです。 これ他社のブログにもあり、時々便利だと思うことがあります。 でも、他記事も見て欲しくて情報過多なページになるのは好ましくありません。 ということで、マウスポインターをページャーに乗せた時だけ、hoverで隣のタイトルが見られるスタイルとしました。

また、新ページャーのスイッチデザインと統一し、表層/深層で共に「< Newer」「Older >」の表記とし、訪れた人が違和感なく操作出来る様にします。 深層ページャーは記事上部と下部に配置する方式を継承です。

+

最初にアレンジしたタイプは、スイッチを中央に寄せて、hover時は両外側に向かって伸びるものです。
b0174191_19451002.png
非動作時はまとまり良いルックスですが、hover時にスイッチが両方とも左右にシフトしてしまいます。 場合によっては表示がブルブル往復(チャタリング)します。 タイトル長で変化する hover幅ではこれを防ぐのが困難で、hover時の幅を固定としたCSS記述が必要と判りました。 しかし、上図の一番下の「下部 hover時」の様にウインドウ幅が狭いと hoverが切れるので、このデザインはボツです。

改善案として、下図の様に hoverの伸びる方向を内側にしてみました。
b0174191_19573934.png
私は投稿部の最小幅を700pxと設定していて、内側に hoverを伸ばすと表示切れは生じません。 「< Newer」「Older >」のスイッチはウインドウ幅が最小時でも、反対側の hoverと干渉しない間隔を空けています。

先の案でも問題になった点ですが、上図の一番下の「下部 hover時」では隣の「PageUp▲」スイッチが押されて移動しています。 上図は試作時のもので、完成したCSSではこの対策を施しました。
下のCSSでは、hover 時の幅を、全て漢字のタイトル長でも余裕のある 380px の固定幅とし、この hoverが排斥する 320pxをマイナスマージンに設定して、隣を押さない様にしているのです。

+

下はHtml の構造です。 説明のため簡素化したHtmlで動作は保障されません。
<table>  ブログタイトルのテーブル 
<div id="TOPGRAF"><$header$></div>
</table>

<table> ブログタイトル以外の全てを含むテーブル
<tr>

<td valign="TOP">
<div id="LEFT"> 左側の記事本体のテーブル
<div align="center" class="MpageTool">
<span class="Mpre"><$prepage type=1$></span>
<span class="Mnext"><$nextpage type=1$></span>
</div>
<$post$>
<div align="center" class="MpageTool">
<span class="Mpre"><$prepage type=1$></span>
<span class="pageup"><a href="#TOPGRAF">PageUp▲</a></span>
<span class="Mnext"><$nextpage type=1$></span>
</div>
</div>
</td>

    <td valign="TOP">
<div id="RIGHT"> 右側のメニューのテーブル
</div>
</td>

</tr>
</table>

左側の記事本体のテーブル(LEFT)内で、投稿内容の<$post$>をはさんで、上部と下部にグリーンで表示した MpageToolを置いています。
上側が上部ページャー(深層)、下側が下部ページャー(深層)です。 下部ページャー(深層)には「PageUp▲」のページ内リンクを表示する行が一行加えられています。

新ページャー(表層)はこのHtml内に記述がありませんが、システムが必要時に<$post$>の直下に挿入します。

+

以下は、上記のHtmlに対する、上部/下部ページャー(深層)に関するCSS記述の全てです。

.MpageTool {
width: auto;
margin: 15px 0px 20px; /* ページャー行全体と他部分との上下間隔調整 */
font-size: 16px; /* スイッチ文字のサイズ */
height: 30px; /* 新ページャー動作時に非表示となっても高さを確保する */
overflow: hidden; } /* スイッチ幅から溢れる文字を隠す */

.MpageTool a {
display: inline-block;
color: #COLOR1; /* 文字色 新ページャー共通デザイン */
background: #COLOR2; /* 文字背景=スイッチ色 新ページャー共通デザイン */
border: 1px solid #COLOR3; /* スイッチ枠線の色 新ページャー共通デザイン */
border-radius: 3px; /* スイッチ角の丸め 新ページャー共通デザイン */
box-shadow: 4px 4px 6px #aaa; /* スイッチの影 新ページャー共通デザイン */
height: 22px; /* 文字のスイッチ枠内での配置調整 新ページャー共通デザイン */
line-height: 24px; /* スイッチ枠内での文字位置調整 新ページャー共通デザイン */
overflow: hidden;
white-space: nowrap; }

.MpageTool a:hover {
color: #COLOR4; /* hover時の文字色 新ページャー共通デザイン */
background: #COLOR5; } /* hover時の文字背景=スイッチ色 新ページャー共通デザイン */

.Mpre a {
padding: 1px 0px 0px 8px; /* 左スイッチ枠内の文字の配置調整 */
width: 80px; /* 左スイッチの幅 */
margin-left: 60px; /* 左スイッチの左端からの余裕 */
float: left; /* 左スイッチを左寄せ配置指定 */
text-align: left; } /* 左スイッチ内の文字列を左寄せ */

.newer_page::before {
content: "< Newer "; } /* 左スイッチに「< Newer 」の文字列を追加挿入 */

.Mpre a:hover {
padding: 1px 20px 0px 8px; /* 左スイッチ枠内の文字の配置調整 */
width: 380px; /* hover時の幅を 380px に指定 */
margin-right: -320px; /* hover時の排斥分のマイナスマージン */
position: relative; } /* hover時に PageUpスイッチの上側に表示する指定 */

.Mnext a {
padding: 1px 4px 0px 2px; /* 右スイッチ枠内の文字の配置調整 */
width: 80px; /* 右スイッチの幅 */
margin-right: 60px; /* 右スイッチの右端からの余裕 */
float: right; /* 右スイッチを右寄せ配置指定 */
text-align: right; } /* 右スイッチ内の文字列を右寄せ */

.older_page::before {
content: " Older > "; } /* 右スイッチに「 Older > 」の文字列を追加挿入 */

.Mnext a:hover {
padding: 1px 8px 0px 18px; /* 右スイッチ枠内の文字の配置調整 */
width: 380px; /* hover時の幅を 380px に指定 */
margin-left: -320px; /* hover時の排斥分のマイナスマージン */
position: relative; } /* hover時に PageUpスイッチの上側に表示する指定 */

.older_page:hover::before {
content: ""; } /* hover時は、頭側に追加していた「 Older > 」の文字列を削除 */

.older_page:hover::after {
content: " Older >"; } /* hover時は、文字列の最後に「 Older > 」の文字列を追加挿入 */

.pageup a {
padding: 1px 8px 0px; } /* PageUpスイッチ枠内の文字の配置調整 */

「::before」「::after」を使って、非動作時とhover時に文字列の前後に「< Newer」「Older >」を追加/消去しています。 特に「Older >」の方は、非動作時は文字列の左側に追加し、hover 時はそれを消して文字列右側に追加するトリッキーな方法です。

上記のCSSは、実際のCSSに追記して効果を反映することが可能ですが、以下の注意が要ります。
(注1)
Html側では、このページャー(深層)に関する表記が記述されている必要があります。
特に「MpageTool」「Mpre」「Mnext」「pageup」のクラス名は、私がオリジナルに使用した名前です。 これらのクラス名に相当する記述が(最初の参考Htmlのグリーン部分を参照)Html上で正しく構成されていないと、このCSSは意味を持ちません。
従来は、エキサイトがデフォルトで使用する「pageTool」「pre」「next」を流用していました。 しかし、新ページャー導入で経験した様に、これらはエキサイト側で上書きされる可能性があります。 クラス名の前者3つは、これを避けてオリジナルのクラス名に変更したものです。 オリジナル名にすると「!important」の上書き指定を乱用する必要がなくてすっきりします。
一方、「newer_page」「older_page」のクラス名はエキサイトのシステムがHtmlに挿入するもので、残念ながらこちらで名前を指定できません。
(注2)
上記CSS内の COLOR1COLOR5 は、スイッチ文字色/背景色(スイッチ色)、スイッチ枠線色、hover時のスイッチ文字色/背景色(スイッチ色)を指定するカラーコード部です。 ここは、実際の配色を考えて書き込む必要があります。
(注3)
上記CSSは、新ページャーに関するCSS記述と見合わせ、両方で共通したスイッチのデザイン設定をしています。 片方でデザインを変更した場合は、他方の側でもCSS記述を改めないと、デザイン上の統一がなくなります。

+

新ページャー(表層)とページャー(深層)でデザインを統一し配置を調整して合わせた結果が下図です。 上側が表層、下側が深層で、高さの位置も同じに調整しています。
b0174191_14010175.png
下側は「PageUp▲」スイッチの押しやりを解決しています。 ウインドウ幅が狭い場合は「PageUp▲」スイッチが下に隠れますが、ウインドウ幅が広い場合は下から出て来ます。
b0174191_14063474.png
上記CSSでは「Mpre a」項で「margin-left: 60px;」、「Mnext a」項は「margin-right: 60px;」として両端のスイッチ間隔を広めにしていますが、この値を「200px」としスイッチを近付けても、hover がスイッチを干渉することはありません。 下図の様に上にかぶさるだけでスイッチ間隔を狭く纏めることも可能です。
b0174191_22205807.png


[PR]
by Ataron | 2015-03-29 01:56 | ブログスキンのアレンジ | Comments(0)

Exブログ ページャー変更に対処する (4)

2015年 03月 28日
新ページャーの高さの配置をアレンジした上で、且つ左右のセンタリングをする様に改善しました。

変更に対処する (2)」「変更に対処する (3)」では、「.pagerNavLink」(新ページャー本体)に「position: absolute」を指定して、ウインドウ左上端を基準の固定配置としたため、ウインドウの幅変化に対応せず、バランスの悪い表示になりがちでした。 本体をセンタリングさせるには「absolute」指定した要素の外側要素に「position: relative」を指定する必要があります。

+

私のスキンの場合、外側要素は投稿本体の「$post$」等を含むidが「LEFT」というid名のdiv要素です。 そこで先ず下の様に、「div#LEFT」要素のCSS修飾項に「relative」指定を追加しました。
(他の行は、スキンごとのデザインに関係して一定ではなく無視します。 また、外側要素のid名もスキンにより一定ではありませんから、調べる必要があります。)

div#LEFT {
padding: 15px 0px 50px;
margin: 0px 0px 50px 40px;
position: relative; }

その上で「.pagerNavLink」で「absolute」指定をしますが、「width: 100%」がないとセンタリングしません。
センタリングするのは「.pagerNavLink」下の要素で、これは既定の記述の「text-align: center;」の指定で、アレンジ前はセンタリングできたのが、上記のアレンジで移動の幅を失う様です。「.pagerNavLink」の幅を外側要素いっぱいに拡げ、センタリングする余裕を作ります。
また、新ページャーの上下の配置は、「LEFT」上端を基準に「top: 10px;」を指定してます。
.pagerNavLink {
font-family: inherit !important;
font-size: 16px !important;
white-space: nowrap;
position: absolute;
top: 10px;
width: 100%; }

他の指定行の説明は「変更に対処する (2)」にあります。

以上の赤文字のCSS指定が、新ページャを任意の高さに配置し、且つセンタリングをさせるための要点です。




[PR]
by Ataron | 2015-03-28 12:24 | ブログスキンのアレンジ | Comments(0)

明石公園 2015.03.26 キッズ2は現れたものの

2015年 03月 27日
休みが入り、久しぶりに公園に。

ポイントに近付くとママの姿が見え、しかし気になるキッズ2の姿は無い様子。 とりあえずママを相手に物資伝達を始めました。 今日はテニス大会の喧騒のせいでしょうか、集まって来る連中はハト、セキレイ、ヒヨっちが一羽ずつという、妙に落ち着いた物資伝達。
b0174191_23374074.jpg
小さなパンのカケラしか食べないセキレイ君が、真ん中にちょこんと写ってます。

2個目をママが持って行った時に、林の中でママに近付く影がありました。 そちらの方に物資を投げると、やっと林の暗がりから出て来て物資を取って行きます。 ただ、胸のあたりの羽が以前と違って少し白く見え、もしや抱卵しているのかとも考えてしまいます。 再び近付いて来たところを撮影しようとしたら、なんとさっさと何処かへ行ってしまったのです。
10mほど距離があるとはいえ、地上を歩いて近付き物資を取って行くのだから、キッズ2だろうとは思うのですが、1個だけしか取らず居なくなるのは今までとは違う状況です。 キッズ2は雌?という考えが頭をよぎります。

ママは、6個の物資をしっかり確保しました。 昔の量に換算すると10個分位になります。 キッズ2のことを考えながら帰り始めると、小川伝いにママが着いて来ました。
b0174191_23375042.jpg
今日は望遠を持っていません。 大池の端で残ったパンのヘタを配りました。 少し離れたところで叔父さんがハト達を沢山集めているので、私のところにはカモが数羽集まりました。
b0174191_23375964.jpg
意外なことにツグミが一羽、元気に走りまわっていました。 色々な春の花が咲き始めています。

+

EOS7D + SIGMA 28mm F1.8 で撮影、画像はクリックで拡大表示します。





[PR]
by Ataron | 2015-03-27 00:16 | 鳥さんの写真 | Comments(0)

明石公園 2015.03.16~21

2015年 03月 21日
スキン修復がとりあえず落着き、先週の月曜16日の撮影分の整理です。

この日は標準ズームと無線リモコンを用意して、パンのヘタに集まる鳥達を撮りました。
最初は大池の北端で店を開いたのですが、ハト達が沢山集まり、ヒドリガモの数羽もそれに混じって参戦。
b0174191_22354652.jpg
スズメ達よりも積極的なのがヒヨっち達で、ずいぶん近くの枝や柵で投げられるパンを待ちます。
b0174191_22400476.jpg
スズメとヒヨっちはフライングキャッチの技で他と差をつけるのです。 下は、ヒヨっちがキャッチする瞬間で、すごい俊敏さです。
b0174191_22414239.jpg
ハト達の中に左ユビ君が居ました。 先日現れたのもやっぱり彼だと確信しました。
b0174191_22454670.jpg
b0174191_22463729.jpg
他にもあつかましさを身に着けた者が増えた様ですが、左ユビはやることにソツがないのです。

この後、いつもの様にママ達のところへ。 地上にカメラを置きママ達が物資を取りに来るのを撮ってます。
b0174191_22571761.jpg
ハト君が物資を食べようとしている所にママが戻って来ました。 ママはカメラを警戒し、ハトはママを警戒し、両すくみになってます。

+

春分の今日は晴れ、公園に行楽の家族が増えつつあり、もう少ししたら桜の季節です。 今日はどうしたことかキッズ2が全く現れませんでした。 とても気になります。 ママだけを相手に物資を全て伝達しましたが、キッズ2には渡らないかもしれません。
b0174191_23052918.jpg
キッズ2を待つために間をあけて、2度目は林の中で物資伝達をしました。 でも、ママだけしか来ないのです。

+

EOS7D + SIGMA 17-50mm F2.8 EX で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2015-03-21 23:10 | 鳥さんの写真 | Comments(0)

Exブログ ページャー変更に対処する (3)

2015年 03月 21日
新ページャーの「< 前の」「次の >」ですが、やはり私は気に入りません。 私のページャーの基本にあわせて「< Newer」「Older >」に表示を換えることにしました。 またカラーリングも、私のページ配色に合わせることにしました。
表示書換えの際に、文字の枠アフレをさせ、溢れた文字を非表示にします。 この過程で、文字枠(スイッチ)の幅や周囲のスイッチとの間隔を調整するので、「ページャー変更に対処する (1)と (2)」のCSS記述を全て洗い直し、以下に纏めて整理しています。

+

新ページャーのアレンジに関するCSS追加記述 
   変更に対処する (1)~(2)の纏め
.pagerNavLink {
font-family: inherit !important;
font-size: 16px !important;
white-space: nowrap;
position: absolute;
top: 120px;
left: 240px; }

.pagerNavLink a {
background: #fff !important;  /* Default なので実際は省く行 */
border: 1px solid #bbb !important; /* Default なので実際は省く行 */
color: #0080c0 !important;
text-decoration: none !important;  /* Default なので実際は省く行 */
overflow: hidden; } /* 1 */

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

.pagerNavLink .current {
background: #66ccff !important;
border: 1px solid #888 !important; /* Default なので実際は省く行 */
color: #fff !important;  /* Default なので実際は省く行 */
font-weight: bold !important;  /* Default なので実際は省く行 */
overflow: hidden; } /* 2 */

.previous a::before {
content: "< Newer  "; } /* 3 */

.nextpage a::before {
content: "Older >  "; } /* 4 */

.pagerNavLink .current, .pagerNavLink a, .pagerNavLink a:hover {
min-width: 14px !important;   /* Default なので実際は省く行 */
margin: 0 4px 0 0 !important;   /* Default なので実際は省く行 */
padding: 1px 4px 0px !important; } /* 5 */

.pagerNavLink .previous {
margin: 0px 52px 0px 0px !important; }

.pagerNavLink .previous a {
padding: 1px 0px 0px 4px !important; /* 6 */
width: 76px !important; }

.pagerNavLink .nextpage {
margin: 0px 34px 0px 16px !important; }

.pagerNavLink .nextpage a {
padding: 1px 0px 0px 14px !important; /* 7 */
width: 64px !important; }

最初の「.pagerNavLink」の項は、ページャー全体のフォントと配置位置に関する項で、(2)稿に説明があります。

次の「.pagerNavLink a」の項は、ページャーに並ぶスイッチ文字の色や背景色(スイッチの色になる)等を指定しています。 /1/ の行の「overflow: hidden;」は、スイッチ枠から溢れた文字を非表示にして隠す指定です。

「.pagerNavLink a:hover」の項は、スイッチにポインターを置いた時の表示を指定しています。 元のはアンダーラインが出るので、これを止めています。(1)稿に説明があります。

「.pagerNavLink .current」の項は、現在選択されているスイッチの表示指定。 /2/の行を入れないと、このスイッチだけ高さ位置が揃いません。

「.previous a::before」と「.nextpage a::before 」の項は、「< 前へ」「次へ >」の文字の前側に、それぞれ「< Newer 」「Older > 」の文字列を追加する指定です。/3/と/4/の追加文字列は、最後に「半角空白文字+全角空白文字」を足してあり、元の文字列を確実に隠す様にしています。

それ以降の項は、「< 前へ」と「次へ >」のスイッチ幅や周囲との間隔を調整する指定です。
また、/5/と/6/と/7/の行で、padding値の最初(padding-top値)を1pxとして、スイッチ枠内で文字が少し上寄りになるのを修正しています。

+

以上の指定で、現在の私の新ページャーが表現されています。 スキンアレンジを試みられる場合の参考にしてください。




[PR]
by Ataron | 2015-03-21 03:30 | ブログスキンのアレンジ | Comments(0)

Exブログ ページャー変更に対処する (2)

2015年 03月 20日
前稿の「ページャー変更に対処する (1) 」で「表層」「深層」と書きましたが、ページングの方法が2種類になったのですね。

私のスキンでは、投稿文の上側と下側にページャー(旧)を配置していました。 下までスクロールしないと前後のページに行けないのは不便と考えるからです。

+

〔表層〕
新ページャーが導入されましたが、これは「表層」で機能します。 「表層」では、旧ページャーを機能させない様に、システムは旧ページャーに「前後ページのリンク」を割り振りません。 このため、本来旧ページャーが表示される場所が空白になります。
b0174191_00071341.jpg
b0174191_00072681.jpg
上側は旧ページャーが無い空白、下側は投稿文欄「POST」エリアの下側に新ページャーが表示され、その下側の旧ページャーは「PageUp▲」だけ残り、その両側は空白となりました。

+
〔深層〕
投稿の「タイトル」や「日付」などをクリックしたり、カテゴリ検索などから投稿を選んでクリックして表示させたり、あるいはブログ外の検索エンジンからリンクをたどって表示させた場合などでは「深層」が表示されます。 投稿内容は同じですが、新ページャーは消されて旧ページャーが働き、トラックバック/コメント欄が自動表示されます。 下の状態は、深層で旧ページャー(私はスキンアレンジしています)が完全に復活しています。
b0174191_00233294.jpg
b0174191_00235066.jpg

+

で、新ページャーの「表層」の状態、私のポリシーに反するので、新ページャーを上側の空いたスペースに移動させることにしました。
以下がそのCSS修飾です。
.pagerNavLink { 
font-family: inherit !important;
font-size: 16px !important;
white-space: nowrap;
position: absolute;
top: 120px;
left: 240px; }

最初の3行は、前稿に説明があります。
4行目「white-space: nowrap;」は、ウインドウ幅を狭くした場合に、新ページャーが上下に行崩れしない様に入れてます。
5行目「position: absolute;」がポイントです。 この指定で新ページャーの配置は、ブログを表示したウインドウ内の絶対位置に配置できる様になります。 基準位置は左上端で、6行7行で位置を指定しています。
このスキンでは、上側の旧ページャーの置かれる空間の位置は常時固定ですから、旧ページャーの配置に揃えて、新ページャーを配置するのは簡単です。(但し左右位置は、中央の指定が出来ず適当な位置としています。 〔追記〕これは、後に「変更に対処する (4)」でセンタリングを改善しました)

これで新ページャーも上側に表示され、上側の納まりが良くなりました。
b0174191_00450482.jpg

下側の「表層」状態です。 新ページャーが上に移動して無くなりスッキリしました。
b0174191_00485394.jpg



[PR]
by Ataron | 2015-03-20 00:52 | ブログスキンのアレンジ | Comments(0)

Exブログ ページャー変更に対処する (1)

2015年 03月 19日
月曜にページャー仕様が変更され、当初の影響は少なからずでガッカリしました。 すぐにDOMで状況を調べたところ、旧ページャーに使用されていたClass名等にCSS修飾変更が加えられたため、私のアレンジが無効化されたことが判りました。

+

修飾変更されたClass名は、私の使用していたものでは「pageTool」「pageimg」などです。 書換えられたCSS修飾の影響を回避するために、これらのClass名をそれぞれ「NpageTool」「Npageimg」と改めることにしました。 スキンアレンジで、HtmlとCSSの両側で書換えると、簡単に私のアレンジを復活できました。

但し、新ページャーは「表層」で機能し、旧ページャーは「深層」で機能するという2層構造が採り入れられていて、これには逆らえません。 旧ページャーは「前のページ」「次のページ」の表示に代わり、各飛び先のタイトル内容を表示するものになっています。(これは良いのですが、リンク先としてアンダーラインが出るのは見苦しい) ブログ外の検索エンジンから記事を直接開いた人は「深層」から表示されます。ブログ自体をリンクして時々訪れる人は「表層」から表示され、タイトル等をクリックしないと「深層」に入れません。 案外と複雑なシステムがより難解になりました ^^;

+

私のページでも表示される新ページャーですが、私のページデザインでは文字が小さくバランスがとれないので、以下の3項目のCSS修飾を施しました。

.pagerNavLink {
font-family: inherit !important;
font-size: 16px !important; }

Class名「pagerNavLink」は、新ページャーの本体です。
ページ全体のフォント指定(メイリオ準拠)を「inherit」でページャーにも指定させ、フォントサイズを「16px」に指定しています。 サイズは、私の新/旧ページャーで統一の値です。

.pagerNavLink .previous, 
.pagerNavLink .nextpage,
.pagerNavLink .previous a,
.pagerNavLink .nextpage a {
width: 75px !important; }

「< 前の」「次の >」の枠の値を指定。 文字幅の拡大に枠幅を合わせるため。
.pagerNavLink a:hover {
text-decoration: none !important; }

スイッチにポインターを乗せるとアンダーラインが出ます。 見苦しいので、アンダーラインを表示させない様にしています。

+

以上の3項目は、一般の方も参考になるかもしれません。



[PR]
by Ataron | 2015-03-19 23:28 | ブログスキンのアレンジ | Comments(0)

明石公園 2015.03.15 午後は雨

2015年 03月 15日
日曜ですが午後は雨予報。 午前の早い内に物資伝達を済ませました。 今日は標準ズームだけの軽装。 帰りがけに大池に行くと、よく餌をもらいに来るアオサギどんが居ました。

彼はおそらくこの公園で一番人を恐れないアオサギで、それ故に見かけた事がある人は多いでしょう。
b0174191_16405809.jpg
昔に傷めた右足を垂らしてますが、利く左足だけで器用にやってます。 いつも公園のこの池周辺から離れない様で、人から餌を貰うのにも慣れてますが、自分でも魚を捕れます。 パンのヘタをあげると、近付いて撮らせてくれます ^^;

+

EOS7D + SIGMA 17-50mm F2.8 EX で撮影、画像はクリックで拡大表示します。




[PR]
by Ataron | 2015-03-15 16:58 | 鳥さんの写真 | Comments(0)