Studio TA Subsite の案内とお知らせ

タグ:エキサイトブログ ( 148 ) タグの人気記事

インスタグラム・リッチリンク・YouTube の中央寄せ(ブログスキン)/ エキサイトブログ

2017年 06月 18日
インスタグラムの中央寄せ配置をブログスキンで指定すると、いちいち「埋め込みコード」をHtml編集する必要がなくなります。

インスタグラムの「埋め込みコード」は、リッチリンクと同類で、リッチリンクシステムの応用と思われます。 更に、インスタグラム、リッチリンク、Youtubeの実体は、いずれも「iframe要素」です。 現在、エキサイトブログでユーザー選択で利用できるiframeはこれら3種と限られます。(ブログパーツ等は未確認です) エキサイトの「iframe要素」の制限基準が微妙に更新されている事などから、この3種を纏めて扱う事は気が利いていると思います。 以下の内容は、将来に追加されるiframe機能にも応用できるでしょう。

このブログスキンによる修飾手法は、以下のことを考慮する必要があります。
● ブログスキン指定はブログ全体のデザインに影響するので、過去に設置した3種の要素への影響は要チェックです。
● 但し、ブログスキン指定は基本的にデザインの上書きなので、過去の左右に寄せた設置分のみ考慮すれば良いと思われます。
● ブログ全体で中央寄せ配置が統一されるが、個別に左寄せや右寄せをしたい場合は、少しやりにくくなります。
● ブログスキンの修飾はPC表示にのみ有効で、スマホ表示(スマホスキン)には影響しません。

以下は、この3種の「埋め込みコード」の一般的なサンプルです。(改行して判り易くしています)

リッチリンク
<iframe 
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26931974%2F"
style="margin: 10px 0px; border: 0px currentColor; border-image: none; width: 100%; height: 180px; display: inline-block; max-width: 520px;">
</iframe>
インスタグラム
<iframe 
src="//bp.exblog.jp/richlink/instagram/?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBVAErG7jcgL%2F"
scrolling="no"
style="margin: 10px 0px; border: 0px currentColor; border-image: none; width: 100%; height: 400px; display: block; max-width: 400px;">
</iframe>
ユーチューブ
<iframe 
width="480"
height="360"
src="//www.youtube.com/embed/8TpcBDJZsJA?rel=0"
frameborder="0"
allowfullscreen="">
</iframe>

「iframe」はブログ画面の構成要素として色々と使われるので、「iframe」を無差別に修飾するわけには行きません。 これら3種に固有の特徴を指して、他と区別できるセレクタ表記が必要です。 上の「埋め込みコード」を見比べると、各iframeの「src」の太字の部分は、それぞれを区別するのに適当そうです。

セレクタ記述の方法で、《 iframe要素で、その属性の src に「~」の文字列を含むもの 》という、記述方法があります。
  20. E[foo*="bar"] (属性の値が指定した文字を含む場合に適用する)

この記述方法を使って、3種のiframeの中央寄せを指定するCSS修飾を書いてみました。 これらのCSS項目をブログスキンのCSSに追加すると、ブログ文書内での中央寄せが実現します。

/* ● リッチリンクとインスタグラムを中央寄せ */
iframe[src*="richlink"] {
display: block !important;
margin: 0 auto !important; }

/* ● リッチリンクのみ中央寄せ */
iframe[src*="richlink/?url"] {
display: block !important;
margin: 0 auto !important; }

/* ● インスタグラムのみ中央寄せ */
iframe[src*="instagram"] {
display: block !important;
margin: 0 auto !important; }

/* ● ユーチューブのみ中央寄せ */
iframe[src*="youtube"] {
display: block !important;
margin: 0 auto !important; }

(注)
◎「richlink」の文字列は、リッチリンク・インスタグラムの両方に出て来ます。 そこで、リッチリンクのみを区別する文字列を「richlink/?url」としています。 3種のiframeを中央寄せとする場合、上記1項と4項をブログスキンに追加すれば、スマートに指定出来ます。
◎ リッチリンクが「inline-block」指定に仕様変更されたので、他のiframeが同様の仕様変更をされる可能性が考えられます。 その場合、margin値の中央寄せが無効になるので、現在は重複指定になりますが「display: block !important;」を加えています。

下図は、3種とも中央寄せとした例です。

b0174191_14534633.jpg



お使いのブログスキンに、このページで紹介したCSS項目を追加する手順は、以下のリンク先を参照ください。 初回にブログスキンをアレンジする時だけ少しコツがあり、それを説明しています。




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

インスタグラムの中央寄せ(Html編集)/ エキサイトブログ

2017年 06月 17日
エキサイトブログはインスタグラム連携を導入し、次第にこの連携機能を利用するユーザーが増えている様です。 ただ、現在のところ配置されるインスタグラムが左寄せとなります。 ブログ文に埋め込んだインスタグラムを中央寄せの配置にしたい場合は、Html編集の加筆が必要です。 そう難しくはないので、以下の説明を参考にしてトライしてみてください。



この行の下にインスタグラムを埋め込みます。
上は埋めこんだインスタグラムのサンプルです。


❶ 編集画面を「通常編集」から「HTML編集」に切替えて、インスタグラムの「埋め込みコード」の部分を探します。 良く見れば、前後の行の文字や、文章内のおうよその位置から推測できます。
下図は、Html編集画面で表示された、実際の「埋め込みコード」です。「<iframe」で始まり「</iframe>」(赤印)で終わる事に注目してください。 「src=" ~ "」の部分だけ異なるだけでインスタグラムの「埋め込みコード」はみなこの様な形です。

b0174191_22492731.png

❷「埋め込みコード」の中で「display: block;」(緑印)の指定を確認します。 もし「display: inline-block;」等の指定になっていたら block指定に書き改めます。

b0174191_04164500.png

➌ その上で、「margin: 10px 0;」(緑印)を「margin: 10px auto;」に書き換えます。 これは、「iframe要素」の左右のマージン値「0」を「auto」に変えて中央寄せにする方法です。

❹「通常編集」に切替えて、中央寄せが上手く行ったか確認します。 下は実際に中央寄せとした状態です。

〔注意〕
●「埋め込みコード」の前後は、「<div>」「</div>」や「<br>」などと、編集に使用しているブラウザによって異なって来ます。 また、編集の手順の違いで、前後の「<br>」の入り方が異なる場合があります。
● 前後の行とインスタグラムとの間隔は「埋め込みコード」前後の「<br>」をHtml編集で削除/追加して調節します。
● 上の上下のマージン値の「10px」の値を調節して、前後行との間隔を精密に調節することも可能です。



「centerタグ」を使っても、インスタグラムを中央寄せにすることが可能です。 少し複雑な話になりますが、最近のHTMLでは「centerタグ」は非推奨とされています。 しかし実情は、エキサイトのシステムでは日常的にこれが使用されている様で、ここだけ拘っても意味がないと思われます。

① 編集画面を「通常編集」から「HTML編集」に切替えて、インスタグラムの「埋め込みコード」を探して確認します。

b0174191_22492731.png

➁ 「埋め込みコード」の直前と直後を「<center>」「</center>」で囲みます。 下図は、実際にタグ(青印)を書き込んだ様子です。

b0174191_22571117.png

➂「通常編集」に切替えて、中央寄せが上手く行ったか確認します。

〔注意〕
● 後方の「</center>」の書き込みを忘れないこと。 忘れて問題がない場合もあるが、以降の文字等の配置が崩れる場合があります。
●「埋め込みコード」の前後は、「<div>」「</div>」や「<br>」などと、ブラウザによって異なります。
● 前後の行とインスタグラムとの間隔は「埋め込みコード」前後の「<br>」をHtml編集で削除/追加して調節します。
● 「<center>」や「</center>」の書き込みを簡単にするには、これらを「せんた」等の読みで単語登録して、語変換で書き込むと便利です。



このページの手法は、各文書ごとの作成/編集の過程でHtml編集を行うものです。 これは編集した個々のインスタグラムのみに効果します。 以下のブログスキンによる修飾の手法は、ブログ全体(過去や未来の文書)に効果が及びます。 Html編集の手間を減らし、ブログ全体のデザイン統一を得られます。



