Studio TA Subsite の案内とお知らせ

タグ:ブログスキン ( 140 ) タグの人気記事

エキサイトブログ / Exヘッダーのシステム変更に対処

2017年 03月 23日
エキサイトのヘッダー仕様が変更になり、ページの上部(これは個人固有のヘッダー)が下にもぐった表示になってしまいました。 ウチの変更は3月23日の夕方、ちょうど編集画面のスキンを調整中だったので、最初は自分のミスかと思って混乱しました。 告示は以下。


こんなの、予告なしに施行してはいけませんね。 ヘッダー部はページデザインの重要な所ですから、きっと沢山の人がむっとしたでしょう。 有料会員でヘッダーを無しにしている場合は影響がないでしょうが、上が潜らないスキンデザインがあったら教えて欲しいもんです。 エキサイトは「スキンをアレンジしている場合」などと言ってますが、皆んな上が減っていて、ただデザインがおうよそで気付き難いスキンもあるだけでしょう。

私のところのは、

#W_HEADER {
margin-top: 28px; }

を追加、つまりヘッダーのブロック「W_HEADER」の 上マージン を28px 増やしただけで解決しました。 青文字の内容は多くのヘッダーで有効でしょうが、ブロックのID名はスキンにより異なり、また、特殊なヘッダー構造のスキンでは、もう少し細かな調整が要るかもしれません。

b0174191_21221523.png


〔追記〕2017.03.24
iframeの扱いが難しいのか、上記対処をしたのちにチェックすると、何度かリロードすると以前の様になったり、上部が潜り入ったりと、表示が不安定でした。 他の方のページを幾つか調べると、エキサイトヘッダー無し以外のスキンは全く同じ現象で、素人が作ったスキンみたいです。

で、一日経過後に、どうやら以前のシステムに差し戻しがあり、私のスキンは現在は上が開いてしまいました。 今後、iframe化を諦めるのか、再び調整後に施行されるのか様子見です。

エキサイト側で配布した全体のスキンを調整するのは大変なので、再施行されるとしても上部デザインを浸食しないものとなると思われ、私の方も修正を戻しました。





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

リッチリンクのアレンジ:横幅を拡げ 高さを減らす / エキサイトブログ

2017年 03月 15日
エキサイトブログの「リッチリンク」は、現在のネット上で良く見かける「絵入りリンク」機能をブログ文書に採用したものです。 従来のリンクは文書上の文字や絵などをリンクスイッチにしていましたが、これはリンク先から「挿入画像」「記事タイトル」「記事の導入部」等を取り込んだ小型の枠をリンクのスイッチとします。 リンク先の内容を豊富に伝えて、読者が見に行くかどうかの判断をし易いものです。

この利点はニュースのページでは最大限発揮され、もはや無くてはならないものです。「iframe」という機能で他ページをインポーズするので、リッチリンクは普通のリンクよりページの読み込みが遅くなりますが、大量に設置しなければ問題になるほどの事はないでしょう。



この機能は、周囲行との間隔が気になり少しアレンジしましたが、マウスが上に来ると若干上下にスクロールする欠点がありました。 改善点のひとつはこの防止です。

もう一つは高さを抑えた事です。 下図はデフォルトデザインの例ですが、赤枠の部分にリンク先のサイト名が表示されますが、私の場合は自ブログ内リンクが多くて意味がないので、青枠の部分のみ残してスリム化しました。

b0174191_18185015.png

一方、下図の様に他サイトへのリンクは、リンク先サイト名が明示した方が、リンクを押す人には安心できて好ましい場合があります。

b0174191_18185928.png

そんな場合は、赤枠部分も表示する選択を、文書作成時にHtml編集で指定できる様にします。

アレンジはスマホ表示も考慮に入れています。
◎スマホの表示を考慮して、リッチリンクのHtmlコードを文書作成時にHtml編集画面で修正
◎PCの表示は、上記HtmlをブログスキンのCSSで上書き修正する。(これはスマホ表示には無関係)
◎PC表示の2つの型の選択は、Html編集画面でCSSを選択して指定する。
という手法です。

このアレンジを導入した場合、リッチリンクを設置するたびに、「スマホ対応の修正」「PC表示の型の指定」をHtml編集で書き込むという様式になります。 なお、このHtml編集をしなければ、デフォルト型のリッチリンクが表示されます。



 スマホ表示のアレンジ 

これはリッチリンクの「高さ」と、その下部行との隙間を調節する目的です。
下は、リッチリンク(小型)の選択で自動生成されるHtmlコードの一般形です。

<div>
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 180px;
max-width: 520px;
margin: 10px 0;">
</iframe>
<br>
<br>
</div>

上のHtmlの赤文字と青文字の部分を下の様にHtml編集で修正します。

