Studio TA Subsite の案内とお知らせ

タグ:CSS・HTML ( 124 ) タグの人気記事

エキサイト編集画面のアレンジ(51) 編集アイコンをWebフォントで描画する

2017年 08月 19日
編集アイコンのデザインは、アレンジを何度か繰り返して現在に至ります。 当初は、その数にしり込みしていましたが、取り組んでみるとそう多いと感じる事はなくなりました。

アイコン配置位置の組み換え、スプライト画像の改造、枠線のCSS描画化、スプライト画像の位置調整と進み、最近はスプライト画像からフォント描画への切り替えに進んでいます。

フォント描画に手を着けたのが以下の(47)からです。

しかし、アイコンに使える適当なフォントが複数にわたり、また「左寄せ」「右寄せ」「中央寄せ」に適したフォントがない、YouTube、インスタグラム等のグラフィックに適したフォントが無い、等の点で限界を感じて、中途半端なままでした。

しかし、エキサイトブログが「FontAwesome」というWebフォントを利用していることを先日発見しました。

このWebフォントのデザインは、現状のフォントニーズに良くマッチしていて、しかも、エキサイトの編集画面やブログスキン上で、このフォントが利用できる事が判りました。 このフォントを詳しく調べると、編集アイコンのほぼ全てが、このフォントで実現出来そうです。

以下が、このフォントの一覧です。

そこで今回は、全ての編集アイコンのフォント描画を試して見ました。

実際のフォントの指定は、下の例の様に、この「FontAwesome」特有のフォントコードを擬似要素のプロパティ「conent:""」内に指定します。

#exbtn_bold::before {
background: #fff;
content: "\f032";
font: 16px /22px FontAwesome;
padding: 3px 4px; }

以下がその試みの結果です。

a0349576_15475287.png

❶➌❹❺ は「::before」「::after」を併用して、「FontAwesome」による「絵」と「Tahoma」による「文字」を組み合わせています。 また、フォント大小指定の「F」に「Tahoma」を指定して、結果としてこの2種のフォントだけで、編集アイコンを構成しました。

は少し苦労しましたが、背景色に「-webkit-gradient」を使っています。 しかし、こればかりは画像のアイコンにかないません。

下の「自動改行」のアイコンも、「FontAwesome」で描画しています。 これは「transform: rotate(90deg); 」で文字を回転する必要がありました。 どういうわけか良い「Enterマーク」を用意したフォントは少ないです。

#exbtn_autoeol.activeBtn::before {
background: red;
content: "\f149";
font: 18px /21px FontAwesome;
color: #fff;
padding: 0px 5px;
display: block;
transform: rotate(90deg); }

a0349576_16304941.png

スプライト画像の呼び込みを指定しなかったので、 の部分などにはグレーアウト画像が無く、完全なプランクになっています。

編集アイコンの「hr」(水平線)は非推奨になりつつあり、現実にも余り使用されていない様なので、上段に移動しました。(上段は2行アイコンオプションを使用しないと表示されません) インスタグラムのアイコンが追加され、アイコン列の幅が増えて来ているので、整理したわけです。 また、同時に右側の各種機能アイコンの並びを改め、使用頻度の高そうなものを中央に寄せています。 これらアイコンデザインと配置変更は草案で、実装は先に考えています。




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



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

Chrome DevTools を使ってみよう (19)

2017年 08月 18日
エキサイトブログのトップページを DevToolsを使って調べます。 以下のリンク先をサンプルにしているので、Chrome・DevToolsで開きながら読まれると、より判り易いと思います。



 リンクボタンのアイコンはWebフォント 


 アイコンの実体は文字 

ログインしたエキサイトユーザーにはトップページに3つのボタンが表示されます。

a0349576_18024068.png

このボタンのアイコン部分の要素を調べると、興味深い事が判ってきます。

a0349576_18041621.png

これは、ボタンの「a要素」の「::before 擬似要素」として指定された「文字」なのです。

.navHeader_navLink.is-entry > a:before {
content: "\f040"; }

文字コードは「\f040」となっていますが、このフォントの他の文字を調べるために、以下の様なプロパティをメモ帳上で細工しました。 文字の間隔を「10px」ずつ開け、本来の位置より「左に600px」ずらし、フォントは一般に16進数でコード指定するので一桁に「0~f」の16文字並べ表記されるという方法です。 幾つあるのか不明なので、とりあえず「00~4f」の60個を表示してみる事に。

