人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作

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

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

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10195345.png

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

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




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


 要素の特定 

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10260538.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10275428.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10285578.png


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

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

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10391875.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10420076.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10471385.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_10581740.png


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

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11082194.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11111612.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11124033.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11152262.png


 修飾内容の整理とコピー 

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11233847.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11260411.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_11341542.png

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


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

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

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_a0349576_12164719.png

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

Chrome DevTools を使ってみよう (15) 実践編 / 擬似要素の編集・Sourceウインドウの操作_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で中央配置の画像をポイントすると、フォバー背景色が表示されるのを回避するものです)




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



by Ataron | 2017-08-16 13:56 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。