<div class="rlink">
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>
</div>

赤文字部分の修正により、スマホ画面での上下行との間隔が適切に修正されます。 また、青文字部分は、ブログスキンのCSSによる修飾を準備するものです。
(なお、スマホ表示は、リンク先サイト名の省略はしない形です)

 PC表示のアレンジ 

ここまでは従来と同じですが、PC表示の修飾するCSSを改善をしました。
以下は、ブログスキンに登録するリッチリンク用の2項目のCSSです。

.rlink {
overflow: hidden;
width: 496px;
height: 118px;
margin: 0.72em auto 0.88em;
border: 1px solid #aaa;
border-radius: 6px; }

.rlink iframe {
width: 520px !important;
height: 180px !important;
margin: -10px 0 0 -10px !important; }

「iframe」がスクロールしない様に、その高さをスマホ対応の修正の前の「height: 180px;」に戻して指定しています。 その状態の「iframe」をマスクする「.rlink」は、以前より広い幅「 width: 496px;」以前より低い高さ「height: 118px;」を指定して、スリム化しました。 この結果、PC表示は下図の様になります。

b0174191_20044320.png

上下に小幅のスクロールをするのが、これで改善されました。



更に、エキサイト外部へのリンクの場合などでリッチリンクの高さを拡げたい場合、「height: 154px;」を追加修飾するだけで良いので、ブログスキンのCSSに1項目を追加して、文書作成時にHtml編集でその項も指定します。

高さを拡げる場合は、Htmlで全体を囲む <div class="rlink"> の部分を、下の青文字の様に複数クラス指定に変えます。

<div class="rlink rlink_ex">
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>
</div>

この追加されたクラス「rlink_ex」には、以下の1項目のCSSをブログスキンに登録しておきます。

.rlink_ex {
height: 154px !important; }

複数クラス指定をしたリッチリンクは、「height」の指定だけ「.rlink_ex」の方が優先され、118px → 154px と、高さが拡がって表示されるという塩梅です。

〔追補〕
リッチリンクのアレンジの経緯や詳細は、下のリンク先に纏めています。
  リッチリンクのアレンジ / Studio TA Subsite



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

公式スキンの整理について

2016年 12月 07日
公式スキンの整理が行われたのですが、少し気になった事を。

■ユーザー意思を伴わないスキン変更を伴うにしては、予告通知が思った以上に静かなものだった。
■それに対する否定的な反応が、エキサイトブログ向上委員会のコメントには寄せられなかった。

これは、見落としていた人が必ずいるだろうと思わせる成り行きでした。 該当するスキンの登録者に対して、エキサイトとして通告コメントを送信する事は出来ないのかなと思ったものです。 予告通知の表示が控え目で、事前に話が大きくなると反対意見が出て実行しにくくなる(反対を押し切った様に見える)という判断だったのか?

旧い時代のHTML規格やブラウザ条件を抱えた旧い公式スキンの整理は、それらのサポートやメンテを考えると必須と思われます。 これを拒むユーザーには、理解を求めれば良いと思うのですが。 多数の様々なユーザーを相手にするには、色々と大人のやり方が必要なのかも知れません。


今後に、「後から知ったが、なんて事するんだ」的なユーザーがどの程度出て来るのかと思いますが、私は旧スキンのバックアップを、サポート外の条件付きで公開すれば良いのにと思いました。

スキンのバックアップは、スキンアレンジをしないユーザーにとって(そちらが圧倒的に多いのかも)は無縁の作業でしょう。 しかし、ひとつのスキンのデータ容量はたかが知れたものです。 スキンの背景画像や部品画像と、テキストのHTMLとCSSだけですから。 これらをアーカイブして、旧いスキンに拘るユーザーはダウンロードして、マイスキンに出来るようにしてやれば、免責になるでしょう。

家電メーカーなどは、サポート期間の終了した製品の各種のアーカイブを作って、段階的なフェードアウトを工夫していると思います。 要らぬ仕事が増えるだけでしょうか。 でも、そこまでやってくれるエキサイトって大好きと、言われるようになるかも知れません。


b0174191_10473900.png








[PR]
by Ataron | 2016-12-07 05:26 | ブログスキンのアレンジ | Comments(0)

公式スキンの55種が廃止される件 / エキサイトブログ

2016年 11月 13日
2016年12月6日 をもって、エキサイトブログの55種の公式スキンが整理される予定です。

該当する公式スキンを指定しているユーザーは、自動的にシンプルな公式左カラムにスキンが置き換えられます。 詳細は以下をご覧ください。

上記ページに整理対象のスキンが載っています。 数が多くかなりのユーザーが対象になりそうですが、ブログ「設定」画面の一部に大人しく告知がある程度で、こんなのでいいのかなと思ってしまいます。