letter-spacing: 10px;
left: -600px;
content: "\f000\f001\f002\f003\f004\f005\f006\f007
\f008\f009\f00a\f00b\f00c\f00d\f00e\f00f\A
\f010\f011\f012\f013\f014\f015\f016\f017
\f018\f019\f01a\f01b\f01c\f01d\f01e\f01f\A
\f020\f021\f022\f023\f024\f025\f026\f027
\f028\f029\f02a\f02b\f02c\f02d\f02e\f02f\A
\f030\f031\f032\f033\f034\f035\f036\f037
\f038\f039\f03a\f03b\f03c\f03d\f03e\f03f\A
\f040\f041\f042\f043\f044\f045\f046\f047
\f048\f049\f04a\f04b\f04c\f04d\f04e\f04f\A";

これを「+」で「.navHeader_navLink.is-entry > a:before」のセレクタのCSSを作り、ソースウインドウで貼り付けました。 60個ほどのフォントが表示されました。 表示が重なる他の要素は、みんなキーボードの「h」で非表示にしています。(「h」は、要素を仮り非表示にするショートカットです)

a0349576_18302411.png

「\f040」は「ペン」ですが、タグのアイコンも見覚えがあります。 このアイコンに使える文字は、エキサイトが標準で使用しているフォントの様です。 他の所でも、このフォントを利用しているかも知れません。


 Webフォント「FontAwesome」 

この要素のCSSの下の方を見ると、「font-family: "FontAwesome";」と指定しています。

a0349576_18420375.png

「FontAwesome」を検索すると、これは有名な「Webフォント」のひとつだと判りました。 下のリンク先にこのフォントの一覧があります。
このフォントを利用するには、「ページのhead要素内に指定リンクを表記する必要」があります。 フォントはWebフォントのサーバーにあり、ページ上で表示する際に呼び込む必要があるわけです。

アレンジ上でも、このフォントを使える可能性がありますが、エキサイトがこのフォントを使用しているページ内に限られます。 例として、ブログスキン上では可能です。(ブログ本文内での表示はできませんでした)

ブログスキンのアレンジで、どうしても使いたいアイコンデザインがこの「FontAwesome」の中にあれば、このトップページの使い方を真似ることで表示可能です。 文字は500種もあるそうですし、Webフォントですから、機種やOSを問わず同じデザインで表示できます。 また、色やサイズ、回転、アニメーション、重ね合わせ等も可能となっています。




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



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

Chrome DevTools を使ってみよう (18)

2017年 08月 18日
エキサイトブログのトップページは、デザイン工夫の良い見本です。 今回は、DevToolsを使って、このページを調べてみます。 以下のリンク先をサンプルにしているので、Chrome・DevToolsで開きながら読まれると、より判り易いと思います。



 リンクボタンのデザイン 


デザイナーは小さな所に気を使い、それとなくスマート感を演出します。 ページの右上のユーザーの利用頻度の高いメニューボタンは、マウスポインタを乗せると「ふわっと淡く」なります。 これも、そんな演出のひとつです。

a0349576_12394166.png

このボタンを右クリックしてDevToolsを開くと、下の様に「<span>記事を書く</span>」がターゲットになって開きます。

a0349576_12413563.png

しかし、右ウインドウのCSSを見ても、アイコンや文字の色などの指定がなく、どうやら親要素の方にそれが有りそうです。 そこで親要素の「a」要素にターゲットを移してみました。( a要素を親にしているのは、このボタンでリンク先を開く様にしたからで、これは一般的なボタンのHTML構造です)

a0349576_12474094.png

a要素のCSS(赤枠)に、ブルーのcolor指定が出て来て、ここでボタンの色を指定している事が判ります。 試しに「color」プロパティのチェックを外すと、ボタン全体が黒になります。

a0349576_12593252.png

「color」プロパティの下に「transition」プロパティがあります。 これは、変異を次第に変化する様に表示し、アニメーション効果を演出するものです。 その「値」は「0.2秒」の意味で、これが「ふわっ」の効果の元です。 これもチェックを外すと、効果の意味が良く判ります。

「淡くなる」の指定は「:hover」時の状態です。 これはToolsの右上の「:hov」からアクセスしない限り、内容を見たり編集する事が出来ません。 下図は「:hov」→「□:hover」にチェックを入れた状態です。

a0349576_13043301.png

右ウインドウに「a:hover」のCSSが表示されました。 ここのプロパティが、マウスポインタを乗せた時の演出です。 2個のプロパティのチェックを外すと、その方法が判ります。

a0349576_13074051.png