〔追記〕2017.06.23
記事のレイアウトと内容を一部修正しました。




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

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)/ エキサイトブログ

2017年 06月 16日
エキサイトブログでは、スマホ対応スキンはユーザー側でアレンジできません。 しかし、Html編集でのアレンジはスマホ表示に反映するので、リッチリンクを両環境でアレンジするには、
  ①スマホ表示をHtml編集でアレンジ
  ➁PC表示をブログスキンのCSS編集で修正アレンジ
という手順が鉄則です。

2017年春以降に、リッチリンクの生成コードに仕様変更があり、今後はこの仕様に落ち着くと私は推測しています。 そこで、仕様変更された現状の生成コードを前提として、再度リッチリンクのアレンジ基準をチェックしました。



以下は仕様変更後のスマホ表示の検証です。

b0174191_12114651.png

PC表示は改善された様ですが、スマホ表示はリッチリンク下方が異常にアンバランスです。 生成コードの最後に<br>が入りますが、それを省いても inline-block 要素なので必ず後方にこの隙間が出来ます。

下方の隙間はリッチリンクの height 調節で改善できますが、初期値「180px」を減らして行くと「146px」以下ではリッチリンク自体にスクロールバーが出てしまいます。 そこで、他環境での表示安定を期して「150px」とした場合が以下です。

b0174191_12245273.png

「height: 140px」まで高さを下げると、下図の様に上下間隔をほぼ均一に出来ますが、スマホ操作で上下にズレます。 これを抑止するには「scrolling="no"」を追記する必要が出て来ます。

b0174191_12295508.png

また、上の様にする別の方法があります。 heightは「150px」とし、「inline-block」を「block」に書換えて、生成コードの最後に付いて来る<br>を削除する方法です。(inline のままでは効きません)

どちらが良いか考え、私はHtml作業が簡単そうな後者を選択しました。 以下に書き換えの雛形を整理しておきます。



 ① スマホ表示をコントロールするHtml編集でアレンジ 

デフォルトの生成コード
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: inline-block;
width: 100%;
height: 180px;
max-width: 520px;
margin: 10px 0;">
</iframe>
<br>


スマホ表示の上下行との間隔を調整するアレンジ
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>

(注:margin値の変更は、文書全体の行間隔に合せたもので、必須ではありません)

b0174191_12295508.png

また以下の様に「scrolling="no"」の追加すれば、高さのスリムなリッチリンクが可能です。

スマホ表示の高さをスリム化し、上下行との間隔を調整するアレンジ
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: inline-block;
width: 100%;
height: 108px;
max-width: 520px;
margin: 0;"
scrolling="no">
</iframe>

b0174191_13265545.png



 ➁PC表示をブログスキンのCSS編集で修正アレンジ 

①のアレンジ結果がPC表示に影響し、PC側は不適切な表示になります。「inline-block」の場合に前後の<br>を省くと、リッチリンクは文字列の文字同様に左右位置が定まらず、思わぬ配置になります。 そういう問題を含めて、PCのリッチリンク表示を修正アレンジします。 これはブログスキン上からのアレンジで、スマホ表示には全く無関係です。

アレンジの要領は、「中央配置のブロック内にリンクを配置」「ブロックは角丸の枠線」「ブロックの縦幅を低くしてマスキング」といった手法で、縦幅のスリムなリッチリンクに仕立て、上下行との間隔も調整します。

下準備として、①のアレンジと同時にHtml編集で、生成コード全体を「rlink」のクラス指定した<div>ブロックで囲みます。

<div class="rlink">
<iframe
アレンジした生成コード>
</iframe>
</div>

これを修飾する以下のリッチリンク用の2項目のCSSを、ブログスキンに登録します。

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

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

.rlink」は、リッチリンクをマスクします。「 width: 496px」「height: 118px」を指定してスリム化。 また、「margin: 0.72em auto 0.88em」は、上下行との間隔を調節した上で中央配置を指定します。 上下マージン値は各ブログスキンに合せて調整します。
.rlink iframe」では、PC表示でリッチリンクが上下スクロールしない様に、iframeに「height: 180px」として、①の指定を修正しています。 こちらの「margin: -10px 0 0 -10px !important」は、マスク範囲を微調整するものです。

<div class="rlink">で囲い、ブログスキンで修復アレンジした結果、PC表示は以下の様になります。

b0174191_14532127.png

上はリッチリンクの下部を省略したスリムタイプですが、マスクの高さを拡げたい時は、生成コードを下の様な複数クラス指定の<div>ブロックで囲みます。

<div class="rlink rlink_ex">
<iframe
アレンジした生成コード>
</iframe>
</div>

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

.rlink_ex {
height: 154px !important; }

複数クラス指定の<div class="rlink rlink_ex">で囲った場合は、下図の様に「.rlink_ex」の「height」指定が優先され、118px → 154px と、高さが拡がって表示されます。

b0174191_15114606.png



以上の ①、➁ の両方をリッチリンク設置ごとに行います。 ブログスキンは一旦CSSを登録しておけば済みます。 設置時のHtml編集は、慣れてしまえば簡単です。 しかし、Htmlが不得意な人の為に、もう少しスリムなリッチリンクが簡単に置ける様にすれば、利用者がもっと増えるのではないかと思います。

下は。このページの方法で設置したリッチリンクの実物です。





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

リッチリンクのアレンジ:水面下の仕様変更と簡易な配置方法 / エキサイトブログ

2017年 06月 14日
記事上にリンクを設置する際に、リッチリンクを使う事が多くなって来ました。 先日、生成されたリッチリンクのコードを、Htmlの手作業で配置アレンジしていると、思った様に中央寄せに出来ません。 あれれと思い生成コードを良く見ると、以前のと違う部分があります。

エキサイトがこの機能を導入した時点の生成コードから、システム的に若干の変更をしているんですね。 ブログシステムを提供する側は、こういうマイナーな仕様変更は逐一教えてくれるわけではありません。 仕様変更があった時期は3月以降で正確には不明ですが、常時SSL化の対策でURL型を変更し、iframe が「inlin-block」扱いに変更されています。

以下は昔のリッチリンク(ノーマルサイズ)の生成コードの基本型です。(判り易く改行しています)

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

下は最近の生成コードの基本型で、赤い部分が仕様変更された部分です。

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


この仕様変更で、URL型「http://bp.exblog~」を「//bp.exblog~」に置き換えたのは、常時SSL化に必要不可欠だったと思われます。

一方「display: block」を「display: inline-block」に置き換えた事で、リッチリンクの行間配置が改善されました。(PC表示は少し改善、スマホ表示は改良されないまま) また、Html編集が苦手なユーザーにも、リッチリンクの中央寄せや右寄せ配置が簡単に出来る様になりました。(こちらが主目的の改善でしょう)



〔行間配置の改善〕
下図はハードコピーですが、上側のリッチリンクは iframeの属性を「inline-block」に指定した場合です。 下側は以前の「bolck」指定の場合で、不必要な隙間が出来ていました。

b0174191_11221501.png

私の場合、リッチリンク導入当初からこの行間配置の不釣り合いを、アレンジで対処していました。 今回の仕様変更は、私のアレンジに問題を生じる事なく幸いでした。



〔リッチリンクの中央寄せや右寄せ〕
リッチリンクが「文字」の様にふるまう属性「inline-block」指定となり、編集アイコンの文字の配置指定が使える様になりました。 配置指定をするには、下図の様にカーソルでリッチリンクを反転させた上で、編集アイコンの「中央寄せ / 右寄せ / 左寄せ」のどれかを押します。

b0174191_16103554.png

この操作は「文字」の「中央寄せ」などの操作と同じで、Html編集画面上でも可能です。 編集アイコンで指定が出来て便利になったわけです。



〔Html編集で中央寄せや右寄せを指定する〕
上の方法では「<div style="text-align: center;">~</div>」と言ったコードが書き込まれます。 しかし、従来の様にHtml編集で「margin値」によって「中央寄せ / 右寄せ / 左寄せ」を指定出来ます。 但し「inline-block」を「block」に書き換える必要があります。

Htmlで生成コード書換えのポイントは以下です。

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

display: inline-block;display: block;

