Studio TA Subsite の案内とお知らせ

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

ブログトップの「新しいイイネ」「新しいメッセージ」を拡張表示 / エキサイトブログ

2017年 12月 13日

新着表示「イイネ」「コメント」の仕様


ブログトップ画面で、新着の「イイネ」「コメント」があれば「」マークを表示してユーザーに知らせます。

a0349576_14345397.png

このマークは「イイネ」「コメント」の区別なく表示される仕様で、「ブログ管理」を開いて見ないと新着内容が判断出来ません。 これはいささか不便で、ダイレクトにトップ画面上に表示するアレンジスタイルを作ってみました。


アレンジ可能な環境


このアレンジは「ユーザースタイルシート」というブラウザ機能で実現します。 多くのブラウザではこの機能をコントロールする拡張機能(アドオン)を導入すれば、非常に有効確実にアレンジを実現できます。 Edgeの場合は現在は未開拓でこれが困難です。 IE11は可能ですが拡張機能がなく、アレンジスタイルを1個しか登録出来ず、少し不便です。 このページは Chrome / Firefox でのアレンジと、IE11でのアレンジについて掲載しています。



新着表示「イイネ」「コメント」をメニューの外に表示する


新着があれば下図の様に、ユーザーメニューの上部にその内容が表示される様にしました。(ブロクの持主にしか見えません)

a0349576_14405994.png

上図は両方の新着があった場合ですが、「イイネ」はブルー、「コメント」は赤として、一目で区別できる様にしています。 下図は、どちらか一方が新着の場合です。
  ◎新着の「コメント」はクリックして見に行くと新着サインが消えます。
  ◎新着「イイネ」は、押されて一定時間(1日程度?)後に自動的に消えます。

a0349576_14444739.png
a0349576_14450276.png

また、トップページは下方に一定以上スクロールすると、ユーザーメニューが上部に現れるフロートヘッダーに表示されます。 この場合も、メニューを開かなくても下図の様に新着表示が判る様にしています。

a0349576_15253956.png

それぞれの新着表示は、いずれも「ブログ管理」を開いた時と同様に、クリックすると各管理ページを開くスイッチになっています。「ブログ管理」を開くとこれらの表示は一時的に消え、閉じると再び表示されます。



アレンジの実装方法 Chrome / Firefox 


〔手順1〕
Chrome / Firefox でアレンジを実現するには、そのベース環境として各ブラウザ専用の拡張機能「Stylus」を、ブラウザに導入します。 導入は簡単で、また不要になればすぐ削除できます。 拡張機能の入手先はブラウザにより異なります。 導入手順は以下のリンクの必要な方を参照ください。

  Chrome版「Stylus」の入手と設定手順

  Firefox版「Stylus」の入手と設定手順


〔手順2〕
「Stylus」が導入されたら、アレンジ用CSS(スタイルと呼びます)をインストールします。 入手先は以下のリンク先です。「userstyles.org」は、この様なスタイルを各種掲載配布するサイトで、リンクは私が登録したこのスタイルのページです。

  ◎スタイル名は「Excite NoticeMessage(新着表示)」です。
  ◎アレンジ結果を示すメイン画像の右下の Install Style を押します。
  ◎スタイルのインストールは一瞬で完了し、同時に働き始めます。
  ◎紛らわしい「DownLoad」などのボタンを、間違って押さない様に注意!!
  ◎アレンジを停止するには、Stylusの管理画面でこのスタイルを「無効」にします。

  スタイルの入手先


〔手順3〕
Chrome を使用している場合は、Stylus のこのスタイルの編集画面に入り、下図の様に「コード2」の適応先を「次で始まるURL」から「URL」に切り替え、画面の左メニューの「保存」を押して、変更を保存します。

a0349576_17271197.png

「コード2」は Firefox用で、新着表示ボタン上の文字位置を調節します。 Chrome版でこの変更をしないと文字が少し上寄りになります。(実用上の問題はありません)



アレンジの実装方法 IE11 


IE11には、Stylusの様な拡張機能がありません。 IE11でアレンジを実装するには、以下のページを参考にしてください。
上記の説明は「編集画面のアレンジ」を目的に書いていますが、このページの「新着表示のアレンジ」も全く同様です。

  ◎ユーザースタイルシートのファイル名は適当で良く、説明の様に「Excite.css」などでOKです。
  ◎ファイルの内容になる「基本CSS」は以下で、IE11用スタイルにはオプションはありません。

〔 基本CSS 〕


/* ブログトップの新着表示を拡張表示 IE11版 */

/* 閉じたメニューを非表示メニューにする */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) {
display: block !important;
padding: 0 !important;
border: 0 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active)::before,
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active)::after {
content: none !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) > * {
display: none !important; }


/* ヘッダー上のデザイン */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) ul:nth-child(2) {
display: flex !important;
justify-content: center;
position: absolute;
top: -120px;
right: 0;
margin: 0 !important;
width: 350px;
border: none !important; }


/* ヘッダー上のデザイン スクロールダウン時 */
body[data-event-category="page-top"] .is-down .navHeader_navPanel.is-userconf:not(.is-active) ul:nth-child(2) {
display: flex !important;
justify-content: center;
position: absolute;
top: -52px;
right: 180px;
margin: 0 !important;
width: 350px;
border: none !important; }


/* いいね・コメントが無い場合 管理画面トップを表示させない */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) a {
display: none !important; }


/* 新着表示のデザイン */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="likes"] {
display: block !important;
height: 23px;
line-height: 9px;
border-radius: 4px;
margin-right: 8px !important;
text-decoration: none !important;
color: #fff !important;
background: #03A9F4 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="comments"] {
display: block !important;
height: 23px;
line-height: 9px;
border-radius: 4px;
text-decoration: none !important;
color: #fff !important;
background: red !important; }







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


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

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

2017年 12月 09日

トラックバック関係の機能を追加


旧編集画面のアレンジで、従来は排除していた「トラックバック」「おすすめブログテーマ」「みんなの投稿」枠をオプション追加できる様にしました。 エキサイトはトラックバック機能を利用して、これらのテーマ応募型の投稿形式を展開しているので、その利用を可能にしました。

このオプションのセクションを「有効」にすると、編集枠の下に1行のトラックバック枠が表示される様になります。

a0349576_19430005.png

この枠にマウスポインターを乗せると、下方に「トラックバック3行」「おすすめブログテーマ」「みんなの投稿」の枠が表示されます。

a0349576_19431664.png

今回の「ver.6」は、「Firefox拡張」のオプションを追加して Firefox への対応を実現しました。