「opacity」を外すと「淡く」なっていたアイコン・文字が明瞭になります。 このプロパティが「淡く見せる」の指定です。 また「text-decoration: none;」の指定は、リンク文字の下に付く下線を消していた様です。 確かに下線が出ると汚く見える事が多いですから。

「記事を書く」だけブルーにしたのは、右側の「ブログ管理」「メニュー」はメニュー表示になるが、「記事を書く」は編集画面に飛び「ちょっと違う」という所を明らかにしたかったのだと思います。 このボタンに設定された幾つかの工夫は、いずれもブログスキンのアレンジにも利用できますね。




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



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

Chrome DevTools を使ってみよう (17)

2017年 08月 17日
背景画像の設定は、ページデザイン上で必ず必要になります。 テクスチャーの利用や、ネット速度の向上で、最近は大きい画像を背景にする事も多くなっています。 今回はその基礎になるテストです。 以下のテスト手順は、実際のアレンジのテスト作業にも応用できると思います。

Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 背景画像のプロパティ書式をテストする 〕 


 「body」の確認とプロパティの準備 

サンプルページの下方の、空白の多い所までスクロールしています。 DevToolsを起動して、左ウインドウのHTMLを上方に辿り「body」と言う要素を探し、これをクリックしてターゲットにしました。

a0349576_19300478.png

「body」という要素はネット上の殆どのページに有りますが、その全てで「body」に背景画像や背景色を設定しているとは限りません。 しかし、このサンプルページは「body」にテクスチャーを背景画像として設定しています。 右側のCSSを見ると、青い下線付きの「URL」の文字列があり、それがすぐにわかります。 この「background」プロパティのチェックを外すと、ページ全体の背景が白になるのが確認出来ます。

今回は、背景に画像を使いたいので、このページのブログジャンルのバッジの画像を利用します。 下図はToolsの左上のボタンを押し、このバッジをクリックしてターゲットにした所です。

a0349576_19390298.png

左ウインドウのHTMLを右クリックして、メニューでこの要素のコピーを指定します。

a0349576_19404907.png

これをメモ帳にペーストして、バッジの画像のURLを調べました。(下のその内容ですが、改行して見易くしています)

    src="http://md.exblog.jp/img/genre/banner/2/banner_l_11-9.gif"
alt="ブログ"
style="background: none;">

