Studio TA Subsite の案内とお知らせ

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

ブログ上のコード表記について

2017年 11月 24日

スマホのコード表記枠に問題


ブログ上にコードを表記するのは以前からしている事ですが、前ページの事象で調べて行くと今までの記載時に使っていた定型が、思い通りに効していない事が判りました。

PC版の方は前ページの問題だけで、「overflow-y:hidden」を明示的に指定して、問題を出ない様にできました。 下は今までの定型の「overflow:auto」を「overflow-y:hidden」に変えた形です。(「overflow-x:auto」は省いてもいける様です)

<div style="overflow-y:hidden;max-width:660px; padding:0 30px; background: #eee; border: 1px solid #aaa;">
<pre>
~~~ ここにコードを記述 ~~~
</pre></div>

HTMLにインラインで「style」を指定しているのは、スマホでの表示をコントロールするためです。
ところが、その形で表記した上のコードを、今回スマホで表示を調べると以前のものと違い、コード枠内が自動改行されていて、コード内容がとても判り難い状態でした。

b0174191_16593988.png



原因と対策


これはスマホ用のスキンを変えた事があるので、そのスキンのCSSが原因なのか、それともスマホ全般でシステム変更があったのか判りませんが、不本意な状態です。 調べるとCSSの中で<pre>に以下の指定がされていました。

pre { white-space: pre-wrap; }

この指定のせいで、コード専用枠の中が改行されています。

対策として、やはりインラインで「white-space:pre」を再指定する事に。 コード枠の定型がますます冗長になりますが、仕方ありません。 下がこの指定をインラインに追加した定型です。

<div style="background:#f2f7f8; border:1px solid #aaa;overflow-y:hidden; max-width:660px; padding:0 30px;">
<pre style="white-space:pre;">
~~~ ここにコードを記述 ~~~
</pre></div>

以上で、スマホのコード枠にも横スクロールバーが出て、PCと同じ状態に出来ました。

b0174191_17293751.png

しかし、Chrome / Firefox と汎用スマホでは良いのですが、Edge と IE11ではこの指定だけでは以下の様に自動改行されて表示されます。

b0174191_22533985.png

これはPCブログスキンで「word-wrap: normal」を指定すると、Edge / IE11 の表示が改善されました。 現在はスキンでこの補正を済みで、PCブラウザ4種から正常に見えるはずです。

過去のコードを書き直すのはとてもムリなので、これからこの定型でコード記述をすることにしました。 このページのブロックはその定型を使っています。



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

縦スクロールバーの謎(Chrome)

2017年 11月 24日
 「overflow」が変な扱われ方になった? 