◎Chromeで使用する場合は、Chromeに「Stylus」を導入して、このページのコードを登録します。
◎Firefox で使用する場合は、Firefoxに「Stylus」を導入して、このページのコードを登録します。
◎Firefox で使用する場合は、その上で「Firefox拡張」の「セクション3」を「有効」にします。 Chromeで使用する際は「無効」にします。

ただし、ChromeとFirefoxではiframeの扱いが異なり、Firefoxでは起動時に画像パレット部にアレンジが適応されない問題が生じます。

◎編集画面を起動直後に、パレットの画像ドロップ部を右クリックして、「このフレーム」→「フレームの再読み込み」を押すとアレンジが適応されます。 この操作が無くても、実用上の問題はありません。



「Stylus」の導入


編集画面のアレンジには拡張機能「Stylus」が必要です。

● Chromeを使用している場合は、以下のページを参考にChrome版「Stylus」を導入します。


● Firefoxを使用している場合は、以下のページを参考にFirefox版「Stylus」を導入します。



新しいスタイルを作成して登録する


導入した「Stylus」で「新しいスタイルを作成」でスタイル編集画面を開き、以下のアレンジ用CSS(Stylusの説明ではスタイルと呼んでいます)をコピーして登録します。

上記のリンクのページにその操作を説明していますが、セクション毎に 「適応先」の ❹ ❺ の枠と、「CSSコード」が対になっています。「セクション3」は適応先が3行なので注意してください。



セクション1


「適応先」

  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/new/
  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/edit/

「CSSコード1」

旧編集画面のアレンジ Chrome / Firefox 版 - ブラシュアップ ver.6

/* 旧編集画面のアレンジ Chrome / Firefox 版 - ブラシュアップ ver.6 2017.12.09 */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

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

#toUserconf,
#csEnquete {
display: none; }


/* *** */
#wrapper {
min-width: 894px; }


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

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: 10px !important;
height: 10px !important;
border-radius: 10px;
text-decoration: none;
background: none; }

#tags_content > .tag > a::before {
content: "\f13a";
font: 16px /15px FontAwesome; }

#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; }

#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 {
text-decoration: none;
width: 21px;
height: 21px;
margin: 0 0 0 4px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff !important; }

#usehtml > br {
display: none; }


/* アイコン FontAwesome */
#entry_menu1::before {
content: "\f032";
font: 16px /23px FontAwesome;
padding: 0px 4px; }

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

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

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

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

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

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

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

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

#smallPallet {
position: relative;
left: 54px;
z-index: 88; }

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

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

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

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

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

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

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

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

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

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

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

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

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


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#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; }


/* *** */

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


/* 編集枠のtableを指定
編集枠の高さ位置 */
#entrymenu + 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; }


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

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

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


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

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

#morehtml span.HELP {
display: none; }


/* More時の文書編集枠以下の高さ調整 */
textarea#morecontent {
width: 100% !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 29px;
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; }


/* *** */

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

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;
line-height: 100px;
z-index: 3; }

#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; }





セクション2


「適応先」

  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/new/
  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/edit/

「CSSコード2」

トラックバック・おすすめブログテーマ・みんなの投稿 オプション


/* トラックバック・おすすめブログテーマ・みんなの投稿 オプション */
td.drop_invalid:nth-child(2) > form > table:last-of-type {
display: block;
position: relative;
padding-top: 11px;
margin: -30px 0 15px 100px;
height: 22px;
width: 100%;
overflow: hidden; }

textarea[name="trackback_url"] {
margin-top: -35px;
padding: 2px 0 2px 15px;
height: 18px !important;
font-size: small;
border: 1px solid #ccc;
border-radius: 3px; }

td.drop_invalid:nth-child(2) > form > table:last-of-type:hover {
height: auto; }

td.drop_invalid:nth-child(2) > form > table:last-of-type:hover textarea[name="trackback_url"] {
margin-top: 0px;
height: 60px !important; }

td.drop_invalid:nth-child(2) table:last-of-type tr:last-of-type td > div {
background: #fff; }

#media_ct {
display: flex; }

#media_ct div {
width: 120px; }

#media_ct span {
text-align: left !important;
padding-left: 10px; }





セクション3


「適応先」

  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/new/
  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/edit/
  「次で始まるURL」=「 http://www.exblog.jp/myblog/entry/drop_upload/

「CSSコード3」

Firefox拡張

/* Firefox拡張( Firefox で使用する場合は このセクションを有効にしてください )*/
#CateStr > select {
width: 170px;
-moz-appearance: none; }


/* 日付設定 */
#entrydate > div:nth-child(2) {
width: 330px; }

#entrydate_setting > select {
border: 1px solid #aaa;
filter: brightness(120%); }


/* 画像パレット */
td.drop_invalid:nth-child(2) + td > div {
position: relative; }

iframe[name="drag_upload"] {
margin-left: 5px; }

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

#preview {
position: relative;
top: -80px; }


/* トラックバック */
td.drop_invalid:nth-child(2) > form > table:last-of-type {
padding-top: 13px;
height: 30px; }

textarea[name="trackback_url"] {
position: relative;
top: -30px;
margin-top: 0; }

td.drop_invalid:nth-child(2) > form > table:last-of-type:hover textarea[name="trackback_url"] {
margin-bottom: -20px; }

td.drop_invalid:nth-child(2) table:last-of-type tr:last-of-type td > div {
position: relative; }

#media_ct {
position: absolute;
left: 105px; }







セクションの「有効」「無効」の選択


セクションの「適応先」の設定を変更して「保存」することで、セクション単位で「有効」「無効」を変更できます。

上記の登録は、すべてのセクションが有効になります。 Chromeで使用する場合、あるいはトラックバック機能が不要な場合には、それぞれ「セクション3」「セクション2」を「無効」にする必要があります。

「無効」にするには、「適応先」の選択形指定を「URL」に変更してスタイルの「保存」を押します。「次で始まるURL」に戻して「保存」すると、再びそのセクションを「有効」にできます。




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


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

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

2017年 12月 06日
旧編集画面はサポート外ながら、現在も使用は可能な状態に置かれています。 その編集画面のアレンジが、果たして意味のある事なのかどうか、誰かの役にたつのかは判らないのですが、出来る範囲でアレンジを進めました。

今回の「Chrome版 - ver.5」は、「編集アイコン」と「タグ選択枠のボタン」を、本来のグラフィックによる表示から、ウェブフォント「FontAwesome」を使った表示に改めたものです。 私のCSS編集の環境が、従来の「Stylist」から「Stylus」に移行しているので、「ver.5」のコードは「Stylus」での動作を確認していますが、「Stylist」では未確認です。