必要なのは上の太字の部分だけです。 今回はネットを調べて、背景画像の配置に関して、使い手の多いプロパティを用意しました。 メモ帳の上で、これを使える形に清書して、上のURLも組み込んで用意したのが下です。

    background: url(http://md.exblog.jp/img/genre/banner/2/banner_l_11-9.gif);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-size: cover;
background-size: contain;



 プロパティをまとめて貼り付ける 

それではToolsに、これらのプロパティを一度に貼り付けます。
背景を指定する対象は「body」ですから、これをターゲットに設定して、Toolsの右上の「」を押して、新しいCSS項を作りました。

a0349576_19502547.png

右上の「inspector-stylesheet:1」のリンクを押し「ソースウインドウ」で作業します。

a0349576_19542338.png

「ソースウインドウ」が表示されました。 プロパティの入力を待つ状態でカーソルが入っています。

a0349576_19572825.png

先ほどメモ帳に用意したプロパティを貼り付けたところです。 貼り付けたとたんに、Chrome画面の様相が一変します。

a0349576_20055738.png

デフォルトの「body」の背景指定に対して、Toolsは「inspector」の指定を優先し、直ちに背景指定が変更されたのです。



 各プロパティの効果をテストする 

Toolsの左上「Elements」を押して、メイン画面に戻ります。 CSS項に貼り付けたプロパティのチェックを、最初の行以外は一旦全部外します。 この状態は、「background」プロパティの「値」に、背景画像の「URL」を指定しただけですが、この書式は画像を敷き詰めるのがデフォルトという事です。

a0349576_20094855.png

この後は、2行目以降のチェックを1個ずつ入れ、各プロパティの効果をテストしました。
以下が有効にしたプロパティとその時のChrome画面の表示です。

background-repeat: no-repeat;
 背景画像が左上隅の1個(大きな画像なら様になる)
a0349576_20321147.png

background-repeat: repeat-x;
 背景画像が横方向に並ぶ
a0349576_20360079.png

background-repeat: repeat-y;
 背景画像が縦方向に並ぶ
a0349576_20371182.png

background-size: cover;
 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
 (注)「cover」はページの高さに画像を拡大した状態です。
a0349576_20381136.png

background-size: contain;
 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
 (注)「contain」はページの幅に画像を拡大した状態です。
a0349576_20420828.png

〔参考〕
「background」の書式には、背景色、背景画像(色と画像が記述されていると画像が優先)、背景画像の繰り返し、背景画像の表示位置、などの複数の指定をまとめて行う事が可能です。「-color」「-image」「-repeat」「-position」など複数プロパティ行を纏められ、システムへの負担も減ります。
順序に決まりはなく、下の参考例の様に半角スペースで区切って列挙します。

background: #aabbcc url(~~~.gif) no-repeat;



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



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

Chrome DevTools を使ってみよう (16)

2017年 08月 16日
DevTools を使い慣れた人には自明の事かも知れませんが、DevToolsのウインドウ設定の基本を整理します。


 〔 DevTools のウインドウ設定 〕 


 Chrome画面とDevTools 同居か別居か 

DevToolsの右上、「」メニューの最初で、「Chrome画面とDevToolsが同じウインドウ」 か、「Chrome画面とDevToolsが別ウインドウ」 かが選択出来ます。

a0349576_18260792.png

デスクトップに余裕があれば「別ウインドウ」として、Toolsを拡げて使う方が快適です。 特にHTMLは、折り返しが少ない方が構造が読み易くなります。(私の説明は掲載面積の関係でにしている事が多いですが)


 DevTools は縦分割か横分割か 

DevTools のウインドウの右上の「」をクリックして、メニューから「Settings」を押します。

a0349576_17593882.png

「Settings」の最初の「Preferences」→「Appearance」で、下図の「Panel layout」の設定があります。
これは DevTools の複数のウインドウを、縦分画(vertical)にするか横分割(horizontal)にするかの設定です。

a0349576_18115683.png

私はHTMLを縦方向に広く見たいので「vertical」に設定しています。 私の説明のハードコピーは縦分割の状態ですが、横分割にしていても特に判り難いことはないでしょう。(横分割はHTMLの折り返しが一番少ない設定です)


 ウインドウの幅調節 

下図は、Chrome画面とDevToolsが同居したの設定ですが、
▪Chrome画面とDevToolsの境界
▪DevToolsの左ウインドウと右ウインドウの境界
は、それぞれ境界部をドラッグして調節出来ます。

a0349576_18123395.png

DevToolsが独立したでも同様で、左右ウインドウの境界をドラッグして調節出来ます。


 ウインドウ内表示の拡大・縮小 

ウインドウ内表示の拡大・縮小を「Ctrl + マウススクロール」で操作できる様になったのは、いつからでしょう。 Chrome画面(ブラウザ画面)は、当然この操作に対応しています。 また、DevToolsもこの操作に対応しています。(使う人は少ないと思いますが「Ctrl 」+「+」「-」でも操作可能です)

a0349576_18542827.png





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



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

Chrome DevTools を使ってみよう (15)

2017年 08月 16日
今回は実践編です。 実際に私がスキンアレンジをした経過の順を追ってレポートします。

私は、「右クリック禁止」のブログパーツを利用しています。 コピー禁止などは全く考えになく、画像の拡大視をスマートに実現したいからです。 今までの基本的な設定は以下を参照ください。

で、この今までの設定で、少し気になっていたのが、このブログパーツの「CLOSE」の表示です。 どこをクリックしても抜けられるので無くても良いが、抜け方に迷わない様に置いています。

a0349576_10195345.png

しかしこれは、白背景用にデザインされた小さな絵で、横の余裕が無くていまいちです。 このグラフィック表示を文字で描画する様にアレンジします。

以下の説明は私のブログページをサンプルにしています。 ここで説明するアレンジは既にスキンに登録しているため、DevToolsで開くとアレンジ後のCSSになっていて、説明と相違があります。 アレンジで追加されたプロパティのチェックを外すと、アレンジ前の状態が判ります。 また、このブログパーツをアレンジ無しで使用されている方のページをToolsで開けば、説明の通りでしょう。 アレンジ前とアレンジ後をToolsで比較されると、説明が判り易いと思います。




 〔 右クリック禁止ブログパーツの「CLOSE」を文字化する 〕 


 要素の特定 

ポップアップに表示される「CLOSE」をDevToolsで調べようとすると、うまく出来ません。 下の様に画像の要素には辿り着けるのですが。

a0349576_10260538.png

Chrome画面で画像をクリックしてポップアップさせても、Toolsにはポップアップの要素らしきものが表示されません。

a0349576_10275428.png

こういう時は、Toolsの左上のボタンが威力を発揮します。 これを押してChrome画面で「CLOSE」をポイントすると、Toolsは簡単にターゲット要素を探り当てました。 この要素は画像と全く違った所にあり、ブログバーツのスクリプトでこれを導く様です。

a0349576_10285578.png


 擬似要素「::before」を使ってアレンジ 

要素は「img」で「CLOSE」の画像そのものです。 アレンジ方針としては「擬似要素」の「::before」を使って文字を表示させるのですが、この要素に対して指定しても上手く文字が出てくれません。 そこで、この親要素「a.close」をターゲットに変えて「::before」を指定しました。

Toolsの右上の「」で、新しいCSS項を作成します。

a0349576_10391875.png

セレクタ「a.close」を「a.close::before」に書き換えて、「CLOSE ×」を白色文字で表示する指定にすると、今度は上手く文字が出てくれました。(「×」は「ばつ」を変換して出る記号文字です)

a0349576_10420076.png

元のグラフィックを非表示にします。「img」をターゲットに変えて「」ボタンでCSS項を作ると、「img.close_image」という適切なセレクタを設定してくれました。 セレクタが「img」だと、画面上の全部の画像が消えてしまいます。 首尾よくグラフィックの「CLOSE」だけが消えました。

a0349576_10471385.png

左ウインドウのHTMLを見ると、先ほど作った「::before」は、「a.close」と「img」の間に出来ています。 これをクリックしてターゲットにすると、右ウインドウに内容が表示されました。 以降は「::before」はこちらで編集します。

a0349576_10581740.png


 擬似要素「::after」も加える 

さて、一応「CLOSE ×」が出来たのですが、「×」が小さ過ぎます。 しかし、この文字だけのサイズ変更はできません。 そこで、この文字のみを「::after」を使って表示し、フォント修飾を別個にする事にしました。 下図は、「::before」の方を「CLOSE」だけとし、「×」を表示する「a.close::after」のCSS項を作っている所です。

a0349576_11082194.png

「×」の文字サイズを「36px」で「bold」を指定し、サイズのバランスは良くなりました。

a0349576_11111612.png

「::before」の方は「20px」「bold」に。

a0349576_11124033.png

文字の高さ位置が変ですね。 これを調節する一番簡単な方法は「position: relative;」の使用です。(他の方法もありますが大変です) 下図の様に「top: -4px;」に決めました。 こういう値はフォント種やサイズで変わる事があります。

a0349576_11152262.png


 修飾内容の整理とコピー 

ここまでTools上で加えた修飾を、整理してみます。 下図の様に編集したCSS項の右上にある「inspector-stylesheet」のリンクを押します。

a0349576_11233847.png

これで、編集を加えたCSSの内容が全て一覧出来ます。

a0349576_11260411.png

これを見ると、「::before」「::after」で同じ指定があります。 こういうのは纏めた方が綺麗で、共通のプロパティを「a.close」で指定します。(コードは1行減るだけですが) この「Source」ウインドウでの編集は、ここまでの「Elements」の側にも反映します。

a0349576_11341542.png

これでChrome画面が目的通りにアレンジされているなら、「Source」ウインドウの内容をメモ帳などにコピーして、後でブログスキンのCSSに追加貼付します。


 スキンに登録してみないと判らない事 

PCスキン編集で実際にCSSに追加登録をしてみると、思い通りにならない事はままあります。 Chromeでは上手く表示されたのに、IE11では違うとか、Chrome上でさえToolsの状態と異なる時もあります。 これは頑張り所で、その原因を知れば得るものが多いものです。

今回は、見落としがありました。 スキンのCSSに追加して画像のポップアップを試すと、「CLOSE」を押そうとすると、下の様にフォバーで白の文字背景が出てしまいました。

a0349576_12164719.png

これは、もっと下位で「:hover」時のリンクの背景色を指定していて、これが継承されていると思われます。 この「a.close」要素の「:hover」時の背景を「none」(無し)に指定しました。

a0349576_12224214.png

これで白反転がなくなりました。
更に、「CLOSE ×」の配置が少し画像に近過ぎると感じたので、「a.close」に「line-height: 45px;」を追加指定して、距離を採っています。 再度マイスキンのCSSにこの指定を追加登録して、アレンジ完成です。

以下に以前からのアレンジ内容も含めて、「右クリック禁止」ブログパーツのアレンジを整理しておきます。

「右クリック禁止」ブログパーツ アレンジCSS

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br, #facebox .b {
display: none !important; }