ブログのHTML編集枠に下の枠内のHTMLを記述すると、「■■」のある文字列を折り返しをしない1行で、背景が灰色のブロック内に表示するという事になります。(実際のHTMLは改行無しの数珠繋がりです。

<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>

このHTMLで、囲みの<div>は400pxの幅で、それより幅の短い文字列ではスクロールバーが表示される事はないはずです。

■■■■■■■ これはサンプル ■■■■■■

ところが実際は縦スクロールバーが出る事があります。 もしChromeをお使いでしたら、ブラウザの拡大率を125%等の倍率にして、このページを見てください。
文字列をもっと長くしたものが下です。

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■■

横スクロールバーはHTMLの通りですが、今度は縦スクロールバーが出たり、出なかったり。 なんじゃこれは。


 ブラウザによる見え方の違い 

上の表示はブラウザによって異なる様です。「スクロールバーの表示の仕方」がブラウザによって異なる仕様なのは、昔から皆を悩ませて来た問題ですね。 今回はそれは別件なんですが、これを見ている人が何を言ってるのか判らなくならない様に、まずハードコピーで上の見え方を示すと。

b0174191_10231260.png
b0174191_10234880.png
b0174191_10241976.png
b0174191_10254699.png

マイクロソフトのEdgeは相変わらず独自路線でIEと同じ、スクロールバーを出してくれず折り返されます。 ChromeとFirefoxは同じ表示になりました。 で、今回の縦スクロールバーはChromeだけの問題の様です。



 異常表示はまばらに出る 

現象は、このコードを複数並べると気付き易いのですが、110%以上の拡大率で見ると、いくつか置きに縦スクロールバーが出たり出なかったりします。 ブロックは全く同じコードですが、拡大率により異常表示が出るブロックが変わります。 これは、編集画面上でもブログ誌面上でも同じです。

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

「overflow: auto;」の指定で、文字列が右端に達しておらず、また本来は縦スクロールバーは出ないはずです。 しかし、縦スクロールバーが出たり出なかったりするという事です。

横スクロールバーを意図的に表示させるこういったブロックは、コード掲載などで昔から利用して来ました。 ブロックの書き方を定型化して同じ形なのに、縦スクロールバーのこんな出方は気付かなかったのです。 最近にこの様なことが生じた様に思えますが、確証がありません。


〔追記〕
問題の切り分けのために、インラインの指定を部分的に外して行きました。

<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>


〔padding: 0 20px〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


〔background: #ddd〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


〔border: 1px solid #aaa〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


なんとなく予想していた「border」が関係しているらしい。 実際に私のページで生じている事は、こういう縦幅が極小のブロックではなく、縦に数十行以上のブロックでも、同様に不規則にスクロールバーが表示されてしまいます。

当然、「overflow-x:auto; overflow-y: hidden」等で逃げる事は出来そうですが、理屈の不明な表示の放置は、という気がします。 この定型でHTMLのインラインでブロックのスクロール表示の仕方を指定しているのは、スマホでのコード表記枠の見え方を考慮しているからです。 エキサイトの場合、スマホでの表示は、HTMLでスタイルを指定するインライン記述でしか修飾出来ないのです。 この様なブログシステムは多いのですが、スマホ向けのCSSデザインはブログシステム任せで、ユーザーが細かいアレンジや要望を盛り込む事は出来ないため、苦労します。


とりあえずの改善策で、「overflow-x:auto; overflow-y: hidden」としてみます。

<div style="overflow-x:auto; overflow-y: hidden; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>

上のコードのサンプル

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

400pxを越える長い内容の場合

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

まあ、あたり前ですが、これで意図した通りの表示になる様です。

他の解決策を探して、「height」「line-height」「上下padding」など闇雲に試しましたがどうも妙薬は見つかりません。



[PR]
by Ataron | 2017-11-24 02:13 | PC環境(ハード/ソフト) | Comments(0)

Chrome DevTools を使ってみよう (27) 強化されたレシポンシブ対応機能

2017年 11月 15日
最近、CSSでメディアクエリの操作を扱う様になりました。 ページデザインでウインドウ幅によるデザイン変化を追跡しながら、CSSを調整する必要が増えています。 今までこういう場合には、DevToolsをウインドウ同居モードにして、ブラウザウインドウをちまちまドラッグして調整して来ました。

a0349576_19014900.png

上はChrome拡張機能のStylusのスキンをDevToolsで検査している所です。 以下はこのスキンをサンプルにしますが、Stylusのデフォルトスキンはメディアクエリが数か所設定されたレスポンシブデザインです。 ウインドウ幅によってデザインが推移するので、右上に出る幅表示を見ながらウインドウ幅を変化させて調べるのですが、このマウス操作は肩が凝ります。

1pxずつウインドウ幅を調整する方法を調べると、ウインドウをサイズ変更状態にし、「Ctrl+←」「Ctrl+→」 で調整できる事が判り、微細なチェックや数値を知りたい時はこの方法を使って来ました。

しかし、今年の春頃からDevToolsはレシポンシブ対応機能を強化していた様です。 テストしてみると、かなり快適な環境だと思えて来ました。



 DevToolsを「PCのエミュレーション」に設定する 

PC上で「PCのエミュレーション」は妙に聞こえますが、これがとても重要です。

前もってChromeのブラウザ拡大率を100%に設定した上で、DevToolsを起動します。 これは、仮想ウインドウ幅とメディアクエリの境界表示が、縦位置でシンクロしてクリエの状況が判り易くなるからです。

次に、DevToolsウインドウ左上の「Toggle device toolbar」アイコンを押して、デバイスのエミュレーションモードにします。

a0349576_19261994.png

ここでウインドウ幅を拡げて右端の「」を押します。(Chrome自体の「」ではありません) このメニューで下図の様に「Show media queries」「Add device type」の2つをを押します。

a0349576_19284894.png

次に、上部ツールバーのアイテムで、下図の様に「Responsive」「100%」「Desktop」を設定します。 これが肝心なところです。

a0349576_19300195.png

以上でChrome上の表示内容が、DevToolsのエミュレーションウインドウ(仮想ウインドウ)内に表示されます。 これが「PCのエミュレーション」表示で、全体のウインドウを拡げた方が操作性が良いでしょう。



 「PCのエミュレーション」の操作 

このサンプルはStylusの編集ページですが、これが普通のブログページでも、何かのウエブアプリでも同じです。 そのChrome上の表示をDevToolsを使って調べている状態で、ここではウインドウの内容を「ページ」としておきます。


 ウインドウ幅の微調整 

◎仮想ウインドウの現在のピクセル実値が、上部に表示されます。(PCモニター画面上の実測値で、Chromeの拡大率には関係しません)
◎仮想ウインドウの周囲に、大きな操作タブが右辺、右下、下辺に付いて、仮想ウインドウの枠ドラッグ(サイズ変更)が操作し易くなっています。
◎上部のピクセル表示枠にカーソルを入れて、仮想ウインドウ幅値を「↑↓」キーで操作出来ます。 また「Shift」キーで10pxずつの操作が可能です。
◎残念ながらエミュレーションの限界で、小数値での操作はできません。

a0349576_19505254.png

これらの機能により、px単位でのページの表示状況が簡単に確認できます。 DevToolsの基本画面でCSSを直接変更しながら、ウインドウ幅の変化による表示状況も精密に確認できるので、大変に快適な環境です。


 「メディアクエリ」のバー表示 

上図のサンプルでは、仮想ウインドウの上部に水色/薄水色のバーが表示されています。 このバーはページのCSS中に、メディアクエリのサイズ指定があれば表示されます。

このバーの濃い縦線は、メディアクエリの境界を意味します。 境界で分けられた有効な側をクリックすると、下の様に境界のpx値が表示され、下のエミュレーション表示がその幅の状態になります。

a0349576_19585867.png

また、このバーを右クリックすると、実際のコードが記述されたCSSソースにアクセスできます。 ソースコードの内容を見れば、メディアクエリの対象の要素と指定内容が判ります。 その対象要素をHTML上で調べれば、指定の内容の全てが判断できます。


 複雑なメディアクエリ指定に対応 

サンプルのページは、最初から3段階の幅管理をしたCSSですが、もっと複雑なメディアクエリを DevTools上で追加してテストしてみました。

クエリの指定には「~px以下」「~px以上~px以下」「~px以上」という3種があり、それを適当に追加した形です。

a0349576_20021571.png

上図の様に、メディアクエリ表示バーは3個に増えて表示されます。

◎「~px以下」の指定はブルー
◎「~px以上~px以下」の指定はグリーン
◎「~px以上」の指定はオレンジ
◎仮想ウインドウの現在幅に適応されたメディアクエリ指定は、濃い色で表示されます。

下図は、更に複雑に入り組んだ指定をした例です。

a0349576_20035395.png

実際は3種のメディアクエリを指定していますが、ウインドウ幅が赤線の時に、実際のバーの表示は の様になります。 は重なったメディアクエリの内容を分けて示したものです。 2番目のメディアクエリは3番目(無効で淡いグリーン)が上になり、右側が隠れて見えません。

この場合は、2番目のメディアクエリをクリックすると、の様に右端の600pxまでが表示される様になっています。


 CSSコード内のメディアクエリ 

◎メディアクエリのバー表示は、CSSの隅に書かれた指定も残さず表示します。
修復で消し忘れたメディアクエリの指定が残った場合など、表示が思い通りでない原因を探す時には便利です。

◎CSSコード枠でメディアクエリ内のCSS項目を消しても、バーの表示は消えません。
当然ですが、メディアクエリのバーや境界マークを消すには、メディアクエリの範囲指定の方を消す必要があります。 コード枠内でメディアクエリの指定を消す場合は、下図の様に赤枠の反転した部分をクリアします。

a0349576_20110568.png



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



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

エキサイト編集画面のアレンジ(70) Chrome版 - More拡張 ver.6 CSSコード詳細

2017年 11月 02日
 CSSコード詳細と拡張機能「Stylist」の利用について 

「Chrome版 - More拡張 ver.6」の利用は「Stylus」の導入が簡単で推奨の方法ですが、拡張機能「Stylist」を導入して、手作業でこのページのCSSコードをコピーすることで、編集画面のアレンジを実現出来ます。

「Stylist」の導入や設定方法は以下のリンク先に説明しています。



「Chrome版 - More拡張 ver.6」は、CSSによってURL指定(下図の)が異なります。 このページの各CSSごとに指定した ①➁➂ を「Stylist」の各入力枠に貼り付けて、12個のスタイルを登録してください。

a0349576_13490576.png

◎スタイル登録は、このページの順番通りにします。 前後の順番が変わると正しく働かない場合があります

◎上図の様に12のスタイルとして登録せずに、1つのスタイルの中に、12のセクション(複合スタイル)として登録することもできます。 これは以下のページの複合スタイルの項を参照ください。

  「Stylist / Google Chrome 拡張機能の使用法 (詳細)


 CSSコードの詳細 

〔注意〕
● 各コードの内容は、「Stylus」「Stylist」で共通です。

● 以下の「スタイル名」「適応URL」の内容は「Stylist」の登録内容で、特に は「Stylus」の場合とは異なり注意が要ります。

● 以下の「適応URL」の表記は、「Stylist」でCSSコードが「有効」となる表記です。「Stylist」で無効にしたい場合は、スタイルを「disable」設定とするか、複合スタイルの場合は、無効にしたいセクションの指定形式を「domain」に変更してください。

●「コード1」等の表示は「Stylus」に対応したもので、「Stylist」に表示はありません。


 コード1 

スタイル名 : 基本CSS
適応URL :「regexp」=「 //userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます


/* Chrome版-More拡張 ver.6 基本CSS */

/* 全体構成 */
body.win input {
height: 28px;
padding: 3px 10px 0;
line-height: 28px;
box-shadow: none; }

body.win input[type=radio],
body.win input[type=checkbox] {
margin: 0 5px 2px 0; }

body.win select {
height: 28px;
padding: 3px 5px 0;
font-size: 1.3rem; }

body.win label {
height: 28px;
line-height: 28px; }

#wrapper {
min-width: 960px;
max-width: 1500px;
min-height: 0;
margin-bottom: 5px;
background: none; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }


/* 編集画面ベース */
#container.hasmenu {
margin: 0;
float: none; }

.alert.alert-green.csEnqueteLink {
display: none; }

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px;
background: #fbfbfb;
border: none;
border-radius: 0; }

header.boxHead {
display: none; }


/* テンプレート選択 */
#entryTemplateList {
position: absolute;
top: 15px;
left: 938px;
padding: 0 !important;
border: none !important; }

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 20px;
height: 28px;
padding: 4px 0 0;
font-size: 13px;
box-shadow: none; }

#entryTemplateList select:focus {
left: -400px;
width: 420px;
padding: 4px 15px;
z-index: 3; }


/* 編集アラート */
.alert.alert-red {
position: absolute;
width: 300px;
padding: 2px 14px 0;
font-size: medium; }


/* 本文タイトル */
#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 300px;
font-size: medium;
transition: 0.5s;
z-index: 2; }

#entryEditTitle:hover {
width: 928px; }

#entryEditTitle :focus {
position: relative;
width: 928px;
background: #fff; }

#entryEditTitle input {
padding: 4px 10px 0; }

#entryEditTitle .alert {
top: 0px;
left: 310px;
z-index: -1; }


/* おすすめブログテーマ */
#trb_themeTtl {
position: absolute;
top: 714px;
left: 850px;
margin: 0;
padding: 2px 0 2px 8px;
height: 36px;
width: 69px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
transition: 0.5s; }

#trb_themeTtl:hover {
top: 670px;
left: 700px;
height: 74px;
width: 207px;
padding: 5px 10px; }


/* カテゴリ */
#entryEditCategory {
position: absolute;
top: 15px;
left: 310px; }