中央寄せや右寄せ配置には、「block」指定への書換えが必須です。 その上で、下の3行のどれかを指定。
margin: 10px 0;margin: 0 auto; (中央寄せ)
margin: 10px 0;margin: 0 0 0 auto; (右寄せ)
margin: 10px 0;margin: 0 0; (左寄せ)

上下マージンを10pxとする場合は下の様な指定です。 スキンの行間設定に合せ10pxの値を調整出来ます。
margin: 10px 0;margin: 10px auto; (中央寄せ)
margin: 10px 0;margin: 10px 0 10px auto; (右寄せ)
margin: 10px 0;margin: 10px 0; (左寄せ)

最後に 末尾の <br> を削除 これは、リッチリンクと下行の間隔を開けたくない場合で、必須ではありません。



今回の仕様変更に即して、以下の今までのリッチリンク記事に追記注釈を追加しました。

リッチリンクのアレンジ(Subsite のカテゴリー)



〔追記〕2017.06.15
私のリッチリンクのアレンジ過程をチェックして行くと、もうひとつ仕様変更に気付きました。 当初のHtmlアレンジでは「iframe」内の書き込み制限で「scrolling="no"」を記入すると、文書保存が出来ませんでした。 ところが、ビッグサイズのリッチリンクにはこの記述があり、試しに通常サイズの生成コードにHtml編集で「scrolling="no"」を書き込むと、今回は問題なく保存出来ました。 つまり「iframe」の書き込み制限が緩和されていたのです。

この「scrolling="no"」を書けると、リッチリンクのアレンジは少し変わって来ます。 Htmlでの編集は特にスマホでの表示アレンジに有効です。 リッチリンクの高さを減らした場合に、縦スクロールが出るのをこのコードで抑えられ、小型化が可能となります。 このコードを使えず、今までスマホ上のリッチリンクはデフォルトの高さのままとしていたのです。

下図は、Htmlでリッチリンクの生成コードをアレンジして、スマホでの高さを小さくコンパクトにしたものです。
生成コードの「display: inline-block;」はそのままで、「height: 108px;」「margin: 0;」「scrolling="no"」としています。

b0174191_22412577.png

スマホ表示はコンパクトになりましたが、PC表示はこのコードでは下の様に下行に干渉してしまいます

b0174191_22535895.png

そこで、この様な踏み込んだアレンジを実現するには、「スマホ表示をHtmlでアレンジ → PC表示をブログスキンのCSSで修正アレンジ」という手法を使います。その詳細は以下のページを参照ください。





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

エキサイトブログの常時SSL化に関する要チェックポイント

2017年 06月 07日
2017年夏にかけてエキサイトブログの常時SSL化が実施される様です。 最初の告知は以下です。
エキサイトブログは、余りアレンジユーザーは多くなさそうですが、そういったユーザーでなくても、SSL化によって自分のブログページの問題が生じないかは、SSL化の実施の過程でチェックした方が良い様に感じます。 私が知り得るポイントで、SSL化で最も問題になりそうな事は、URLが「ブログ記事」や「スキンコード」に記述されている場合です。

SSL化(安全対策化)されたブログページで、外部ファイルを参照する「http://」のURLが記述されている場合、ブラウザが警告を出す場合があるという情報もあります。 その場合、外部ファイル取得やリンク先へのジャンプに関して、ユーザーの選択を求める形が予想されますが、実際には常時SSL化が実施されてみないと判りません。

b0174191_09522169.png



〔ブログ記事上の外部リンク〕
例えば、YouTube動画の埋め込みで、動画コード内に「src="http://www.youtube.com.~」等と「s」抜きURLを書き込んでいる場合があります。 このブログページがどんな表示になるのか、動画は表示されるのか、今の所は不明です。 但し、エキサイトの編集アイコンでYouTube動画を埋め込んだ場合は、「src="//www.youtube.com.~」となる様で、これは問題が生じないでしょう。

動画に限らず、外部サイトやその記事などのリンクを記述していて、そのURLが「http://」である場合は、ブラウザで警告表示されるのでしょうか?

〔ブログ記事上の自ブログ他ページへの相対パスリンク〕
自分のブログの他ページへのリンクのURLを、相対パス表記で「href="/xxxxxxxx/"」等としている場合は、問題はないでしょう。(xxxxxxxxはブログ記事番号)

〔ブログ記事上の自ブログ他ページへの絶対パスリンク〕
エキサイトは「以前に投稿した記事(httpのURL)へのリンクは、そのままで問題ございません」としていますが、これはデスクトップに置いたリンクや、全く別のサイトに置いたリンクの事で、それらをたどる際は「https」にリダイレクトされ、ちゃんとページが表示されると言っているだけの様に見えます。(それは、システム側で可能な基本的なリダイレクトですから)

しかし、自ブログ他ページへのリンクのURLを、絶対パス表記で「href="http://~~"」等としている場合、参照先がリダイレクトされれば「https://」という所までブラウザが解釈してくれるか、或いはシステムがフィルターをかけてエキサイトブログのURLは「s」付きとしてブラウザに読ませるか、など、実際にSSL化されないと判らないものです。

〔ブログ記事上のリッチリンク〕
これは「src="//bp.exblog.jp/richlink/」という相対パス表記ですから、問題は生じないでしょう。

〔ブログ記事上の画像〕
普通に設置した画像はエキサイトの特殊タグで扱われ、その元はエキサイトの画像サーバのURLです。 現在のURLは「http://pds.exblog.jp/」ですが、SSL化以降は「https://」になり問題を生じないでしょう。 但し、特殊に外部の画像ファイルのURLをリンク先として記述している場合は、問題を生じ得る可能性があります。

〔ブログ記事上のジャンル(バナー)やライフログ〕
「href="http://www.exblog.jp/genre/」「src="http://md.exblog.jp/img/」「href="http://item.excite.co.jp/」等が使われていますが、SSL化以降は「https://」に変わると思います。 昔のページに配したこれらは、記述が「http://」のままでも、ページを表示した際は自動的にリダイレクトされ、問題はなさそうに思います。

〔ブログ記事上のマップ〕
埋め込まれるのはマップ機能の特殊コードで、問題は生じないと思われます。 ちなみに、Google Map のリンクコードは以前より「https://」で、それを埋めこんでいる場合も問題ないはずです。



〔ブログパーツなど〕
一例で私が使用しているユニクロカレンダーは「src="http://www.uniqlo.com/」を参照しています。 このパーツの動作はどの様になるのか? 他にも「http://」サイトを参照する埋め込みブログパーツはあるでしょう。

フェースブックボタンは「https://」参照ですが、各所に出て来る「Yahooの宣伝」は「http://」参照です。 これらはどうなるのか、無くなりはしないでしょうが。



〔スキン上のリンク〕
スキンのHtmlやCSS上に記述されたURLはどう扱われるのでしょうか? 公式スキンの場合は、書き込まれたURLは、おそらく殆どが背景や枠などのデザイン用の画像パーツでしょう。 参照対象のURLは「S」付きになるわけですが、スキン側の書き換えをするか、自動的なリダイレクトが働くので既存スキン書換えは無いかも知れません。私は後者を予測しますが。

スキンアレンジを施しているユーザーは、そう大した作業でも無いでしょうから、URL記述ヵ所を検索して「https://」に書き換える事をお勧めします。 エキサイト内のURLを参照するものである限り、問題は生じないと予測しますが、僅かでも表示スピード上でプラスになるかも知れません。



以上、常時SSL化が実施されたら、チェックしておきたい部分を挙げて整理しました。 私は、上記で「」を付けた項目は要チェックと考えています。



〔追記〕2017.06.08
URL表記の型式で調べると、「http://」「https://」等はそのURLのサーバーが通信する「プロトコル」を表すとあります。 現在のブラウザは、通信プロトコルを自動的に判断するので、一般にこの部分を省略したURL表記でこと足りるのでしょう。 今後、エキサイトブログに絶対パス表記でリンクを置く場合は、「//~~~」という表記型が間違いないと思います。

〔追記〕2017.06.12
私は編集画面アレンジにユーザースタイルシートを使用しています。 そのコード中のアイコン画像のURL指定では、IE版に限り「http://~」でないと無効になります。 Chrome版(Stylist拡張機能使用)では「//~」型が有効でした。 これは、CSSそのものより、それを扱う環境(ユーザースタイルシートの環境)に関係する様な気がします。 IEは一番気難しいのは他の事でも頻繁に経験しますから。