#facebox .body {
background: rgba(25,25,25,0.04) !important; }

#facebox .msg {
display: none; }

#facebox .footer {
border: none !important; }

a.close {
color: #fff;
font-weight: bold;
line-height: 45px; }

a.close:hover {
background: none; }

a.close::before {
content: "CLOSE";
font-size: 20px;
position: relative;
top: -4px; }

a.close::after {
content: "×";
font-size: 36px; }

img.close_image {
display: none; }

.facebox_overlayBG {
opacity: 0.8 !important; }

.POST center[draggable=""] > a:hover,
.post center[draggable=""] > a:hover{
background: none; }


(最後の項は、IE11とEdgeで中央配置の画像をポイントすると、フォバー背景色が表示されるのを回避するものです)




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



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

Chrome DevTools を使ってみよう (14)

2017年 08月 14日
ネット上の優れたデザイン手法を見て、それを自分も使いたいと思う場合があります。 そのデザインをDevToolsで調べて、もしCSSの技術のみで実現したものなら、自分のページでも同じ事が出来る可能性があります。 今回は、デザインの輸入です。

Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 デザインを輸入する 〕 


サンプルページの右メニューに「検索Box」があります。 このボタンは虫メガネの絵の立体的なボタンです。 これは、本来は「検索」の文字の「検索フォーム」(定型の部品)のボタンを、CSSで修飾してこのデザインに仕立てています。 下図はこのボタンをToolsのターゲットにした所で、「input[type="SUBMIT"]」という要素です。