#entryEditCategory select {
position: absolute;
width: 140px;
font-size: 13px;
padding: 4px 5px 0; }

#entryEditCategory select:hover {
width: 180px;
z-index: 1; }

#entryBlogCategoryDialog.btn {
position: absolute;
left: 142px;
height: 28px; }

#entryBlogCategoryDialog.btn input {
width: 28px;
font-size: 13px;
font-weight: normal;
text-indent: -61px;
padding: 2px 10px 0px; }


/* タグ */
#entryEditTags {
position: absolute;
top: 15px;
left: 490px; }

#entryEditTags .entryElement {
display: flex; }

#entryEditTags span.tags {
width: 147px; }

#entryEditTags span.tags input {
width: 130px;
font-size: 13px; }

#entryEditTags span.tags a {
font-size: 13px;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 3px 3px 0;
background: linear-gradient(to bottom, #fff 0%, #E3F2FD 100%);
text-decoration: none; }

#entryEditTags span.tags a::before {
content: "\f0d7";
font: 12px FontAwesome;
color: #000;
padding: 0 4px; }

.tagCompletionBox {
top: 42px !important;
width: 178px;
font-size: 13px; }

.tagCompletionBox .tagItem {
padding: 4px 10px 0; }

.ui-autocomplete {
opacity: 1 !important; }

.ui-autocomplete .tagOptions {
font-size: 13px;
padding: 0 10px 4px !important; }

#entryEditTags .btn-s {
display: none; }


/* 編集部wrap構成 */
#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
overflow: visible;
margin: 56px 180px 0px 0px;
padding: 0; }

#entryEditContents .entryPreview.btn-s {
position: relative;
height: 32px;
opacity: 0; }

.entryTutorial01,
.entryTutorial02,
.entryTutorial03,
.entryTutorial04 {
display: none; }

#editorSwither {
position: absolute;
top: 3px;
line-height: 23px;
padding: 0;
z-index: 3; }

#editorSwither .current {
line-height: 26px;
margin: 0 4px 0 0;
background: none; }

#editorSwither li {
margin: 2px 4px 0 0;
border: none; }

#editorSwither a {
padding: 2px 0 0;
border-color: #ccc; }


/* 読込み遅延対策 */
#_panel {
height: 32px;
margin-top: -32px;
border: none;
background: none;
z-index: 2; }

#new_icon {
display: none !important; }


/* 編集部 */
#_entryContent,
#entryContent,
#_moreEntryContent,
#moreEntryContent {
position: relative;
background: #fbfbfb;
line-height: 150%;
margin: 0;
font-size: medium;
border-radius: 3px; }

#_entryContent,
#entryContent {
height: 580px !important; }

#_moreEntryContent,
#moreEntryContent {
height: 500px !important; }

#_entryContent:focus,
#entryContent:focus,
#_moreEntryContent:focus,
#moreEntryContent:focus {
z-index: 2; }

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

#entryEditWrap .alert {
top: 95px;
left: 325px;
z-index: 1; }

#entryMoreText .alert {
top: 45px;
left: 310px;
z-index: 1; }


/* More部 */
#more.w100 {
display: block;
height: 28px;
width: 74px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #ffffff 0%, #ececec 100%); }

#notmore.w100 {
position: absolute;
bottom: 0;
height: 28px;
width: 86px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #FFF9C4 0%, #FFD54F 100%); }

#more.w100 span,
#notmore.w100 span {
padding: 2px 0 0;
line-height: 26px;
font-size: small; }

#notmore + .btn-s {
display: none; }

#entryMoreArea {
position: absolute;
top: 75px;
width: 100%;
margin: 0;
padding-top: 7px; }

#moreEntrySubject {
font-size: medium;
height: 28px;
padding: 3px 10px 0px;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0; }


/* 投稿オプション */
#entryOptions {
position: absolute;
bottom: 0;
left: 110px;
width: 110px;
margin: 0;
height: 28px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
transition: 0.5s;
z-index: 4; }

#entryOptions:hover {
width: 820px; }

#entryOptions .head-h3 {
display: none; }

#entryOptions .optionGroup {
line-height: 28px; }

#entryOptions .optionGroup label {
font-size: 13px;
margin: 0 0 7px;
padding: 0 5px; }

#entryOptions .optionGroup label:nth-child(n+2) {
width: 130px;
transition: 0.5s; }

#entryOptions .optionGroup label:nth-child(n+2):hover {
width: 160px; }


/* トラックバック枠 */
#entryTrackback {
position: absolute;
bottom: 0;
margin: 0 0 0 110px;
width: calc(100% - 110px); }

#entryTrackbackTextarea {
position: relative;
width: 79px;
margin: 0 0 0 740px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
background: #fbfbfb;
box-shadow: none;
border: 1px solid #ccc;
border-radius: 3px;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

#entryTrackbackTextarea:hover {
width: 819px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

#entryTrackbackTextarea:focus {
height: 58px;
width: 819px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

.notesBoxHead {
position: absolute;
bottom: 45px;
left: -110px;
line-height: 28px;
padding: 5px 20px 0 150px;
width: calc(100% + 110px);
background: rgba(58, 135, 173, 0.2); }

.notesBoxHead h1::before {
content: "トラックバック"; }

.notesInner {
position: absolute;
bottom: 45px;
left: 250px;
padding: 7px 0 5px;
font-weight: bold; }


/* 画像パレット */
#entryEditIframe {
position: absolute;
top: 56px;
right: 16px;
width: 165px;
height: 610px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
z-index: 2; }

