Studio TA Subsite の案内とお知らせ

<   2015年 05月 ( 21 )   > この月の画像一覧

明石公園 2015.05.31 よく判らない!

2015年 05月 31日
日曜、晴れ、今日は昼過ぎに公園に出向く。 早めに行けば昔の様に PointOld でドッキングできるかもと期待したが駄目でした。

このところ West以外の場所に全く出て来ないのは謎です。 声が聞こえたのでWestまで行き、自販機の缶コーヒーを飲み始めたところで、樹の上のママらしい姿が目に入りました。 しかし、以前より何か警戒する様子で、物資を投げ置いても距離をとらないと降りて来ません。 写真は撮りづらく、物資に降りたのが全く知らないカラスではという疑念さえ生じて来ます。
b0174191_20143252.jpg
2個目の物資を、遠いとはいえ10m程の距離の地上で食べ始めるのですから、やはりママだろうと思うのです。 普通のカラスなら咥えてすぐに遠くに飛び去りますから。
でも、Westでは私との距離がやけに遠いです。
b0174191_20213862.jpg
Westから出てこなくなった理由が判りません。 気長につきあえば、何か判って来るのか、来ないのか... 5個の物資を伝達した後、無視されたパンのヘタを高めの枝に載せてWestの森を去りました。



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



[PR]
by Ataron | 2015-05-31 20:39 | 鳥さんの写真 | Comments(0)

スマホでどう見えるのか / Chromeのエミュレーター

2015年 05月 31日
周囲にスマホユーザーが増え、自分のページをスマホで見たらどう見えるか、これはスキンを弄くってるととても気になります。 で調べると、Google Chrome のエミュレーター機能が使えるらしく、試してみました。 アバウトな部分もありそうですが、業務レベルでなければ充分そうです。 IEもそのうち同様の機能を実装するのではと思います。

以下の画像は、クリックすると拡大して見易くなります。



Chrome で任意のページを開きます。(この例は私のページです)
あたりさわりの無い所(ここでは記事タイトル)を右クリックして、メニューから「要素を検証」を押します。
b0174191_08542551.jpg
これで「Developer Tools」というサブウインドウが開きますが、サブウインドウは消さずに放置します。
b0174191_08565354.jpg
メインウインドウは本来のブラウズ状態から「要素を検証」のモードになっていますが、左上隅の2箇所がスマホエミレーションのスイッチです。
b0174191_09241886.jpg
下図は「Select model」を押して「Apple iPhone 6」を選択しているところです。
b0174191_09263054.jpg
下図はこの選択後ですが、「Divice」の下に「375×667」が出ました。これが「iPhone 6」の画面サイズ、ウインドウ右端「- 0.4 +」が現在の拡縮率です。
b0174191_09474905.jpg
上の画像は、PC向け画面をスマホ画面幅に押し込んだもので、実際のスマホがPC向け情報をこの様に表示できるのか、私は知りません。

普通にスマホからアクセスすると、エキサイトブログの場合はスマホ向けにアレンジしたHtml/CSS(スマホ最適化スキン)を着けてページデータを返します。 その状態を見るためには、上図の状態から、ページタイトルをクリックするなどの方法で、このページを再ロードします。(上図のポインターは指先タッチを示すグレーの丸になっていますが、普通のポインター同様の左クリックが出来ます)
b0174191_10333676.jpg
これがスマホから見た(スマホスキンの)状態ですね。 ウインドウ右側に「- 1.0 +」と、iPhone6の画面と等倍表示であることを示しています。 各種のスマホからどう見えるか、おうよそ確かめられる有り難い機能です。

「iPhone 6」の選択を解除して本来の「要素を検証」に戻る場合は、左上隅の「Reset」ボタンを押します。
また、サブウインドウを閉じると「要素を検証」がOFFになり、Chrome 本来のブラウズ状態に戻ります。



