Studio TA Subsite の案内とお知らせ

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

Chrome DevTools を使ってみよう (26) ページ中央の配置指定と背景暗転

2017年 10月 15日
今回は以下のページをサンプルにします。 実際にDevToolsを操作しながら読まれると、いっそう判り易いと思います。




 ページ中央に要素を配置する 

これは多くのページで紹介されていますが、原理を理解していないと応用に苦労します。 しかしその内容は、中学生レベルの計算で難しくありません。 判ってしまうと、後々の色々なところで役に立ちます。

 配置指定 

上記サンプルページの「ヘルプのパネル」を、例としてページ中央に配置してみます。

a0349576_13485735.png

「ヘルプパネル」の要素名は「div.bloghelp」ですが、最初にこれに「position: fixed」を指定して、メニュー内の配置からフリーにします。 中央に持って行くと、ブログ本文等の下に潜り込むので「z-index:1」を指定。 また、パネルの幅は、配置のフリー化でパネル内の文字列幅になってしまうので、体裁上で切りの良い「width: 300px」を指定しています。

a0349576_14105300.png

それ以下が、肝心の「ページの中央配置」の算段です。
幾つか方法がありますが、上の方法は画面にピッタリの幅になる様に「横padding」を計算して、「div.bloghelp」の両横に付加する方法です。

下図は、上の設定の結果の画面で、既に「ヘルプパネル」が左右の中央に配置されています。

a0349576_14185032.png

「100vw」というのは便利な値で、ウインドウ横幅(スクロールバー幅込み)を指定に利用できます。「M」は、ここではヘルプパネル幅で「300px」です。 ページにちょうど納まる様な「P」(ここではpadding)の幅値は、下の計算で得られます。

  P=(100vw-M)÷2

M=300px なので、

  p=(100vw-300px)÷2=50vw-150px

先の「div.bloghelp」の指定の中で、calc() という書式を使っています。 これは、値の指定に計算式を持ち込める、とても便利な書式です。

  padding: 50vh calc(50vw - 150px);

これは、paddingを2値で指定しています。
paddingの第1値の「50vh」は、上下padding値になります。 これでは、ヘルプパネルはウインドウの高さの中央より少し下になりますが、高さ位置は少しアバウトにやり過ごしてます。

paddingの第2値は、横padding値になります。 こちらは正確で、状況によって様々に変化するウインドウ幅に対して、常に横padding値を計算して、ヘルプパネルを横方向の中央に配置します。 calc()の書式で注意が要るのは、演算子「+」「-」等の前後に半角空白が要る事です。 これを守らないとコードが上手く働きません。


 背景暗転の指定 

「背景暗転」は、画像のポップアップ等で重宝される表現方法です。 何かの要素を他からきわだたせる手法なので、スクリプトを使ったポップアップやhover等の表示と兼用するのが、一般的な利用場所になるでしょう。

画面中央に持って来たヘルプパネルに背景暗転を指定するのは、既に「padding」がウインドウ内の全領域を覆っているので簡単です。 直接「background」を指定しても良いですが、下図の様にDevToolsの「Add background-color」を使うと、半透過が簡単に指定出来ます。

a0349576_15031953.png

下はその操作中ですが、要点を赤枠で示しています。

a0349576_15241542.png

黒背景にしたい時は、最初に「フルカラーパレット」の下隅をクリックするのが近道です。
次に透過スライダーで、実際のブラウザ画面を見ながら背景を適当な濃さに調節します。

この調節の結果の例ですが、

  background-color: rgba(11, 11, 11, 0.57);

となったとしても、(11, 11, 11)は(0,0,0)の黒とほぼ同じです。 コードをすっきりさせたいなら、

  background-color: rgba(0,0,0, 0.6);

と書き換えても、問題ありません。



 ページ中央に要素を配置する別の指定方法 

少しだけ違った指定方法ですが、暗背景の付け方は独特です。

 配置指定 

「position: fixed」「z-index: 1」「width: 300px」は同じです。 今度は次のコードで、ヘルプパネルのpadding無しの状態で、配置指定をしています。

  top: 50vh;
  left: calc(50vw - 150px);

a0349576_15490152.png


 背景暗転の指定 

同じ様に中央配置になりますが、こちらは padding領域が無いのでbackgroundを指定しても背景色が表に出て来ません。 こんな場合、余り紹介されていませんが、「box-shadow」を使う上手い方法があります。

DevToolsで「Add box-shadow」を押して、「影コントロールボックス」を表示します。

a0349576_16150893.png

下図は、このボックで余り使われない「Spread」に、直接「100vw」を入力した所です。

a0349576_23460821.png

一般には「Blur」で作られる半影の方を意識して box-shadowを扱う事が多いのですが、この「Spread」値は、影の芯になる部分の広さを指定するものです。 この利用方法では、値は200vwでも1000vwでも良く、影の端がウインドウ端に充分に届いて余裕があれば目的を達します。

「100vw」を指定した場合は、以下のプロパティが設定されます。

   box-shadow: 0 0 0 100vw black;

この影色「black」を rgba(0,0,0, 0.6) に書き換えれば、先の例と同様の半透過の暗背景になります。

   box-shadow: 0 0 0 100vw rgba(0,0,0, 0.6);

a0349576_16343979.png

この指定方法は、コード行が少なくて簡潔です。「box-shadow」の利用は、便利な指定方法だと思います。




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



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

Chromeでページの横スクロールバーが消えない

2017年 10月 05日
先ほど気付いたので、最近になって何かが変わった(例えばブラウザの微細なレンダリング仕様の変更とか)のかと思うのだけど、私自身が何か別の所で変更した事の結果というのも大いに有り得るし。 とにかくChromeで見たところ、私のブログページに常に横スクロールバーが着いて、消えなくなっていました。