#entryEditIframe iframe {
width: 165px;
height: 610px;
border-radius: 0 !important; }


/* 投稿日時 */
#entryOptionsPstdate {
position: absolute;
top: 683px;
left: 245px;
width: 214px;
margin: 0;
padding: 0 10px 0;
white-space: nowrap;
overflow: hidden;
border: none;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 3; }

#entryOptionsPstdate:hover {
width: 682px; }

#entryOptionsPstdate span {
line-height: 32px;
margin-right: -20px; }

#entryPstdateElement select {
font-size: 13px;
min-width: 20px;
width: 70px; }

#entryPstdateElement select:nth-child(n+2) {
width: 55px; }

#entryPstdateElement select:nth-child(2n) {
margin: 0 0 0 -2px; }

#entryPstdateElement option:nth-child(1) {
display: none; }


/* 公開設定 */
#entryOptionsPpenflag {
position: absolute;
top: 683px;
left: 480px;
width: 210px;
margin: 0;
padding: 0 0 0 20px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 2; }

#entryOptionsPpenflag:hover {
width: 446px; }

#entryOptionsPpenflag span {
line-height: 32px;
margin-right: -20px; }


/* サブミットボタン・メニュー */
#entrySubmitBtm {
border: none;
padding: 0;
margin: 15px 0 0 25px;
max-width: 1130px; }

#entrySubmitBtm .btn {
height: 30px; }

.btn {
background: linear-gradient(to bottom, #ffffff 0%, #ececec 100%); }

#entrySubmitBtm input {
line-height: 31px;
padding: 0px !important; }

#entrySubmitBtm .btn.w250 {
width: 200px; }

.btn-blue {
background: linear-gradient(to bottom, #0e9de4 0%, #2679ce 100%); }

#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 120px;
bottom: 0;
width: calc(6.8em + 23px);
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%, #b0eae0 100%); }

#myblogBtn:hover {
background: #8cf3f3; }

#myblogBtn a {
line-height: 27px;
padding: 0 5px;
color: #333;
text-shadow: none; }

#exFooterWrapper {
display: none; }


/* アイコン・ボタンの輪郭線と背景色 */
#_panel .panelBtn {
font-size: 16px;
line-height: 16px;
width: 21px;
height: 21px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
z-index: 1; }


/* 編集アイコン配置・デザイン FontAwesome */
#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px; }

#exbtn_bold::before {
content: "\f032";
font: 16px /23px FontAwesome;
padding: 0 4px; }

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px; }

#exbtn_italic::before {
content: "\f033";
font: 16px /23px FontAwesome;
padding: 0 6px; }

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px; }

#exbtn_underline::before {
content: "\f0cd";
font: 16px /23px FontAwesome;
padding: 0 4px; }

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px; }

#exbtn_strikethrough::before {
content: "\f0cc";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_link {
top: initial;
bottom: 5px;
left: 523px; }

#exbtn_link::before {
content: "\f0c1";
font: 16px /24px FontAwesome;
color: #1E88E5;
padding: 0 3px; }

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px; }

#exbtn_size1::before {
content: "F";
font: bold 12px /22px Tahoma;
padding: 0 7px; }

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px; }

#exbtn_size2::before {
content: "F";
font: bold 16px /22px Tahoma;
color: #999;
padding: 0 6px; }

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px; }

#exbtn_size3::before {
content: "F";
font: bold 18px /22px Tahoma;
padding: 0 5px; }

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px; }

#exbtn_size4::before {
content: "F";
font: bold 22px /22px Tahoma;
padding: 0 4px; }

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px; }

#exbtn_fontcolor::before {
content: "\f031";
font: 16px /23px FontAwesome;
color: red;
padding: 0 1px; }

#exbtn_fontcolor::after {
content: "\f031";
font: 16px /23px FontAwesome;
color: deepskyblue;
position: relative;
z-index: -1;
top: 0px;
left: -11px; }

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px; }

#exbtn_blockquote::before {
content: "\f10d";
font: 13px /24px FontAwesome;
color: #1072c0;
padding: 0 5px; }

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px; }

#exbtn_left::before {
content: "\f036";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px; }

#exbtn_center::before {
content: "\f037";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px; }

#exbtn_right::before {
content: "\f038";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px; }

#exbtn_ol::before {
content: "\f0cb";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px; }

#exbtn_ul::before {
content: "\f0ca";
font: 16px /23px FontAwesome;
padding: 0 3px; }

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px; }

#exbtn_indent::before {
content: "\f03c";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_indent.disabledBtn::before {
opacity: 0.1; }

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px; }

#exbtn_outdent::before {
content: "\f03b";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_outdent.disabledBtn::before {
opacity: 0.1; }

#exbtn_hr {
top: initial;
bottom: 32px;
left: 483px; }

#exbtn_hr::before {
content: "\f0c8";
font: 16px /23px FontAwesome;
color: #cae0eb;
padding: 0 4px; }

#exbtn_hr::after {
content: "_";
font: 24px /12px Tahoma;
position: relative;
top: -8px;
left: -18px; }

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 601px; }

#exbtn_emoji::before {
content: "\f118";
font: 16px /22px FontAwesome;
color: #ff8f00;
padding: 0 4px; }

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 575px; }

#exbtn_youtube::before {
content: "\f167";
font: 16px /22px FontAwesome;
color: #be074a;
padding: 0 4px; }

#exbtn_instagram {
top: initial;
bottom: 5px;
left: 549px; }