アイコンのデザインは、新管理画面の「More拡張版」と同様になり、よりスマートになりました。

a0349576_01010682.png




編集画面のアレンジには Chrome拡張機能「Stylus」が必要です。 先ず「Stylus」を Chromeに導入し(簡単です)、それにこのページのアレンジ用CSS(Stylusの説明ではスタイルと呼んでいます)を設定します。 その操作は、以下のリンク先を参照ください。





●上記ページの説明で、エキサイト編集画面のURLを記入する 「適応先」の ❹ ❺ の枠に設定するURLは、次の2種を設定します。

次で始まるURL」=「 http://www.exblog.jp/myblog/entry/new/
次で始まるURL」=「 http://www.exblog.jp/myblog/entry/edit/

に登録するCSSコードは以下です。

旧編集画面のアレンジ Chrome版 - ブラシュアップ ver.5

/* 旧編集画面のアレンジ Chrome版 - ブラシュアップ ver.5 2017.12.06 */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
#exHeaderWrapper {
display: none; }

#exFooterWrapper {
display: none; }

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

#toUserconf,
#csEnquete {
display: none; }


/* *** */
#wrapper {
min-width: 894px; }


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

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: 10px !important;
height: 10px !important;
border-radius: 10px;
text-decoration: none;
background: none; }

#tags_content > .tag > a::before {
content: "\f13a";
font: 16px /15px FontAwesome; }

#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 {
text-decoration: none;
width: 21px;
height: 21px;
margin: 0 0 0 4px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff !important; }

#usehtml > br {
display: none; }


/* アイコン FontAwesome */
#entry_menu1::before {
content: "\f032";
font: 16px /23px FontAwesome;
padding: 0px 4px; }

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

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

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

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

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

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

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

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

#smallPallet {
position: relative;
left: 54px;
z-index: 88; }

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

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

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

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

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

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

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

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

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

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

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

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

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


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#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; }


/* *** */

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


/* 編集枠のtableを指定
編集枠の高さ位置 */
#entrymenu + 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; }


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

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

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


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

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

#morehtml span.HELP {
display: none; }


/* More時の文書編集枠以下の高さ調整 */
textarea#morecontent {
width: 100% !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 29px;
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; }


/* *** */

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

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; }




●「 /* 背景色指定 */ 」のカラーコード「#98d1dc」を変更すれば、編集画面の配色を好みにアレンジ可能です。




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



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

エキサイト編集画面のアレンジ(74) IE11版 - More拡張 ver.5.2

2017年 11月 30日

IE11版を ver.5.2 に更新しました


「おすすめブログテーマ」のセレクタ変更と、「トラックバック枠」のデザイン変更をして、IE11版を「ver.5 → ver.5.2」に更新しました。 更新の詳細は(73)「おすすめブログテーマ」の割込み対策 を参照ください。


IE11で編集画面をアレンジするには


このアレンジはIE11のユーザースタイルシートの機能を利用します。 その操作方法は、以下のリンク先を参照ください。




IE11版 ver. 5.2 CSSコード


IE11版 - More拡張 ver.5.2 テンプレート・フリーページ編集対応  基本CSS

/* IE11版 - More拡張 ver.5.2 テンプレート・フリーページ編集対応 2017.11.30 */

body.win input {
box-shadow: none !important; }

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

#wrapper {
min-width: 960px !important; /* 全体幅指定 */
max-width: 1500px !important;
min-height: 0 !important;
margin-bottom: 5px !important;
background: none !important; }

.ad728 {
display: none !important; }


/* 編集画面ベース */
.page_entry #entry > #form {
width: calc(100% - 30px) !important;
position: absolute !important;
top: 0;
left: 0;
padding: 0 15px !important;
background: #fbfbfb; }


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

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 20px !important;
height: 28px !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 18px !important;
margin-left: -4px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#effaff 0%,#bce8f1 80%) !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 420px !important;
padding: 15px 15px !important; }


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


/* 本文タイトル */
.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important; }

.page_entry #entryEditHead-new th {
display: none !important; }

.page_entry #entryEditTitle {
position: absolute !important;
top: 15px !important;
width: 300px !important;
z-index: 1 !important;
transition: 0.5s !important; }

.page_entry #entryEditTitle:hover {
width: 928px !important; }

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 928px !important;
background: #fff !important; }

.page_entry #entryEditTitle input {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }

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


/* おすすめブログテーマ */
.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
top: 714px;
left: 850px;
margin: 0 !important;
padding: 2px 0 2px 8px !important;
height: 36px !important;
width: 69px !important;
background: #fff;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden !important;
transition: 0.5s;
z-index: 2; }

.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3):hover {
top: 670px;
left: 700px;
height: 74px !important;
width: 207px !important;
padding: 5px 10px !important; }


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

.page_entry #entryEditCategory select {
position: absolute !important;
width: 140px !important;
font-size:13px !important;
height: 28px !important;
padding: 4px 5px 0 !important;
text-shadow: none !important; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryEditCategory select:hover {
width: 180px !important;
z-index: 1; }

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

.page_entry #entryBlogCategoryDialog.btn input {
width: 28px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
text-indent: -61px !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }


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

.page_entry .entryElement {
display: flex; }

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

.page_entry #entryEditTags span.tags input {
width: 130px !important;
font-size: 13px !important;
height: 28px !important;
line-height: 28px !important; }


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

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

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

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

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

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

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


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

.page_entry #entryEditInner {
margin: 0 !important; } /* 最下部まで背景を延長可能 */

.page_entry #entryEditContents {
margin: 56px 180px 0 0 !important; /* 画像パレット右余裕 */
overflow: visible !important;
padding: 0 !important; }

#entryEditContents .entryPreview.btn-s {
position: relative !important;
height: 32px !important;
opacity: 0; } /* 読込み遅延対策 */

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

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

#editorSwither .current {
line-height: 25px !important;
margin: 0 4px 0 0 !important; }

#editorSwither li {
margin: 2px 4px 0 0 !important; }

#editorSwither a {
padding: 2px 0 0 !important; }

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

#new_icon {
display: none !important; }


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

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

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

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

#_entryContent .IMAGE_LEFT , #_moreEntryContent img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

#_entryContent img.IMAGE_RIGHT , #_moreEntryContent img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

#_entryContent img.IMAGE_MID , #_moreEntryContent 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 !important;
height: 28px !important;
width: 74px !important;
margin: 15px 0 0 !important; }

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

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

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

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