興味津々で私のページを見てみましたが、ページャーが3箇所に表示されていること、宣伝が多いことなどが気になりました。
b0174191_10563372.jpg
後者は致し方ないとして、ページャーの方は私がスキンを弄くったためかと思いましたが、調べて見ると他のエキサイトユーザーの方も同様です。 複数のスマホ環境に対応した結果かなとも思いますが、実際のスマホユーザーにとってはどんな印象なんでしょう?




[PR]
by Ataron | 2015-05-31 11:04 | ブログスキンのアレンジ | Comments(0)

明石公園 2015.05.24 ママ来てたのか?

2015年 05月 24日
晴れの日曜、午後遅くに公園到着。 芝生広場に多くの人々、周回道路も色々な人々。 PointOldは絶望的で、すぐにWestに。

どこからかやって来て、高い梢から見下ろしていたハシボソに、パンのヘタを置いてみるが降りて来ません。 こちらを気にはしている様子で、茂みの中に物資を置いて離れていると、ようやく降りて来て私を見ながら取って行きました。 どうもママと違う様で、飛んで行った樹の枝に近付いてみると...
b0174191_21573726.jpg
未だ幼い子がいて、餌をねだっていました。

このカラス親子の他はというと、最近は妙に人馴れした感のあるムクっちが1羽。 パンのヘタを次々と3つ咥えてみせました。
b0174191_22080314.jpg
カラスは良くやってますが、案外みかけないテクニック。 シジュウカラ等もヒナに与える幼虫を何匹も一度に咥えたりしてますから、必要なら出来る鳥は多いのでしょうが。



その内に、ちょっと前に見かけたと思われるペアのハシボソ。(同じ樹に同じ様に来て休んでいたので) 前と同じ場所に物資を1個投げてみせるが、以前の様に知らんふり。 前はブトが来てさらって行ったが、今日は彼等だけです。 この持久戦、近くのベンチで待っていた私はつい居眠り。 でも、最後は片方が降りて、少しずつ近付いてゲットしました。
ところがこの後の行方は、乱入して来た数羽のハシブト達で判らなくなりました。 彼等は何が理由なのか、とにかく入り乱れて争っていて、ワーワー言いながら低空飛行で追いかけ合ってます。 面白いので撮影。
b0174191_22351174.jpg
彼等、人など気にしていないので、写真よりもっと近くをすり抜けて行ったのでした。



で、とうとうママ達は来なかったなぁと帰ってから写真を調べていると、最後の6時頃の写真はママらしい。
b0174191_22433004.jpg
かなり遠い撮影で、樹上の見える所にとまったので撮影したが、私に関心なさそうでママとは思っていませんでした。 空腹なら近寄って来たでしょうが、最近は愛想がありません。 嘴の根元がやはり少し変ですが、前よりマシかな?



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



[PR]
by Ataron | 2015-05-24 22:51 | 鳥さんの写真 | Comments(0)

せりだすメニュー こだわりの影

2015年 05月 24日
メニュー構造(せりだすメニュー)の更新」で、メニュー構造の大幅な変更をしましたが、影の設定に少し不満があり再びHtmlとCSSを更新しました。

下は写真と重なったメニューの影のサンプルです。
b0174191_13061302.jpg

下図の左側は「box-shadow」に透過を設定のない今までのもので、右側が透過設定を導入した結果です。
b0174191_13073183.jpg
飛出し部分は他の表示と重なるため、明らかに透過タイプが綺麗で違和感がありません。

また従来は、右側辺の影がメニュー本体の右に露出し、本体の影に濃淡が出ました。 これを誤魔化すため、「.MNTRAY」の影の右シフト量を減らす設定をしていました。 しかし、このせいで飛出した影の左端が微妙に良くありません。(下図の左側が従来で、右側が改善後)
b0174191_13171682.jpg
今回は、右側辺の影をマスクで隠し、メニューの右に出ない理想的な影演出に改めました。