該当するスキンを使っていて、どうしても今後もページデザインを変えたくない場合は、12月6日までに、以下の私のページの手順で、公式スキンのマイスキン化をされる事をお勧めします。 (既に少しでもアレンジをして使っている場合は、その必要はありません)

これは、公式スキンのコピー(マイスキン)を作り、それをスキンに設定する作業です。 最初に挙げた向上委員会ページの告知では、該当スキンをもとに編集された「マイスキン」は差し替え対象外となっています。 この理由で、マイスキン化したスキンの場合は、従来のスタイルを維持できるわけです。

なお当然、マイスキン化してもサポート対象外となりますが、スキンの不具合を認めた段階で別のスキンに換えれば良いだけです。 その様な不具合が生じる可能性や時期など、現状では推測出来ないのですが、スキン変更で解決しますから慌てる必要はありません。 また若干のCSSの知識があれば、殆どの場合に簡単に修復可能と想像されます。



今回の公式スキンの整理は、ブログシステムの宿命だと思います。 時代とともにHTMLの規定もブラウザも進化更新され、新しいデザインや機能を採りいれないとブログ会社は見捨てられます。

告知の中で、『サポート体制の向上において、ご利用者数やトレンドを鑑みた結果、一部のPCデザインスキンの提供を終了』とあります。

何かシステム上で改善や改編を行う際、大量の公式スキンを配布していると、その更新が与える影響を検証するのは大変です。 告知は、余り利用されていなかったり、流行る傾向がないPCスキンをこの際に省き、今後のチェック(サポート)の労力を減らしたいのだと受け取れます。 また、これは推測ですが、旧い時代のスキンが、新しいコードや機能の導入の足枷になって来る場合もあり得ますね。 ブログもネットの流れの上のものだと自覚が必要です。

私の様にオリジナルに近いスキンを使用している場合は、エキサイトシステムの側で変更があり、それが私のページに影響がある限りで(そうそうは無いのですが)対処する事になります。 これは、私に貴重な経験を与えてくれて、決してマイナスな問題ではありません。 それがおっくうなら公式スキンを使うまでですから。

今までもそうですが、今後にもエキサイトのシステム上の変更を察知したら、このブログ上で報告したいと思います。



[PR]
by Ataron | 2016-11-13 11:39 | ブログスキンのアレンジ | Comments(0)

エキサイトブログ向上委員会が機能している件

2016年 11月 02日
先日、一人のユーザーから、エキサイトブログ向上委員会にコメントがありました。 内容は公式スキンの「Sea」に変えたところユーザーメニューのリンクが機能しないというものでした。

へぇーと思ってその方のブログを見に行くと、ユーザーメニューの文字は表示されているものの、確かに押せません。 現在は改善されたのですが、下の所にマウスを持って行っても手の形にならないのです。

b0174191_13151169.png

最初は機能していたのが、デザイナーが色々推敲している内に、こうなったのだろうと思います。 ユーザーメニューの文字が表示されているのでエラーを見逃し、実際のユーザーの指摘で不具合が見つかったわけです。 公式スキンの新型をどんどん配布するエキサイト、中には見向きもされないのがあるでしょうし、完璧にチェックしていなかったデザイナーを責めるのもと思う一件です。



この部分のコードを見てみると「ユーザーメニュー」と「タイトルと背景画像」が並んでます。 下図は「タイトルと背景画像」のCSSを右ウインドウに表示したところで、ディスプレイ上の前後の重なりを指定するプロパティが「z-index: 1;」です。

b0174191_14063428.png

一方「ユーザーメニュー」は、最初は「z-index」の指定が忘れられていました。 HTMLで後に「タイトルと背景画像」を記述しているので、タイトルの要素が上になり、その透明部分がカバーして押せなくなっていたのです。 この場合、「ユーザーメニュー」に「z-index: 2;」を指定すると問題が解決します(zの値が大きい方が上面になる)が、これはエキサイト側で修復しないと「Sea」を使うユーザーの不具合の解決になりません。



このスキン「Sea」の配布は 2016年07月28日、ユーザーの報告は 2016年10月30日 で、けっこう長い間不具合が放置されていた事になります。 不具合に気付いてもエキサイトに報告する人は案外少ないのかもしれません。 この不具合は、フリー会員ならエキサイトヘッダーの側でまかなえますが、指摘したユーザーは有料会員だったので、仕方なくエキサイトヘッダーを表示させていた様です。

