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

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

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

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

編集画面をアレンジする(31)/ エキサイトブログ インスタグラム 編集アイコン追加に対応する_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拡張」の基本コードに追記し更新済です。

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

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



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

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

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





by Ataron | 2017-06-01 21:09 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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