スクロールバーが消えなくなる(ページの端部が明らかで、本来ならスクロールバーが消えるべきなのに)という状態は、CSSを弄っていると時々遭遇する事です。 解決するのには原因を見つけるのが先決です。 DevToolsで調べて行くと、投稿本文部の「width:100%;」の指定を「99%」にするだけで、横スクロールバーが消えます。 何か、ほんの少しはみ出してる様です。

怪しいのは右側のメニューで、色々弄っているとどうやら原因が見えて来ました。

下図の左側はページの実表示で、右側はDevToolsのウインドウです。 ページのウインドウ下端に問題の横スクロールバーが出ています。

a0349576_00383905.png

右メニューに「box-shadow」(影)を着けていますが、この影をOFFにすると下図の様に、横スクロールバーが消えます。

a0349576_00424646.png

どうも、このあたりに問題がありそうです。 更に調べて行くと、右メニューのウインドウ端との余裕を指定する、下の赤枠の「padding-right:10px;」を「11px」に増すと、やはり横スクロールバーが消えました。

a0349576_00512889.png

横スクロールバーが消えないのは Chromeのみで、IE11、Edge、Firefoxで見た場合は横スクロールバーは出ずに正常です。 結局 Chromeでは、box-shadowがページ幅を越えているという計算になり、横スクロールバーが消えないと考えられます。 余裕を見て、上記のコードで「padding-right: 12px;」に指定して、回避する事にしました。

この問題を長く見落としていたとは考えにくく、暫くネットをウォッチして、関係する仕様変更があったのか調べたいと思っています。



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



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

Chrome DevTools を使ってみよう (25) ページの先頭に戻るスイッチ(スクロールしない表示パーツ)

2017年 09月 09日
エキサイトブログのトップページは、スクロールしない表示パーツが2ヵ所使われています。 DevToolsを使って、これらの機能を調べます。 以下のリンク先をサンプルにしているので、Chrome DevToolsで開きながら読まれると、より判り易いと思います。



 スクロールしない表示パーツ 


トップページを中ほどまでスクロールダウンすると、最上部に横長でユーザーメニューのあるバーと、下部の右側に「↑PAGE TOP」のページの先頭に戻るスイッチが出ます。 ページの上半分を見ているとこれらは表示されず、中ほどから表示される演出は「script」によるもので、これはエキサイトの場合はユーザーアレンジで盛り込めない(有料会員なら別?)機能です。

「script」は別件として、これらの表示要素はスクロールされず、ウインドウの決まった場所に留まり続けます。 その構成は、ブログスキンのHTMLとCSSのアレンジとして利用できるものです。


 メニューバー 

表示された上部のメニューバーをターゲットとして、DevToolsを開いてみます。

a0349576_21264983.png

メニューバーは「.navHeader.is-scroll」という要素です。 Toolsの右ウインドウ(CSS)を見ると「position: fixed;」が、このバーをスクロールさせない配置指定です。「fixed」はウインドウの決まった場所に要素を固定表示させます。 背景画像を固定したり、このページの様に一部のパーツを固定にするデザインは、ほぼこれを利用しています。 最初は少し面白いが、目新しさだけに終わる様に感じて、私は余り使う気になりませんが、成否はセンスの問題と思います。

このページの場合は、本来はユーザーのブログへの入口画面でもあるので、下方向にスクロールした人も直ぐブログに入れる様に計らったデザインと思います。 まあ、途中からバーを出さず、最初から固定でも良いのですけど。


 ページの先頭に戻るスイッチ 