input#moreEntrySubject {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 3px 10px 0 !important;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0 !important; }


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

.page_entry #entryOptions:hover {
width: 820px !important;
z-index: 3; }

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

.page_entry #entryOptions .optionGroup {
line-height: 26px !important; }

.page_entry #entryOptions .optionGroup label {
font-size: 13px !important;
margin: 0 0 7px !important;
padding: 0 5px !important;
height: 28px !important;
line-height: 28px !important; }

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

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


/* トラックバック枠 */
.page_entry #entryTrackback {
position: absolute;
left: 850px;
bottom: 0;
width: 79px !important; }

.page_entry #entryTrackback:hover {
z-index: 4; }

.page_entry #entryTrackback header.boxHead.head-h3 {
display: block;
position: relative;
top: 113px;
left: -378px;
width: 439px;
background: #eceff1;
height: 28px;
opacity: 0;
transition: opacity 1s;
z-index: -1; }

.page_entry #entryTrackback:hover header.boxHead.head-h3 {
opacity: 1;
z-index: 5; }

.page_entry #entryTrackbackTextarea {
position: relative;
width: 79px !important;
min-height: 20px !important;
height: 28px !important;
padding: 5px 0 0 7px !important;
background: #fbfbfb !important;
box-shadow: none !important;
border: 1px solid #ccc;
border-radius: 3px;
font-size: medium !important;
overflow: hidden !important;
transition: 0.5s;
z-index: 1; }

.page_entry #entryTrackbackTextarea:hover {
width: 459px !important;
margin: 0 0 0 -380px !important;
padding: 5px 0 0 20px !important;
overflow-y: scroll !important;
z-index: 2; }

.page_entry #entryTrackbackTextarea:focus {
height: 100px !important;
width: 459px !important;
margin: 0 0 0 -380px !important;
padding: 5px 0 0 20px !important;
overflow-y: scroll !important;
z-index: 2; }

.page_entry .notesBoxHead {
position: absolute;
bottom: 44px;
left: -849px;
line-height: 28px !important;
padding: 5px 20px 0 150px !important;
width: calc(100vw - 211px) !important;
min-width: 749px !important;
background: rgba(58, 135, 173, 0.2) !important; }

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

.page_entry .notesInner {
position: absolute;
bottom: 48px;
left: -450px;
padding: 0 !important;
font-weight: bold !important; }


/* 画像パレット */
.page_entry #entryEditIframe {
position: absolute !important;
top: 56px;
right: 16px;
width: 165px !important; /* 画像パレット右余裕 */
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


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

.partsWrap#wrapper {
min-width: 0 !important; } /* 再設定 サムネイル整列に必須 */

#partsImage {
position: static !important; } /* 背景指定に必要 */

#partsImage #droppable {
font-size: 13px !important;
margin: 5px 5px 10px !important;
color: #fff !important;
background: #4096ee !important;
box-shadow: none !important; }

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

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

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

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

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

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

#partsImage #search .optionGroup select {
position: absolute !important;
left: 5px;
padding: 0 15px !important;
height: 28px !important; }

#partsImage .optionGroup select::-ms-expand {
border: none !important;
background: none !important; }

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

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

#partsImageContainer input {
position: relative !important;
left: 53px !important;
line-height: 16px !important; }

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

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

#partsImage .pager {
margin: 0 !important; }

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

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

#partsImage .alert {
margin: 0 !important; }


/* 投稿日時 */
.page_entry #entryOptionsPstdate {
position: absolute;
bottom: 41px;
left: 245px;
width: 536px !important;
margin: 0 !important;
padding: 0 10px 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
border: none !important;
background: #fbfbfb !important;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPstdate:hover {
width: 682px !important;
z-index: 2 !important; }

.page_entry #entryOptionsPstdate span {
line-height: 32px !important;
margin-right: -20px !important; }

.page_entry #entryOptionsPstdate label {
height: 28px !important;
line-height: 28px !important; }

.page_entry #entryPstdateElement select {
font-size: 13px !important;
height: 28px !important;
padding: 3px 5px 0 !important;
min-width: 20px !important;
width: 70px !important; }

.page_entry #entryPstdateElement select::-ms-expand {
border: none !important;
background: none !important; }

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

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


/* 公開設定 */
.page_entry #entryOptionsPpenflag {
position: absolute;
bottom: 41px;
left: 480px;
width: 210px !important;
margin: 0 !important;
padding: 0 0 0 20px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
border-right: 95px solid transparent;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPpenflag:hover {
width: 446px !important;
border-right: 0px solid transparent;
z-index: 2 !important; }

.page_entry #entryOptionsPpenflag span {
line-height: 32px !important;
margin-right: -20px !important; }

.page_entry #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }


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

.page_entry #entrySubmitBtm .btn {
height: 30px !important; }

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

.page_entry .btn:hover {
background: #eee !important; }

.page_entry #entrySubmitBtm input {
line-height: 31px !important;
height: 28px !important; }

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

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

.page_entry .btn-blue:hover {
background: #1b83ed !important; }


#menu {
overflow: hidden !important;
height: 651px !important; } /* お知らせリストの高さ位置固定 */

#sidemenu .sidemenu1 {
height: 520px;
overflow-y: scroll !important; } /* サイドメニューの高さを減らす */

#sidemenu li a {
white-space: nowrap !important; }

#loginUser {
height: 0; }

#myblogBtn a::before {
content: none !important; }

#menu #sideBanner {
display: none !important; }

#menu #sideRakutenMW {
display: none !important; }

#exFooterWrapper {
display: none !important; }


/* アイコン・ボタンの輪郭線と背景色 */
#_panel .panelBtn { /* 編集アイコンの枠デザイン */
font-size: 16px !important; /* 枠内文字表示高さ基準 */
line-height: 16px !important; /* 枠内文字表示高さ基準 */
width: 21px !important;
height: 21px !important;
border: 1px solid #ccc; /* 編集アイコンの枠線色 */
border-radius: 3px;
background: #fff !important; /* アイコン デフォルト背景色 */
z-index: 1 !important; }


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

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

#exbtn_italic {
top: auto !important;
bottom: 5px !important;
left: 301px !important; }

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

#exbtn_underline {
top: auto !important;
bottom: 5px !important;
left: 249px !important; }

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

#exbtn_strikethrough {
top: auto !important;
bottom: 5px !important;
left: 275px !important; }

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

#exbtn_link {
top: auto !important;
bottom: 5px !important;
left: 523px !important; }

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