#exbtn_instagram::before {
content: "\f16d";
font: 16px /23px FontAwesome;
color: #ff03d6;
padding: 0 4px; }

#exbtn_map {
top: initial;
bottom: 5px;
left: 627px; }

#exbtn_map::before {
content: "\f0f2";
font: 18px /22px FontAwesome;
color: #B2EBF2;
padding: 0 2px; }

#exbtn_map::after {
content: "MAP";
font: 10px /22px Tahoma;
position: relative;
top: -2px;
left: -21px;
white-space: nowrap; }

#exbtn_genre {
top: initial;
bottom: 5px;
left: 653px; }

#exbtn_genre::before {
content: "\f07c";
font: 16px /24px FontAwesome;
color: #e39009;
padding: 0 3px; }

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 679px; }

#exbtn_amazon::before {
content: "\f02d";
font: 16px /23px FontAwesome;
color: #4a8c83;
padding: 0 3px; }

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 438px; }

#exbtn_removeformat::before {
content: "\f00d";
font: 16px /21px FontAwesome;
color: red;
padding: 0 4px; }

#exbtn_removeformat.disabledBtn::before {
opacity: 0.1; }

#exbtn_undo {
top: initial;
bottom: 5px;
left: 464px; }

#exbtn_undo::before {
content: "\f0e2";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 4px; }

#exbtn_undo::after {
content: "U";
font: bold 12px /12px Tahoma;
position: relative;
top: 2px;
left: -20px; }

#exbtn_undo.disabledBtn::before,
#exbtn_undo.disabledBtn::after {
opacity: 0.1; }

#exbtn_redo {
top: initial;
bottom: 5px;
left: 490px; }

#exbtn_redo::before {
content: "\f01e";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 3px; }

#exbtn_redo::after {
content: "R";
font: bold 12px /12px Tahoma;
position: relative;
top: 2px;
left: -11px; }

#exbtn_redo.disabledBtn::before,
#exbtn_redo.disabledBtn::after {
opacity: 0.1; }

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background: #ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

#exbtn_autoeol.activeBtn {
background: red !important; }

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


/* 自動保存表示 */
#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0;
padding: 2px 2px 0px 2px;
height: 19px;
width: auto;
font-size: 13px;
color: blue;
text-align: center;
background: white;
border: 1px solid #ccc;
border-radius: 3px; }


/* キャンペーン枠 */
.campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom, #f1ebdb 0%, #ffcc33 100%); }

.campaign-container::before {
content: "C";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold; }

.campaign-container:hover {
margin: 0 0 0 0;
padding: 20px 40px 10px;
width: calc(100% - 292px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


/* みんなの投稿枠 */
#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 0 30px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom, #dcff7a 0%, rgb(150, 234, 66) 100%); }

#blog2media .boxHead {
display: block; }

#blog2media::before {
content: "M";
position: absolute;
top: 5px;
left: 3px;
color: #666;
font-weight: bold; }

#blog2media:hover {
margin: 0 0 0 0;
padding: 15px 15px 20px;
width: calc(100% - 210px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


/* お知らせリスト */
#announceList {
position: absolute;
top: 726px;
margin: 0 0 0 60px;
padding: 0;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom, #effaff 0%, #bce8f1 100%); }

#announceList ul li {
margin: 10px 30px; }

#announceList ul li::before {
content: "A";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold;
text-shadow: none; }

#announceList:hover {
top: initial;
bottom: 0;
margin: 0 0 0 0;
padding: 30px 0 10px;
max-width: none;
width: calc(100% - 212px);
max-height: 300px;
transition: max-height 1s;
z-index: 5; }

.alert-blue a {
color: #000; }


/* 配色オプション ブルーグレー */
body,
.hasmenu #contents,
#entryMoreArea,
#entryOptions,
#entryOptionsPstdate,
#entryOptionsPpenflag,
#_panel:hover,
#announceList:hover {
background: #a4c1ce; }





 コード2 

スタイル名 : 画像パレット
適応URL :「regexp」=「 //userconf.exblog.jp/parts/image/
以下の枠内のCSSコードを貼り付けます


/* ver.6 画像パレットCSS */
#partsImage #droppable {
font-size: 13px;
margin: 5px 5px 10px;
color: #fff;
background: #459bc5;
box-shadow: none; }

#partsImage #droppable:hover {
background: #b8e2f7; }

#partsImage .mod-fileUpload {
margin: 0 5px; }

#partsImage .fileUploadWrapper {
border: none;
margin: 0; }

#partsImage .fileUploadWrapper span,
#partsImage .fileUploadWrapper input {
font-size: 13px;
padding: 0 1px !important; }

#partsImage .fileUploadWrapper .fileUploadBtm {
position: absolute;
top: 0;
left: 72px;
width: 83px; }

#partsImage .optionGroup {
margin: 0 0 0 15px;
padding: 0; }

#search .optionGroup select {
position: absolute;
left: 5px;
padding: 0 15px;
height: 30px; }

#partsImageContainer {
overflow-y: scroll;
margin: 0 5px 10px;
height: 356px; }

#partsImageContainer li {
margin: 0;
width: 132px;
height: 90px; }

#partsImageContainer input {
position: relative;
left: 53px;
line-height: 18px; }

#partsImageContainer input:hover {
background: red !important;
color: #fff !important;
font-weight: bold; }

#partsImageContainer li a {
background-size: cover;
width: 128px;
height: 86px; }

#partsImage .pager {
margin: 0; }

#partsImage .pager li {
margin: 0 2px; }

#partsImage .pager li a:hover {
text-decoration: none; }