一方、CSSで一番皆んなが利用しているのがブログスキンですが、こちらのCSSに書き込んだ「http://~」型のURL指定は「//~」型に書換えても全く問題ない様です。 ブログスキンのCSS(Htmlも)は、エキサイト内部で先ず読みだされるからの様な気がします。 自分でアレンジしている場合は、ブログスキン上の「http://~」表記は、予防的に「//~」型に書き換えて良いと思われます。




[PR]
by Ataron | 2017-06-07 14:00 | PC環境(ハード/ソフト) | Comments(0)

編集画面をアレンジする(33)/ エキサイトブログ キャンペーン追加エリア対策

2017年 06月 05日
6月5日、「美しいあじさい&6月のイメージショット!」というエキサイト季節限定キャンペーンが開始されました。 これは、今年2月の「ほっと。キャンペーン」と同類のキャンペーンです。 この告知も、編集画面の全く同様の場所に配置されました。

b0174191_19580349.png

こういう季節もの枠の追加は、アレンジした編集画面に割り込んでデザインを崩すので、前回同様に非表示の対策をします。 ところで、このキャンペーン枠、2月と同じ場所に「ID名」は全く異なる形で配置されていて、今後もこれが繰り返される可能性が大です。 その都度対策するのも能がないので「配置の仕方が同じ」という点に着目して、同類のキャンペーン枠にも通用するコードで対策することにしました。

編集画面の周辺のHtmlを調べると、以下の構成です。

b0174191_20090092.png

問題のキャンペーン枠は➂項ですが、その周囲のコードの内容は以下です。
  ①編集画面の主要部
  ➁画像パレット
  ➂「キャンペーン」枠 <div>
  ④「みんなの投稿」枠 <section>
  ➄「投稿日時」枠

①~➄項は全て同じ階層に並んだ項です。 キャンペーンで➂項が追加されたり消滅したりします。 ここで「➁項+div」というセレクタ(+は隣接セレクタ)を使用すれば、➁項の直後の「div」要素のみを選択することになり、➂項が消滅した場合も「section」要素の④項に影響が及びません。

つまり、このセレクタ表記で非表示指定すれば、「ID名」にかかわらずキャンペーン枠がある場合だけ非表示に出来ます。

Chrome版
#entryEditIframe + div {
display: none; }

IE版
.page_entry #entryEditIframe + div {
display: none !important; }


これらの対策コードは、以下の現行版の基本コードに追記済みです。




〔追記〕2017.06.11
この非表示対策は、キャンペーン参加を望むユーザーにとっては不利益です。 そこで、キャンペーン枠を編集画面デザインを崩さない形で表示するオプションを考えました。

以下のオプションを追加で、キャンペーン時期だけ「キャンペーン枠」が表示され、時期終了で自動的に本来の編集画面に復帰します。

Chrome版 キャンペーン枠表示オプション
#entryEditIframe + div {
display: block;
margin-bottom: 60px;
margin-right: 215px;
background-color: #fff; }

IE版 キャンペーン枠表示オプション
.page_entry #entryEditIframe + div {
display: block !important;
margin-bottom: 60px !important;
margin-right: 178px !important;
background-color: #fff; }

上記のオプション追加時の縦並び調整で「投稿日時」「公開設定」「保存ボタン」の「margin値」を微調整しました。

下図は「キャンペーン枠表示オプション」を追加した場合の Chrome版の表示です。

b0174191_17151446.png

キャンペーン枠追加オプションと基本コードの微調整は、現行版に追記済です。




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

編集画面をアレンジする(32)/ エキサイトブログ Chrome版-More拡張に「マイブログ」ボタンを追加

2017年 06月 04日
「ブラシュアップ More拡張」をアレンジ編集画面の最新版として展開していますが、この版への移行時にChrome版では「マイブログ」ボタンを省略しました。(IE版はURLによる区別適応が出来ないので、このボタンは設置不能です)

これは、私がChromeの拡張機能の「Speed Dial」を利用する様になり、マイブログのトップページ再表示が簡単になったからです。 しかし、こういう拡張機能を使わないユーザーも居るし、編集画面からワンクリックで飛べる「マイブログ」ボタンの有効性を再認識しました。 人は無くなってみると有難さが判るものです。

そこで「(29)Chrome版 - ブラシュアップ More拡張」にも、「マイブログ」ボタンを再設置する事にしました。 コードは以前から使用していたコードを少し改良しただけです。

#menu {
display: none; }

#sideRakutenMW {
display: none; }

としていた部分を、以下の様に書き換えました。
(#Menu、#sideRakutenMWは、管理画面の左側メニュー部分です)

#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 15px;
bottom: 5px;
height: 28px;
margin: 0; }

#myblogBtn a {
line-height: 28px;
background: none;
text-indent: 0px; }

この書き換えによって、下図の様に「マイブログ」ボタンが追加表示されます。

b0174191_11382786.png

「マイブログ」ボタンは、編集中の文書データはそのままに、新しいタブでマイブログを表示する安全で便利なスイッチです。「(29)Chrome版 More拡張」の基本コードは、既に上記の更新をしています。





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

編集画面をアレンジする(31)/ エキサイトブログ インスタグラム 編集アイコン追加に対応する

2017年 06月 01日
6月に入り、インスタグラムに対応した「Instagramリンク」がエキサイトブログの新機能として追加されました。
これを起動する編集アイコンが新しく追加されました。 調べると、アイコン画像の元になっている編集アイコンの絵(全アイコン画像とアイコンパレット背景とを纏めた画像)の横サイズを拡張して、インスタグラムのアイコン追加を実現しています。(参照:(30)/ 編集アイコンのグラフィックアレンジ

下は新しい編集アイコンの絵で、全体の幅が拡張され右端のインスタグラムが追加されています。

a0349576_22272547.gif

  http://image.excite.co.jp/jp/exblog/userconf/images/entry/ico_exeditor.gif
 (編集アイコンの絵のURLは、以前と同じです)



新設アイコンをアレンジした編集画面に表示するには、編集アイコンの絵から新設アイコンを読出す場所と、その配置場所を指定しなおす必要があります。

今回、エキサイトが新設アイコンのために追加したコードは以下でした。

#exbtn_instagram {
top: 29px;
left: 403px;
background-position: -750px 0; }

新設アイコンの配置は、アレンジした一行アイコンパレットの右端にすることにしました。 そのためのアレンジコードは以下です。
◎読出す場所は、アイコン枠線を自前で描画しているので「-751px -1px」と「-1px」ずつシフトした値です。
◎配置場所は、左横のアイコンから右へ「26px」シフトした値です。

Chrome版の追加コード
#exbtn_instagram {
top: initial;
bottom: 5px;
left: 705px;
background-position: -751px -1px; }

このコードを従来のコードに追加すれば、インスタグラムのアイコンがアレンジした一行アイコンの右端に表示されます。

なお、IE版の場合は「!important」の記述と「intial → auto」の変更が必要で、以下が追加コードになります。

IE版の追加コード
#exbtn_instagram {
top: auto !important;
bottom: 5px !important;
left: 705px !important;
background-position: -751px -1px !important; }

これら新設アイコン対応コードは「(28)IE11版 - ブラシュアップ More拡張」及び「(29)Chrome版 - ブラシュアップ More拡張」の基本コードに追記し更新済です。

下は一行アイコン右端に追加されたインスタグラムアイコンです。

b0174191_21083960.png