#exbtn_size1 {
top: auto !important;
bottom: 5px !important;
left: 327px !important; }

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

#exbtn_size2 {
top: auto !important;
bottom: 32px !important;
left: 327px !important; }

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

#exbtn_size3 {
top: auto !important;
bottom: 5px !important;
left: 353px !important; }

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

#exbtn_size4 {
top: auto !important;
bottom: 32px !important;
left: 353px !important; }

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

#exbtn_fontcolor {
top: auto !important;
bottom: 5px !important;
left: 379px !important; }

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

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

/*
#exbtn_blockquote {
top: auto !important;
bottom: 32px !important;
left: 457px !important; }

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

#exbtn_left {
top: auto !important;
bottom: 32px !important;
left: 392px !important; }

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

#exbtn_center {
top: auto !important;
bottom: 5px !important;
left: 405px !important; }

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

#exbtn_right {
top: auto !important;
bottom: 32px !important;
left: 418px !important; }

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

/*
#exbtn_ol {
top: auto !important;
bottom: 32px !important;
left: 249px !important; }

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

/*
#exbtn_ul {
top: auto !important;
bottom: 32px !important;
left: 223px !important; }

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

#exbtn_indent {
top: auto !important;
bottom: 32px !important;
left: 275px !important; }

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

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

#exbtn_outdent {
top: auto !important;
bottom: 32px !important;
left: 301px !important; }

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

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

#exbtn_hr {
top: auto !important;
bottom: 32px !important;
left: 483px !important; }

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

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

#exbtn_emoji {
top: auto !important;
bottom: 5px !important;
left: 601px !important; }

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

#exbtn_youtube {
top: auto !important;
bottom: 5px !important;
left: 575px !important; }

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

#exbtn_instagram {
top: auto !important;
bottom: 5px !important;
left: 549px !important; }

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

#exbtn_map {
top: auto !important;
bottom: 5px !important;
left: 627px !important; }

#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: -22px;
left: 1px;
white-space: nowrap; }

#exbtn_genre {
top: auto !important;
bottom: 5px !important;
left: 653px !important; }

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

#exbtn_amazon {
top: auto !important;
bottom: 5px !important;
left: 679px !important; }

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

#exbtn_removeformat {
top: auto !important;
bottom: 5px !important;
left: 438px !important; }

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

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

#exbtn_undo {
top: auto !important;
bottom: 5px !important;
left: 464px !important; }

#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: -16px;
left: 3px; }

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

#exbtn_redo {
top: auto !important;
bottom: 5px !important;
left: 490px !important; }

#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: -16px;
left: 10px; }

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

#exbtn_autoeol {
top: auto !important;
bottom: 5px !important;
left: 190px !important; }

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

#exbtn_autoeol.panelBtn {
background: #ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

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


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


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

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

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


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

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

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


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

.page_entry #announceList ul li {
margin: 10px 30px !important; }

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

.page_entry #announceList:hover {
margin: 0 0 0 15px !important;
padding: 30px 0 10px !important;
max-width: none;
width: calc(100% - 212px) !important;
max-height: 300px;
transition: max-height 1s;
z-index: 4; }



/* *********************************** */

/* テンプレート編集画面 */
#contents.page_entryTemplate {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entryTemplate .head-h1 {
display: none !important; }

.page_entryTemplate #editTemplateList {
padding: 0 !important; }

.page_entryTemplate #editTemplateList select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate select {
height: 28px !important;
line-height: 28px !important;
padding: 0 15px !important; }

.page_entryTemplate input {
line-height: 28px !important;
height: 28px !important; }

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 4px 0 0 20px !important; }


.page_entryTemplate #entryEditHead-new {
width: calc( 100% - 190px);
margin-bottom: 0 !important; }

.page_entryTemplate #entryEditTmpTitle .alert {
position: absolute;
left: 600px;
padding: 3px 15px !important; }


.page_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate .btn {
height: 28px !important; }


.page_entryTemplate #entryEditWrap {
overflow: visible !important;
height: 660px !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditInner {
margin-bottom: 0 !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditContents {
margin-right: 180px !important;
overflow: visible !important; } /* 2行アイコン表示に必要 */


.page_entryTemplate #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


.page_entryTemplate #entryTrackback {
position: absolute;
bottom: 0;
margin: 0 0 0 110px !important;
width: calc(100% - 110px) !important; }

.page_entryTemplate #entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px !important;
background: none !important;
border-bottom: none !important; }

.page_entryTemplate #entryTrackbackTextarea {
position: relative;
width: calc(100% - 420px) !important;
margin: 0 0 0 420px !important;
min-height: 20px !important;
height: 28px !important;
padding: 5px 0 0 20px !important;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important;
box-shadow: none !important;
font-size: medium !important;
overflow-y: auto !important;
transition: 0.5s; }

.page_entryTemplate #entryTrackbackTextarea:hover {
width: 100% !important;
margin: 0 !important;
padding: 5px 0 0 150px !important;
z-index: 2; }

.page_entryTemplate #entryTrackbackTextarea:focus {
height: 80px !important;
width: 100% !important;
margin: 0 !important;
padding: 5px 0 0 150px !important;
z-index: 2; }


.page_entryTemplate #entrySubmitBtm {
padding: 0 !important;
margin: 0 !important; }


/* フリーページ編集画面 */
#contents.page_entry_fp {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entry_fp .head-h1 {
display: none !important; }

.page_entry_fp #template {
height: 28px !important;
padding: 2px 10px 0 !important; }

.page_entry_fp #template::-ms-expand {
border: none !important;
background: none !important; }

.page_entry_fp input {
line-height: 28px !important;
height: 28px !important; }

.page_entry_fp #entryEditCategory input {
font-weight: bold !important; }


.page_entry_fp #entryEditWrap {
display: table; /* 高さを拡げる */
width: 100%;
margin: 0 !important; /* サブミットの位置を決定 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditInner {
margin: 0 -180px 0 0 !important; } /* 画像パレット右余裕 最下部まで背景を延長 */


.page_entry_fp #entryEditContents {
margin-right: 180px !important; /* 画像パレット右余裕 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


.page_entry_fp #entryOptionsPpenflag {
position: absolute;
bottom: 13px;
left: 20px; }

.page_entry_fp #entryOptionsPpenflag span {
line-height: 32px !important; }

.page_entry_fp #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }

.page_entry_fp #entrySubmitBtm {
margin: 15px 0 0 230px !important;
padding: 0 !important; }

.page_entry_fp #entrySubmitBtm .btn {
height: 30px !important; }

.page_entry_fp #announceList {
display: none; }



/* ********************************* */