#partsImage .alert {
margin: 0; }




 コード3 

スタイル名 : テンプレート編集
適応URL :「regexp」=「 //userconf.exblog.jp/entry/template/
以下の枠内のCSSコードを貼り付けます


/* ver.6 テンプレート編集CSS */
#editTemplateList {
position: absolute;
top: 15px;
left: 575px;
height: 28px;
width: 510px;
padding: 0 !important;
border: none !important;
background: none; }

#editTemplateList select {
position: absolute;
left: 400px;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size: 13px;
box-shadow: none; }

#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3; }

#editTemplateList .fR {
width: 80px;
height: 28px;
border-radius: 3px; }

#editTemplateList .fR:hover {
width: 160px;
position: relative;
z-index: 3; }

#editTemplateList .fR a {
padding: 3px 2px; }

#entryEditTmpTitle {
position: absolute;
top: 15px;
left: 938px;
z-index: 1; }

#entryEditTmpTitle :hover {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle :focus {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle .alert {
position: absolute;
right: 0px;
z-index: -1; }

.alert.alert-green {
position: absolute;
top: 10px;
z-index: 5; }

#sidemenu {
display: none; }

#entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px;
background: none; }

#entryTrackbackTextarea {
margin: 0 0 0 420px;
width: calc(100% - 420px);
padding: 5px 0 0 20px; }

#entryTrackbackTextarea:hover {
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }

textarea#entryTrackbackTextarea:focus {
height: 80px;
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }




 コード4 

スタイル名 : フリーページ編集
適応URL :「regexp」=「 //userconf.exblog.jp/entry/fp/
以下の枠内のCSSコードを貼り付けます


/* ver.6 フリーページ編集CSS */
#entryEditHead-new tr:first-child td {
position: absolute;
left: 700px;
top: 10px; }

#entryEditHead-new tr:last-child td:first-child {
position: absolute;
left: 600px;
top: 15px; }

#entryEditHead-new tr:last-child {
position: absolute;
left: 310px;
top: 15px;
background: #fff;
height: 26px;
padding: 0 0 0 5px;
border: 1px solid #ccc;
border-radius: 3px; }

#entryEditHead-new .linkPath {
display: inline-block;
width: 278px;
text-align: right; }

#entryEditCategory {
position: absolute;
left: 285px;
top: -1px;
width: 98px; }

#entryEditCategory input {
font-weight: bold; }

#entryEditCategory .alert {
left: 215px; }

#entryOptionsPpenflag {
position: absolute;
bottom: initial;
top: 683px;
left: 5px;
width: 350px !important; }

#entrySubmitBtm {
margin: 15px 0 0 230px; }

#announceList {
display: none; }

#myblogBtn {
display: none; }




 コード5 

スタイル名 : 編集終了画面
適応URL :「regexp」=「 //userconf.exblog.jp/entry/complete/
以下の枠内のCSSコードを貼り付けます


/* 編集終了画面CSS */
.url a {
font-size: medium;
padding: 4px 40px 2px;
border: 1px solid #aaa;
border-radius: 3px;
color: #335c6f;
background: linear-gradient(to bottom, #e2f2f9 0%, #a5c2cf 100%);
text-decoration: none; }

.url a:hover {
background: #a3d7ef; }

#wrapperInner {
padding: 15px; }

.notesInner {
position: static; }

.notesBoxHead {
position: static;
padding: 0 10px;
width: auto;
background: none; }

.notesBoxHead h1::before {
content: none; }

#menu {
display: none; }




 コード6 

スタイル名 : 配色オプション ダークグリーン
適応URL :「regexp」=「 //userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます


/* 配色オプション ダークグリーン */
body,
.hasmenu #contents,
#entryMoreArea,
#entryOptions,
#entryOptionsPstdate,
#entryOptionsPpenflag,
#_panel:hover,
#announceList:hover {
background: #0b3838; }


/* テンプレート選択 */
#template {
color: #fff;
background: linear-gradient(to bottom, #607D8B 0%, #263238 40%); }

#template:focus {
text-shadow: none;
background: #263238; }


/* 本文タイトル */
#entrySubject,
#entrySubject:focus {
color: #fff;
background: #333; }


/* おすすめブログテーマ */
#trb_themeTtl {
background: transparent; }

#trb_themeTtl:hover {
background: #eee; }


/* カテゴリ */
#entryEditCategory select {
color: #fff;
background: #333;
text-shadow: none; }