右側辺のマスクのために、Html上で新しいブロック設定が不可欠です。 下はメニュー構造の模式図ですが、従来の「.MN」の内部に「.MN_L」「.MN_R」の2個のブロック(ピンク色)を作り、「.MN_R」を影のマスクとしています。
b0174191_19241222.png
そのままでは2個は縦方向に並ぶので、「.MN」に「display:table」、「.MN_L」と「.MN_R」に「display:table-cell」を設定して横方向の並びを実現しています。

下はメニュー部のHtmlの構成です。

<div class="MN_TOP"></div>
<div class="MN_BODY">
<div class="PROFILE">
<center><$description$></center>
<center><$logoimage type=1$></center>
</div>
<div class="MN">
<div class="MN_L"><$menuright$></div>
<div class="MN_R"></div>
</div>
</div>
<div class="MN_BOTTOM"></div>

関連して更新したCSS部です。

.MN_BODY {
background: #b8dcef;
border-radius: 6px;
box-shadow: 4px 4px 6px rgba(0,0,0,0.3); } /* 透過型に更新 */

.MN {
display: table; /* 追加 */
padding: 5px 0px 6px; }

.MN_L {
display: table-cell; } /* 追加 */

.MNTRAY {
width: 150px; /* 初期幅150pxが必須 ※M1 */
background: #b8dcef;
padding: 0px 5px 0px 15px; /* 右padding を10px減らしている ※M2 */
box-shadow: 4px 4px 6px rgba(0,0,0,0.3); } /* 透過型に更新 */

.MNTRAY:hover {
width: 240px;
position: relative;
right: 90px;
border-radius: 4px 0px 0px 4px;
margin-right: -90px; } /* 右側のMN_Rを飛ばさないため必須 ※M3 */

.MNSPACER {
width: 170px; /* 初期値170pxが必須 ※M4 */
height: 8px;
background: #b8dcef;
position: relative; }

.MN_R {
display: table-cell; /* 追加 */
width: 10px; /* 初期値10pxが必須、右側辺のマスク幅になる ※M5 */
background: #b8dcef; /* メニュー背景と同色 */
position: relative; } /* 影の上側に表示させるために必要 */