エキサイトブログ向上委員会にトラブルの報告や改善の依頼が幾つも寄せられます。「要望」に関しては、システム上の問題やエキサイトの運営方針が関係するので別件です。 しかし、今回の様なエキサイト側に原因する不具合に関し、向上委員会にコメントしたら効果があるのか気になりました。(ユーザー側の不手際による問題の場合は、どうやら放置されるものもある様です)

結果は今日の午前に、つまり約5日後に公式スキンが書換えられて改善しました。 下図は「ユーザーメニュー」のCSSを右側に表示した所ですが、以前に無かった「z-index: 100;」が追加されました。

b0174191_14070785.png

他に小変更があったかも知れませんが、とにかくユーザーの声が届いてなにより。 コメントした方にコメント欄では返事がない様ですが、本人にエキサイトから返事が行ったかどうかは不明です。

でも「z-index」の値、なにも「100」にしなくてもと笑っちゃいました。 いえ、こういうの「10000」とか「絶対一番表に表示!」という気分で書くプログラマもいるんで、まともはまともなんですけど。



こんな事を書いている間に、エキサイトはどんどん新しいスキンを出してます。 今回のは、私のトップメニューの様な横メニューで、タイルスタイルもそうですが、ブログにとっては新基軸のデザイン採用にやぶさかではない様です。

この、水平メニューからエキサイトのメニューが出る様にしたい所ですが、スクロール表示にでもしない限り縦に長くなり過ぎて苦しいかも。 再アレンジして、私的なリンクを纏めるのにはちょうど良い様に思います。 がんばれエキサイト。



[PR]
by Ataron | 2016-11-02 14:13 | ブログスキンのアレンジ | Comments(0)

ブログスキンのアレンジの第1歩

2016年 10月 30日
エキサイトは公式ブログスキンを豊富に用意していますが、ちょっとアレンジして自分のセンスを反映したいと思う人は多いと思います。 エキサイトはスキンのアレンジに関しては寛容です。 システムは強固ですから、ユーザーが間違って変なスキンコードを書き込んでも、ブログの投稿データ自体は安全です。 また、アレンジに失敗してデザインが崩れても、公式スキンに戻せば元通りになります。

しかし、ブログ公式スキンは「書き換え不可」なので、アレンジの最初で判り難い部分があります。 アレンジを反映するには、マイスキンに一旦登録してから、それをスキンに設定する遠回りが必要なのです。

ここの説明は、もっとも判り易い手順書をめざしました。 初めて自分の使っている公式スキンをアレンジする場合の手順で、そのスキンに関してアレンジが反映された後は必要ありません。



 公式スキンをアレンジ可能にする最初の操作 

●ブログの設定画面で①の「デザインスキン」を押すと、下の「PCデザインスキン」が表示されます。 この画面で➁の「編集」を押します。

b0174191_13392872.png

●下の様に「PCデザインスキン編集」が表示されます。 この画面で➂の「作成する」を押します。

b0174191_13440548.png

●これで、現在使用中のスキンのコピーがマイスキンに作成されます。 画面は下の様に最初に戻りますが、下側の「スキン選択」が「マイスキン」の選択になっている事に注意してください。

「マイスキン」は、これまでに使用したり作成したスキンの保存場所で、自分で削除しなければ履歴が自動的に残ります。 先ほど「作成」したコピーは➄で、「現在使用中のスキン」は未だ最初のままで、その日付④は公式スキンが製作された日付です。

b0174191_13470518.png

●この画面で、「マイスキン」の➄の赤枠内の「適用」を押します。 これが一番肝心な操作で、これをしないとアレンジが反映しません。

b0174191_14081861.png

スキンの変更に「OK」を押すと、下の様に「現在使用中のスキン」の日付⑥が現在に変わります

b0174191_14084877.png

「マイスキン」のコピー➄(書換え可能なスキン)が適応されたわけです。

「スキン名」「スキンイメージ」などは、公式スキンとマイスキンで同じになり変えられません。 現在使用中のスキンがどちらなのかは、実際のコードと日付⑥が見分ける方法になります。(最後の補足を参照ください)



以上がスキンアレンジの第一歩の操作です。 この後はスキンの編集がブログ画面に反映する様になります。
以下に、実際にスキンを編集する例を簡単に説明します。 アレンジ編集の手順を示しただけで、編集内容は一般的で確かな意味はありません。

 実際にブログスキンを編集する 

元のブログスキンでは、タイトルは下の様に少し小さいのでアレンジして大きくします。

b0174191_14552030.png

●先の「PCデザインスキン」で➆の「編集」を押して、「PCデザインスキン編集」に入ります。 このページの最初と異なるのは「編集可能なマイスキン」を扱っている事です。

「PCデザインスキン編集」の下方のコード編集枠に注目します。 この画面を開いた最初は「全体」が選択されていますが、下図はスキンのCSSを編集するために「CSS」を選択して押そうとしている所です。