特にこちらは、ブログスキンに導入したい人は多いかも知れません。 こちらもページ途中から表示され(これは煩くなくて良い仕組みと思いますが、その仕組みは「script」で利用出来ません。 しかし、常にウインドウ隅に表示される形であれば、問題なく導入出来ます。 従って、ブログ画面の余白部分に邪魔にならない形で表示させるとか、コンパクトで意味の判るスイッチにするとか、半透過のデザインにするなど、ブログのデザインに合せた工夫の必要があると思います。

DevToolsで、この「↑PAGE TOP」のスイッチを調べてみます。

a0349576_21580803.png

このボタンは「.nav-pagetop」という要素で、やはり「position: fixed;」が指定されていて、「right: 20px; bottom: 20px;」の配置指定です。(上図はChrome画面の縦を狭めていますが、普通に拡げても「右下隅」の配置は変わりません)

このボタンの機能のミソは、Toolsの左ウインドウの「▶」をクリックして「.nav-pagetop」の中身を見ると判ります。

a0349576_22073232.png

中に「<a href="#wrapper">↑PAGE TOP</a>」というリンクが収められていて、「#wrapper」はこのページの全域を包む要素です。 このボタンをクリックすると、ブラウザはリンク先の「#wrapper」に飛びますが、その結果としてページを先頭から表示する事になります。 この様に全体を包む要素をリンク先に指定するのもOKですが、エキサイトヘッダー等の上端の要素をリンク先にしても同様の結果になります。

上図のTools左ウインドウ(HTML)を見ると、先の「メニューバー」も「↑PAGE TOP」スイッチも、このページを構成するHTMLの最後の方に置かれています。 これら「スクロールしない表示パーツ」は、他の要素に割り込んで邪魔になる場所でなければ、HTMLのどこに置いても問題はありません。

この事は、このスイッチを手本にして、自分のブログスキンのHTMLに独自のボタンの要素を書き込む場合の、参考になります。


 スイッチのHTMLとCSS 

このボタンの要素を発生させるHTMLと、それをデザインするCSSをToolsを使ってコピーしました。

HTML
<div class="nav-pagetop">
<a href="#wrapper">↑PAGE TOP</a>
</div>

CSS
.nav-pagetop {
position: fixed;
bottom: 20px;
right: 20px; }

.nav-pagetop a {
font-size: 1.2rem;
background: rgba(0, 0, 0, 0.8);
color: #fff !important;
padding: 10px;
border-radius: 5px;
display: inline-block;
transition: 0.2s; }

.nav-pagetop a:hover {
opacity: 0.6;
text-decoration: none; }

このデザインは、ブログスキンの「HTML全体」の適当な場所にHTMLを貼り付ける事と、「CSS」の最後など(適当な場所で良い)にCSSを貼り付ける事で、そのまま移植できます。

但し、リンク先の「#wrapper」だけは問題になります。 使用スキンでページ全体を包む要素が「#wrapper」なら使えますが、そんな名前の要素が上手い具合にあるとは限りません。 DevToolsで自ブログの構造を調べて、ページ全体を包む様な要素名(ID名やクラス名)を調べ、リンク先の「#wrapper」の部分を、それに書き換える必要があります。

また、ボタンの文字は「↑PAGE TOP」である必要はなく、別の「上へ」でも良く、記号文字「△」でも良いわけです。 これらはアイデア次第で、ページに適したデザインに出来ます。




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



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

position absolute の「top」「left」などを指定しない使い方

2017年 09月 09日
これについては前記事の中で少しふれましたが、とても有効なテクニックに思えるので、纏めておきたいと思います。

a0349576_13082092.png

「position」指定は、CSSによる配置デザインでは必ず出会う指定方法です。 色々な記事でこの扱いについては説明がありますから、納得するまでそれらを読まれる事を勧めます。 ただ、ここでは少し独断的に、私の実際の場合と照らし合わせて纏めます。


 relative 

本来の配置の場所を基準に「ズレ」を指定するもの。 元の占有場所は保たれる。

①ある要素に「z-index」を指定したい場合、「relative」を配置指定なしで指定すると、レイアウトに影響なく指定できる。

➁「absolute」で配置したい要素がある場合、その上位要素(親など)に「relative」指定して、基準位置とするために使う。(基準位置が不明確な「absolute」指定は、混乱の元になり得る)

「relative」は、副次的な扱いをする傾向があり、実際「margin」指定を工夫して使えば、同結果が得られるのではないかと思えて来ます。


 absolute 

本来の場所とは無関係な上位要素を基準とした配置になる。 元の占有場所を失う。

①位置基準は上位要素(親や先祖かbody)で「static」以外の指定のある要素に飛ぶ。

➁「static」「relative」の様な元位置の周囲デザインのしがらみは無くなり、自由な配置が出来る。
   (ただし、元の周囲配置の影響を受けない利点は、反対に弱点になる時もある)

➂親要素の範囲を超えて配置が出来るが、「overflow: visible」の指定が無いと見えなくなる場合がある。

④他の要素の裏側に入って見えない時は「z-index」を指定。



ここまでは普通の話ですが、以下はこのページの主題です。

 absolute で top や left を指定しない 

「top」「left」の位置指定をしないと、その要素は「absolute」の指定する前の元の位置に留まります。(占有場所は無くなります) 位置基準は上の規則の通り、「static」以外の指定のある上位要素に移っているはずですが、その初期値は本来の位置を基準に算出されたものが入る様です。 つまり「配置指定がなければ元の位置まま」になります。

「top」「bottom」「left」「right」等の指定を入れると、当然その値に従った配置になります。 しかし、場合によっては、元の配置を保って「absolute」を指定したい事もあります。

例を挙げると「<p>タグチェッカー」では、チェックマークをウインドウの左端に出すために「absolute」は必須の指定です。 しかし、高さは元の行位置でなければチェッカーの意味がありません。 そこは良く出来ていて、横位置は「left」を指定すればそれに従うが、「top」等を指定しなければ縦位置は元のままとなるのです。

この規則を無意識に使っている場合もありそうですが、しっかりと書いている所は少ない様です。

 absolute を指定して marginのみで配置調整 

「top」や「left」を指定せず元位置から要素を移動したい場合は、「margin」が使えます。 これで本来の位置を基準に調整する「relative」の様な操作が可能です。「absolute」指定を使いながら、同時に元の位置を基準として配置したい時、これはとても有効なテクニックになります。




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



[PR]
by Ataron | 2017-09-09 12:59 | ブログスキンのアレンジ | Comments(0)

SNSボタンの周辺レイアウト(再編) / エキサイトブログ

2017年 09月 08日
以前に「SNSボタン」や文末の「タグリスト」の周辺のアレンジを行っています。 詳細は以下です。

この設定でしばらくやって来たのですが、タグ指定を入れ忘れて投稿すると、「タグリスト」が無いために困った状態になります。

a0349576_14295373.png

私は、実際はタグ指定抜きの投稿はないですが、タグ指定のない文書でも困らないのがベストで万民向けです。 上の様な事が生じるのは、「SNSボタン」と「タグリスト」の配置を上下入れ替えるアレンジをしているためです。 下はアレンジをしない場合の配置です。

a0349576_22370349.png



「タグリスト」を「SNSボタン」の下側に配置入れ替えは固持して、どちらか、あるいは両方が抜け落ちても、デザイン上でそう乱れないアレンジは、両者を「position: absolute;」で配置するのが一番問題が無さそうです。 この指定を使えば、元の場所での他要素の押し退けがなくなり、その要素の抜け落ちの有無で、周囲の配置が影響される事がなくなります。(要素は他の要素上のレイアーの様に表示されます)

但し、要素自身の配置場所を用意してやらないと、他に被さります。 上の図を見れば明らかな様に、ここで配置場所には、下方にある「ブログ内記事の画像リンク」を利用するのが妥当です。 これは「.bbs_preview」という要素ですが、これに上marginを大きく指定して、本文との間のエリアを確保します。 そこに、「SNSボタン」と「タグリスト」を配置する算段です。

私は、この「画像リンク」を常に表示しているので使うのですが、それが無い場合は、何か下方の固定要素を利用する事になります。 その上marginが「本文」との間に常に一定のエリアを維持できるなら、なんでも良いわけです。



下図は、DevToolsで「.bbs_preview」に「margin-top: 75px;」を指定した所です。

a0349576_15101482.png

「タグリスト」「SNSボタン」の要素を非表示として、仮に「無い」状態としたものです。 75pxの空間が「本文」との間に出来たので、ここに2個の要素を配置します。

先ず「タグリスト」の配置で、上を少し開けています。
.taglist {
position: absolute;
margin: 40px 0 0 !important; }
a0349576_15175810.png

「position: absolute;」の指定は、一般には「top:」「left:」等の指定を伴いますが、ここでは「何も指定しない」で「margin値だけで配置を指定する」というのがコツです。「top」を指定すると画面の上まで配置が飛んでしまいますが、何も指定しないと元の位置を基準に「position: relative;」の様な扱いが出来ます。 ここでは周辺の配置に影響する「relative」を使うわけには行きません。

更に、「SNSボタン」の配置を指定します。
.sm_icon_mini {
position: absolute;
margin: 0; }
a0349576_15300899.png

やはり「margin値」だけで、配置を調節しています。

以上で、「タグリスト」「SNSボタン」が「画像リンク」の上margin内に上手く納まりました。

a0349576_15361775.png

このアレンジなら、「タグリスト」や「SNSボタン」が非表示になった場合は、そこが空白となるだけで、本文とそれぞれのパーツの位置関係は変わりません。



肝心なところは出来たのですが、良く見ると「SNSボタン」の背景色が途切れています。 元は本文エリアの右端まで伸びていました。 これは「absolute」指定を使うと時々経験する事で、親要素の幅に広がっていたものが、「width: auto;」の幅になってしまいます。

「absolute」を指定した後、縮んだ幅を「width: 100%」で拡げても、変な長さになる場合が殆どです。 今回もそれで、「100%」の指定で下図の様に本文幅より110px大きくなりました。

a0349576_15524810.png

どこからこの中途半端な値になるのか判りません。 理由があってこの飛び出しが生じていて、調べるとかなり時間を要します。 しかし「calc」を使って、実寸合わせで修正すれば、時間を節約出来ます。「calc」を知らなかった時は、この手の問題は大変に苦労したのです。

修正コードは以下の様に、幅を指定しましたが、この「110px」は DevToolsで「実寸合わせ」した結果得られたものです。
.sm_icon_mini {
width: calc(100% - 110px); }



以上で、目的の通りのアレンジが完成しました。 コードを纏めます。
 .taglist {
position: absolute;
margin: 40px 0 0 !important; }

.sm_icon_mini {
position: absolute;
margin: 0;
width: calc(100% - 110px); }

.bbs_preview {
margin-top: 75px; }


下は最終的な状態です。

a0349576_16220879.png

本文の最終行が寄り過ぎに見えますが、私はほぼ全ての本文の末尾に、改行を2~3個入れるので、それに合わせたものです。 上記のコードの margin値を修正して、自動的に本文との隙間を開ける指定も可能です。

利用コースによっては、本文下部のアドと「タグリスト」等が重なるかも知れません。 その場合は、DevToolsでアド要素名を調べ、アド要素の上下のmargin値を適当に補正する必要があります。



余談になりますが、本文の末尾と「タグリスト」以下のパーツ群との間隔を開けるコードを書いておきます。 これは、このページのアレンジ考察中に思い着いたもので、本文の最後に必ずシステムが入れる「br.clear」の要素を利用したものです。

.POST_BODY br:last-of-type {
line-height: 2em; }

「br」要素を利用するには、この「line-height値」の指定しか無い様です。「2em」としていますが、この値を変えて、「タグリスト」以下との間隔調節ができます。 いままでの投稿を纏めて、下部の余裕を調節したい時に使えるかも知れません。




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



[PR]
by Ataron | 2017-09-08 17:17 | ブログスキンのアレンジ | Comments(0)

Chrome DevTools を使ってみよう (24) アニメーションを調節する:cubic bezier editor

2017年 09月 07日
CSSによるアニメーション表示は、次第に市民権を得つつある様です。 ブラウザによる表示対応が次第に均質になり、誰もが簡単にこの機能を実現できる様になって来ました。

DevToolsには、アニメーションに関するCSSプロパティ値を、動作を見ながら調節できる優れた機能があります。 それが「cubic bezier editor」で、bezier(ベジェ曲線)で設定値をコントロールします。

以下は、表示文字を明滅させる簡単なコードを調節している所で、その文字をターゲットにDevToolsを起動しています。

a0349576_11153760.png

この文字を修飾するCSS項に、「animation」を指定したコードがあります。 DevToolsは、この様な「animation」プロパティの値には特別なアイコンを表示します。


 アニメーションを指定する値を編集する 


このアイコンをクリックすると、「cubic bezier editor」が起動して、判り難い書式の値を簡単に編集することができます。

エディターは下の様なものです。

a0349576_11483876.png

はベジェ曲線の基本型を選択するものです。 これを切り替えるとの枠内で、基本形をベースにした6種の「ease-in-out」等を選択できる様になります。 しかし難しく考える必要はありません。 ❶❷は調節のスタートの指定で、どこから始めても目的の曲線を得られます。 曲線と動作の見本位に考えれば良いでしょう。


 エディターの主要な操作 

調節の要点は の2個の「印」をドラッグする事です。 ドラッグをするとChrome画面上のターゲットのアニメーションの様態が変化します。 それを見ながら目的の動作に近付ければ良いのです。

●ドラッグの際、左右方向の範囲はグラフエリア枠の範囲ですが、上下方向はエリア枠を越える事が出来ます。

a0349576_13110842.png

●下の には、実際のプロパティ値が表示されます。(は表示だけで編集はできません)
●このエディタは、「cubic bezier」値を編集しますが、「animation」の他のプロパティ値の時間(duration)値「1s」等は、Toolsの右ウインドウ(CSS)に戻って指定する必要があります。


 動きを別の視点で表示 

エディタの最上部 は、ベジェ曲線の縦軸の変化を視覚化したものです。

a0349576_12193282.png

の部分をクリックすると、何度も動作を表示します。 Chromeの画面上で「他要素に移動が隠れる場合」の調節など、色々と必要な場面がありそうです。


 目的の動作が得られたらCSS項をコピー 

DevToolsは、実験的にコードを調節する仮想環境を提供しています。 エディターの操作で得られた目的に合ったCSS項やプロパティ値は、コピーしてメモ帳などで保存し、ブログスキンなどのCSSに登録して、初めて実用利用できます。

〔参考〕
アニメーションのプロパティ値は奥が深いので、判らない事は以下のサイト等で調べてください。




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



[PR]
by Ataron | 2017-09-07 13:06 | ブログスキンのアレンジ | Comments(0)

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善

2017年 09月 05日
<p>タグチェッカーを実際に使ってみて、色々と判って来た事があります。

1文書をチェックする発想でチェッカーを作ったが、今まで投稿した文書をひとつずつ開いて行くと、時間がかかって仕方がありません。 全文に関してチェックするには、ブログの全文検索が必要になりました。

当然、これに使用できるのはメニューの「検索」ですが、HTMLのコードとして記述した<p>タグを検索できるのかという問題がありました。 で、試してみると素晴らしい、この「検索」は完全にこれに使えました。

例えば、「<p>」で検索した場合は、

●投稿文内のHTML記述としての「<p>タグ」を検出します。
●投稿文内のテキスト記述としての文字「<p>」を検出します。
●メニューの「記事ランキング」等に使われる「<p>タグ」を検出しません。

この「検索」は、投稿原稿のチェックに実に適した仕様になっている事が判りました。

今回の場合「<p>」で検索しても良いが、「<p style="~">」という記述を見落とすので、「</p>」で検索するのが賢明と判りました。

下は、私のSubsite内を全文チェックした結果です。

a0349576_23153736.png

意図的に記述した<p>タグや、文字の「</p>」等も検出されますが、効率良くチェック出来ます。



ただ、サンプルで気付いたのは、「<p></p>」という中身の無いタグがある事です。 これも、入力援助機能が勝手に入れてしまうものです。 これは、最初のチェッカーでは、どこにタグがあるのか判断し難い事が判りました。 下はサンプルで作った文書です。

a0349576_23262295.png

3ヵ所の最初の<p>タグは、中身があるので段落がグリーンに着色され、これは意図通りです。 しかし、後の2ヵ所は段落の着色がなくて見落としかねません。

この文書のHTMLコードを見ると、下の様なものです。

a0349576_23303310.png

この中身の無い「<p></p>」は、けっこう良く出来ます。 特に、サンプルの様な文書内に「<pre>」でコード記述をした場所に多く、割り込み修正をするからでしょうか。

この様な状態も気付き易くするために「::after」を使い、問題行の高さでウインドウ左端に赤マークを追加表示する事にしました。

.POST_BODY p {
background: #4DD0E0; }

.POST_BODY p::before {
content: " ◀P▶";
color:#fff;
font-size: 16px;
font-weight: bold;
position:absolute;
animation:blink 0.5s ease-in-out infinite alternate; }

#_entryContent p::after , #_moreEntryContent p::after ,
.POST_BODY p::after {
content: "◀P▶";
color: red;
font-size: 16px;
font-weight: bold;
position: absolute;
left: 0;
animation:blink 0.5s ease-in-out infinite alternate; }

@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;} }