オリジナルの編集アイコンの絵を使用している場合、新設のアイコンを加えた新しいオリジナル絵を作りそのURLを編集アイコンの絵として指定する必要があります。
  (参照:(30)/ 編集アイコンのグラフィックアレンジ
対策コード追加とオリジナル絵を設定しない場合は、新アイコン無しのままです。 対策コードの追加のみでは、絵の無い透明アイコンとしてインスタグラム機能を利用できます。

下は、新設アイコンを追加した新しいオリジナルの編集アイコンの絵の例です。

a0349576_22273189.png





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

エキサイト旧編集画面のアレンジ(10) Chrome版 - ブラシュアップ ver.4

2017年 04月 23日
旧編集画面 の「Chrome版 - ブラシュアップ ver.3」をマイナーアレンジしました。

「ブラシュアップ ver.4」の改善点は、
●無効なエモーティコン関係の修飾を削除整理しました。
●新編集画面のアイコンデザインを流用した、オリジナルの編集アイコンに改めました。
(注意)オリジナル編集アイコンの登録/指定をしないと、デフォルトアイコンが崩れて表示され逆効果ですから、この版を使う意味がありません。



デフォルトの編集アイコンの背景画像
b0174191_19421155.png

オリジナルの編集アイコンの背景画像
b0174191_19435142.png

アイコン枠はCSSの「border-radius」で描画しているので、オリジナルの背景画像には枠線がありません。 この背景画像をアップロードし、そのURLを調べてスタイルシート末尾の「 /* 編集アイコン背景画像の指定 */ 」の項のURL部(太字で一般形で表示しています)にペーストすることで、オリジナルアイコンが表示されます。 下図は、オリジナルアイコンの様子です。

b0174191_20510298.png




編集画面のアレンジには、Chrome と Stylist という Chrome拡張機能が必要です。 先ず Stylistを Chromeにセットし(簡単です)、それに下のスタイルシートを設定します。 その操作は、以下のリンク先を参照ください。
但し上のページで、エキサイト編集画面のURLを記入する の枠は、新編集画面の説明です。 旧編集画面の場合は、この枠に設定するURLは、
http://www.exblog.jp/myblog/entry/new/
http://www.exblog.jp/myblog/entry/edit/
になります。



旧編集画面用 スタイルシート Chrome版 - ブラシュアップ ver.4


/* 旧編集画面用 スタイルシート Chrome版 ver.4 2017.04.23 */

#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

#tmpfilelist+div , #filelist+div {
display: none; }

#toUserconf , #csEnquete {
display: none; }


/* *** */

#wrapper {
min-width: 894px; }

/* iframe#tmpfilelist は新規、iframe#filelist はテンプレと更新編集にのみ存在 */
iframe#tmpfilelist~table , iframe#filelist~table {
width: 100% !important;
margin-bottom: -400px; } /* -300px以上を指定して下部端を明瞭化 */

td.drop_invalid:nth-child(1) {
position: absolute; }

td.drop_invalid:nth-child(1)>:not(.capacity) {
display: none; }

td.drop_invalid:nth-child(1)>.capacity {
position: absolute;
top: 60px;
left: 700px;
width: 120px;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 3px; }

td.drop_invalid:nth-child(1)>.capacity>div>font {
color: #eee; }

td.drop_invalid:nth-child(2) { /* 編集画面ベース 中央部 */
width: auto !important;
display: block;
padding-left: 15px !important; }

td.drop_invalid:nth-child(2)>form>table:last-of-type { /* トラバ枠の削除 */
display: none; }


/* *** */

#entry_header {
display: none; }

#template {
position: absolute;
top: 20px;
left: 700px;
height: 24px;
width: 90px;
padding: 4px 4px 0px !important;
overflow: hidden;
transition: 0.5s; }

#template:hover {
left: 170px;
height: auto;
width: 620px;
padding: 8px 10px 0px !important;
background: #fff !important;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5);
z-index: 91; }

#template_names {
overflow: hidden; }

#template_names>span {
display: block;
text-align: left;
margin: 0px 20px 6px;
width: 100%;
white-space: nowrap; }

span.tmp a, span.st {
font-size: medium;
text-decoration: none; }

span:not(.tmp) {
text-align: right !important; }

#template_names input {
width: 90px !important;
height: 23px !important;
margin: 0 6px; }


/* *** */

#subject {
position: absolute;
top: 15px;
padding: 0 !important; }

#subject_title {
display: none; }

#subject_content>input {
width: 639px !important;
height: 23px;
padding: 3px 15px 0px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }


/* *** */

#category {
position: absolute;
top: 55px;
padding: 0 !important; }

#category_title {
display: none; }

#CateStr>select {
height: 23px;
font-size: inherit;
padding: 1px 0 0 !important;
border: 1px solid #ccc;
border-radius: 3px; }

#CateStr input[value="カテゴリ設定"] {
width: 85px !important;
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */

#tags {
position: absolute;
top: 55px;
left: 288px;
width: 450px;
padding: 0 !important; }

#tags_title {
width: 32px !important;
padding: 5px 0 0;
display: none; }

#tags_content>.tag {
width: 138px !important; }

#tags_content>.tag>input {
width: 116px !important;
height: 19px;
font-size: inherit;
padding: 2px 0 0 4px !important;
border: 1px solid #ccc;
border-radius: 3px; }

#tags_content>.tag>a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

#tags_attention {
display: none; }

/* タグリストの幅拡大 公開設定の上に表示 */
body>#exHeaderWrapper~div[style*="width: 122px"]:last-child {
position: relative;
width:162px !important;
z-index: 90; }

body>#exHeaderWrapper~div[style*="width: 122px"]:last-child>div {
width:150px;
padding: 0 6px 0; }


/* *** */

#entryoption {
position: absolute;
top: 85px;
left: 15px;
width: 110px;
height: 23px;
overflow: hidden;
margin: 0px !important;
padding: 10px 0 10px !important;
transition: 0.5s;
z-index: 2; }

#entryoption:hover {
width: 695px; }

#entryoption_title {
display: none; }

#entryoption>.entryoption_menu {
height: 19px;
padding: 5px 4px 0;
margin: 0px 2px 15px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#entryoption>.entryoption_menu input {
margin: -3px -3px 0 0 !important; }

#entryoption>.entryoption_menu:nth-child(n+3) {
width: 125px;
overflow: hidden;
transition: 0.5s; }

#entryoption>.entryoption_menu:nth-child(n+3):hover {
width: 150px; }


/* *** */

#cdcdcd {
display: none; }


/* *** */

#entrydate {
position: absolute;
top: 85px;
left: 140px;
height:26px;
width: 200px;
overflow: hidden;
margin: 0;
padding: 10px 0 10px !important;
transition: width 0s 1s;
z-index: 2; }

#entrydate:hover {
width: 550px;
transition: width 0s; }

#entrydate>div {
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#entrydate>div:nth-child(1) {
float: left;
height: 19px;
padding: 5px 0 0 6px;
margin: 0 0 15px !important;
width: 180px; }

#entrydate_content {
margin: 0 0 0 -20px; }

#entrydate_content>input {
margin: -4px 0 0;
vertical-align: middle; }

#entrydate>div:nth-child(2) {
float: left;
padding: 1px 0 1px 10px;
margin: 0 2px 0 !important;
width: 315px; }

#entrydate_setting>select {
height: 22px !important;
border: 1px solid #ccc !important; }

#entrydate_setting>select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }


/* *** */

#entryopen {
position: absolute;
top: 95px;
left: 345px;
height: 24px;
width: 200px;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6;
transition: width 0.5s;
z-index: 1; }

#entryopen_content>input {
vertical-align: middle;
margin: -4px 0 0 8px; }

#entryopen:hover {
width: 340px; }

#entryopen_title {
display: none; }

#entryopen_content {
text-align: left; }

#entryopen_content>input {
vertical-align: middle;
margin: 6px 0px 9px 8px; }


/* *** */

#ping_form {
position: absolute;
top: 95px;
left: 558px;
height: 21px;
width: 106px;
overflow: hidden;
margin: 0;
padding: 3px 0 0 20px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#ping_form>label {
line-height: 22px; }

#ping_form>input {
position: absolute;
top: 3px;
left: 2px; }


/* 文書編集部 */

#entrymenu {
position: absolute;
top: 135px; /* 編集アイコンの高さ位置 */
width: 660px; }

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }

#usehtml>a {
border-radius: 3px; }

#usehtml>br {
display: none; }


/* *** */

#entry_menu6 {
position: relative;
left: 168px; }

#entry_menu7 {
position: relative;
left: 224px; }

#smallPallet {
width: 24px !important;
height: 20px !important;
position: relative;
left: 56px;
z-index: 88; }

#entry_menu11 {
position: relative;
left: -84px; }

#entry_menu12 {
position: relative;
left: -84px; }

#entry_menu13 {
position: relative;
left: -84px; }