b0174191_15083033.png

●CSSのコード編集枠が表示されたら、編集枠にカーソルを入れ、スクロールしてコードを見て行きます。 少し下の方を調べると、「header」に関する記述に、タイトルの文字サイズの指定箇所⑧を見つけました。 元は24pxだったのを48pxに書き換え、「更新する」のスイッチ➈を押すと、エキサイトに「編集したマイスキン」が登録されます。

b0174191_15175541.png

これで更新内容がブログの表示に反映します。 下の様にタイトルが倍の大きさにアレンジされました。

b0174191_15195921.png

以上、ブログスキンのCSSを書換えて、表示をアレンジする手順を簡単に説明しました。



アレンジする箇所を調べる方法は、IEではDOM Explorer、Chromeではデベロッパーツールなどを利用します。 これらを利用しながら、一方でCSSやHTMLの書式の意味をネットで調べて少しずつ簡単なアレンジを試して行けば、門は開かれます。

DOMの使い方は、以下の所で説明していますので参考にしてください。





〔補足〕
手間を惜しまない方は、公式スキンの移植コピーをする事で「スキン名」や「スキンイメージ」を好みのものに変える事が出来ます。 これは、公式スキンとマイスキンの混乱を避ける目的です。

●「マイスキンを作成」でスキン作成を開始し、これに公式スキンのコードや基本設定を移植して、その過程で独自の「スキン名」や「スキンイメージ」を設定します。



[PR]
by Ataron | 2016-10-30 15:25 | ブログスキンのアレンジ | Comments(0)

編集画面をアレンジする(17)/ エキサイトブログ Chrome版-画像管理スイッチの注意表示

2016年 10月 19日
Chrome版は「画像管理」画面に飛ぶスイッチがあります。 IEでも設置は可能ですが、他の一般メニューを開いた際に管理メニューが崩れるので、IE版は設置はしていません。 Chrome版はこれが設置できるのが強みですが、このスイッチは「編集画面」を閉じて「画像管理」を開いてしまいます。

画像の差し替えで、不要となった画像の登録削除をしたい事は時々あります。 編集中に「画像管理」を別ウインドウで開き、登録削除をする目的でこのスイッチを設置しています。 しかし、誤って「左クリック」で押すと編集内容を失います。 初回の文書作成時なら「自動保存」の働きで救われる部分がありますが、再編集時では開いてからの作業が飛んでしまいます。 このアレンジした編集画面に慣れれば「左クリック」はしないでしょうが、これでは不親切です。

色々と考えた末、2つの方策を採る事にしました。

① 最初から「画像管理」のスイッチを表示させない選択肢をオプション提示する。
➁ デフォルトは「画像管理」のスイッチを表示し、スイッチのフォバーで注意表示を出す。



①は簡単です。(11)Chrome版-ブラッシュアップ のオプションに以下を追加しました。

画像管理スイッチを消すオプション
#sidemenu .sidemenu1 li:nth-child(4) a {
display: none; }

➁は以下を基本部CSSに追加しました。(2016.10.19 基本部CSSに追記済みです)

#sidemenu .sidemenu1 li:nth-child(4) a:hover {
background: red;
width: 30em; }

#sidemenu .sidemenu1 li:nth-child(4) a:hover::after {
content: " ▶ 右クリックし 新しいウインドウで開いてください"; }

この指定で「画像管理」のスイッチにマウスを乗せると、下の様に注意が表示されます。

b0174191_19151288.png

注意書きの文言は上のCSSを弄って自由に書き換えられます。「▶」は環境依存文字ですから、別の文字が表示される可能性があります。 その場合は、適宜書き換えて下さい。 また、こんなの要らないという場合は、今回の追加項を削除してください。


〔追記〕2017.01.15
編集画面の画像パレットに「×」マークが新設され、「画像管理」スイッチは不要となり廃止しました。


[PR]
by Ataron | 2016-10-19 18:17 | ブログスキンのアレンジ | Comments(0)

CSSで作るマスク:スクロールトラップ防止(3)実装

2016年 10月 17日
私のブログスキンの右メニューで「以前の記事」をスクロール表示にしています。 この項目だけはスクロールに拘っていたのですが、公式では数行表示でMoreを押せる式か、全部表示の選択です。 これで充分ではあるのですが...

で、そのスクロール表示の欠点が、スクロールトラップです。 以前の記事で対策をしていましたが、IEでは効くがChrome等では効かないもので、今回は「input」を導入してやっと両者で機能するトラップ防止が実現しました。



エキサイトのメニュー構造は、全てのメニュー項目に同じ型のHTMLが適応されるため、「以前の記事」だけに「input」を設置出来ません。 アレンジでメニューに「input」を書き込む場合、全メニュー項目に「input」が出来ます。