上記は、文書編集中にもチェッカーが働く様に、「::after」の適応場面として以下のセレクタを追加しています。
「 #_entryContent p::after 」「 #_moreEntryContent p::after 」

これは、編集画面の通常編集枠内の「<p>タグ」を選択するものです。 このコードは「Stylist」上で働くので、そのURL設定は「自分のブログURL」に加えて「//userconf.exblog.jp」も動作範囲に含めて指定しました。

別案として、私は編集画面のアレンジを「Stylist」で行っているので、そのアレンジCSS内に、このコードを含める事も出来ます。 つまり、編集段階で「<p>タグ追放」する編集画面となりますが、そこまで<p>タグを嫌う人は少ないかも知れないので、ここは別案に留めました。

下は改善したチェッカーで、サンプル文書を表示した状態です。

a0349576_23511262.png

また、「通常編集」枠は、以下の様なチェックが表示されます。

a0349576_23525617.png

「HTML編集」枠でチェック表示出来れば便利ですが、これは無理でした。「HTML編集」画面上では「タグ」の意味はなく「文字」として存在するので、セレクタ指定が出来ないのです。



メインサイトは文書数が多く、チェックする文書が増えました。 これらを調べて行くと、チェックは確かですが、HTML内で開始タブが見つかり難いケースがありました。 開始タグ側のチェッカー色が「白」で文書内の表示は、少し控え目過ぎでした。

