Studio TA Subsite の案内とお知らせ

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

リッチリンクのアレンジ:スマホ表示と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)

エキサイトブログ / Exヘッダーのシステム変更に対処

2017年 03月 23日
エキサイトのヘッダー仕様が変更になり、ページの上部(これは個人固有のヘッダー)が下にもぐった表示になってしまいました。 ウチの変更は3月23日の夕方、ちょうど編集画面のスキンを調整中だったので、最初は自分のミスかと思って混乱しました。 告示は以下。


こんなの、予告なしに施行してはいけませんね。 ヘッダー部はページデザインの重要な所ですから、きっと沢山の人がむっとしたでしょう。 有料会員でヘッダーを無しにしている場合は影響がないでしょうが、上が潜らないスキンデザインがあったら教えて欲しいもんです。 エキサイトは「スキンをアレンジしている場合」などと言ってますが、皆んな上が減っていて、ただデザインがおうよそで気付き難いスキンもあるだけでしょう。

私のところのは、

#W_HEADER {
margin-top: 28px; }

を追加、つまりヘッダーのブロック「W_HEADER」の 上マージン を28px 増やしただけで解決しました。 青文字の内容は多くのヘッダーで有効でしょうが、ブロックのID名はスキンにより異なり、また、特殊なヘッダー構造のスキンでは、もう少し細かな調整が要るかもしれません。

b0174191_21221523.png


〔追記〕2017.03.24
iframeの扱いが難しいのか、上記対処をしたのちにチェックすると、何度かリロードすると以前の様になったり、上部が潜り入ったりと、表示が不安定でした。 他の方のページを幾つか調べると、エキサイトヘッダー無し以外のスキンは全く同じ現象で、素人が作ったスキンみたいです。

で、一日経過後に、どうやら以前のシステムに差し戻しがあり、私のスキンは現在は上が開いてしまいました。 今後、iframe化を諦めるのか、再び調整後に施行されるのか様子見です。

エキサイト側で配布した全体のスキンを調整するのは大変なので、再施行されるとしても上部デザインを浸食しないものとなると思われ、私の方も修正を戻しました。





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

リッチリンクのアレンジ:横幅を拡げ 高さを減らす / エキサイトブログ

2017年 03月 15日
エキサイトブログの「リッチリンク」は、現在のネット上で良く見かける「絵入りリンク」機能をブログ文書に採用したものです。 従来のリンクは文書上の文字や絵などをリンクスイッチにしていましたが、これはリンク先から「挿入画像」「記事タイトル」「記事の導入部」等を取り込んだ小型の枠をリンクのスイッチとします。 リンク先の内容を豊富に伝えて、読者が見に行くかどうかの判断をし易いものです。

この利点はニュースのページでは最大限発揮され、もはや無くてはならないものです。「iframe」という機能で他ページをインポーズするので、リッチリンクは普通のリンクよりページの読み込みが遅くなりますが、大量に設置しなければ問題になるほどの事はないでしょう。



この機能は、周囲行との間隔が気になり少しアレンジしましたが、マウスが上に来ると若干上下にスクロールする欠点がありました。 改善点のひとつはこの防止です。

もう一つは高さを抑えた事です。 下図はデフォルトデザインの例ですが、赤枠の部分にリンク先のサイト名が表示されますが、私の場合は自ブログ内リンクが多くて意味がないので、青枠の部分のみ残してスリム化しました。

b0174191_18185015.png

一方、下図の様に他サイトへのリンクは、リンク先サイト名が明示した方が、リンクを押す人には安心できて好ましい場合があります。

b0174191_18185928.png

そんな場合は、赤枠部分も表示する選択を、文書作成時にHtml編集で指定できる様にします。

アレンジはスマホ表示も考慮に入れています。
◎スマホの表示を考慮して、リッチリンクのHtmlコードを文書作成時にHtml編集画面で修正
◎PCの表示は、上記HtmlをブログスキンのCSSで上書き修正する。(これはスマホ表示には無関係)
◎PC表示の2つの型の選択は、Html編集画面でCSSを選択して指定する。
という手法です。

このアレンジを導入した場合、リッチリンクを設置するたびに、「スマホ対応の修正」「PC表示の型の指定」をHtml編集で書き込むという様式になります。 なお、このHtml編集をしなければ、デフォルト型のリッチリンクが表示されます。



 スマホ表示のアレンジ 