ところが、良く紹介される「label」を使う「input」の利用法は、特定の「input」を「id」で選びコントロールします。 複数の「input」には別々の「id」が必要ですが、エキサイトのアレンジ機能ではこれが不可能です。 みな同じ「id」の「input」しか作れないのです。

そこで「display:none;」で他のメニュー項目の「input」を消し、「label」も「input」も「以前の記事」だけで働かそうとしたのですが、表示が無いだけで他の「id」は生きたままの様です。 判った事は「以前の記事」の「label」は、最初のメニュー項目の「input」をコントロールしようとするらしく、結局「id」を使うコードが使えません。 『ひとつの「id」名の要素はHTMLに1個だけ』というルールを無視すると、結局上手く働かないという例です。

しかし、スクロールトラップ防止(1) スクロールトラップ防止(2)のコードは「label」「id」を使わないもので、ようやく右メニュー実装にこぎつけたわけです。 今回のアレンジは(1)の「button」の方を使っています。



スキンの「右メニュー」のHTML登録は以下で、「MNTRAY」は迫り出し構造のベースです。 今回「input」を「MNTTL」(メニュータイトル)の次に割り込ませています。 その下の「MNBODY」には、システムが各メニュー項目のリンク実体を大量にインポーズする場所で、これがメニュー項目の本体です。

<div class="MNTRAY">
<div class="MNTTL"><$mntitle$></div>
<input type="button" class="scmask" />
<div class="MNBODY"><$mnbody$></div>
</div>

この登録によって、全メニュー項目に「input」が生成されます。 後のCSSによる修飾指定がなければ、下図の様に「input」のボタンがメニューごとに出来ます。

b0174191_23433345.png

そこで、最初に全て「display:none;」を指定し、必要な「以前の記事」の「input」のみ「display: block;」で蘇らせます。 これ以外に「以前の記事」に「input」を設置する方法はありません。

このマスク設置に関係するCSSは以下です。

input.scmask {
display: none; }

:nth-child(7).MNTRAY > input.scmask {
display: block;
width: 100%;
height: 136px;
margin-bottom: -136px;
padding: 0;
border-width: 0;
opacity: 0;
transition-delay: 0.5s; }