改良点は、
◎開始側を「赤」終了側を「青」でチェック表示し、両方ともウインドウ左端にチェッカーを出す形にした。
◎文字背景の白を指定して、チェック表示が文章上に表示されても見え易くした。
◎アレンジした編集枠は左余白が少ないので、「FontAwesome」を使いチェック表示の幅を狭くした。
◎共通コードの繰り返しを減らした。
◎IE11版の編集画面アレンジのユーザースタイルシートに追加出来る、オプションのコードを編集。

Chrome版

.POST_BODY p {
background: #4DD0E0; }

p::before , p::after {
font: bold 1em FontAwesome;
background: #fff;
position: absolute;
animation: blink 0.5s cubic-bezier(0.2, 0.1, 0, 1) infinite alternate; }

@keyframes blink{
0% {opacity:0.1;}
100% {opacity:1;} }

#_entryContent p::before, #_moreEntryContent p::before,
.POST_BODY p::before {
content: "\f0d9\2005P ";
color: red;
left: 0; }

#_entryContent p::after, #_moreEntryContent p::after,
.POST_BODY p::after {
content: "P\2005\f0da";
color: blue;
left: 0.6em; }

a0349576_17090034.png

IE11版(IE11 - More拡張にオプション追加できます。 これは点滅表示しません)

/* <p>チェッカー オプション */

.POST_BODY p {
background: #4DD0E0; }

p::before , p::after {
font: bold 1.15em/1.2em FontAwesome;
background: #fff;
position: absolute; }

#_entryContent p::before, #_moreEntryContent p::before,
.POST_BODY p::before {
content: "\f0d9\2005P ";
color: red;
left: 0; }

#_entryContent p::after, #_moreEntryContent p::after,
.POST_BODY p::after {
content: "P\2005\f0da";
color: blue;
left: 0.6em; }


以上、かなり効率的に投稿文全文で<p>タグ退治が出来る様になりました。




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



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

<p>タグのチェッカー / エキサイトブログ

2017年 09月 05日
文章の表示の状態に関して、ブログというのは「おおまか」です。 ネット経由での参照は、フォントやフォントサイズが異なったり、レンダリングの違いや、今ではレスポンシブで文書作成時と違う構成で表示される事もあります。

そんな現状で、適度に見易ければ良しと言うのがトレンドですが、先日の自分の投稿を見返して「あれっ」という問題を発見。 画面の上の方だけ、画像と行の間隔が広いのです。

a0349576_10592313.png

下の方に行くと設定の通りで、この間隔はブログスキンと原稿の行空けで決まります。

a0349576_11005260.png

投稿文書を調べて、ずいぶんして原因が判りました。 編集時の何処かで<p>タグが紛れ込んでいたのです。 <p>タグは再編集時などに入り易く、「通常編集」で割込みの書き込みをすると「段落」が自動的に作られる様で、これは以前にも考察した問題です。

<p>タグは、こちらの意図とは関係なく入り、一番困るのは「段落は上下に1行の余裕を作る」という規則です。 下は問題の場所をDevToolsで見た所です。

a0349576_11182542.png

Chromeはこの規則通り、段落「<p> </p>」の上下に1emの間隔を採り、ここだけ画像と行の間隔が広くなってしまったのです。



注意はしても見落としがちなので、本気のツールを作りました。 この簡単なツールは、Chromeの拡張機能「Stylist」で動作します。 Chromeで自分のブログを参照している時に、本文中に<p>タグを見つけたらマークして表示します。 私の場合は投稿に<p>タグを使う事はないので、どぎつく教えてくれる形にしました。 投稿本文以外に関係のない事なので、セレクタは「.POST_BODY」(=投稿本文)に限って働く様にしています。

.POST_BODY p {
background: #4DD0E0; }

.POST_BODY p::before {
content: " ◀P▶";
color:#fff;
font-size: medium;
font-weight: bold;
position:absolute;
animation:blink 0.5s ease-in-out infinite alternate; }

@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;} }

これを「Stylist」に登録して、常時働かせておけば見落としはなくなるという算段です。
実際に、今回の場所をChromeで見ると、下の様にグリーンバックとなり「◀P▶」が点滅します。

a0349576_11321862.png

私は、「Stylist」になんやかやの仕事をさせていますが、Chromeの参照場面に応じて働き、同時に幾つもの仕事をしているのではありません。 現在の所は全く負荷を感じる事はなく、「Stylist」は必須アイテムになっています。



〔代案〕
①この様なチェッカーを使用せずに、ブログスキンに上記コードを追加すれば、同様にチェッカーとして働くはずです。 但し、その場合は、他の人にもチェックの結果が表示される事になります。

➁もっとラフな手段で、ブログスキンにリセットCSSを入れる事も考えられます。 投稿本文以外の場所への影響を避けて、

.POST_BODY p { margin: 0; } 

などの指定が良いでしょう。 ただ、原稿に<p>タグが残ったままとなり、クリーンなHTMLを好む向きには嬉しくありません。

以上の代案は、本文中に意図的に<p>タグを使用する事がある(私はこれに該当)場合には、使えません。 ネット上のシステムを使わず、オフラインのHTMLエディターで書いて投稿すれば、クリーンなHTMLを維持し易いと思いますが。




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



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

検索ボタンのアレンジ / エキサイトブログ

2017年 09月 04日
メニュー側に設置できる「検索」は、自ブログ内の投稿を検索範囲に限定した検索が出来る、メンテ上で重要な機能です。 ブログユーザー以外の人が使う事は少ないかも知れませんが、使えるユーザー範囲の設定も出来て、ブログ内検索として必要十分なシステムだと思います。

ところで、エキサイトヘッダーの「検索」は「虫眼鏡アイコン」を使っているのに、メニュー側のはシステム本来の素っ気ないものです。 私は、このメニュー側の方が重要と思っていますから、こちらをクールに仕立てることにしました。 エキサイトの各種公式スキンを調べたところ、メニュー側はグラディエント背景を使う程度で、みな「検索」のキャプションの様です。 これは少し片手落ち、我もアレンジしようと思われる方は参考にしてください。

もちろん、アイコンに使うのは「Font Awesome」です。 ブログスキンへの導入手順は以下を参照ください。



下はサンプルとした公式スキンです。 DevToolsで「検索」の要素を調べると「finder」という名のtable構成の「form」が使われています。「form」は、入力・送信などの機能に使われるHTMLの基本的な部品です。「検索」機能もこの様に「form」を使いますが、エキサイトヘッダーの「検索」は名前を「search」として混信を避けている様です。

a0349576_11174480.png

アレンジ対象の「検索ボタン」調べると、「table」の3個の「tr」の2番目の中で、3番目の「td」のにある事が判ります。(この構造は公式スキンで共通と思いますが、以下のアレンジがうまく働かなければ、この構成が同じか調べてください)

a0349576_14591399.png

ここで、各「tr」の中に「td」が有りますが、調べると他の「tr」は「td」が1個ずつです。 そこで、このの「td」を指定するセレクタは、この「table」内では「td:nth-child(3)」だけで良いことになります。 本来なら「tr:nth-child(2) td:nth-child(3)」となりますが、前半が省略できます。 セレクタは一般にページの範囲で、他に影響が出なければ短い方が良いのです。

「table」はページの他所でも使われているので、特定できる方法を探します。 しかしこれは、親に「ID」を持った要素がありません。 でも「form」は「finder」という特別な名が付いているので、「form[name="finder"] td:nth-child(3)」というセレクタで、この「td」を特定できます。

このセレクタ指定で、「Font Awesome」を書き込む擬似要素の指定が出来上がりました。「::before」ではなく「::after」を利用したのは、この「td」が表示上で末尾なので、処理し易い方を選んだ結果です。

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

form[name="finder"] td:nth-child(3)::after {
content:"\f002";
font: 18px FontAwesome;
margin: 0 0 0 -30px;
vertical-align: -2px; }

a0349576_12085735.png

最初の「@import」指定行は、ブログスキンの一番最初の行として記入される必要があります。 2項目が、アンコン文字を表示させる指定です。「左マイナスmargin値」と「vertical-align値」で、アイコンの位置を調整しています。

うまくアイコンが出来ましたが、この状態はアイコンが上に被さって「検索ボタン」が押せません。 そこで、本来の「検索ボタン」に「position: relative; z-index: 1;」を指定して、表(上)側の配置を指定します。 この指定でアイコンが下になり見えなくなるので、「検索ボタン」の背景を無し、更に文字色も透明に指定します。

input[value='検索'] {
position: relative;
z-index: 1;
background: none;
color: rgba(0, 0, 0, 0); }

下の虫眼鏡アイコンの上に、透明な「検索ボタン」を置いた形です。 しかし、上の指定でボタンの枠線が変になりました。

a0349576_12322900.png

調べると「background: none;」の指定が原因でした。 DevToolsで下方を辿ると、この指定で「background-color: buttonface;」がキャンセルされます。

a0349576_12344086.png

「buttonface」は「user agent stylesheet」という、この場合はChromeが用意するデザインで、背景の透過指定でこのグラディエーションデザインが使えなくなりました。 立体で角ばった古風な枠線(HTMLのデフォルトです)は似合わないのでこれを非表示。 ついでにポイントすると手の形に変わる様に「cursor: pointer;」を追加しました。

input[value='検索'] {
position: relative;
z-index: 1;
background: none;
color: rgba(0, 0, 0, 0);
border: none;
cursor: pointer; }

a0349576_13282795.png

これでも使えるのですが、ボタンの形でないと落ち着きません。 実際にボタンとして働いている「input」要素の輪郭を仮に赤点で示し、反応する範囲を調節するために「width」を指定。(デフォルトは40pxで広過ぎです)

input[value='検索'] {
position: relative;
z-index: 1;
background: none;
color: rgba(0, 0, 0, 0);
border: 1px dotted red;
/* border: none; */
cursor: pointer;
width: 36px !important;
height: 24px; }

a0349576_13393743.png

ボタンらしくするには、この要素の赤枠を利用しても良いのですが、背景色は透過指定で利用できません。 そこで、下の擬似要素の方をボタンらしく仕立てることにします。 アイコン文字の実際の大きさは、文字背景色に薄い青を指定すると下の範囲と判ります。

a0349576_13441271.png

アイコン文字に「padding」「border」「border-radius」を指定した上で調整して、赤点の範囲に近付けました。 この両者を近付けておかないと、見えるボタン以外の場所をクリックしても検索が実行されてしまいます。

form[name="finder"] td:nth-child(3)::after {
content: "\f002";
font: 18px FontAwesome;
margin: 0 0 0 -40px;
vertical-align: -2px;
background: #B2EBF2;
border: 1px solid #aaa;
border-radius: 4px;
padding: 2px 8px; }

a0349576_13503114.png

下は赤点の仮指定を外したところです。 上手くアレンジ出来ました。

a0349576_13574857.png

擬似要素「::after」にフォバー指定「::after:hover」は、現在のCSS5では無効です。 どうしてもフォバーを演出したい場合は、上側の「input」要素の透過度を変えて、グレーアウトを表現が出来ます。 但し、上下の要素の大きさが厳密に一致していないので、ボタン周囲の背景によっては見苦しいかも知れません。 余り結果が良くなければ、最後の行は省きます。 この場合は全く問題がなく、下はグレーアウトした所です。

input[value='検索']:hover {
color: rgba(0, 0, 0, 0);
background: rgba(255, 255, 255, 0.5); }

a0349576_14272307.png

このアレンジでは、ボタンの大きさ、配置、枠線、ボタンの色、虫眼鏡の色、大きさ、等、すべて調整が可能です。 また、ボタン全体(擬似要素)に影を着けたり、背景色のグラディエーションで立体感を出す事も出来ます。

a0349576_14354622.png

以上の指定をまとめます。 スキンによって「検索ボタン」の大きさや配置が異なるので、実装には微調整が必要です。


/* 次行だけは、ブログスキンCSSの1行目に記載する必要があります */

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


/* 以下の項は、ブログスキンの任意の適当な場所に記載出来ます */

form[name="finder"] td:nth-child(3)::after {
content:"\f002";
font: 18px FontAwesome;
margin: 0 0 0 -40px;
vertical-align: -2px;
background: #B2EBF2;
border: 1px solid #aaa;
border-radius: 4px;
padding: 2px 8px; }

input[value='検索'] {
position: relative;
z-index: 1;
background: none;
color: rgba(0, 0, 0, 0);
border: none;
cursor: pointer;
width: 36px !important;
height: 24px; }

input[value='検索']:hover {
color: rgba(0, 0, 0, 0);
background: rgba(255, 255, 255, 0.5); }





この虫眼鏡アイコンは、ボタンにグラフィック背景を使う事でも実現可能で、以前はそれがメジャーな方法でした。 エキサイトの「ブログ向上委員会」では、エキサイトのブログシステムなのに虫眼鏡アイコンを表示しています。 これは、独自に画像を登録して表示させている様で、その画像を流用して同様の結果を得ることができます。

以下にその手順があるので、参照ください。

ただし、コードの単純さや、ノングラフィックの気軽さから、私は「Font Awsome」を使う方が良さそうな気がしています。 実際の読み込み速度や負担に関しては、詳しいデータを知りませんが。



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



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

ユーザーメニューを増やす / エキサイトブログ

2017年 09月 03日
ここで「ユーザーメニュー」と言っているのは、ブログタイトル部のすぐ近くで「ブログトップ | 投稿」または「Top | New Post」と表示されるメニューの事です。 多くの公式スキンでは、このスタイルのメニューが使われています。 以下の記事にその詳しい説明があるので参照ください。



このメニューに、各種のスイッチ(リンク)を追加すれば、エキサイトヘッダー側のスイッチは殆ど置き換え可能です。(「リンクに追加」など、置き換え不能なものがあります) HTMLで追加すれば、いくらでもリンクを追加出来ますが、リンクは大別して2種となります。

①全ての人にとって有効なリンク
➁エキサイトユーザーにとってのみ有効なリンクで、
 ▪ブログ所有者以外には各ユーザーの機能へのリンクになる
 ▪ブログ所有者には、所有者自身の機能へのリンクになる

この区別を考慮して、➁のタイプのリンクは出来ればクローズできるデザインが良いでしょう。 下は私の例で、青で囲んだリンクは全てアレンジで追加したものです。

a0349576_16093585.png

横に幅のあるリンクバー、フォバーで降りて来るプルダウンメニュー等を使って、余り大げさにならない様に、初めて見る人にも判り易い様に、配慮しています。



「フリーページ」機能が新設されましたが、「フリーページ」へのリンクは①のタイプです。 これは「お知らせ」とか「このブログについて」とか、実際はフリーページの用途に合わせた文字になるでしょう。 下の「xxx」部はユーザーごとに固有の文字となります。
<a href="//xxx.exblog.jp/fp/xxx">フリーページ</a>

一方、「フリーページ編集画面」へのリンクは➁のタイプです。(下の「/?id=2」はChrome、「/?id=4」はIE11の場合です)
<a href="//userconf.exblog.jp/entry/fp/?id=2">フリーページ編集</a>

「ブログの最新記事」 ①のタイプです。 自ブログの最新記事を表示します。
<a href="/i0/">ブログの最新記事</a>

「ログイン」 ➁のタイプで、エキサイトヘッダーの「ログイン」と同機能。 ただ、他の➁のタイプの他のスイッチを押せば、ログインしていないと必ずログイン画面に行きますから、設置は必要ではありません。
<a href="//www.excite.co.jp/?lin=1&si=blog&ru">ログイン</a>

以降すべて➁のタイプです。

「設定」 ブログ設定画面に入ります。 エキサイトヘッダーの「設定」と同機能。
<a href="//userconf.exblog.jp/config/basic/">設定</a>

「アクセス レポート」 エキサイトヘッダーの「レポート」と同機能。
<a href="//userconf.exblog.jp/access/blog/">レポート</a>

「下書き一覧」(記事一覧)
<a href="//userconf.exblog.jp/drafts/">下書き一覧</a>

「画像管理」
<a href="//userconf.exblog.jp/image/">画像管理</a>

「デザイン設定」(ブログスキン設定・編集画面)
<a href="//userconf.exblog.jp/config/design/pc/">デザイン設定</a>

「マイデータ」  エキサイトヘッダーの「フォロー中のブログ新着」と同機能。
<a href="//www.exblog.jp/mydata/favorite/new/">マイデータ</a>

他にも、SNSへのリンクなど、①か➁の区別を考えて配置すると、便利さとアピール性を両立できるでしょう。

それぞれのリンクを押した場合に、元ページを残して別タブにリンク先を表示したい場合は「target="_blank"」を追加します。
(例)<a href="//userconf.exblog.jp/image/" target="_blank">画像管理</a>




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



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