これはリッチリンクの「高さ」と、その下部行との隙間を調節する目的です。
下は、リッチリンク(小型)の選択で自動生成されるHtmlコードの一般形です。

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

上のHtmlの赤文字と青文字の部分を下の様にHtml編集で修正します。

<div class="rlink">
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>
</div>

赤文字部分の修正により、スマホ画面での上下行との間隔が適切に修正されます。 また、青文字部分は、ブログスキンのCSSによる修飾を準備するものです。
(なお、スマホ表示は、リンク先サイト名の省略はしない形です)

 PC表示のアレンジ 

ここまでは従来と同じですが、PC表示の修飾するCSSを改善をしました。
以下は、ブログスキンに登録するリッチリンク用の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; }

「iframe」がスクロールしない様に、その高さをスマホ対応の修正の前の「height: 180px;」に戻して指定しています。 その状態の「iframe」をマスクする「.rlink」は、以前より広い幅「 width: 496px;」以前より低い高さ「height: 118px;」を指定して、スリム化しました。 この結果、PC表示は下図の様になります。

b0174191_20044320.png

上下に小幅のスクロールをするのが、これで改善されました。



更に、エキサイト外部へのリンクの場合などでリッチリンクの高さを拡げたい場合、「height: 154px;」を追加修飾するだけで良いので、ブログスキンのCSSに1項目を追加して、文書作成時にHtml編集でその項も指定します。

高さを拡げる場合は、Htmlで全体を囲む <div class="rlink"> の部分を、下の青文字の様に複数クラス指定に変えます。

<div class="rlink rlink_ex">
<iframe
src="~~ ここはリンク先のURLが入ります ~~"
style="border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>
</div>

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

.rlink_ex {
height: 154px !important; }

複数クラス指定をしたリッチリンクは、「height」の指定だけ「.rlink_ex」の方が優先され、118px → 154px と、高さが拡がって表示されるという塩梅です。

〔追補〕
リッチリンクのアレンジの経緯や詳細は、下のリンク先に纏めています。
  リッチリンクのアレンジ / Studio TA Subsite



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

公式スキンの整理について

2016年 12月 07日
公式スキンの整理が行われたのですが、少し気になった事を。

■ユーザー意思を伴わないスキン変更を伴うにしては、予告通知が思った以上に静かなものだった。
■それに対する否定的な反応が、エキサイトブログ向上委員会のコメントには寄せられなかった。

これは、見落としていた人が必ずいるだろうと思わせる成り行きでした。 該当するスキンの登録者に対して、エキサイトとして通告コメントを送信する事は出来ないのかなと思ったものです。 予告通知の表示が控え目で、事前に話が大きくなると反対意見が出て実行しにくくなる(反対を押し切った様に見える)という判断だったのか?

旧い時代のHTML規格やブラウザ条件を抱えた旧い公式スキンの整理は、それらのサポートやメンテを考えると必須と思われます。 これを拒むユーザーには、理解を求めれば良いと思うのですが。 多数の様々なユーザーを相手にするには、色々と大人のやり方が必要なのかも知れません。


今後に、「後から知ったが、なんて事するんだ」的なユーザーがどの程度出て来るのかと思いますが、私は旧スキンのバックアップを、サポート外の条件付きで公開すれば良いのにと思いました。

スキンのバックアップは、スキンアレンジをしないユーザーにとって(そちらが圧倒的に多いのかも)は無縁の作業でしょう。 しかし、ひとつのスキンのデータ容量はたかが知れたものです。 スキンの背景画像や部品画像と、テキストのHTMLとCSSだけですから。 これらをアーカイブして、旧いスキンに拘るユーザーはダウンロードして、マイスキンに出来るようにしてやれば、免責になるでしょう。

家電メーカーなどは、サポート期間の終了した製品の各種のアーカイブを作って、段階的なフェードアウトを工夫していると思います。 要らぬ仕事が増えるだけでしょうか。 でも、そこまでやってくれるエキサイトって大好きと、言われるようになるかも知れません。


b0174191_10473900.png








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

公式スキンの55種が廃止される件 / エキサイトブログ

2016年 11月 13日
2016年12月6日 をもって、エキサイトブログの55種の公式スキンが整理される予定です。

該当する公式スキンを指定しているユーザーは、自動的にシンプルな公式左カラムにスキンが置き換えられます。 詳細は以下をご覧ください。