/* 背景色デザイン */
.page_entry_fp#contents ,
.page_entry_fp #entryEditHead-new table ,
.page_entry_fp #entryEditHead-new th {
background: #a4c1ce !important; } /* フリーページ編集画面 背景色 */


.page_entryTemplate#contents ,
.page_entryTemplate #editTemplateList ,
.page_entryTemplate #entryEditHead-new table ,
.page_entryTemplate #entryEditHead-new th ,
.page_entryTemplate #entryMoreArea {
box-shadow: none !important;
background: #a4c1ce !important; } /* テンプレート編集画面 背景色 */

body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */

body.win .dialogInner {
background: #fbfbfb !important; } /* ダイアログ 背景色 */



/* オプションコードは、ここより後方にペーストしてください */


/* ******************* オプション ***************** */


/* 2行編集アイコン ワイド 表示オプション */

/*
#_panel:hover {
height: 75px !important;
margin-top: -75px !important;
transition-delay: 0.2s; }
*/


/* おすすめブログテーマ 非表示オプション */
/*
.page_entry entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none !important; }
*/


/* お知らせリスト 非表示オプション */
/*
#entry #announceList {
display: none !important; }
*/


/* キャンペーン枠 非表示オプション */
/*
.page_entry .campaign-container {
display: none !important; }
*/


/* みんなの投稿 非表示オプション */
/*
.page_entry #blog2media {
display: none !important; }
*/






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



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

エキサイト編集画面のアレンジ(73) 「おすすめブログテーマ」の割込み対策

2017年 11月 30日

おすすめブログテーマの配置異常


月末に「おすすめブログテーマ」が「スカパー」に差替えられましたが、編集画面の上部に割込んでしまいました。 このパーツ(下図の緑枠内)が割込むのは去年10月末以来です。

a0349576_14331808.png

下はデフォルトの「おすすめブログテーマ」で、タイトル入力枠の隣です。

a0349576_14285089.png

去年もこれが生じたのですが、何か理由がありそうですが、この要素のIDの「trb_themeTtl」が生じたり消えたりします。 私の最近のアレンジコードでは、IDを持っている事を前提にしていましたが、今回、再びIDが無くなり、アレンジによる配置指定が効かなくなりました。

今後の事を考慮して、IDが無い場合も有る場合にも対応する指定に改めました。 セレクタは、この要素をtable内の要素のある場所を指定する形で、下の様に少し長くなりました。 なお、プロパティは全く変える必要がありませんでした。

#entryEditHead-new tr:nth-child(1) td:nth-child(3)

対策で、「おすすめブログテーマ」は、下の様に本来のデザインになります。

a0349576_14405117.png

以上の対策して、Chrome版 Firefox版 のMore拡張各バージョンを「ver.6 → ver.6.2」に更新しました。


Chrome / Firefox で編集画面をアレンジするには


編集画面のアレンジは、各ブラウザに対応する拡張機能「Stylus」が導入されている事が前提です。 以下のページに「Stylus」の導入手順とスタイルのインストール手順を説明していますので、参照ください。

 「編集画面のアレンジ」を「userstyles.org」からインストールする

既に「Stylus」を導入している場合は、更新スタイルは以下の各リンク先から入手できます。

 Chrome版 「userstyles.org」 Excir Blog Writer (Chrome) のページ
 Firefox版  「userstyles.org」 Excir Blog Writer (Firefox) のページ



対策後の関連するCSSコード


以下は Chrome / Firefox版のコードで、IE版はセレクタに若干の調整や !important 追加をしています。


/* おすすめブログテーマ */
#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
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; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover {
top: 670px;
left: 700px;
height: 74px;
width: 207px;
padding: 5px 10px; }




トラックバック枠のデザイン変更


トラックバック枠のデザインを再度修正しました。 前コードは、IE版で画像パレットの後方になる問題があり、手を加えています。 この変更は各ver6.2に追加しています。


/* トラックバック枠 */
#entryTrackback {
position: absolute;
left: 850px;
bottom: 0;
width: 79px; }

#entryTrackback:hover {
z-index: 4; }

header.boxHead.head-h3 {
display: block;
position: relative;
top: 113px;
left: -378px;
width: 439px;
background: #eceff1;
height: 28px;
opacity: 0;
transition: opacity 1s;
z-index: -1; }

#entryTrackback:hover header.boxHead.head-h3 {
opacity: 1;
z-index: 5; }

#entryTrackbackTextarea {
position: relative;
width: 79px;
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: hidden;
transition: 0.2s; }

#entryTrackbackTextarea:hover {
width: 459px;
margin: 0 0 0 -380px;
padding: 5px 0 0 20px;
overflow-y: scroll;
transition: 0.5s;
z-index: 4; }

#entryTrackbackTextarea:focus {
height: 100px;
width: 459px;
margin: 0 0 0 -380px;
padding: 5px 0 0 20px;
overflow-y: scroll;
z-index: 4; }

.notesBoxHead {
position: absolute;
bottom: 44px;
left: -849px;
line-height: 28px;
padding: 5px 20px 0 150px;
width: calc(100vw - 211px);
min-width: 749px;
background: rgba(58, 135, 173, 0.2); }

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

.notesInner {
position: absolute;
bottom: 48px;
left: -450px;
padding: 0;
font-weight: bold; }





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


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

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

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)

エキサイト編集画面のアレンジ(72) トラックバック枠の改良

2017年 11月 22日
エキサイトユーザーで実際にトラックバック機能を利用している方が、どれくらいおられるのか判りません。 この機能は、ブログシステムが一般化した時から有った様です。 下はエキサイトの通常の編集画面のトラックバック枠ですね。

a0349576_10164323.png

一時期はこの機能が無くなるかもと思っていましたが、エキサイトは新しい利用方法で成果を出している様です。 それは、ユーザーにテーマ枠を提唱して、それに対する投稿を募るという投稿スタイルです。「おすすめブログテーマ」「このテーマで記事を書く」などのコースを選んで記事を投稿すると、自動的にエキサイトが用意したテーマページにトラックバックが設定され、テーマページの側にリンクが表示されるというものです。 単純に記事を書くのでなく、同じ趣向/テーマ記事のリンク集積ページにリンクを置くことで、ユーザー間の交流やアピールに役立つという様なものでしょう。



私は一時期このトラックバック機能をアレンジ対象から外す傾向にあったのですが、最近はこういう利用に意義を感じて、常に配置する様にしています。