#entry_menu14 {
position: relative;
left: -84px; }


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet {
z-index: 101 !important; }

#colorPallet>.curve-head , #colorPallet>.curve-head>div ,
#colorPallet>.curve-body , #colorPallet>.curve-body>.curve-body_left ,
#colorPallet>.curve-bottom , #colorPallet>.curve-bottom>div {
background: none !important; }

#colorPallet {
border: 1px solid #777;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5); }


/* *** */

#no_html {
padding: 2px 6px 0px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

#no_html>label {
vertical-align: 1px; }

#no_html>input[value="プレビュー"] {
display: none; }


/* *** */

#entrymenu+table>tbody>tr>td.mid { /* 編集枠のtableを指定 */
padding-right: 20px; /* 画像パレットとの間隔 */
padding-bottom: 0 !important; } /* 新規編集枠のみ以降の高さ調整をOFF */

#entrymenu+table { /* 編集枠のtableを指定 */
width: 100%;
margin-top: 150px !important; } /* 編集枠の高さ位置 */

textarea#content {
position: relative;
width: 100% !important;
min-height: 440px !important; /* ★編集枠縦幅の指定 */
font-size: medium;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }

#content~.mt5 {
position: relative;
top: 0px; /* Moreスイッチ高さ位置 */
height: 24px;
width: 80px;
padding: 3px 0 0 !important; }

#content~.mt5>label {
vertical-align: 2px !important; }

#content~.mt5>span.HELP {
display: none; }

#morehtml>table {
width: 100%;
position: relative;
top: 0px; } /* More タイトル枠 高さ位置 */

#morehtml input {
padding: 3px 8px 0px;
height: 23px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }

#morehtml span.HELP {
display: none; }

textarea#morecontent {
width: 100% !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 29px; /* More時の文書編集枠以下の高さ調整 */
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


/* *** */

#upload {
display: none; }

#imageframe {
display: none !important; }

#upfile_list {
display: none; }

#upload_notes {
display: none; }


/* *** */

td.drop_invalid:nth-child(2)>form>div:last-of-type { /* プレビュー・送信枠 */
margin: -20px 0 20px 150px !important; } /* table 最下ライン */

input[value="プレビュー"] {
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

input[value="送信"] {
width: 150px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

td.drop_invalid:nth-child(2)+td>div { /* 画像パレットベース */
margin: -5px 10px 0 10px !important; }

#file_drop {
width: 162px !important;
height: 120px !important;
border: solid 4px #eee !important;
border-radius: 3px !important;
z-index: 3; }

#drop_form>.wrap_input>.drop_msg {
line-height: 100px; }

#preview {
margin-top: 6px !important;
height: 466px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border-radius: 3px !important; }

.image_info {
float: left;
width: 154px;
height: 126px;
padding: 0 !important;
margin: 10px 4px 0;
background: #fff;
border: 3px solid #fff !important;
overflow: hidden; }

.preview_img_top {
padding: 0 !important;
margin: 0 !important;
background: none !important;
width: 100% !important; }

.preview_img {
float: none !important;
opacity: 1 !important;
width: auto !important;
height: 104px;
border: none !important; }

.preview_img:hover {
box-sizing: border-box;
border: 3px solid #000 !important; }


/* *** */

.pos_select {
margin-top: -4px;
white-space: nowrap; }

.pos_select td:nth-child(1):before {
content: "<";
display: block;
margin: 0px 0px -18px -8px; }

.pos_select td:nth-child(3):after {
content: ">";
display: block;
margin: -15px 0px -2px 21px; }

.pos_select td:nth-child(4):after {
content: "×";
font-size: 18px;
font-weight: bold; }

.delete_icon {
float: none !important;
height: 12px;
margin: 8px -18px 0 30px !important;
opacity: 0; }

.pos_select tr:last-child {
display: none; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 ,
input[value="プレビュー"] , input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }


/* フォント指定 */

*{ font-family: "メイリオ","Meiryo" !important; }


/* 背景色指定 */

#entryoption , #entrydate , body {
background-color: #98c1dc !important; }


/* 編集アイコン背景画像の指定 */

#entry_menu1 , #entry_menu2 , #entry_menu3 , #entry_menu4 ,
#entry_menu5 , #entry_menu6 , #entry_menu7 , #smallPallet ,
#entry_menu11 , #entry_menu12 , #entry_menu13 , #entry_menu14 ,
#entry_menu15 , #entry_menu16 {
background-image: url("http://pds.exblog.jp/pds/~~~.png") !important; }




◎「 /* 背景色指定 */ 」のカラーコード「#98d1dc」を変更すれば、編集画面の配色を好みにアレンジ可能です。
◎「 /* 編集アイコン背景画像の指定 */ 」の「http://pds.exblog.jp/pds/~~~.png」の部分に、アップロードしたオリジナルの編集アイコン背景画像のURLをペーストすると、オリジナルアイコンが表示されます。




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

エキサイト旧編集画面のアレンジ(9) IE11版 - ブラシュアップ ver.3

2017年 04月 23日
旧編集画面に「エモーティコン」(絵文字/スカイプ文字)が復活しないまま、1ヵ月が経ちました。 これは旧編集画面からの移住をうながすための方策でしょうか。 システム改変が一段落した様なので、IE版にマイナーアレンジを加えました。

「ブラシュアップ ver.3」の改善点は以下です。
●無効なエモーティコン関係の修飾を削除整理しました。
●新編集画面のアイコンデザインを流用した、オリジナルの編集アイコンに改めました。
(注意)オリジナル編集アイコンの登録/指定をしないと、デフォルトアイコンが崩れて表示され逆効果ですから、この版を使う意味がありません。



デフォルトの編集アイコンの背景画像
b0174191_19421155.png

オリジナルの編集アイコンの背景画像
b0174191_19435142.png

アイコン枠はCSSの「border-radius」で描画しているので、オリジナルの背景画像には枠線がありません。 この背景画像をアップロードし、そのURLを調べてスタイルシート末尾の「 /* 編集アイコン背景画像の指定 */ 」の項のURL部(太字で一般形で表示しています)にペーストすることで、オリジナルアイコンが表示されます。 下図は、オリジナルアイコンの様子です。

b0174191_19513512.png

「IE11版 - ブラシュアップ ver.3」を利用する設定方法は、以下のリンク先を参照ください。
ユーザースタイルシートとして以下のスタイルシートをコピーして登録します。

「旧編集画面用 スタイルシート IE11版 - ブラシュアップ ver.3」


/* 旧編集画面用 スタイルシート IE11版 - ブラシュアップ ver.3 */

#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

/* 新管理画面バー幅補正 */
#toUserconf {
overflow: hidden; }


/* *** */

/* iframe#tmpfilelist は新規編集画面にのみ存在 背景色指定 */
/* iframe#filelist はテンプレ編集画面と更新編集画面にのみ存在 背景色指定 */

iframe#tmpfilelist~table , iframe#filelist~table {
position: absolute;
top: 0;
width: 100% !important;
height: 100%; }

iframe#tmpfilelist~table , iframe#filelist~table {
background-color: #98c1dc; } /* 背景色 */


/* 編集画面べース 左側部 / 登録データ表示 */

td.drop_invalid:nth-child(1) {
position: absolute; }

td.drop_invalid:nth-child(1)>:not(.capacity) {
display: none; }

td.drop_invalid:nth-child(1)>.capacity {
position: absolute;
top: 626px;
left: 340px;
height: 28px;
width: 200px;
margin: 0 !important;
padding: 5px 0 0 12px !important;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid:nth-child(1)>.capacity>div:nth-child(2) {
position: relative;
top: -17px;
left: 80px;
font-weight: normal !important; }

td.drop_invalid:nth-child(1)>.capacity>div:nth-child(2) b {
color: #777; }


/* 編集画面ベース 中央部 */
td.drop_invalid:nth-child(2) {
position: relative;
left: 0;
width: auto !important;
padding-left: 15px !important; }

/* 編集画面べース 右側部 */
td.drop_invalid:nth-child(2)+td {
display: none; }


/* *** */

td.drop_invalid #entry_header {
display: none; }

td.drop_invalid #template {
position: absolute;
top: 15px;
left: 660px;
height: 24px;
width: 90px;
padding: 4px 4px 0 !important;
overflow: hidden;
transition: 0.5s; }