上記ページに整理対象のスキンが載っています。 数が多くかなりのユーザーが対象になりそうですが、ブログ「設定」画面の一部に大人しく告知がある程度で、こんなのでいいのかなと思ってしまいます。



該当するスキンを使っていて、どうしても今後もページデザインを変えたくない場合は、12月6日までに、以下の私のページの手順で、公式スキンのマイスキン化をされる事をお勧めします。 (既に少しでもアレンジをして使っている場合は、その必要はありません)

これは、公式スキンのコピー(マイスキン)を作り、それをスキンに設定する作業です。 最初に挙げた向上委員会ページの告知では、該当スキンをもとに編集された「マイスキン」は差し替え対象外となっています。 この理由で、マイスキン化したスキンの場合は、従来のスタイルを維持できるわけです。

なお当然、マイスキン化してもサポート対象外となりますが、スキンの不具合を認めた段階で別のスキンに換えれば良いだけです。 その様な不具合が生じる可能性や時期など、現状では推測出来ないのですが、スキン変更で解決しますから慌てる必要はありません。 また若干のCSSの知識があれば、殆どの場合に簡単に修復可能と想像されます。



今回の公式スキンの整理は、ブログシステムの宿命だと思います。 時代とともにHTMLの規定もブラウザも進化更新され、新しいデザインや機能を採りいれないとブログ会社は見捨てられます。

告知の中で、『サポート体制の向上において、ご利用者数やトレンドを鑑みた結果、一部のPCデザインスキンの提供を終了』とあります。

何かシステム上で改善や改編を行う際、大量の公式スキンを配布していると、その更新が与える影響を検証するのは大変です。 告知は、余り利用されていなかったり、流行る傾向がないPCスキンをこの際に省き、今後のチェック(サポート)の労力を減らしたいのだと受け取れます。 また、これは推測ですが、旧い時代のスキンが、新しいコードや機能の導入の足枷になって来る場合もあり得ますね。 ブログもネットの流れの上のものだと自覚が必要です。

私の様にオリジナルに近いスキンを使用している場合は、エキサイトシステムの側で変更があり、それが私のページに影響がある限りで(そうそうは無いのですが)対処する事になります。 これは、私に貴重な経験を与えてくれて、決してマイナスな問題ではありません。 それがおっくうなら公式スキンを使うまでですから。

今までもそうですが、今後にもエキサイトのシステム上の変更を察知したら、このブログ上で報告したいと思います。



[PR]
by Ataron | 2016-11-13 11:39 | ブログスキンのアレンジ | Comments(0)

エキサイトブログ向上委員会が機能している件

2016年 11月 02日
先日、一人のユーザーから、エキサイトブログ向上委員会にコメントがありました。 内容は公式スキンの「Sea」に変えたところユーザーメニューのリンクが機能しないというものでした。

へぇーと思ってその方のブログを見に行くと、ユーザーメニューの文字は表示されているものの、確かに押せません。 現在は改善されたのですが、下の所にマウスを持って行っても手の形にならないのです。

b0174191_13151169.png

最初は機能していたのが、デザイナーが色々推敲している内に、こうなったのだろうと思います。 ユーザーメニューの文字が表示されているのでエラーを見逃し、実際のユーザーの指摘で不具合が見つかったわけです。 公式スキンの新型をどんどん配布するエキサイト、中には見向きもされないのがあるでしょうし、完璧にチェックしていなかったデザイナーを責めるのもと思う一件です。



この部分のコードを見てみると「ユーザーメニュー」と「タイトルと背景画像」が並んでます。 下図は「タイトルと背景画像」のCSSを右ウインドウに表示したところで、ディスプレイ上の前後の重なりを指定するプロパティが「z-index: 1;」です。

b0174191_14063428.png

一方「ユーザーメニュー」は、最初は「z-index」の指定が忘れられていました。 HTMLで後に「タイトルと背景画像」を記述しているので、タイトルの要素が上になり、その透明部分がカバーして押せなくなっていたのです。 この場合、「ユーザーメニュー」に「z-index: 2;」を指定すると問題が解決します(zの値が大きい方が上面になる)が、これはエキサイト側で修復しないと「Sea」を使うユーザーの不具合の解決になりません。