「display: table」を使うと、其々の「cell」は内容物に応じて横幅を広げ、「table」は外側の要素で指定した幅を無視して広がります。 これを抑えるために幅に関係する内容の初期値を全て指定する必要があります。( ※M1 ※M2 ※M4 ※M5

特に※M2 で「.MNTRAY」が、従来より左側に10px詰めて置かれています。 これにより、その右側辺の影はメニュー本体の影と重なることが無くなり、これをマスクすることで理想的になりました。
下は、マスクを外した「.MNTRAY」の影の様子です。
b0174191_13494798.jpg

下側のマスクは従来通り「.MNSPACER」が受持ちます。 これも「.MN_L」の幅を拡げる要素ですから、※M4 で従来より10pxだけ少ない幅に正確に指定しています。(追記:M4の指定を省いても、M1、M2の設定でMN_Lの幅が決まるので、不要と判りました)下図は「.MNSPACER」の背景色を白に設定したものです。
b0174191_14160600.jpg

右側辺のマスクは「.MN_R」が受持ちますが、これは全メニュー項目に渡る縦に長いマスクです。 「table-cell」を使ったので、高さは指定なしで横の「.MN_L」に同調します。 当然 ※M5 の横幅の指定は必要ですが、最初は ※M3 の指定が見出せずに苦労しました。

「.MNTRAY」が hoverした時に、
    position: relative;
right: 90px;

で「.MNTRAY」は左側に90pxせりだしますが(表示上)、元の場所では幅が150pxから240pxに拡大したエリアを保有するため、「.MN_R」は90px右方へ排斥され、見えなくなっていました。 この「margin-right: -90px」の指定で hover時の排斥分が補正され、正しい位置に縦マスクが表示されました。 下図は「.MN_R」の背景色を白に設定したものです。
b0174191_14313798.jpg


影の乱れは完全に払拭され、リアリティに富んだ透過影は満足です。




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

明石公園 2015.05.21 やはりWest

2015年 05月 21日
ウィークデイの公園は、やはり静かでコンタクトには適してます。 午後4時前、PointOldには人影もママ達の姿もなし。 しかし、Westに向かい球技場に近付くと「ガァー」という声が聞こえ、ママが少し高い木の枝にとまりました。 明らかに、私に対する挨拶です。
b0174191_18151295.jpg
ママがすぐ現れたのは良いが、嘴の根元が変です。
b0174191_18170069.jpg
何か金属製のモノがはさまってる様にも見えます。 いつもの通り元気そうですが、他にアップの写真がなく不明です。

キッズ2は相変わらず弱腰ですが、今日は久しぶりに食べるところを見せました。
b0174191_19084933.jpg
良い写真が撮りたいのですが、Westのここはベンチがなく距離が遠くなりがちです。 Oldでは状況に馴れていて近くまで来てくれるのですが。
ようやく物資を食べ始めたキッズ2ですが、今日もママが近付くとあっさり退散。 左がキッズ2で、未だ食べかけが残ってます。 人の常からするとちょっとカワイソウ。
b0174191_18283097.jpg
今日は、開封してしまった物資の1個を私が食べ、残り5個がママ達に渡りました。 ブトも来ず、キッズ2も叱られず、近頃にしては上出来です。



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



[PR]
by Ataron | 2015-05-21 18:37 | 鳥さんの写真 | Comments(0)

どうも気になる「送信」スイッチ

2015年 05月 21日
戻って来た同ウインドウ表示方式のコメント欄。 以前のものはアレンジしてウインドウ幅対応にしていたので、私のは余り変化がないのですが...

このコメント欄の「送信」スイッチは、デフォルトデザインがどうも気になります。 Chrome ではあまり気になりませんが...
b0174191_13572202.png
ここのフォントは漢字だと判りませんが「Meiryo UI」が選択されています。(これは「input」要素のタイトルだからでしょう) DOMを使用してHtmlで文字を追加すると、ひらがなやカタカナは縦長です。
b0174191_13574409.png
他ブラウザ等で予期しない結果とならない様に、ここの指定は親要素のフォントを「inherit」し(基本はMeiryoにしています)、サイズも親要素と同じ「1em」とします。
b0174191_14184719.png
僅か文字が大きくなりましたが、IEでは太字「bold」指定が裏目に出て美しくありません。(横線はまばらで、縦線のみ太っている) 「font-weight」に「normal」指定。 また「letter-spacing」値を「0.2em」として、文字の間隔を少し拡げました。
b0174191_14312079.png
最後の3行で、文字位置の上方へのズレ修正と、スイッチの縦幅調整(トラバ欄スイッチに合わせてます)と、文字色指定をしています。
b0174191_14392410.png
以上の調節を纏めたCSSが以下です。

.COMMENT input[type='submit'] {
font-family: inherit;
font-size: 1em !important;
font-weight: normal;
letter-spacing: 0.2em;
height: 2em;
line-height: 2em;
color: #0080c0; }

少しはマシになったでしょうか? 「漢字」はフォントとしては大変に扱い難い種類ですね。 これが「英数字」だと殆ど苦労はないのですが。



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

明石公園 2015.05.17 Go West

2015年 05月 17日
前回残った物資に少し新しいのを追加し、午後3時過ぎに公園にやって来ました。 晴れの日曜は家族連れが多め、鳥さんと遊ぶには余り適さない状況です。

やはりママ達は PointOldに不在。 SouthやWestを探してはまたOldに戻り、再びPointWestに行ったところで、やっとママ達が高い樹の上に飛んで来ました。 午後4時頃です。
b0174191_23042406.jpg
PointWestには屋外球技場があり、この付近はハシブト達も多いのですが。 やって来たのは更に西の方からで、公園西端側の林か、それより西の伊川河川敷からかもしれません。

最近はWestの森の中での物資伝達ばかりですが、やはり物資に対する執着が薄い様です。
b0174191_23122104.jpg
キッズ2はとても遠くで見ているだけ、ママが2個を持って行った所でキッズ2とママがまたもめた様子。 直後にブトが一羽現れて完全に輸送が中断しました。 その後、ママ達がまだ樹上にいたので、彼等から見える球技場の芝地に物資2個を置いて遠くで待っていると、キッズ2とママがそれぞれ咥えてやって来た西の方向に飛んで行きました。
今日の伝達はそれだけ、私の方は少し物足りませんが...



PointOld でパンのヘタをスズメ達に。
b0174191_23241893.jpg
今は幼い子達の囀りが、そこらじゅうから聞こえて来ます。 子供は親に付いてまわって食べ物をねだり、親はひっきりなしの要求に応えてます。 中には自分でパン片をゲットできる子もいる様です。

この季節に見かける地上の雲の様に見える、細かな花(実?)を沢山着けた背の低い草。 拡大して撮ってないので良く見えないけど、シラツメ草とコラボしてます。
b0174191_23242630.jpg
昔は余り見なかった草だけど、自分の目が曇ったのかと思わせることがあります。



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






[PR]
by Ataron | 2015-05-17 23:39 | 鳥さんの写真 | Comments(0)

トラックバック欄/コメント欄の区別をはっきりさせる

2015年 05月 17日
トラックバック機能は余り使われているのを見かけません。 私自身が殆ど使わないのですが、トラックバックを設定してブログ投稿するのが適当と思われる場面が、めったに無いからです。 一般の市民権を得るに達していない感のあるトラバ機能ですが、今後に有効な意味を見出す可能性も否定できないので、私はこの機能をOFF設定する事はしていません。



コメント欄とトラックバック欄は、対になっています。 ちょっとトラバ機能を使用する例を書いてみましょう。

Aさんの記事のトラックバック欄からトラックバックを設定して私Bがブログを書くと、その投稿内容の初めの一部が、Aさんのトラックバック欄の下側に、あたかもコメントの様な形で登記されます。 これがトラックバックで、私Bのブログ記事の紹介リンクがAさんの記事上に作られたわけです。

Aさんにとっては、私Bからコメントを貰った形に似ていますが、その内容の本体は私Bのブログ記事にあり、短い文字だけのコメントでは著しきれない内容がある場合に有効だと思います。

トラックバックの発端は、Aさんの記事を私Bが閲覧したことにあります。 その記事に何かコメントしたい場合、Aさんのコメント欄にコメントを書き込みますね。 しかし、コメントの代わりに色々と表現できるブログ記事を書いて、その記事の所在をAさんに知らせるのがトラックバックです。

Aさんのコメント欄で「Aさんのこの記事に対して関連記事を書きました。リンク先は私Bのブログです」とリンクを記述しても同じことですが、これを定型化した機能がトラックバック機能です。 コメントと違って慣れていないために、トラバを受けたAさんが違和感を感じたり、あつかましいなと思うかもしれません。(そんな場合を考えて、トラバにもブログ所有者の承認制を設定することが出来ます)



トラックバック欄とコメント欄は対になっています。 コメントはコメント欄の上側に並べられますが、トラックバックはトラックバック欄の下側に並べられる様です。 下図は実際にテスト送信してみた様子です。 上から2件のトラックバック、2件のコメントの順に並んでいます。
b0174191_02101125.png


何もコメントやトラバが無い状態は、私のスキンでは以下の様になります。
〔ログインしたエキサイト会員が見た場合〕
b0174191_02163625.png
〔ログオフしたエキサイト会員や一般の人から見た場合〕
b0174191_02180614.png
この何もコメント等がない状態で気になるのは、上側のトラックバック欄と下側のコメント欄の区別が付きにくい事です。
トラックバック機能が理解されていない場合、コメントをしようとする人にコメント機能の一部と思われてしまうかもしれません。 出来るだけそれを避けるために、間に境界線を入れています。(いっそのことトラバ機能をOFFに設定すればすっきりしますが)

また「トラックバックする(会員専用)」をスイッチデザインにしました。 これでより下側のコメント欄との独立していることを示したつもりですが...



トラックバックの承認制を設定すると、コメント承認制と同様の注釈が入りました。(自分の側にはこれは表示されず、ログオフすると表示されます)
注釈は全く新たにHtmlにインポーズされたので、下図の様にコメント側の注釈とデザインの統一がありません。
b0174191_19484251.png
「トラックバックする」のスイッチデザインは、コメント欄の「送信」スイッチのデザインを利用していますが、このスイッチの行間隔を「300%」に拡げました。 これは、直上のトラックバックURLの行とスイッチが近すぎるからです。

.TRACK_TOP a:nth-child(3) {
border: 1px solid #ccc;
border-radius: 3px;
background: linear-gradient(to bottom, #fff 0%,#d6eff8 100%);
padding: 0.23em 4em 0.12em; /* スイッチの体裁 */
line-height: 300%; } /* スイッチの上下周囲を拡げる */

.TRACK_TOP a:nth-child(3):hover {
background: #edf8fc; }

上CSSの4行目まではボタンデザインで、丸みと立体感を出しています。
「padding値」はスイッチの大きさと文字の位置調整。「em」単位の指定にしたのは、ブラウザの文字サイズ変更でバランスが崩れにくいからです。

次に、トラバ承認制の注釈を修飾しなおしました。 セレクタは隣接セレクタ「+」を使用しています。 下は「トラバ/コメント欄」のHtml構造です。
b0174191_20515822.png
着色部分は、ログアウトした状態(会員外も同じ)でインポーズされる注釈です。 これは「div.TRACK_TOP」の直後にインポーズされる「div要素」であり、その後にコメント欄が繋がった場合は「input要素」(コメントするのスイッチ)が来ます。 セレクタの表記として「div.TRACK_TOP の直後に隣接したdiv要素」としました。
これは、ログインして着色部が無くなった場合に、直後は「input要素」になるため、修飾が他の要素には実行されず都合が良いからです。
下が、このトラバ承認制の注釈のCSS修飾です。

.TRACK_TOP + div {
font-size: 0.8em !important; /* x-smallを0.8emに変更 */
font-weight: normal !important; /* boldをnormalに変更 */
line-height: 120%; /* 折返しが生じた場合、行間を狭めに */
padding: 0px 40px 20px;
margin: -20px 0px 10px; /* 10pxはコメント欄との仕切線になる */
background: #d7e3ec; } /* 背景色をトラバ欄と同色にする */



 (1)トラックバック欄( .TRACK_TOP )
 (2)トラバ承認制の注釈( .TRACK_TOP + div )
 (3)コメント欄( .COMMENT_INPUT )
は、ログオン時は(1)(3)、ログオフ時は(1)(2)(3)が並びます。 間の境界線は常に1本にしたいのですが、簡単には(3)の上側に境界線を付ける方法が浮かびます。 しかし、これはコメント欄が単独で表示(ページング表層表示)された時に、たいへん体裁が悪い^^;

そこで、(1)(2)側の下部に境界線を付けたのですが、やはりトラバ欄の単独(ページング表層表示)では、不要な境界線が出ます。 体裁上はこちらがマシですが、他に良い方法が見つかりませんでした。

この方法の場合、ログオフ時に(1)(2)両方の境界線が出てしまいます。 これを避けるため、(2)の承認制の注釈は上マージンを「-20px」として、直上の(1)の境界線を隠す様にしています。
b0174191_22561189.png
更に下側に(3)のコメント欄が連なって、間に「10px」の境界線が表現されるという按配です。



最後にコメント欄の方は、各行の間隔を詰め全体のバランスを改めました。

.ciForm_name, .ciForm_url, .ciForm_comment,
.ciForm_private, .ciForm_captcha, .ciForm_passwd {
margin: 0px 0px 4px !important; } /* 下マージン10pxを4pxに */

以上の修飾で、最初よりバランスが落ち着いたと思います。
b0174191_20244183.png




[PR]
by Ataron | 2015-05-17 02:50 | ブログスキンのアレンジ | Comments(0)

明石公園 2015.05.15 遅すぎた

2015年 05月 15日
不定期休で金曜の公園に。 天気は曇りがち、公園に着いたのは夕方6時前。 1時間もあればやって来るだろうという読みは外れ、ブト達が何度かポイントに来るが、ママ達は結局一度も現れず。

日が暮れない内にと Point Westを何度も探していると、ハシボソのペアに出会いました。 高い枝に居て逃げはしないのですが、物資を投げてもぼんやり眺めているだけ。 ママだとほぼ間違いなく降りて来るので、彼等はママ達ではなさそう。
b0174191_22484408.jpg
逆光で顔が判りづらい写真ですが、顔付きやすぐ横に並ぶ事などから、やはりママ達ではないでしょう。 親戚とか親離れした兄弟という可能性はあるでしょうけれど。 そういえば、ママ達は殆どこんな風にしっくり納まらないから、やっぱり親子なのかなぁ。

彼等に投下した物資2個は、後から現れた2羽のハシブトが持って行きました。 全くドッキング出来ないという日も、たまにあるということです。



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




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

コメント投稿機能の仕様変更に対応

2015年 05月 15日
コメント投稿機能の仕様変更が5月12日に完了した様です。 今回の仕様変更で、以前の様な「ブログページ内のコメント投稿欄」の方式が選択可能となりました。 この方式に変更する手順は、以下のリンクに説明があります。

  コメント投稿機能の仕様変更が完了しました 5/12



早速に切替えて DOMで調べてみました。 以前のコメント欄は「table」を使ったHtml記述でしたが、今回は昔のデザインを踏襲しながらも「table」を使わず、また、ウインドウ幅の拡縮に応じてコメント枠幅が拡縮する様に改められています。

私の不足を感じた部分は、各記入枠の文字フォントやサイズです。 ウェブデザイナーの大人の理由があるのかも知れませんが、小さ目な固定文字サイズ、「MS-Pゴシック」(WinOSでは)など、私にはとても見づらい指定です。 また、この方式では「コメントする」スイッチは全く意味がありませんね。

上記の問題の改善と供に、記入枠の「各タイトル」に案内説明を追加しました。 意味の明らかでない記入枠は不親切で、訪れる人がネットに慣れた人ばかりと限りませんから。



システムが更新された時点では、当方のコメント欄は以下の様な状態でした。 私の以前からのCSSアレンジを反映した部分と、過去デザインとは異なる妙な部分があります。 コメント欄のHtmlやCSSが書き直されたので当然ですね。
b0174191_16453462.png
(1) 「コメントする」のスイッチは不要です。
以下の項目を追加して表示を消します。(機能が失われるわけではありません)
.COMMENT input[type='button'] {
display: none; }

(2)(3)(4)(5)(6) タイトルや記入文字は、フォントはメイリオ、サイズはページ全体の基本サイズ(small)とし、タイトル文字色はブルー、記入枠内は黒(デフォルト)に統一。
.ciForm_ttl {
font-size: 1em !important; /* タイトル(2)(6)の文字サイズ */
line-height: 1em !important; /* (2)(3)の文字高さと枠位置の整合 */
padding-top: 0.6em; /* (2)(3)の文字高さと枠位置の整合 */
color: #00f; } /* タイトルの文字色をブルーに */

.COMMENT input[type='text'], .COMMENT input[type='password'], .COMMENT textarea {
font-family: inherit; /* (4)を含む全記入枠フォントをページ全体(メイリオ)に準拠 */
font-size: 1em !important; } /* (4)を含む全記入枠の文字サイズ */

.COMMENT input[type="text"], .COMMENT input[type="password"] {
padding: 0.2em 0.6em 0em !important; /* (2)(3)の文字サイズと枠位置の整合 */
line-height: 1em !important; /* (2)(3)の文字サイズと枠位置の整合 */
height: auto !important; } /* (3)の文字サイズと枠高さの整合 */

.ciForm_private label {
font-size: 1em !important; /* タイトル(5)の文字サイズ */
vertical-align: 0px !important; /* タイトル(5)の文字縦位置の調整 */
color: #00f; } /* タイトル(5)の文字色をブルーに */

(7) コメント承認制の説明、文字数が多く、文字サイズ「0.8em」に指定。
.ciForm_message {
font-size: 0.8em !important; /* 文字サイズを0.8emに指定 */
border: none !important; /* デフォルトの仕切り線を削除 */
padding: 0px 10px !important; } /* 文字列のインデント配置 */

(8)「送信」スイッチの文字を大きくして着色、またスイッチ横幅を調整。
.ciForm_submit {
padding: 0px 10px; } /* スイッチ横幅調整 */

.COMMENT input[type='submit'] {
font-size: 1em !important; /*スイッチ文字のサイズ */
color: #0080c0; } /* スイッチの文字色 */



(2)(5) に説明を追加。 説明の文字サイズ「0.8em」、文字色「#777」に統一。
.ciForm_name .ciForm_ttl, .ciForm_url .ciForm_ttl {
width: 8em !important; } /* (2)の説明の文字列分の横幅確保 */

.ciForm_name .ciForm_ttl::after {
content: "(ハンドル名)"; /* 名前の説明の文字列 */
font-size: 0.8em; /* 文字サイズ */
color: #777; } /* 文字色 */

.ciForm_url .ciForm_ttl::after {
content: "(省略可です)"; /* URLの説明の文字列 */
font-size: 0.8em; /* 文字サイズ */
color: #777; } /* 文字色 */

.ciForm_private label::after {
content: "(チェックすると、ブログ所有者だけが読めるコメントになります)"; /* (5)の説明の文字列 */
font-size: 0.8em; /* 文字サイズ */
color: #777; } /* 文字色 */

(6) に説明を追加。 説明の文字サイズ「0.8em」、文字色「#777」に統一。
.ciForm_passwd .ciForm_ttl {
width: 22em !important; } /* (6)の説明の文字列分の横幅確保 */

.ciForm_passwd .ciForm_ttl::after {
content: "(登録されたコメントの削除に必要)"; /* (6)の説明の文字列 */
font-size: 0.8em; /* 文字サイズ */
color: #777; } /* 文字色 */



以上のCSS追記がデザイン修正の主なポイントです。 他に、パネルの背景色範囲などを修正して、下の様なコメント欄に纏めました。
b0174191_16454396.png
縦幅はコンパクトになったが、タイトル文字や記入文字が大きく見易くなっています。



〔追補〕
以前と異なる点として、スパム対策の導入があった事を思い出しました。 「コメント・トラバ設定」から「画像認証」を設定すると、コメント欄に認証の項目が追加されます。
b0174191_20031782.png
画像認証のタイトルや記入枠も、他項目と同様に修飾されていました。 私は画像認証はOFF設定でどうでも良いがひと安心です。



ちなみに、Exciteからログオフしないと、上記の様な「会員以外から見たコメント欄」の状況が確認できず、デザイン修飾が出来ません。 ところがブラウザのクッキー機能が働くので、ログオフ・ログインが大変手間です。 そこで、IEを「InPrivateブラウズ」で起動すると、簡単に「会員以外の参照」と認識され、ログオフ状態がテスト出来ました。 これは便利です。



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