a0349576_19335703.png

ある程度慣れて来ると、右ウインドウのプロパティの中で、「background」がこのデザインの肝心な所だと判ります。 背景画像(虫メガネ)のURLが指定され、gradientというグラディエーション描画法を指定して立体感を出しています。 複雑な書式の理解は後回しにして、このデザイン手法のまるごとコピーを試して見ます。 上手く行かなかったら、そこで考えれば良いのです。

このボタンデザインは、公式スキンの後期で導入されたか、或いはエキサイトのオリジナル追加かも知れません。 デザインのコピー先として、公式スキンを私のページに適応して用意しました。 私のページの側もToolsで開いていますが、このスキンの検索ボタンは昔ながらのオーソドックスなものです。

a0349576_19512003.png

ここで、左ウインドウの「検索フォーム」の構造を見比べると、同じエキサイトのスキンなので、両者ともほぼ同じなのが判ります。 CSSの修飾でこの違いが演出されているのは間違いありません。 この様な、親戚のスキンからのデザインコピーは問題が余り生じません。(全く無関係のサイトからデザインを輸入するとなると、それなりのスキルが必要になるでしょう)

下図は、コピー元のサンプルページの右ウインドウを、内容を見易くするために大きく拡げた状態です。

a0349576_20042337.png

この「background」プロパティの「値」の部分を、まるごとコピーしました。 こういう値の部分は、下手に改行を入れると値として無効になる事が良くあります。 扱いづらくてもそのままが良く、但しコピー先に末尾の「;」をコピーしない様にします。

下図は、試験的な私のページの「background」プロパティに、コピー元の「値」を貼り付けた所です。

a0349576_20220390.png

虫メガネと背景色が即表示されましたが、「検索」の文字がそのままです。 背景に対して、この文字は表側の表示の様です。 他所をクリックすると、貼り付けた「値」が決定され下の様になりました。

a0349576_20262223.png

コピー元のサンプルページでは、この「検索」の文字を何んらかの方法で隠しているはずです。 調べると「text-indent」で文字を見えない位置に飛ばしています。 しかし、その指定でボタン自身の幅が狭くなるので、「width」を指定しています。

私の試験的なページでは、文字の色を透明にしてみました。

a0349576_20381781.png

「color: rgba(0, 0, 0, 0);」のブロパティを追加したのですが、これは一行で済みスマートです。



デザインの肝心の部分をコピーして、後は周囲に親和させると完成です。 このボタンに限らず、Toolsを用いてデザインの輸入を試せば、失敗しても知識が増えます。 優れたものから学ぶ事は多いのです。




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



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

Chrome DevTools を使ってみよう (13)

2017年 08月 14日
Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 小数値を「↑」「↓」で調整 〕 


下図は、タイトル部に「opacity」というプロパティの「値」を設定している所です。

a0349576_15425925.png

「opacity」は要素の表示上の透過率を指定するもので、この指定が無い場合の値は非透過「1.0」です。 この値が「1.0」より小さくなると次第に透明に表示され、その背景の要素が見えて来ます。 上図では「0.3」の値の設定で、タイトル文字が薄くなり透過している状態です。「opacity」を使う場合、私は「0.7~0.5」等に指定する事が多いのですが、値が「0」は透明になり要素は存在しても見えなくなります。