このスキン「Sea」の配布は 2016年07月28日、ユーザーの報告は 2016年10月30日 で、けっこう長い間不具合が放置されていた事になります。 不具合に気付いてもエキサイトに報告する人は案外少ないのかもしれません。 この不具合は、フリー会員ならエキサイトヘッダーの側でまかなえますが、指摘したユーザーは有料会員だったので、仕方なくエキサイトヘッダーを表示させていた様です。

エキサイトブログ向上委員会にトラブルの報告や改善の依頼が幾つも寄せられます。「要望」に関しては、システム上の問題やエキサイトの運営方針が関係するので別件です。 しかし、今回の様なエキサイト側に原因する不具合に関し、向上委員会にコメントしたら効果があるのか気になりました。(ユーザー側の不手際による問題の場合は、どうやら放置されるものもある様です)

結果は今日の午前に、つまり約5日後に公式スキンが書換えられて改善しました。 下図は「ユーザーメニュー」のCSSを右側に表示した所ですが、以前に無かった「z-index: 100;」が追加されました。

b0174191_14070785.png

他に小変更があったかも知れませんが、とにかくユーザーの声が届いてなにより。 コメントした方にコメント欄では返事がない様ですが、本人にエキサイトから返事が行ったかどうかは不明です。

でも「z-index」の値、なにも「100」にしなくてもと笑っちゃいました。 いえ、こういうの「10000」とか「絶対一番表に表示!」という気分で書くプログラマもいるんで、まともはまともなんですけど。



こんな事を書いている間に、エキサイトはどんどん新しいスキンを出してます。 今回のは、私のトップメニューの様な横メニューで、タイルスタイルもそうですが、ブログにとっては新基軸のデザイン採用にやぶさかではない様です。

この、水平メニューからエキサイトのメニューが出る様にしたい所ですが、スクロール表示にでもしない限り縦に長くなり過ぎて苦しいかも。 再アレンジして、私的なリンクを纏めるのにはちょうど良い様に思います。 がんばれエキサイト。



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

ブログスキンのアレンジの第1歩

2016年 10月 30日
エキサイトは公式ブログスキンを豊富に用意していますが、ちょっとアレンジして自分のセンスを反映したいと思う人は多いと思います。 エキサイトはスキンのアレンジに関しては寛容です。 システムは強固ですから、ユーザーが間違って変なスキンコードを書き込んでも、ブログの投稿データ自体は安全です。 また、アレンジに失敗してデザインが崩れても、公式スキンに戻せば元通りになります。

しかし、ブログ公式スキンは「書き換え不可」なので、アレンジの最初で判り難い部分があります。 アレンジを反映するには、マイスキンに一旦登録してから、それをスキンに設定する遠回りが必要なのです。

ここの説明は、もっとも判り易い手順書をめざしました。 初めて自分の使っている公式スキンをアレンジする場合の手順で、そのスキンに関してアレンジが反映された後は必要ありません。



 公式スキンをアレンジ可能にする最初の操作 

●ブログの設定画面で①の「デザインスキン」を押すと、下の「PCデザインスキン」が表示されます。 この画面で➁の「編集」を押します。

b0174191_13392872.png

●下の様に「PCデザインスキン編集」が表示されます。 この画面で➂の「作成する」を押します。

b0174191_13440548.png

●これで、現在使用中のスキンのコピーがマイスキンに作成されます。 画面は下の様に最初に戻りますが、下側の「スキン選択」が「マイスキン」の選択になっている事に注意してください。

「マイスキン」は、これまでに使用したり作成したスキンの保存場所で、自分で削除しなければ履歴が自動的に残ります。 先ほど「作成」したコピーは➄で、「現在使用中のスキン」は未だ最初のままで、その日付④は公式スキンが製作された日付です。

b0174191_13470518.png

●この画面で、「マイスキン」の➄の赤枠内の「適用」を押します。 これが一番肝心な操作で、これをしないとアレンジが反映しません。

b0174191_14081861.png

スキンの変更に「OK」を押すと、下の様に「現在使用中のスキン」の日付⑥が現在に変わります

b0174191_14084877.png

「マイスキン」のコピー➄(書換え可能なスキン)が適応されたわけです。

「スキン名」「スキンイメージ」などは、公式スキンとマイスキンで同じになり変えられません。 現在使用中のスキンがどちらなのかは、実際のコードと日付⑥が見分ける方法になります。(最後の補足を参照ください)



以上がスキンアレンジの第一歩の操作です。 この後はスキンの編集がブログ画面に反映する様になります。
以下に、実際にスキンを編集する例を簡単に説明します。 アレンジ編集の手順を示しただけで、編集内容は一般的で確かな意味はありません。

 実際にブログスキンを編集する 