アレンジしたトラックバック枠は、編集枠の隅の小さな窓になっています。

a0349576_10455600.png

これにマウスを乗せ更にクリックすると大きく拡大して固定し、記入し易くなる形です。

a0349576_10462210.png

実際はこんな幅は不要と思われ、また、トラックバックは3件までの記載の表示がない事も気になっていました。 拡張時の高さを増やし、幅は必要最低限に抑え(幅を越えても実際は記入出来ます)、3件の制限表示を入れました。 この表示は、擬似要素の機能でこちらで用意した文言です。

a0349576_10550848.png

未だ実装していませんが、他のアレンジアイデアが溜まった所で、アレンジに加えたいと思っています。

トラックバック枠の改善CSS

#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.3s; } /* 変更 */

#entryTrackback::before {
content: "トラックバックURLは改行で区切り3件まで設定可能です";
position: relative;
top: 96px;
left: 365px;
z-index: 5;
background: #eee;
padding: 2px 50px 0px; }

#entryTrackbackTextarea:hover {
width: 459px;
margin: 0 0 0 360px;
padding: 5px 0 0 20px;
z-index: 4;
transition: 0.5s; }

#entryTrackbackTextarea:focus {
height: 100px;
width: 459px;
margin: 0 0 0 360px;
padding: 5px 0 0 20px;
z-index: 4; }





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



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

英語かぶれなのか

2017年 11月 22日
ユーザースタイルシートというブラウザの機能を使って、ブログ編集画面のアレンジを手がける様になってずいぶん経ちます。 これは、ブラウザ表示にユーザー側で勝手にアレンジを施せる、使ってみると大変有効な機能です。

そのベースになるのがブラウザ拡張機能とかアドオンと呼ばれる「補完的プログラム」で、私は最近は「Stylus」という拡張機能を使っています。 この拡張機能をブラウザに導入して、その上で自分でCSSを紡いでいわゆる「スキン」を作るのです。 これはアプリケーションデザイン的な面白さがある作業です。


さて、ブログ編集画面のアレンジが一段落して手が余って来ると、何かアレンジしたくて仕方なくなります。 そこで、手短なアレンジ対象に、アレンジのために有る拡張機能自身のアレンジという、妙な事を初めてしまうのです。 まあ、猟師が鉄砲を磨く様なものでしょうか。

「Stylus」の日本語版の主画面は、こんな画面です。 拡張機能はブラウザをまるでアプリケーションの様にみせています。

b0174191_00523682.png

左上のタイトルは英語版の直訳で、文字が大き過ぎて折り返して、これは手抜きの移植です。 しかし、どうも「漢字」というのはソフトウエアに似合わない気が昔からします。 私の英語かぶれかも知れませんが、アルファベットは並びが幾何学的に揃って見え、スイッチデザインにマッチする様に感じるのです。

上の画面をアレンジしたのですが、ついでに英語版に演繹しました。「Stylus」の作られた言語圏のユーザーに、私のアイデアを宣伝して見ようと思ったからです。

b0174191_01093442.png

最初は、どうしたら「Stylus」の英語版が入手できるか判らずウロウロしました。 しかし、その必要が無かったのです。 Chromeでは設定画面で言語を英語に切り替えると、この拡張機能も自動的に英語表記(つまり英語版)に変わりました。 今や私達は、世界中で殆ど同じブラウザを使っているのですね。

上図は、その英語圏化したChrome上で「Stylus」にアレンジを施したもので、ボタンデザインは私の装飾ですが、左側のメニューが英語表記に変わってます。

英語版はバー型のボタンが日本語版に比べて短く納まります。 それが造られた本家はスマートで、日本語版は無理やリ漢字をあてがった感があります。 デザインが何か変だと思っていたのが、本家を見るとやけにカッコ良かったりするのですね。


下はStylusのコード編集画面です。 これも英語版でアレンジ後のものです。

b0174191_01234368.png

考えると日本語は変わった言語です。 漢字・ひらがな・カタカナ・英数字・ついでに記号なぞ、なんやかやと混ぜて平気という、世界的に見ても変わった混合方式ではないでしょうか。 そのごった煮文化の脳は、反対に形式化・単純化されたものに憧れるのでしょうか?


[PR]
by Ataron | 2017-11-22 01:34 | 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)

エキサイト編集画面のアレンジ(71) Firefox版 - More拡張 ver.6

2017年 11月 03日
 Firefox版 - More拡張 ver.6 の更新内容 

ver.6 は、本格的な暗背景のデザインオプションを追加しました。 また、今回よりスタイルを構成するセクションの「有効」「無効」でオプション選択する方式にしています。

編集画面のデザインは、Chrome版とほぼ同じですので、下のページを参照ください。

  (69)Chrome版 - More拡張 ver.6



 Firefox版 - More拡張 ver.6 のアレンジを実現するには 

エキサイトブログ編集画面のアレンジ「Firefox版 - More拡張 ver.6」は、「Excite Blog Writer(Firefox)」というスタイル名で「userstyles.org」で配布しています。

これは、Firefox 拡張機能「Stylus」をベースに機能するユーザースタイルシートです。 アレンジした編集環境を実現するには、まず「Stylus」をFirefoxに導入し、次に「Excite Blog Writer(Firefox)」をインストールしてください。


 拡張機能「Stylus」を Firefoxに導入する 

Firefoxで以下のリンクをクリックし、「Firefoxアドオン管理サイト」のStylusのページを開きます。

下図のページが表示されたら、ページ上の「+ Firefoxへ追加」 →「追加」と押します。 この操作で「Stylus」が セットされ、ツールバーの右端に「Stylusアイコン」 が出来ます。

a0349576_09192182.png

「Stylusアイコン」を左クリックして、メニューの「管理」を押します。 これが「Stylus」へのアクセス方法です。

a0349576_17360748.png

下の様な「管理画面」が表示され、「Stylus」の操作はここを中心に行います。 下図は初期状態で右側が空白ですが、スタイルを登録すると、登録スタイルのリストが表示されます。

a0349576_00212899.png


 Excite Blog Writer(Firefox)のインストール 

次に「userstyles.org」から「Excite Blog Writer(Firefox)」のスタイルをインストールします。 このスタイルの中身は「Firefox版-More拡張」です。 このサイトに登録する際に、判り易いパッケージ名に改めただけです。 このサイトにアップロードされているのは、「Excite Blog Writer / Firefox版-More拡張」の最新版(最終の更新版)です。

Firefoxで、以下の「Excite Blog Writer (Firefox)」のページを開いてください。