この様な「0~1.0」(単位なし)の小数値をとるプロパティの場合、値の調節を「↑」「↓」キーで操作すると、「0.5」→「0.6」→「0.7」と調節したいのに「0.5」→「1.5」→「2.5」となってしまいます。

いちいち直接数値を入力するのは可ですが、スムーズに透過率を調節しなが値を決めることが出来ません。 こんな場合のために、Toolsでは以下の「↑」「↓」キー操作のステップ変更が出来ます。

●「Alt + ↑」「Alt + ↓」の操作は「0.1」ステップの増減
●「Shift + ↑」「Shift + ↓」の操作は「10」ステップの増減
●「Shift + PageUp」「Shift + PageDown」の操作は「100」ステップの増減

特に、最初の「Alt + ↑」「Alt + ↓」は覚えておくべきショートカットです。




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



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

Chrome DevTools を使ってみよう (12)

2017年 08月 14日
Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 HTMLを編集する 〕 


 テキストデータの編集 

タイトル文字のデサイン上の修飾は、CSSで実現出来ます。 しかし、タイトル文字の文言自体の内容を変える事はHTMLの編集になります。 ここでは、タイトル文字のテキストを編集してみます。

タイトル部をターゲットにして、下図の様にToolsを起動します。

a0349576_22290152.png

左ウインドウの「post-title」がターゲットで反転していますが、これを右クリックして表示されるメニューで「Edit as HTML」をクリックします。

これで、下図の様に「 <h2 class="post-title"> ~~~ </h2> 」という要素のHTML全体が、編集可能な状態で開かれます。(下図の赤枠)

a0349576_22331375.png

この枠は、開かれた状態でカーソルが入っていて、一般のテキストエディタ同様に、枠内を編集できます。 編集はHTMLの直接編集ですから、枠内のタグも編集可能です。 ここは、タイトル文字の内容を書き換えて以下の様にしました。 改行「<br>」も入れています。

a0349576_22502784.png

編集を終えてこの枠から出るには、Toolsの右ウインドウかChrome画面をクリックすると良いでしょう。 左ウインドウでは上下の他行をクリックすると枠が閉じます。 枠が閉じた時に、編集による変化がChrome画面に反映します。 下図の様に、タイトルの文字内容が書換えられました。

a0349576_22583240.png


 HTMLタグやHTML構成の編集 

今度は、「post-title」の外側(親)の「post-head」をターゲットにしました。 これを左クリックしメニューで「Edit as HTML」をクリックします。

a0349576_23273737.png

「post-head」は内部に「inner」そしてその中に「postdate」「post-admin」「post-title」等を含んでいます。 開かれたHTMLの編集枠には、その入れ子構造が表示されます。

a0349576_23301744.png

この複数のタグや、タグの入れ子の構成も直接編集が出来ますが、その結果がHTMLとして正しい構造かは編集者の責任です。 この枠の表示をHTMLの構成が判る様に整形すると以下の様になります。

a0349576_23360110.png

これなら判り易いのですが、ToolsのHTML編集枠は、幅を拡げても綺麗になりません。 広い範囲のHTMLを読み込んでみると、枠内で編集するのは大変に困難だと判ります。 このToolsの左ウインドウは、ページのHTML構成の表示はとても判り易いのに、編集枠に読み込むと構成が判りにくくなってしまいます。 複雑な入れ子構造を展開するので、仕方がないのかも知れませんが。

従って、狭い部分の書き換えなら出来るのですが、ブログページ全体のHTML構成などの編集は、簡単ではないでしょう。 エキサイトのスキンアレンジで、DevToolsをHTMLの編集に利用する場合、左ウインドウに表示されるHTML構成を参考にしながら、HTMLをメモ帳等のテキストエディタにコピーして編集すると言った、間接的な使用方法が適している様に思います。



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



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

Chrome DevTools を使ってみよう (11)

2017年 08月 13日
Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 ウインドウ幅をコントロールする 〕 


 ウインドウ幅を知る必要性 

自ブログをどの様なウインドウ幅で見てもらうのか、それを小型のノート画面を前提にするか、幅広いデスクトップモニターを前提にするか、ここはスキンデザインの要所です。

例えば、Chromeのウインドウを狭めて行った場合に、1000pxの幅まではデザイン崩れとならない様にしたいとします。 大雑把なデザインなら大した話ではないですが、手の込んだデザインを施していると、あちらは残しこちらは削りという、すり合わせの必要が出て来ます。

そんな場合、1000pxに納まるかを確かめるには、デザインの最中にウインドウ幅を知る必要があります。


 DevToolsを起動するとウインドウサイズが表示される 