元のブログスキンでは、タイトルは下の様に少し小さいのでアレンジして大きくします。

b0174191_14552030.png

●先の「PCデザインスキン」で➆の「編集」を押して、「PCデザインスキン編集」に入ります。 このページの最初と異なるのは「編集可能なマイスキン」を扱っている事です。

「PCデザインスキン編集」の下方のコード編集枠に注目します。 この画面を開いた最初は「全体」が選択されていますが、下図はスキンのCSSを編集するために「CSS」を選択して押そうとしている所です。

b0174191_15083033.png

●CSSのコード編集枠が表示されたら、編集枠にカーソルを入れ、スクロールしてコードを見て行きます。 少し下の方を調べると、「header」に関する記述に、タイトルの文字サイズの指定箇所⑧を見つけました。 元は24pxだったのを48pxに書き換え、「更新する」のスイッチ➈を押すと、エキサイトに「編集したマイスキン」が登録されます。

b0174191_15175541.png

これで更新内容がブログの表示に反映します。 下の様にタイトルが倍の大きさにアレンジされました。

b0174191_15195921.png

以上、ブログスキンのCSSを書換えて、表示をアレンジする手順を簡単に説明しました。



アレンジする箇所を調べる方法は、IEではDOM Explorer、Chromeではデベロッパーツールなどを利用します。 これらを利用しながら、一方でCSSやHTMLの書式の意味をネットで調べて少しずつ簡単なアレンジを試して行けば、門は開かれます。

DOMの使い方は、以下の所で説明していますので参考にしてください。





〔補足〕
手間を惜しまない方は、公式スキンの移植コピーをする事で「スキン名」や「スキンイメージ」を好みのものに変える事が出来ます。 これは、公式スキンとマイスキンの混乱を避ける目的です。

●「マイスキンを作成」でスキン作成を開始し、これに公式スキンのコードや基本設定を移植して、その過程で独自の「スキン名」や「スキンイメージ」を設定します。



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

編集画面をアレンジする(17)/ エキサイトブログ Chrome版-画像管理スイッチの注意表示

2016年 10月 19日
Chrome版は「画像管理」画面に飛ぶスイッチがあります。 IEでも設置は可能ですが、他の一般メニューを開いた際に管理メニューが崩れるので、IE版は設置はしていません。 Chrome版はこれが設置できるのが強みですが、このスイッチは「編集画面」を閉じて「画像管理」を開いてしまいます。

画像の差し替えで、不要となった画像の登録削除をしたい事は時々あります。 編集中に「画像管理」を別ウインドウで開き、登録削除をする目的でこのスイッチを設置しています。 しかし、誤って「左クリック」で押すと編集内容を失います。 初回の文書作成時なら「自動保存」の働きで救われる部分がありますが、再編集時では開いてからの作業が飛んでしまいます。 このアレンジした編集画面に慣れれば「左クリック」はしないでしょうが、これでは不親切です。

色々と考えた末、2つの方策を採る事にしました。

① 最初から「画像管理」のスイッチを表示させない選択肢をオプション提示する。
➁ デフォルトは「画像管理」のスイッチを表示し、スイッチのフォバーで注意表示を出す。



①は簡単です。(11)Chrome版-ブラッシュアップ のオプションに以下を追加しました。

画像管理スイッチを消すオプション
#sidemenu .sidemenu1 li:nth-child(4) a {
display: none; }

➁は以下を基本部CSSに追加しました。(2016.10.19 基本部CSSに追記済みです)

#sidemenu .sidemenu1 li:nth-child(4) a:hover {
background: red;
width: 30em; }

#sidemenu .sidemenu1 li:nth-child(4) a:hover::after {
content: " ▶ 右クリックし 新しいウインドウで開いてください"; }

この指定で「画像管理」のスイッチにマウスを乗せると、下の様に注意が表示されます。

b0174191_19151288.png

注意書きの文言は上のCSSを弄って自由に書き換えられます。「▶」は環境依存文字ですから、別の文字が表示される可能性があります。 その場合は、適宜書き換えて下さい。 また、こんなの要らないという場合は、今回の追加項を削除してください。


〔追記〕2017.01.15
編集画面の画像パレットに「×」マークが新設され、「画像管理」スイッチは不要となり廃止しました。


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