#entryBlogCategoryDialog input {
color: #fff;
background: linear-gradient(to bottom, #607D8B 0%, #263238 40%); }


/* タグ */
#entryEditTags span.tags input {
color: #fff;
background: #333; }

.tagItem {
color: #fff !important;
background: #333 !important; }

#selectedTag {
background: #2196F3 !important; }

#entryEditTags span.tags a {
background: linear-gradient(to bottom, #607D8B 0%, #263238 100%); }

#entryEditTags span.tags a::before {
color: #fff; }


/* 編集モードタブ */
.tabmenu a {
color: #ddd;
background: #263238;
text-shadow: none;
font-weight: normal; }

.tabmenu .current a,
.tabmenu a:hover {
color: #fff;
background: #015790;
text-shadow: 0 1px 0 #2196F3; }


/* 編集アイコン */
#_panel .panelBtn,
#exbtn_status {
background: #f8f8f8; }


/* 編集部 */
#_entryContent,
#entryContent,
#_moreEntryContent,
#moreEntryContent {
color: #fff;
background: #333; }


/* More部 */
#moreEntrySubject {
color: #fff;
background: #043279; }

#more.w100 {
background: linear-gradient(to bottom, #607D8B 0%, #263238 100%); }

#notmore.w100 {
background: linear-gradient(to bottom, #1976D2 0%, #263238 100%); }

#more.w100 span,
#notmore.w100 span {
color: #eee;
line-height: 24px; }


/* 投稿オプション・投稿日時・公開設定 */
label {
color: #fff;
background: #37474f;
text-shadow: none; }

label:hover {
color: #fff;
background: #37474f; }

label.choose {
border-color: #ccc;
background: #015790;
font-weight: normal; }

#entryPstdateElement select {
color: #fff;
background: #015790; }

#entryOptionsPpenflag span,
#entryOptionsPstdate span {
color: #eee; }


/* トラックバック枠 */
#entryTrackbackTextarea {
color: #fff;
background: #333; }

.notesBoxHead,
.notesInner {
color: #FFC107; }


/* サブミットボタン */
#entrySubmitBtm input {
color: #eee; }

.btn {
background: linear-gradient(to bottom, #607D8B 0%, #37474F 100%); }

.btn:hover {
background: #607D8B; }

.btn-blue {
background: linear-gradient(to bottom, #0288D1 0%, #01579B 100%);
border: 1px solid #ccc; }

.btn-blue:hover {
background: #0288D1; }


/* マイブログボタン */
#myblogBtn {
background: linear-gradient(to bottom, #00BCD4 0%, #006064 100%); }

#myblogBtn:hover {
background: #00BCD4; }

#myblogBtn a {
color: #eee; }


/* キャンペーン枠 */
.campaign-container {
background: linear-gradient(to bottom, #FFC107 0%, #5a4400 100%); }

.campaign-container::before {
color: #eee; }

.campaign-container:hover {
background: #eee; }


/* みんなの投稿枠 */
#blog2media {
background: linear-gradient(to bottom, #4CAF50 0%, #1B5E20 100%); }

#blog2media::before {
color: #eee; }

#blog2media:hover {
background: #eee; }


/* お知らせリスト */
#announceList {
background: linear-gradient(to bottom, #03A9F4 0%, #01579B 100%); }

#announceList ul li::before {
color: #eee; }




 コード7 

スタイル名 : 画像パレット配色オブション ダークグリーン
適応URL :「regexp」=「 //userconf.exblog.jp/parts/image/
以下の枠内のCSSコードを貼り付けます


/* 画像パレット配色オプション ダークグリーン */
#partsImage {
background: #0b3838; }


/* ドロップボックス */
#partsImage #droppable {
color: #ddd;
background: #006064;
border-color: #009688; }

#partsImage #droppable:hover {
background: #00838F; }


/* ファイルアップロード */
.mod-fileUpload .btn-s {
border: 1px solid #009688; }

.fileUploadInner.btn-s {
background: #384850; }

.fileUploadWrapper span {
color: #eee;
text-shadow: none; }


/* 年月選択 */
#search .optionGroup select {
color: #eee;
text-shadow: none;
background: #384850;
border-color: #009688; }


/* スクロールボックス */
#partsImageContainer li {
border-color: #009688;
background: #0b3838; }

#partsImageContainer li a {
border-color: #0b3838; }


/* セレクトボタン */
.pager li a,
.pager li span {
color: #eee;
background: #384850;
text-shadow: none;
border-color: #009688; }

.pager li a:hover {
background: #546E7A; }

.pager .current {
background: #1775a0; }




 コード8 

スタイル名 : 枠線オプション ダークグリーン
適応URL :「regexp」=「 //userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます


/* 枠線オプション ダークグリーン */
#entryTemplateList select,
#entrySubject,
#trb_themeTtl,
#entryEditCategory select,
#entryBlogCategoryDialog.btn,
#entryEditTags span.tags input,
.tagCompletionBox,
#entryEditTags span.tags a {
border-color: #009688; }

#editorSwither a,
#_panel .panelBtn,
#exbtn_status,
#_entryContent,
#entryContent,
#_moreEntryContent,
#moreEntryContent,
#moreEntrySubject,
#more.w100,
#notmore.w100,
#entryEditIframe {
border-color: #009688; }

label,
label.choose,
#entryPstdateElement select,
#entryTrackbackTextarea,
#entrySubmitBtm .btn,
#myblogBtn,
.campaign-container,
#blog2media,
#announceList {
border-color: #009688; }




 コード9 

スタイル名 : ダイアログ背景色オプション ベース グレー
適応URL :「regexp」=「 //userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます


/* ダイアログ背景色オプション ベース グレー */
.ui-dialog {
background: #cfd8dc; }




 コード10 

スタイル名 : ダイアログ背景色オプション 中央部 グレー
適応URL :「regexp」=「 //userconf.exblog.jp/dialog/
以下の枠内のCSSコードを貼り付けます


/* ダイアログ背景色オプション 中央部 グレー */
body {
background: #cfd8dc; }

input {
border-color: #607d8b !important;
box-shadow: none !important; }

li {
border-color: #aaa !important; }




 コード11 

スタイル名 : 2行編集アイコン 表示オプション
適応URL :「regexp」=「 //userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます


/* 2行編集アイコン 表示オプション */
#_panel:hover {
height: 75px;
margin-top: -75px;
transition-delay: 0.2s; }




 コード12 

スタイル名 : おすすめブログテーマ 非表示
適応URL :「regexp」=「 //userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます


/* おすすめブログテーマ 非表示 */
#trb_themeTtl {
display: none; }






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




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

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)