Chromeでアレンジ対象のページを表示してDevToolsを起動すると、Chrome画面の右上のコーナーにウインドウサイズが表示されます。 Toolsが別ウインドウか同一ウインドウかには関係ありません。

a0349576_22564471.png

この表示はウインドウのサイズを変更した時にだけ表示され、数秒後に自動的に消えます。 少し早過ぎて不便ですが、常時表示にする方法は無い様です。 この機能で、ウインドウ幅を変えながらテストし、崩れる限界の幅を一応知れるようになります。

しかし、マウスでウインドウ端を掴んでドラッグする操作が、つきまといます。 これは動きが粗すぎて調整し難い時があり、上手い方法を探して見つけました。


 ウインドウのサイズ変更モード 

ウインドウ枠の上辺(タイトルバー)の何もない所を右クリックして、メニューの「サイズ変更」を押します。

a0349576_23195195.png

これでマウスポインタが十字矢の形になり、ウインドウが「サイズ変更モード」になります。

a0349576_23200639.png

マウスでウインドウ端をドラッグするだけでは、このマークを出した意味は無いように見えます。
しかしこのモードに入ると、「Ctrl」+「」「」のキー操作でウインドウ幅を調整できる様になっています。 このキー操作で、ウインドウの右上の幅表示を見ながら、とても微細で正確な調整作業ができます。

注意が要るのは、この操作中にマウスが動くと、甚だしくウインドウサイズが変わってしまう事です。「サイズ変更モード」に入ったら、下手にマウスに触れない様にします。

またこの操作で、ウインドウ幅をピタリと決まった幅に固定する事が出来ます。 マウスのドラッグではpx単位の正確さを求めるのは大変です。 方法は簡単で、上記の操作で指定幅に合せ、マウスに触れない様に「Enter」キーを押すだけです。 これで自動的に「サイズ変更モード」が終了し、ウインドウ幅が固定されます。

デザインの幅調整では、このウインドウ幅の微調整操作が一番役にたちました。


 他に使えるかも知れない機能 定規表示 

DevToolsの最上段 右側の「」マークをクリックし、メニューの「Settings」を押します。

a0349576_00175780.png

「Settings」で「Preferences」→「Elements」の項を探し、最後の「Show rolers」にチェックを入れ、右上の「×」でメイン画面に戻ります。

a0349576_00182239.png

これで、Chrome画面の上辺と左辺に定規が表示される様になります。

a0349576_00324050.png

但し、Tools左ウインドウ内か、右ウインドウのセレクタ上にマウスポインタが無いと定規は表示されません。 目盛りが読み取り難い事もあって、崩れる限界の幅を正確に知るには使い難いです。


 他に使えるかも知れない機能 エミュレーション/カスタムデバイス 

上と同様に「」マークからメニューの「Settigs」に入り、「Devices」を開きます。 ここは使用したいエミュレーション環境を選んで登録する画面ですが、ここで最上段の「Add custom device...」を押します。

a0349576_01024816.png

以下の様なカスタムデバイスの登録画面が出ます。 ここで、エミュレーションする表示画面のサイズを自由に設定できます。 下図は「幅1000px 縦720px」のデスクトップモニターを指定しています。 「touch / no touch」でポインタの表示と扱い方が変わります。 最後の枠で「LCD1000720」と記入していますが、ここは空白でかまいません。

a0349576_01245446.png

適当な登録名を付け「Add」を押すと、カスタムの仮想モニター「MinLCD」が登録されました。

a0349576_01270373.png

右上の「×」でメイン画面に戻り、上段の左の「Toggle device toolbar」を押します。

a0349576_01292502.png

Chrome画面が、デバイスのエミュレーション画面に変わります。

a0349576_01372764.png

左の「▼」マークを押し、デバイス選択のパレットで先ほど登録した「MinLCD」を選択。

a0349576_01561304.png

これで、幅1000pxの仮想モニターでの表示が確認出来ます。

エミュレーション表示は、調節可能なウインドウ幅の概念がなく、PC画面で言えばブラウザウインドウを最大表示した状態です。 しかもページを適当に拡大縮小して、画面幅にフィットさせて表示します。

これでは、デバイス幅を狭めても「ページの幅を狭める」のでなく「ページ全体の縮小表示」となり、知りたい事が判りません。

残念ながら今回のニーズには使えませんが、エミュレーション機能は大変に有効です。 カスタムデバイスの登録は他のところで必要になるかも知れません。

エミュレーションを終了するには、Toolsメイン画面の上段の「Toggle device toolbar」を押します。




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



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