下の様なページが表示されたら、スタイル適応時のサンプル画像の「右下」の「install Style」を押します。

〔注意1〕
使用しているブラウザに「Stylus」の拡張機能が有効になっていない場合、「install with Stylish」のボタンが代わりに表示されます。 私は、旧い拡張機能「Stylish」を勧めません。「Stylus」の導入を再確認して、「Excite Blog Writer (Firefox)」のみをインストールしてください。

〔注意2〕
この様なダウンロードサイトでは、目的アプリの「ダウンロードスイッチ」に見える、全く無関係なアプリの「ダウンロードスイッチ」を、よく見かけます。

サイト運営者には「宣伝枠」は必要悪です。 下の私の投稿した以下のページも、下方の「DownLoad」スイッチは「無関係な宣伝」です。 表示されている「FunCustomCreations」は有料アプリで、評判が悪いものです。 ここの「宣伝枠」は差替えで「Adobe」等のまともな会社の宣伝も出ますが、安易に押さない様に注意してください。

a0349576_23485978.png

下の様に「インストールの是非」の確認があります。 ここで「OK」を押すと、一瞬でスタイルのインストールが完了します。

a0349576_00024456.png



 Excite Blog Writer(Firefox)の扱いについて 

「Stylus」の管理画面を開いてください。 下図の様に「Excite Blog Writer(Firefox)」のスタイルがインストールされ、右枠のリストに追加されているはずです。 これで編集画面のアレンジ環境が整いました。

a0349576_00233357.png

エキサイト編集画面にログインしてください。 初回だけブラウザキャッシュの関係で、編集画面の起動に時間がかかる様ですが、それ以降は起動に時間差を感じません。 ユーザースタイルシートは本質的にフィルターですから、その差が判るほどの遅延は生じないはずです。


 Stylus管理画面 の リスト操作 

「Stylus」の管理画面の右枠は登録スタイルのリストです。「userstyles.org」からインストールしたスタイルは、インストール元とリンクがセットされていて、スタイルの更新版へのアップデートを簡単に出来る様になっています。

a0349576_00414770.png

このスタイル全体の「有効/無効化」を切り替えるチェックボタンです。 セクション単位での切り替えは、このボタンではできません。
「スタイル名」をクリックすると、このスタイルを編集する編集画面が開きます。
このスタイルをインストールした「userstyles.org」のページを開きます。
「×」で、このスタイルを「Stylus」の登録から削除します。
「userstyles.org」をチェックするボタンです。
▪一度ボタンを押すと、このスタイルが更新されていたらボタンが赤色に変化します。
▪現在のスタイルが上書き更新されて良いなら、もう一度ボタンを押します。(自分で再アレンジしている場合は、その内容を失うので注意してください)
▪ボタンが「」の形になり再度注意喚起されます。 インストールして良いならボタンを押します。
▪インストールが終了するとボタンが「」に変わり、スタイルのアップデートが完了します。


 Excite Blog Writer(Firefox)の セクション 

この記事の時点で「Excite Blog Writer(Firefox)」をインストールすると、その中身は「Firefox版 - More拡張 ver.6 」になります。

「Stylus 管理画面」で 「スタイル名」をクリックして「スタイルの編集画面」を開いてください。 下図の様に、ver.6 は右側に縦方向に12のコード枠が並びます。

a0349576_01050318.png

上から順に「セクション1」「セクション2」…「セクション12」で、それぞれ左上隅に「コード1」「コード2」…「コード12」の表示があるので、どのセクションかはコード番号で確認出来ます。


 セクション単位で「有効」「無効」を選択 

それぞれのセクションに赤枠の「適応先」に「指定形式」の枠があり、枠をクリックすると下の様に4種の「指定形式」が表示されます。

a0349576_10105589.png

この「指定形式」を変更して、セクション単位の「有効」「無効」が選べます。

 ◎「次で始まる URL」のセクションは「有効」
 ◎「URL」のセクションは「無効」

「指定形式」を変更したら、左側メニューの左上の「保存」を必ず押します。 これで変更が決定されます。

オプションのCSSコードは、セクション単位に纏めていますので、以上の方法でオプションの「有効」「無効」を選択してください。


 Excite Blog Writer(Firefox)の セクション内容の詳細 


 セクション1    Firefox版 - More拡張 ver.6 基本CSS

 セクション2    ver.6 画像パレットCSS

 セクション3    ver.6 テンプレート編集CSS

 セクション4    ver.6 フリーページ編集CSS

 セクション5    編集終了画面CSS

 セクション6    配色オプション ダークグリーン ★

 セクション7    画像パレット配色オプション ダークグリーン ★

 セクション8    枠線オプション ダークグリーン ★

 セクション9    ダイアログ背景色オプション ベース グレー ★

 セクション10    ダイアログ背景色オプション 中央部 グレー ★

 セクション11    2行編集アイコン 表示オプション

 セクション12    おすすめブログテーマ 非表示


◎「セクション1」~「セクション5」は基本構成で必要なセクションで、常に「有効」が推奨です。

◎「★」印のセクションは配色オプションで、暗背景には全ての★を「有効」とするのが推奨です。 もっとも、一部の★のみを「有効」にして、明背景に利用することが可能です。(例:明背景に 8、9、10 を追加)

◎「」印のセクションは機能オプションです。 必要に応じて「有効」「無効」を選択します。

◎「userstyles.org」の配布時は、「セクション1」~「セクション5」を「有効」、他は「無効」の設定です。

◎ セクションの「有効」「無効」を首尾良く切り替えるために、適応先のURLを意図的に「不完全なURL表記」にしたものがあります。(例:「~/entry/」を「~/ent」と表記 )



 起動時に画像パレットCSSを読込めない問題 

Firefox版「Stylus」では、編集画面の起動時に 画像パレットのみアレンジが適応されません
  ▪「年月の選択」を切り替える
  ▪ 画像を登録をする
これらのアクションが1回でもあると、以降はアレンジが適応されます。 これだけが現在解決できない問題点です。 現在の Firefox版「Stylus」は β版なので、今後に問題が改善される可能性は有り得ます。

〔追記〕2017.11.17Firefox 及び Stylus for FF がバージョンアップされたので、この問題修復に再度取り組みましたが、上手く行きません。 Firefoxには「iframe部の再読み込み」機能があるので、編集画面の起動時にこれを使うのが一番スマートかと思います。 画像パレットの何処かを右クリックし、「このフレーム」→「フレームの再読み込み」で、画像パレットにアレンジが適応されます。

a0349576_16550177.png



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



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