td.drop_invalid #template:hover {
left: 150px;
height: auto;
width: 600px;
padding: 8px 10px 0 !important;
background: #fff !important;
z-index: 6; }

td.drop_invalid #template_names {
overflow: hidden; }

td.drop_invalid #template_names>span {
display: block;
text-align: left;
margin: 0 20px 6px;
width: 100%;
white-space: nowrap; }

td.drop_invalid #template_names>span.tmp>a ,
td.drop_invalid #template_names>span.st {
font-size: 16px !important;
line-height: 130% !important;
text-decoration: none; }

td.drop_invalid #template_names>span:not(.tmp) {
text-align: right !important; }

td.drop_invalid #template_names>span:not(.tmp)>input {
width: 90px !important;
height: 21px !important;
padding: 1px 10px 0 !important;
border: solid 1px #aaa !important;
border-radius: 3px !important;
margin: 0 6px; }


/* *** */

td.drop_invalid #subject {
position: absolute;
top: 15px;
padding: 0 !important; }

td.drop_invalid #subject_title {
display: none; }

td.drop_invalid #subject_content>input {
width: 590px !important;
height: 23px;
padding: 3px 15px 0;
font-size: medium !important;
border: 1px solid #aaa !important;
border-radius: 3px;
transition: 0.5s; }

td.drop_invalid #subject_content>input:hover {
width: 703px !important; }

td.drop_invalid #subject_content>input:focus {
width: 703px !important; }


/* *** */

td.drop_invalid #category {
position: absolute;
top: 55px;
padding: 0 !important; }

td.drop_invalid #category_title {
display: none; }

td.drop_invalid #CateStr>select {
width: 180px;
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #CateStr>select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

td.drop_invalid #CateStr>input[value="カテゴリ設定"] {
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */

td.drop_invalid #tags {
position: absolute;
top: 55px;
left: 305px;
width: 448px;
padding: 0 !important; }

td.drop_invalid #tags_title {
width: 32px !important;
padding: 5px 0 0; }

td.drop_invalid #tags_content>.tag {
width: 138px !important; }

td.drop_invalid #tags_content>.tag>input {
width: 116px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #tags_content>.tag>a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

td.drop_invalid #tags_attention {
display: none; }

/* タグリストの幅拡大 公開設定の上に表示 */
body>#exHeaderWrapper~div[style*="width: 122px"]:last-child {
position: relative;
width:162px !important;
z-index: 5; }

body>#exHeaderWrapper~div[style*="width: 122px"]:last-child>div {
width:150px;
padding: 0 6px 0; }


/* *** */

td.drop_invalid #entryoption {
position: absolute;
top: 85px;
left: 15px;
width: 110px;
height: 23px;
overflow: hidden;
margin: 0px !important;
padding: 10px 0 10px !important;
background-color: #98c1dc !important; /* 背景色 */
transition: 0.5s;
z-index: 3; }

td.drop_invalid #entryoption:hover {
width: 745px; }

td.drop_invalid #entryoption_title {
display: none; }

td.drop_invalid #entryoption>.entryoption_menu {
padding: 4px 4px 2px;
margin: 0px 2px 15px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entryoption>.entryoption_menu input {
margin: -3px -2px 0 0 !important; }


/* *** */

td.drop_invalid #cdcdcd {
display: none; }


/* *** */

td.drop_invalid #entrydate {
position: absolute;
top: 85px;
left: 140px;
height: 23px;
width: 435px;
margin: 0;
padding: 10px 0 10px !important;
background-color: #98c1dc; /* 背景色 */
transition: width 0.5s;
z-index: 0; }

td.drop_invalid #entrydate:hover {
width: 612px;
z-index: 3; }

td.drop_invalid #entrydate>div {
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entrydate>div:nth-child(1) {
position: absolute;
padding: 4px 0 2px 6px;
width: 190px; }

td.drop_invalid #entrydate_content {
margin: -2px 0 0 -22px; }

td.drop_invalid #entrydate_setting {
position: absolute;
top: 10px;
left: 202px;
margin: 0 !important;
padding: 1px 10px 1px 15px !important;
width: 300px; }

td.drop_invalid #entrydate_setting>select {
height: 21px !important;
padding: 2px 0 0 !important;
border: 1px solid #ccc !important; }

td.drop_invalid #entrydate_setting>select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }


/* *** */

td.drop_invalid #entryopen {
position: absolute;
top: 85px;
left: 340px;
height: 23px;
width: 396px;
overflow: hidden;
margin: 0;
padding: 10px 0px 10px 16px !important;
background-color: #98c1dc; /* 背景色 */
transition: width 0.5s;
z-index: 1; }

td.drop_invalid #entryopen:hover {
z-index: 3; }

td.drop_invalid #entryopen_title {
float: none !important;
position: absolute;
width: 170px !important;
margin: 0;
padding: 4px 6px 2px;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #entryopen_title>a {
display: none; }

td.drop_invalid #entryopen_content {
float: none !important;
position: absolute;
left: 204px;
margin: 0 -210px 0 0;
padding: 2px 6px 2px 0px;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #openflag_public {
position: absolute;
top: 2px;
left: -124px; }

td.drop_invalid label[for="openflag_public"] {
position: absolute;
top: 4px;
left: -104px; }

td.drop_invalid #openflag_private {
position: absolute;
top: 2px;
left: -74px; }

td.drop_invalid label[for="openflag_private"] {
position: absolute;
top: 4px;
left: -54px; }

td.drop_invalid #fan_only {
position: relative;
top: 0px;
left: -24px; }

td.drop_invalid #entryopen_content>label[for="fan_only"] {
margin-left: -25px !important; }


/* *** */

td.drop_invalid #ping_form {
position: absolute;
top: 85px;
left: 541px;
height: 23px;
width: 158px;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 10px 0px 10px 50px !important;
background-color: #98c1dc; /* 背景色 */
transition: 0.5s;
z-index: 2; }

td.drop_invalid #ping_form:hover {
left: 351px;
width: 348px;
z-index: 4; }

td.drop_invalid #ping_form>label:nth-child(1) {
display: inline-block;
position: relative;
top: 0px;
right: 12px;
text-align: right;
width: 100% !important;
height: 19px;
padding: 4px 10px 0 0px;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

td.drop_invalid #ping_form>input {
position: absolute;
top: 13px;
right: 140px; }

td.drop_invalid #ping_form>label:nth-child(3) {
position: absolute;
top: 15px;
right: 170px;
margin-right: 40px;
font-size: 12px; }

td.drop_invalid #ping_form>label:nth-child(3):after {
content: "    ※非公開記事はPING不能"; }


/* 文書編集部 */

td.drop_invalid #entrymenu {
position: absolute;
top: 130px;
width: 700px; }

td.drop_invalid #entrymenu_title {
display: none; }

td.drop_invalid #entrymenu_content {
width: auto !important; }

td.drop_invalid #usehtml>a {
border-radius: 3px; }

td.drop_invalid #usehtml>br {
display: none; }


/* *** */

td.drop_invalid #entry_menu6 {
position: relative;
left: 168px; }

td.drop_invalid #entry_menu7 {
position: relative;
left: 224px; }

td.drop_invalid #smallPallet {
width: 24px !important;
height: 20px !important;
position: relative;
left: 56px; }

td.drop_invalid #entry_menu11 {
position: relative;
left: -84px; }

td.drop_invalid #entry_menu12 {
position: relative;
left: -84px; }

td.drop_invalid #entry_menu13 {
position: relative;
left: -84px; }

td.drop_invalid #entry_menu14 {
position: relative;
left: -84px; }


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet {
z-index: 101 !important; }

#colorPallet>.curve-head , #colorPallet>.curve-head>div ,
#colorPallet>.curve-body , #colorPallet>.curve-body>.curve-body_left ,
#colorPallet>.curve-bottom , #colorPallet>.curve-bottom>div {
background: none !important; }

#colorPallet {
border: 1px solid #777;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 12px rgba(140,140,140,0.5); }


/* *** */

td.drop_invalid #no_html {
padding: 2px 6px 1px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

td.drop_invalid #no_html>label {
vertical-align: 1px; }

td.drop_invalid #no_html>input[value="プレビュー"] {
display: none; }