:nth-child(7).MNTRAY > .MNBODY {
width: 100%;
height: 120px;
overflow-x: hidden;
overflow-y: hidden;
scrollbar-base-color: #9cd6f4;
scrollbar-arrow-color: #888; }

:nth-child(7).MNTRAY > input.scmask:focus {
height: 0;
margin-bottom: 0; }

:nth-child(7).MNTRAY > input.scmask:focus + .MNBODY {
overflow-y: auto; }

CSSのセレクタで、「:nth-child(7).MNTRAY >」は「以前の記事」のメニューをメニュー順位で特定するためのセレクタです。

◎1項目は、一旦すべての「input」を非表示にするもの。
◎2項目はマスクの配置設定で、「以前の記事」だけ「input」を生かし、マスクの面積を指定しています。
実装ですから「opacity: 0;」で透明としています。 トラップ防止(1)では「transition-delay: 0.4s;」でしたが、リンクの押易さを求め「0.5s」としました。
◎3項目はその下のメニュー本体の配置設定です。「overflow-x: hidden;」「overflow-y: hidden;」で、マスクが有る時はスクロールバーが表示されません。
◎4項目は、マスクをクリックして「:focus」の状態になった場合で、マスクを消します。
◎5項目は、マスクの「:focus」時に、後方隣接した「以前の記事」が縦スクロールを表示する指定です。
◎他のメニュー項目に対しても、セレクタを駆使すれば、マスクを設定し機能させることが可能です。

「:focus」されると縦スクロールバーが表示されるので、ユーザーが「以前の記事」にアプローチした時に初めてスクロール出来ることが判ります。 それ以外の時は全体画面のスクロールをトラップせず、また年月日のリンク上にポインターが来ても、フォバー反転しません。 とても奥ゆかしいデザインです。

下はマスクを半透過にして、マスクの様子を示したものです。 左側はクリックしたマスクが消える瞬間で、delayが働いて先にスクロールバーが現れてます。

b0174191_05561584.png


なお、今回のアレンジで、IEでは「以前の記事」のスクロールバーのマウス操作が出来なくなりました。 マウスホイールは効くのでスクロール可能ですが、IEだけ「:focus」の動作が特殊なので仕方ありません。 ChromeやEdgeでは問題なく動作します。「checkbox」を使うとIEもChromeも同じ動作に出来そうですが、外すと戻らないマスクしか思い浮かばないので、こちらを選んだ次第です。



[PR]
by Ataron | 2016-10-17 20:26 | ブログスキンのアレンジ | Comments(0)

CSSで作るマスク:スクロールトラップ防止(2)

2016年 10月 17日
「input」はブラウザにデータ入力や送信機能を提供するタグですが、これを利用してCSSで状態保存型のデザインを演出するのがちょっとしたトレンドになっています。 前ページは「input」の一種「button」を使ったのですが、同様の事を良く使われる「checkbox」で試してみました。



HTMLは以下で、ヘッダー内のstyleにCSSを書き込んでいます。 以下のHTMLを拡張子「.html」で保存してブラウザに読ませると、実際の動作を確認出来ます。


<html>
<head>
<title>コードテスト</title>
<style>

.alink {
margin: 0px 10px 0px; }

input.sw {
width: 120px;
height: 40px;
background: #ccc;
opacity: 0.5;
margin: 0px 0px -30px; }

input.sw:checked {
margin: 40px 0px -70px; }

</style>
</head>
<body>
<br>
<br>

<div>
<input type="checkbox" class="sw" />
<div><a class="alink" href="other.html">リンク文字列</a></div>
</div>

<br>
<br>
</body>
</html>



コードの動作をハードコピーで示します。

最初に読み込まれた時は、下の様に拡大したチェックボックス(半透過の背景色を着けた部分も含む)が「リンク文字列」をマスクしています。 いわゆるチェックボックスは指定サイズに内接する正方形になりますが、実体は指定サイズの全てですから、その範囲でチェックできます。 判り易くするために「opacity: 0.5;」で半透過にしていますが、実装時は透明にすると考えて下さい。

b0174191_10540694.png

下の様に、マウスポインターを持って行っても、「リンク文字列」はチェックボックスにマスクされて触る事が出来ません。 このマスクはスクロールトラップ防止として、前回同様に機能します。

b0174191_10554986.png

ここで一度クリックすると、チェックボックスにチェックが入ります。 チェックされた場合のプロパティはmargin値を変えた指定なので、下の様に「リンク文字列」の上からチェックボックスが退きます。

b0174191_11002555.png

これでユーザーは「リンク文字列」にアクセス出来る様になり、スクロール操作やリンクを押す事が可能になります。 この場合、下図のチェックボックスの範囲(ユーザーには実際は見えませんが)をクリックすればマスクのチェックが外れて元に戻ります。 ユーザーには透明で見えないので、このチェックが外されないままになる場合も普通に生じます。

b0174191_11060981.png

これらの動作は前ページの「button」と似ていますが、違う点や特徴は以下です。

●「button」の「:focus」は画面全ての場所を押して戻せるが、チェックボックスの「:checked」を戻すには、もう一度チェックボックスをクリックする必要がある。 このため「height: 0;」等でチェックボックスを消した場合は戻れなくなります。(画面のリロードで戻るしかない)
●従って、上の様にチェックボックスを待避させるか、押されるまで有効で後は戻らない一度きりの動作のマスクになります。
●利点としては、「:checked」の状態は「リンク文字列」を触っただけでは「:focus」の様に戻りません。 従って「 transition-delay」を使う必要がなく、動作は機敏で安定しています。 一度きりの動作で良いなら「button」を使うより優れているでしょう。
●このコードもチェックボックス自身をマスクに利用してlabelを使っていないので、「id」の制限から逃れる事が出来ます。



[PR]
by Ataron | 2016-10-17 11:27 | ブログスキンのアレンジ | Comments(0)

CSSで作るマスク:スクロールトラップ防止(1)

2016年 10月 17日
スクロールトラップという言い方は勝手に作った言葉ですが、ブラウザ画面をスクロールをしている最中に、マウスポインターがページ内の縦スクロールのあるブロック(スクロールボックス)にさしかかった場合、スクロールがそのブロックに移ってしまう事を言ってます。

マウスポインターをスクロールを捕られたブロックから移動させれば、全体画面のスクロールを再開できますが、少々うっとうしいものです。「スクロールの中断を回避でき、しかもユーザーが選択すれば、そのブロックのスクロールも出来る様にする」というのは、案外と難しい注文です。

考え方としては、問題のブロックの上に透明マスクを配置し、それをクリックした時はマスクが消滅して下のブロックのスクロール操作やリンクを押せる様にします。 クリックしない時は、スクロール操作でマウスポインターがブロック上を通過しても、実際は透明マスク上を通過しているので、スクロールがトラップされる事が無いという塩梅です。 マスクはクリックで消滅しますが、これをCSSで実現する場合、この復活は使うコードで変わって来ると思われます。 具体的には「:checked」を使うか「:focus」を使うか等で変わるという話です。

今回は試作段階ですが「:focus」を使ってテストしています。 この透明マスクは、スクロールトラップ防止という目的で作っていますが、誤操作防止やそのコメントを表示する事、あるいはもっと他の用途にも使えるかも知れません。



最初にコードを示します。 以下のコードをtextファイルにし、適当な名前で「.html」の拡張子で保存すれば、ブラウザ上で実際の動きを確かめる事が出来ます。(リンク文字列のリンク先はフェイクですから、押すとありませんの表示になります)


<html>
<head>
<title>コードテスト</title>
<style>

.alink {
margin: 0px 10px 0px; }

input.sw {
width: 120px;
padding: 0;
border-width: 0;
opacity: 0.5;
transition-delay: 0.4s;
height: 40px;
margin: 0px 0px -30px; }

input.sw:focus {
height: 0px;
margin: 0px 0px 10px; }

</style>
</head>
<body>
<br>
<br>

<div>
<input type="button" class="sw" />
<div><a class="alink" href="other.html">リンク文字列</a></div>
</div>

<br>
<br>
</body>
</html>



この動き方をハードコピーで示します。

最初にブラウザで開くと、下の様に「リンク文字列」の上にくすんだマスクが覆って表示されます。 このマスクは、実際に使うコードでは「opacity: 0;」に設定して完全な透明にしますが、ここでは動作が判る様に「opacity: 0.5;」と半透明にしています。

b0174191_23465794.png

下の様にポインターを「リンク文字列」上に持って行っても、実際はマスク上に持って行った事になり、ポインターの形は変わりません。 下のこの段階では、マスク下の「リンク文字列」には触ることが出来ません。(下にあるのがスクロールボックスならスクロール出来ないという事です)

b0174191_23470191.png

一度この場所(マスクの上)でクリックすると、マスクが「height: 0;」となり「リンク文字列」が表に出ます。(マスクが透明なら、ユーザーは最初のクリックでリンクが押せず2度目で押せると思うだけです) 「リンク文字列」が表に出たので、下の様にポインターが手の形に変わります。

b0174191_23470705.png

リンクを押すと本来はリンク先に飛びますが、このテストコードの「リンク文字列」は実際には無いリンク先を書いてあるので、ブラウザは表示できないと答えます。

下はリンクを押さず、一旦ポインターを「リンク文字列」の上から退けたところです。

b0174191_23471323.png

このコードは「:focus」を使っています。 最初にマスクをクリックした時にマスクに focusが移っています。 ブラウザ画面内の他の要素をクリックするまで、この focusは続きます。 スクロールボックスのスクロールや要素のフォバーでは focusの状態は変化しません。 そして、上の状態では画面上のどこをクリックしても、マスク以外の場所に focusが移り、下の様にマスクが元の状態に戻ります。

b0174191_23471786.png

以上がこのマスクの動作です。

ただし、ちょっと工夫が必要な事があります。 マスクの下のリンクを押す事でも focusが移動するので、結果としてマスクが戻ってリンクが押せないのです。 これでは困るので「transition-delay: 0.4s;」という遅延動作を設定しています。 このプロパティは、動作が始まるまでのタイミングを0.4secと指定するもので、focusが移ってマスクされるのを少し遅らせて「リンク文字列」を押してしまえというわけです。 妙なコードですが、実際に「0.1s」等の設定では押せず、「0.4s」位だとだいたい押せる様です。 もっと遅いとより確実ですが、今度はマスクが開くのが遅くなります。

このマスクがスクロールトラップ防止にちゃんと使えるかテストしてみました。「リンク文字列」の代わりに簡単なスクロールボックスを作り、マスクもそのサイズに合わせて試してみました。

b0174191_08322184.png

上はクリックする前で、マスクされて全体のスクロールが邪魔されません。 下はクリック後で、ボックスにアクセス出来、スクロールバーの操作やリンクのクリックが問題なく出来ました。

b0174191_08355444.png

目的の通りに使えそうです。



このブログの右メニュー「以前の記事」に実装したマスクは、このコードを応用しています。
これはスクリプト等を使用せずに、CSSで実現できる特殊なマスクのアイデアです。

一般に、CSSで状態の変化を切り替える動作を実現するコードは、「input」の「checkbox」を使うものが良く紹介されています。 しかし、上に紹介したのは「input」の「button」を利用していますが、このコードは以下の特徴があります。

●「button」自身にサイズを持たせてマスクにしているので、labelを使わないでシンプルなコードになっています。
●ラベルを使用する場合は「id」を使う事になりがちですが、このコードでは不要です。 これは「id」を重複できないルールから逃れる事が可能で、実はエキサイトのメニューに利用する場合に必要な条件なのです。

「button」の代わりに「checkbox」を使った方法は次のページに載せます。



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