/* *** */

td.drop_invalid:nth-child(2)>form>table:first-of-type>tbody>tr>td.mid {
padding-bottom: 0 !important; } /* 新規編集枠の以降の高さ調整をOFF */

td.drop_invalid:nth-child(2)>form>table:first-of-type {
width: 100% !important;
margin-top: 160px !important; } /* 編集枠高さ位置 */

textarea#content {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

textarea#content~.mt5 {
height: 24px;
width: 80px;
margin-top: 8px !important;
padding: 2px 0 0 !important; }

textarea#content~.mt5>label {
vertical-align: 2px !important; }

textarea#content~.mt5>span.HELP {
display: none; }

#morehtml>table {
width: 100%; }

#morehtml>table>tbody>tr:nth-child(2)>td>input {
height: 23px;
font-size: medium !important;
padding: 3px 8px 0;
margin: 3px 0 3px;
border: 1px solid #aaa !important;
border-radius: 3px; }

#morehtml>table>tbody>tr:nth-child(2)>td>span.HELP {
display: none; }

textarea#morecontent {
width: 713px !important;
height: 440px !important;
font-size: medium !important;
padding: 5px 10px !important;
margin-bottom: 32px !important; /* Moreの下幅調整 */
border: 1px solid #aaa !important;
border-radius: 3px !important;
background: #fbfbfb !important; }


/* *** */

td.drop_invalid #upload {
height: 28px;
width: 200px;
margin: -23px auto 60px 533px; /* 60px 全体の縦幅指定 背景切れに関係 */
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid #upload_title {
margin: 0 2px; }

td.drop_invalid #upload_content>input[value="参照"] {
height: 24px !important;
margin: -4px 0 0;
padding: 3px 10px 0 !important; }

td.drop_invalid #upload_attention {
display: none; }


/* *** */

td.drop_invalid #imageframe {
position: absolute; /* 新規/更新で最下端位置に影響させない */
margin: -88px auto 0px 110px;
height: 28px !important;
width: 550px !important;
border-radius: 3px;
box-sizing: border-box; }


/* *** */

form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(-n+4) ,
form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(7) {
display: none; }

form[name="fileform"]>table:nth-child(1)>tbody>tr:nth-child(5) {
position: absolute;
top: 5px;
left: 6px; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(7) {
position: absolute;
width: 128px !important;
top: -7px;
left: 166px; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(7) input[name="filename"] {
width: 125px !important;
padding: 1px 0 0;
height: 22px;
border: 0 !important;
opacity: 0.8; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX>table:nth-child(8) {
position: absolute;
top: 5px;
left: 268px;
width: 200px !important; }

form[name="fileform"]>table:nth-child(1) #POPUPBOX img {
display: none; }

form[name="fileform"]>table:nth-child(1) input[value="アップロード"] {
position: absolute;
top: 3px;
left: 440px;
width: 100px !important;
height: 23px !important;
padding: 2px 0px 0 !important; }


/* *** */

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(-n+4) {
display: none !important; }

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(5) {
position: absolute;
top: 5px;
left: 6px; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX>table:nth-child(1) td {
position: absolute;
white-space: nowrap;
width: 130px !important;
overflow: hidden;
top: 3px;
left: 165px; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX>table:nth-child(1) input[name="tagURL"] {
width: 120px !important;
height: 19px !important;
font-size: inherit !important;
padding: 2px 0 0 4px;
margin-left: -42px;
border: 1px solid #aaa !important;
border-radius: 3px; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX>table:nth-child(2) {
position: absolute;
top: 5px;
left: 268px;
width: 200px !important; }

form[name="tagurl"]~tbody:nth-child(3)>tr:nth-child(7) td {
display: none; }

form[name="tagurl"]~tbody:nth-child(3) #POPUPBOX img {
display: none; }

form[name="tagurl"]~tbody:nth-child(3) input[value="アップロード"] {
position: absolute;
top: 3px;
left: 440px;
width: 100px !important;
height: 23px !important;
padding: 2px 0px 0 !important; }


/* *** */

td.drop_invalid #upfile_list {
position: absolute;
bottom: 340px;
right: 15px;
overflow: hidden;
min-height: 126px;
min-width: 6px;
background: #fff;
border: 1px solid #777 !important;
border-radius: 3px;
box-sizing: border-box; }

td.drop_invalid #upfile_list>table:nth-child(1) {
display: none; }

td.drop_invalid #upfile_list>table:nth-child(2) {
display: block;
height: 106px; /* 画像リスト縦幅 */
width: 370px !important;
overflow-x: hidden;
overflow-y: scroll;
margin: 4px 4px 4px -230px;
padding: 0 340px 0 0;
transition: margin 0.5s; }

td.drop_invalid #upfile_list>table:nth-child(2):hover {
margin: 4px 4px 4px 4px;
padding: 0; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(1) {
display: none !important; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3)>font {
font-size: 9px !important; }

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3) a {
font-size: 16px;
display: inline-block;
width: 230px; } /* 画像リスト ファイル名幅 */

td.drop_invalid #upfile_list>table:nth-child(2)>tbody>tr>td:nth-child(3)>table {
padding: 5px 0 0 10px;
margin: 0 0 4px;
background: #f4f4f4; }

td.drop_invalid #upfile_list select {
height: 23px !important;
font-size: inherit !important;
padding: 2px 0 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

td.drop_invalid #upfile_list select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }

td.drop_invalid #upfile_list input[value="削除"] {
height: 23px !important;
padding: 2px 10px 0 !important;
margin-left: -22px; }

td.drop_invalid #upload_notes {
display: none; }


/* *** */

/* トラックバック枠の削除 */
td.drop_invalid:nth-child(2)>form>table:last-of-type {
display: none; }


/* *** */

td.drop_invalid input[value="プレビュー"] {
position: absolute;
left: 250px;
margin: -60px 0 0 !important;
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#eee 100%) !important; }

td.drop_invalid input[value="送信"] {
position: absolute;
left: 370px;
margin: -60px 0 0 !important;
width: 150px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%,#B3E5FC 100%) !important; }


/* *** */

/* カテゴリ設定ウインドウ */

input[name="cgname"] {
width: 150px !important;
height: 19px !important;
padding: 2px 4px 0 !important;
border: 1px solid #aaa !important;
border-radius: 3px; }

input[value="削除"] , input[value="変更"] ,
input[value="カテゴリの追加"] , input[value="閉じる"] {
height: 23px !important;
padding: 2px 10px 0 !important; }

input[value="カテゴリの追加"] {
width: auto !important; }


/* *** */

#template , input[value="カテゴリ設定"] , .mt5 ,
input[value="参照"] ,
input[value="削除"] , input[value="変更"] ,
input[value="カテゴリの追加"] , input[value="閉じる"] ,
input[value="アップロード"] ,
input[value="プレビュー"] , input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%,#ddd 100%); }

input[type="radio"] {
vertical-align: bottom; }

input[type="checkbox"] {
vertical-align: bottom; }

*{ font-family: "メイリオ","Meiryo" !important; }


/* 背景色オプション */
/*
iframe#tmpfilelist~table , iframe#filelist~table ,
td.drop_invalid #entryoption , td.drop_invalid #entrydate ,
td.drop_invalid #entryopen , td.drop_invalid #ping_form {
background-color: red !important; }
*/

/* 編集アイコン背景画像の指定 */

#entry_menu1 , #entry_menu2 , #entry_menu3 , #entry_menu4 ,
#entry_menu5 , #entry_menu6 , #entry_menu7 , #smallPallet ,
#entry_menu11 , #entry_menu12 , #entry_menu13 , #entry_menu14 ,
#entry_menu15 , #entry_menu16 {
background-image: url("http://pds.exblog.jp/pds/1/~~~.png") !important; }





◎背景色を好みの色に変更するには、「 /* 背景色オプション */ 」の項の4行を囲む「 /*」「*/」を消し、「red」を、指定したい色のカラーコード「#nnnnnn」等に置き換えます。

◎オリジナルのアイコン背景画像をアップロードし、そのURLを調べて、最後の「 /* 編集アイコン背景画像の指定 */ 」の項のURL指定部と置き換えれば、オリジナルアイコンを表示できます。




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