Studio TA Subsite の案内とお知らせ

タグ:ユーザースタイルシート ( 77 ) タグの人気記事

価格.com掲示板をアレンジする(4) アップデートと「縁側」ページの追加

2018年 06月 17日

価格.comは少しずつリニュアルしている


少し価格.comから遠ざかっていたので気付くのが遅いのですが、価格.comは細かな所でデザインのリニュアルを行っている様です。 巨大なシステムになると、気軽には模様替えが出来ないのかも。 一番目立つのは、コンテンツ幅「1035px」という指定です。 前回にアレンジスタイル「Kakakucom Viewer」を編集した時には、「930px」以上のページは無かったと思います。 スマホ向けにレスポンシブ化が進む一方で、PC向けデザインはページ幅が拡張される傾向があります。

また「PHOTOHITO」のページがアレンジが無効になっていて、調べるとTOPページ等の一部がSSL化をしていました。 未SSL化のページもあり、移行過程なのかも知れません。

以上の様な変化に対して、従来のアレンジ範囲での修正をしましたが、新たに、変更した点は、幅の広いtableに対するアレンジです。 従来は放置していましたが、横スクロールが出来るデザインとしました。

a0349576_16330849.png

この変更で、個別アイテムの多くのページを「740px」の基本幅に収める事が出来ました。 この様なtableは「Shift + マウススクロール」でも横スクロールが出来ます。

もっともこれは、カメラやPCや小物家電など私の目が届く範囲の話で、価格.comが対応する膨大なアイテム群には、表示崩れが生じる未対応のページが沢山有ると思います。 そこまで完全にアレンジする余力が無いので、未対応部分はアレンジをOFFにする等で対処してください。

また、「縁側」のページをアレンジ範囲に追加しました。 これは自由な小サークルで、けっこう多くのサークルが活動している様です。「縁側トップ」も個別の「縁側」ページもサイドメニューがあります。 そこで、幅740pxに統一するために、左サイドにメニューが待避するデザインとしました。 マウスを左サイドに近付けると下の様に画面全体は暗転して、メニューが扱える位置に出て来ます。

a0349576_16501761.png

「縁側」の投稿編集画面は、「クチコミ」の小修正で簡単にアレンジが完了しました。
また、「マイページ」をアレンジして「740px幅」のシリーズに追加しています。



価格.comのアレンジスタイル「Kakakucom Viewer」を使用するには


① ブラウザにStylusを導入する


「Kakakucom Viewer」を使用するには、ブラウザに拡張機能「Stylus」の導入が必要です。「Stylus」は、使用中のブラウザに合わせて以下のリンク先から導入します。 既にこの拡張機能を導入している場合は、導入の必要ありません。(拡張機能はStylishでも可です)

  Chrome版  Stylusの入手先
  Firefox版   Stylusの入手先

➁ userstyles.org から Kakakucom Viewer をインストール


「Kakakucom Viewer」は、スタイル投稿サイト「userstyles.org」に登録しています。 下のリンクはその登録ページで、このスタイルは Chrome版 / Firefox版 どちらのStylusでも使用出来ます。


上のページで、サンプル画像の右下の Install Style を押すと、一瞬で「Stylus」に「Kakakucom Viewer」がインストールされます。 この際、無関係なアプリの「Download」ボタンなどが同ページにあり、紛らわしいので注意ください。

インストールすれば、即座にアレンジが有効になります。



「Kakakucom Viewer」のセクション構成


最新の「Kakakucom Viewer」は 13セクションの構成です。

セクション1 フォント・基本背景

セクション2 全てのタブ画面 基本CSS

セクション3 フロートタブ部 機材詳細の非表示

セクション4 価格比較タブ画面 追加CSS
       (中古価格比較・買取価格・スペック情報・オークションの各タブ画面)
セクション5 レビュータブ画面 追加CSS 

セクション6 クチコミ写真ビュー画面 基本CSS

セクション7 クチコミコメント編集画面・レビュー編集画面 基本CSS

セクション8 レビュー編集画面 追加CSS

セクション9 縁側 基本CSS

セクション10 縁側編集画面 追加CSS

セクション11 白熱スレッドランキング 基本CSS

セクション12 PHOTOHITO 基本CSS

セクション13 マイページ 基本CSS


●「セクション3」はデフォルトで有効(非表示)です。 フロートタブに機材詳細を表示させるには、このセクションを無効にしてください。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「ドメイン上のURL」等の場合は「無効」になります。 スタイル編集画面でセクションの適用先を変更して「保存」を押すと、「有効/無効」が反映されます。

●「Kakakucom Viewer」のアレンジ内容の詳細については、以下のリンク先を参照ください。






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


[PR]
by Ataron | 2018-06-17 22:53 | PC環境(ハード/ソフト) | Comments(0)

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ

2018年 04月 12日

管理画面のユーザースタイルシートによるアレンジ


エキサイトのブログ管理画面は、良く整理されて判り易いものです。 雑然としたインターフェイスでは、多機能のブログシステムをユーザーが充分に使いこなせなくなります。 ブログ管理画面を見れば、そのシステムの素性が判るというものです。

さて、以前に管理画面の「記事一覧」を扱い易くしようと、簡単なアレンジをしていました。 これは未公開ですが、早い話が「記事一覧」のテーブルは画面幅を必要とするので、左側の管理メニューなどテーブル以外の表示は全て非表示にしたものです。

a0349576_11033599.png

「ブログ編集画面」以外で、私がブログ管理画面で日常的に利用するのは「アクセスレポート」「下書き一覧」「コメント一覧」などです。 その比重はユーザーによって異なるでしょうが、ユーザースタイルシートの機能を使えば、全メニューで、各ユーザーのニーズに合わせたカスタマイズが可能になります。

とは言っても、実際のところは良く纏まったレスポンシブル設計のエキサイト管理画面で、「手を加えなければ我慢出来ない」といった部分は殆ど見当たりません。 しかし、今後の良いアイデアのためにも、アレンジのベースを作っておく事にしました。



管理画面のアレンジは適用先指定が重要


管理画面をアレンジする場合、「適用先」の指定をいいかげんにしていると、後で必ず困った事になります。 というのは、各メニューは共通したセレクタを使用している部分が多く、あるメニューでのアレンジが、予想外のメニューのデザインを変えてしまう(誤適用)ことが生じ得るからです。

特に「ブログ編集画面」も「管理画面」の一部として組み込まれているので、「編集画面」も「管理メニュー」もアレンジしようというなら、他の管理メニューとの区別は必須です。

という事で、最初にエキサイトのブログシステムの「URL」を、可能な範囲で整理しました。 以下の表示は次を基準としています。

◎ブログ編集画面として開く画面「■」
◎検索機能で開く画面「■」

◎管理メニューの選択ボタン「
◎管理メニュー内にタブ選択があり、タブ毎に異なるURLを持つ場合は「▸」で表示

◎URLが「userconf.exblog.jp」以外のドメインのもの「★」
◎URLが非SSLのもの「ⓘ」



ブログ編集画面


■新期投稿
https://userconf.exblog.jp/entry/

■再編集
https://userconf.exblog.jp/entry/?

■フリーページ作成
https://userconf.exblog.jp/entry/fp/

■テンプレート作成
https://userconf.exblog.jp/entry/template/

■このテーマで記事を書く
https://userconf.exblog.jp/entry/bookmarklet/

■〔トラックバック会員専用〕★ ⓘ
http://www.exblog.jp/myblog/entry/bookmarklet/



管理メニュー


マイページTOP
https://userconf.exblog.jp/

記事一覧
▸記事一覧
https://userconf.exblog.jp/posts/

下書き一覧
▸https://userconf.exblog.jp/drafts/

フリーページ作成
https://userconf.exblog.jp/entry/fp/

フリーページ一覧
https://userconf.exblog.jp/fps/

画像管理
https://userconf.exblog.jp/image/

テンプレート作成
https://userconf.exblog.jp/entry/template/

アクセスレポート
▸ブログアクセス
https://userconf.exblog.jp/access/blog/

▸記事別アクセス
https://userconf.exblog.jp/access/post/

▸タグ別アクセス
https://userconf.exblog.jp/access/tag/

▸リンク元URL
https://userconf.exblog.jp/access/referer/

▸検索キーワード
https://userconf.exblog.jp/access/keyword/

ブロクイイネ
▸新着イイネ一覧
https://userconf.exblog.jp/likes/

▸イイネレポート
https://userconf.exblog.jp/likes/report/

コメント・トラバ一覧
▸コメント一覧
https://userconf.exblog.jp/comments/

▸トラックバック一覧
https://userconf.exblog.jp/trackbacks/

コメント・トラバ設定
▸コメント・トラックバック設定
https://userconf.exblog.jp/config/comment/option/

▸ID・URL拒否設定
https://userconf.exblog.jp/config/comment/url/

▸IP拒否設定
https://userconf.exblog.jp/config/comment/ip/

▸キーワード拒否設定
https://userconf.exblog.jp/config/comment/keyword/

ファン管理
▸ファン申請管理
https://userconf.exblog.jp/config/fan/message/

▸ファンブログ一覧
https://userconf.exblog.jp/config/fan/list/

基本設定
▸基本設定
https://userconf.exblog.jp/config/basic/

▸メニュー設定
https://userconf.exblog.jp/config/menu/option/

▸メニュー並べ替え
https://userconf.exblog.jp/config/menu/sort/

プロフィール設定
https://userconf.exblog.jp/config/profile/

ジャンル設定
https://userconf.exblog.jp/config/genre/

デザイン設定
▸PCデザイン設定
https://userconf.exblog.jp/config/design/pc/

▸スマホデサイン設定
https://userconf.exblog.jp/config/design/sm/

SNS設定
▸SNS連携
https://userconf.exblog.jp/config/sns/list/

▸SNSボタン設定
https://userconf.exblog.jp/config/sns/display/

メール投稿・通知設定
https://userconf.exblog.jp/config/mobile/

ブログパーツ
https://userconf.exblog.jp/config/blogparts/

エキプロへ引越し
https://userconf.exblog.jp/config/import/basic/

ブログ削除
https://userconf.exblog.jp/config/delete/

ブログを本にする
https://userconf.exblog.jp/config/mybooks/

ライフログ
https://userconf.exblog.jp/config/amazon/

ヘルプ ★
https://www.exblog.jp/bloghelp/blog/

ご利用コースの確認
https://userconf.exblog.jp/status



検索


■エキサイトヘッダー検索 ★
https://search.exblog.jp/

■ブログ内検索 ★ ⓘ
http://www.exblog.jp/search/?



適用先指定で注意すべき部分


◎「マイページTOP」が「https://userconf.exblog.jp/」でサブディレクトリ(.jp/以降)を持ちません。
適用先を「次で始まるURL」=「https://userconf.exblog.jp/」と指定すると、他の管理メニューや編集画面などに誤適応が生じ得ます。 この場合は、適用先「URL」=「https://userconf.exblog.jp/」と指定すると、他のサブディレクトリを持つ画面への適用を避けることができます。「マイページTOP」だけ適用先指定が別扱いになります。

◎他の画面は、「次で始まるURL」=「サブディレクトリまで指定」で、完全に適用先の区別が出来ます。

◎従来、編集画面のアレンジでは「https://userconf.exblog.jp/ent」を「適用先」の基本的な文字列として、編集画面の種類で個別アレンジをする場合は、個別サブディレクトリまで指定して区別して来ました。 これは、そのままで変更する必要がありません。

◎「ヘルプ」メニューだけは、特別なドメインに送られ、これは管理画面とは全く別のアレンジになります。

以上が、管理画面をアレンジする際の適用先指定の注意点です。



実際のアレンジした様子


以下は、今回作ったスタイル「Excite Blog Config Style」を拡張機能「Stylus」に登録して、アレンジを適用した状態です。

◎左メニューのスライドアウト、スクロールメニュー化で、ウインドウの最小幅を780px程度にコンパクト化。
◎不要の表示を省略して、管理機能の操作に限った表示としています。

管理画面の「左メニュー」は常に画面の左側に隠れていて、マウスポインタを画面の左端に近付けると出て来ます。

a0349576_01095970.png

「マイページTOP」は、「アンケート枠」「お知らせリスト」等の通知内容を省略せず、これを開くボタンをメニュー列から独立させています。(赤枠) それ以外の「左メニュー」はスクロールで表示されます。 Chromeではwebkit利用で細いスクロールバーとしましたが、Firefoxでは普通のスクロールバーになります。

「左メニュー」からマウスが退くと、ページの全体表示となり、ウインドウ幅は最小で780px程度です。 管理画面のページは本来レスポンシブデザインです。 デスクトッブの状況に合せ、必要なら右方向に大きくウインドウを拡げる事も可能です。

下は「基本設定」の画面の上部です。 余計な表示がなく、あっさりとした印象です。

a0349576_22501324.png

ヘルプは、全く構成の異なるページですが、管理画面から開く事が多いので、ウインドウの最小幅が同じとなる様にアレンジしました。 やはり「左メニュー」を左側に待避させています。

a0349576_22560298.png

マウスポインタを左側に寄せると、メニューが現れてヘルプ項目の選択が可能になります。

a0349576_22574400.png



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


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

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

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


〔手順2〕
「Stylus」が導入されたら、「Excite Blog Config Style」をインストールします。 入手先の「userstyles.org」は、ユーザーの作ったスタイルを配布するサイトで、下のリンク先に私が登録したこのスタイルがあります。

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

  スタイルの入手先


〔注釈〕
各メニューのページ内容については、気の付いた部分を修正した程度です。 管理画面カスタマイズのベースとして利用していただければと思っています。




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



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

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

2018年 04月 09日

IE11版 - More拡張 ver.7.2 の更新内容


エキサイト編集画面で「おすすめブログテーマ」の表示が無くなり、編集画面に白枠だけが表示されています。 この時期が長いので、無告知の状態でテーマ表示枠サイズが縮小する様にしました。 告知が再開されれば、従来の「おすすめブログテーマ」枠が表示されます。

また、ヘルプぺージを表示するアイコンを編集アイコンの横に表示させるオプションを追加しました。 デフォルトではアイコンは非表示で、表示させるには当該オプションコード部のコメントアウトを外してください。

これらの更新の詳細は、エキサイト編集画面のアレンジ(80)を参照ください。



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


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




IE11版 - More拡張 ver. 7.2 CSSコード


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



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

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;
height: 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;
bottom: -756px;
left: 850px;
margin: 0 !important;
padding: 0 !important;
max-height: 40px;
max-width: 77px;
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 {
left: 700px;
max-height: 74px;
max-width: 207px;
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%);
z-index: 5; }

.page_entry div[class*="campaign-c"] + div[class*="campaign-c"] {
margin: 0 0 0 22px !important; }

.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 50px !important;
width: calc(100% - 292px) !important;
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }

.page_entry div[class*="campaign-c"] + div[class*="campaign-c"]:hover {
margin: 0 0 0 0 !important; }


/* みんなの投稿枠 */
.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 0 45px !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%);
z-index: 5; }

.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 60px !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 90px !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: 5; }

.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 50px !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; }
*/


/* Pチェッカー オプション */
/*
.POST_BODY p {
background: #4DD0E0; }

p::before , p::after {
font: bold 1.15em/1.2em FontAwesome;
background: #fff;
position: absolute; }

#_entryContent p::before, #_moreEntryContent p::before,
.POST_BODY p::before {
content: "\f0d9\2005P ";
color: red;
left: 0; }

#_entryContent p::after, #_moreEntryContent p::after,
.POST_BODY p::after {
content: "P\2005\f0da";
color: blue;
left: 0.6em; }
*/

/* 編集ヘルプ 表示オプション */
/*
.boxHead.head-h1 {
display: block;
height: 0;
margin: 0;
font-size: 0; }

.boxHead.head-h1 .btn-s {
position: absolute;
top: 60px;
left: 720px;
z-index: 3;
overflow: visible !important;
border: none !important; }

.boxHead.head-h1 .btn-s a {
width: 0 !important;
padding: 0 !important; }

.boxHead.head-h1 .btn-s a:before {
content: "\f059";
font: normal 22px/23px FontAwesome;
display: block;
width: 28px;
text-shadow: none;
color: #fff;
background: #a4c1ce; }
*/





●上記コードの末尾に、以下の簡単なオプションがあります。

「2行編集アイコン ワイド 表示オプション」
「おすすめブログテーマ 非表示オプション」
「お知らせリスト 非表示オプション」
「キャンペーン枠 非表示オプション」
「みんなの投稿 非表示オプション」
「Pチェッカー オプション 」
「 編集ヘルプ 表示オプション 」

各オブションのコード部を囲むコメントアウト「/*」「*/」を削除すると、オプションコードが有効になります。





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



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

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

2018年 04月 09日

空白の「おすすめブログテーマ」枠


先月から「おすすめブログテーマ」が無い状態が続き、また一時期2個に増えていた「キャンペーン」も無い状態が続いています。 エキサイトの方針が編成中で、いずれ賑やかにそれらが活用されるのかも知れませんが。

これらの枠の中身が無い場合も、編集画面のデザインは崩れませんが、「おすすめブログテーマ」は白地の枠が目立ちます。 これは、もうすこしスマートにしたいところです。

a0349576_18134769.png

テーマ告知の内容は「#trb_themeTtl」としてHTMLにインポーズされますが、現在のHTMLの状態は以下で、ブルーの文字の部分は中身が空のブロックになっています。

<td rowspan="2" style="vertical-align:top;">
<div id="trb_themeTtl">
<div id="trb_themeTtl">
         </div>
</div>

</td>

どういう理由か「#trb_themeTtl」が二重になっていますが、これに「height」「width」を指定すると、実際の表示に現れます。 下図の赤い部分は「height:75px; width:200px;」を指定した仮想の要素で、テーマ告知がある場合は、この様な状態です。

a0349576_19432019.png

本来のテーマ告知がある状態は、以下の過去記事が参考になります。


現在、「お知らせリスト」などのボタンは、HTMLにコード(要素実体)がインポーズされない場合に、ボタンが姿を消す様な工夫をしています。 これは「max-height」「max-width」を使い、ボタンサイズを明示的に指定せず、リンク実体が無い場合にボタンのサイズが無くなる様にしています。(但しボタンの枠線が残りますが)

「#trb_themeTtl」が空要素の場合に目立つのを防ぐために、同様の方法を採る事にしました。



「max-height」「max-width」を使って書き換える


要点はボタンのサイズを「max-height」「max-width」で指定する事ですが、「padding」指定があると空状態でも幅を持ってしまいます。 また、枠線だけは空状態でも表示されるので、その枠線の配置場所も考慮しました。

「#trb_themeTtl」を内包する上記のHTMLコードの「td」を、「おすすめブログテーマ」のボタンにしています。 この「td」には class名も id名も無く、「#entryEditHead-new tr:nth-child(1) td:nth-child(3) 」という長いセレクタ表記になっていますが、要はマウスが乗った時に拡がるだけです。


#entryEditHead-new {
height: 0; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
bottom: -756px;
left: 850px;
margin: 0;
max-height: 40px;
max-width: 77px;
padding: 0;
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 {
left: 700px;
max-height: 74px;
max-width: 207px;
padding: 5px 10px; }


〔注〕
最初の項は、新規作成と再編集でテンプレート選択tableの有無がある事に対応するもの。 bottom指定で「td」を配置する場合は、この補正が無いと新規作成と再編集で配置位置が変わってしまいます。(top指定では変化しない)

●テーマ告知がある場合
マウスが乗った hover時は「padding」の有無は関係なくなるので、内部の「#trb_themeTtl」の配置の調整に padding を使用しています。 下図の余白の部分が「padding: 5px 10px;」に相当します。

a0349576_20302863.png

●テーマ告知が無い場合
内部の「#trb_themeTtl」が無い場合は、マウスが乗らない場合は下図の様に目立たない短い線になります。

a0349576_20365238.png

幅が若干あるのは「#trb_themeTtl」に「margin-left: 10px;」の指定があるためです。 これを下手に変更すると、インポーズされる「#trb_themeTtl」の内容次第で、まずい表示になりかねません。

この高さ2pxの線に上手くマウスを乗せると、下の様に「padding: 5px 10px;」分の拡張をしますが、マスウでポイントするのは難しい位なので許容します。

a0349576_20372956.png



ヘルプアイコンを表示するオプション


編集ヘルプのページを開く「」のアイコンを、オプションで編集アイコン横に表示する様にしました。 このヘルプについては、以下のリンク先を参照ください。

なお、「編集ヘルプ 表示オプション」のセクションの適用先指定で、アイコンの表示/非表示が選択可能です。



Excite Blog Writer を使用するには


「userstyles.org」に登録した、「Excite Blog Writer (Chrome)」「Excite Blog Writer (Firefox)」は、このページのアレンジ内容で ver.7.2 に更新済です。 それらの入手先は以下のリンク先になります。
(下記スタイルの使用には拡張機能「Stylus」の導入が必要です。 また「Stylish」でも使用可能です。)

ブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先を参照ください。「Stylus」の導入と基本的な使用方法を纏めているので、使用ブラウザに適合した「Stylus」を導入をしてから、「Excite Blog Writer」を導入してください。





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



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

エキサイト編集画面のアレンジ(79) ヘルプページ表示のオプション

2018年 03月 26日

エキサイト編集画面のヘルプ


エキサイトブログは、旧ヘルプページとリニュアルしたヘルプページが共存する形でしたが、SSL移行に伴いリニュアルしたヘルプページに完全に移行した様です。 2018年3月では、「スキン編集ヘルプ」や、このページで問題にする「編集画面のヘルプ」などが、既にリニュアルを完了しています。

エキサイト編集画面のアレンジを利用しようと言う方は、ある程度以上のスキルを持つユーザーでしょう。 そういったユーザーを前提として、開発当初は簡素化を優先しました。 しかし、アレンジのノウハウの蓄積で余裕が出来て、編集画面上の機能をなるべく捨てない方向に、方針を変えて来ました。

「2行編集アイコン」のオプションで、全編集アイコンを利用可能とし、「お知らせリスト」「みんなの投稿」「キャンペーン」「トラックバック枠」などの機能枠を、既にアレンジ編集画面上にコンパクトに組み込んでいます。 残ったのは「ヘルプ」です。

ヘルプは2種あり、その1種は「」の4個のマークで、下の様なチュートリアルが表示されます。

a0349576_19392097.png

これは面白い演出ですが、ごく初歩の説明で、無理して採り入れる必要は無いと判断しました。

もう1種のヘルプは「ヘルプ」のキャプションのあるボタンです。 それらは、以前は旧ヘルプページの関連個所を開いたのですが、現在はリニュアルしたヘルプページを開きます。(設定画面のヘルプ)

編集中でもこのヘルプボタンで、他のウインドウでヘルプが参照できます。 これは、使い慣れたユーザーでも有効な場合があるかも知れません。 そこで、実装は先ですが、アレンジコードを作っておく事にしました。



ヘルプボタンを編集画面上に表示する


調べると、この「ヘルプ」ボタンは結局同じ所を表示します。 つまり、ボタンは編集画面内に1個あれば良いでしょう。 どれかのヘルプ項目を開ければ、他の項目も開く事が出来ますから。

アレンジ元にしたのは、本来の編集画面の一番上部のものです。 これは早い内から、新ヘルプを開くリンクになっていました。

a0349576_20040830.png

従来のアレンジでは、「記事を書く」の枠全体を非表示にしていましたが、一旦表示に戻し、不要な要素を全て削いで、リンクの「a要素」のみを移動して使用します。

配置場所は編集アイコンの隣で、「ヘルプ」のままでは邪魔になるので「擬似要素」で FontAwesome のマークを表示して、それをコンパクトなスイッチにしました。

a0349576_20114647.png

以下がアレンジコードです。



/* 編集ヘルプ */

.boxHead.head-h1 {
/* display: none; */
display: block;
height: 0;
margin: 0;
font-size: 0; }

.boxHead.head-h1 .btn-s {
position: absolute;
top: 60px;
left: 720px;
z-index: 3;
overflow: visible;
border: none; }

.boxHead.head-h1 .btn-s a {
width: 0;
padding: 0; }

.boxHead.head-h1 .btn-s a:before {
content: "\f059";
font: normal 22px/23px FontAwesome;
display: block;
width: 28px;
text-shadow: none;
color: #fff;
background: #a4c1ce; }





これを正式に採り入れるなら、オプション項目のひとつになるでしょう。





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



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

「イイネ・コメント」の新着表示アレンジを小修正 / エキサイトブログ

2018年 03月 14日

「イイネ・コメント」の新着表示の欠点


ブログトップ画面には、「イイネ・コメント」があった場合に「」マークの新着表示が出ます。 このマークは「イイネ」「コメント」の区別がないのが欠点、下の様に「ブログ管理」を開かないとどちらの新着か判りません。

a0349576_01575817.png

エキサイトヘッダーを非表示としているユーザーは、ブログ画面で「新着コメント」の案内が見えません。 従って「ブログトップ」→「ブログ管理」と開き確認する事になります。

さて、「新着コメント」をチェックすると「」マークはすぐ消えます。 しかし「新着イイネ」をチェックしても、一定時間たたないと「」マークは消えません。 そのため、エキサイトヘッダー非表示で、沢山のコメントをやり取りするユーザーは、「」マークを見て「新着コメント」と思ったら「イイネ」だったと言う事が繰り返されます。「新着コメント」だけを確認出来ず、いささか不親切なデザインです。

「Excite NoticeMessage(新着表示)」は、トップ画面に新着表示内容を表示して、この不便を解消します。


アレンジ可能な環境


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



新着表示「イイネ」「コメント」をトップ画面のヘッダー部に表示する


「Excite NoticeMessage(新着表示)」は、「ブログ管理」の新着表示のデザインをアレンジします。
新着があれば下図の様に、ユーザーメニューの上部にその内容が表示されます。(ブロクの持主にしか見えません)

a0349576_02334426.png

上図は両方の新着がある場合ですが、それぞれの新着を別々に表示します。
  ◎「コメント」の新着表示はクリックしてコメントを見に行くと、その段階で赤い表示が消えます。
  ◎「イイネ」の新着表示は、他のユーザーが「イイネ」を押し一定時間(1日程度?)後にブルー表示が消えます。

トップページで下方に一定以上スクロールすると、上部にフロートヘッダーが現れます。 下図の様にヘッダーにユーザーメニューが移動して表示されますが、同時に新着表示もこのヘッダーに表示されます。

a0349576_02481324.png

今回、従来のコードを見直して、新着表示の文字の高さ位置のズレを Chrome / Firefox 間で最小限としました。

a0349576_03033993.png

問題にしたのは、ブルー / 赤のベース枠に対する「新しい~」の文字位置の事です。 上は Firefox が僅かに文字が低いのですが、許容範囲と思います。 この文字の高さ位置は、ブラウザ拡大率で微細に変わり、常に中央にするのは難しいものです。



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


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

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

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


〔手順2〕
「Stylus」が導入されたら、「Excite NoticeMessage(新着表示)」をインストールします。 入手先の「userstyles.org」は、ユーザーの作ったスタイルを配布するサイトで、リンク先に私が登録した「Excite NoticeMessage(新着表示)」があります。

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

  スタイルの入手先




アレンジの実装方法 IE11 


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

  ◎ユーザースタイルシートのファイル名は適当で良く、説明の様に「Excite.css」などでOKです。
  ◎ファイルの内容になる「基本CSS」は以下です。

〔 基本CSS 〕


/* 2018.03.14 ブログトップの新着表示を拡張表示 (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: -159px;
right: 180px;
margin: 0 !important;
width: 370px;
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: 370px;
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: 0;
padding: 12px 8px 0 !important;
margin-right: 8px !important;
border-radius: 4px;
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*="likes"]:hover {
background: #068af3 !important;
opacity: 1 !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: 0;
padding: 12px 8px 0 !important;
border-radius: 4px;
text-decoration: none !important;
color: #fff !important;
background: red !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="comments"]:hover {
background: #dc0f00 !important;
opacity: 1 !important; }







〔注意〕
IE11の場合、ユーザースタイルシートは一度に1個しか利用出来ません。 編集画面のアレンジや、何かのスタイルシートを他に利用している場合は、利用する場合に応じて切替える必要があります。 このため、ユーザースタイルシートの本格的な利用には不便です。




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


[PR]
by Ataron | 2018-03-14 08:35 | ブログスキンのアレンジ | Comments(1)

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

2018年 02月 15日

IE11版 - More拡張 ver.7 の更新内容


エキサイト編集画面で、2個の「キャンペーン」が常態化しています。 両者を別々に開くために「C」ボタンを2個表示可能とし、「キャンペーン」が減った場合は、それに応じてボタンが消滅します。

詳しくは Chrome / Firefox版 の「More拡張 ver.7」の説明 を参照ください。



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


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




IE11版 - More拡張 ver. 7 CSSコード


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



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

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%);
z-index: 5; }

.page_entry div[class*="campaign-c"] + div[class*="campaign-c"] {
margin: 0 0 0 22px !important; }

.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 50px !important;
width: calc(100% - 292px) !important;
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }

.page_entry div[class*="campaign-c"] + div[class*="campaign-c"]:hover {
margin: 0 0 0 0 !important; }


/* みんなの投稿枠 */
.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 0 45px !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%);
z-index: 5; }

.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 60px !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 90px !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: 5; }

.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 50px !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; }
*/






●上記コードの末尾に、以下の簡単なオプションがあります。

「2行編集アイコン ワイド 表示オプション」
「おすすめブログテーマ 非表示オプション」
「お知らせリスト 非表示オプション」
「キャンペーン枠 非表示オプション」
「みんなの投稿 非表示オプション」

各オブションのコード部を囲むコメントアウト「/*」「*/」を削除すると、オプションコードが有効になります。



〔追記〕2018.02.22
以下の修正で、IE11版をVer.7.1に更新しました。
▪キャンペーン対策コードのセレクタを修正(上記掲載コードは修正済)




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



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

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

2018年 02月 15日

Chrome版 / Firefox版 - More拡張 ver.7 の更新内容


エキサイトの「キャンペーン」は、ユーザー獲得/活性化の基軸となっている様です。 編集画面のHtml上で、以前は「キャンペーン」の次に「みんなの投稿」が並んでいましたが、最近は「キャンペーン」ブロックが2個になっています。 1個に戻るか様子を見ていましたが、すでに2個が常態化しています。

a0349576_20024637.png

エキサイト編集画面のアレンジでは、「お知らせリスト」「キャンペーン」「みんなの投稿」を編集画面の左下隅のボタンから開く様にしています。 下図の左側は本来の編集画面、右側はアレンジした状態で、ブラウザの縦スクロールが不要なコンパクトな編集画面はとても快適です。

a0349576_20100809.png

「More拡張 ver.7」では、この2個の「キャンペーン」を表示出来る様に、左隅のボタンまわりのコードを更新しました。 下は実際の画面です。

a0349576_20135930.png

「キャンペーン」が1個の時は左側の「C」ボタンのみとなり、無しになった場合には両方の「C」ボタンが消えます。「お知らせリスト」を既読で「×」を押して全て消した場合も、「A」ボタンは消失します。 エキサイトの告知の内容は変更が考えられるため、従来の3ボタンを標準コードとしたままで、この4ボタンのデザインのコードは「オプション」セクションの形で追加しました。 変更があれば、このセクションの更新で対応した方が便利だからです。

この更新では、ボタンを押した場合の他の3個のボタンが「表示されたまま」になる様にデザインしました。 これにより、ポインタを横方向移動で、すべてのボタンの内容が順に見れます。

a0349576_20353278.gif




追加したセクション の更新内容


「More拡張 ver.7」では セクション13を追加しました。 これはデフォルトで「有効」に設定しています。「無効」に設定すれば、従来の3ボタンになります。


 セクション13    追加キャンペーン対応CSS

適用先: 「次で始まるURL」=「https://userconf.exblog.jp/ent
     「次で始まるURL」=「http://userconf.exblog.jp/ent

CSS:

/* 追加キャンペーン対応CSS */
#announceList {
margin: 0 0 0 75px;
z-index: 5; }

#announceList:hover {
padding: 30px 0 50px; }


.campaign-container {
z-index: 5; }

.campaign-container:hover {
padding: 20px 40px 50px;
z-index: 4; }

div[class*="campaign-c"] + div[class*="campaign-c"] {
margin: 0 0 0 22px; }

div[class*="campaign-c"] + div[class*="campaign-c"]:hover {
margin: 0 0 0 0; }

#blog2media {
margin: 0 0 0 45px;
z-index: 5; }

#blog2media:hover {
padding: 15px 15px 60px; }





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

「Chrome版 - More拡張 ver.7」は「Excite Blog Writer(Chrome)」、「Firefox版 - More拡張 ver.7」は「Excite Blog Writer(Firefox)」というスタイル名で「userstyles.org」で配布しています。 Chrome版とFirefox版は異なったスタイルです。

これらは、各ブラウザ版の拡張機能「Stylus」をベースに機能するユーザースタイルシートです。 アレンジした編集環境を実現するには、まずブラウザに「Stylus」を導入し、次に各ブラウザ版の「Excite Blog Writer」をインストールします。


 拡張機能「Stylus」をブラウザに導入する 

ブラウザが Chromeの場合は、以下のページから導入します。


詳しくは「Stylus の導入と設定方法 Chrome版」を参照ください。


ブラウザが Firefoxの場合は、以下のページから導入します。


詳しくは「Stylus の導入と設定方法 Firefox版」を参照ください。


 Excite Blog Writer のインストール 

次に「userstyles.org」から「Excite Blog Writer」のスタイルをインストールします。 このサイトに登録されているのは、常に最新版に更新されたスタイルです。

ブラウザが Chromeの場合は、以下の「Excite Blog Writer (Chrome)」のページを開きます。


下の様なページが表示されたら、ページ上部のメイン画像「右下」の Install Style を押します。

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

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

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

a0349576_16304400.png

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

a0349576_16312253.png


ブラウザが Firefoxの場合は、以下の「Excite Blog Writer (Firefox)」のページを開きます。


これ以降の操作は、上のChrome版と全く同じてす。



 Excite Blog Writer の扱いについて 

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

a0349576_20185946.png

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


 Stylus管理画面 の リスト操作 

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

a0349576_20371229.png

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


 Excite Blog Writer の セクション 

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

a0349576_22211165.png

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


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

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

a0349576_10105589.png

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

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

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

オプションのCSSコードは、セクション単位に纏めていますので、以上の方法でオプションの「有効」「無効」を選択してください。 なお、1セクションに複数の適用先がある場合、「有効」「無効」を混在させず、指定はどちらかに統一します。


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


 セクション1    More拡張 ver.7 基本CSS

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

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

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

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

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

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

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

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

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

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

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

 セクション13    追加キャンペーン対応CSS


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

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

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

◎「userstyles.org」の配布時は、「セクション1,2,3,4,5,9,10,13」を「有効」、他は「無効」の設定です。

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


〔追記〕2018.02.22
以下の更新で、Ver.7.1を配布しました。
▪エキサイトSSL移行にともなう適応先を変更
▪キャンペーン対策コードのセレクタを修正(上記掲載コードは修正済)
▪セクション9, 10 をデフォルトで有効




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



[PR]
by Ataron | 2018-02-15 22:46 | ブログスキンのアレンジ | Comments(0)

価格.com掲示板をアレンジする(3) 白熱スレッドランキング の表を見易く

2018年 02月 13日

白熱スレッドランキングの表


開くスレッドを限定していると、情報が偏ったり面白い新情報を見過ごす事になるので、私は「白熱スレッドランキング」で面白そうな記事を時々つまみ食いします。 しかし、このページも「MS Pゴシック」が基準フォントです。 このフォントを「メイリオ」に指定するついでに、表をもう少し見易くする事を考えました。

本来のランキング表は、ウインドウ幅960px以下で横スクロールバーが出る「横幅固定」の表です。

a0349576_21500686.png

上図を良く見ると、左端の「順位」列、右端の「最終投稿日時」列など、無駄な幅があります。 この無駄を省いた上で、「サブカテゴリ」「内容・タイトル」列を幅可変として、表全体をコンパクトな可変幅にアレンジします。



「table」の一部の列幅を固定とするのは案外と難しい


色々と表のCSSを弄っている内に、案外と知らなかった「table」の扱いに出会いました。 表の一部の列を固定幅にするのは、

◎「table」に「table-layout: fixed;」を指定する
◎ 固定する「th」「td」等に幅値「width: ~;」を指定する
◎ 固定しない「table」「tr」「th」「td」等には幅値を指定しない

というのが基本の様です。 しかし、この通りしても思った様には行きません。

◎ 固定幅としたい「th」「td」等に「white-space: nowrap;」を指定する

これが、今回のアレンジの鍵になりました。(教科書通りにならないのは、スクリプトによる指定が効いているのかも知れません)
カットアンドトライで模索していくと、この「table」に関しては、

●「table」に「table-layout: fixed;」を指定する
● 全ての「td」に幅値「width: ~;」を指定する
● 固定する「td」には「white-space: nowrap;」を指定する
● 可変幅の「td」には「white-space: nowrap;」を指定しない

という方法が目的の通りになりました。 但しこの指定方法は、全ての「td」の指定幅の合計値が「table」の最大幅となり、可変幅の「td」は指定幅を最大値とした拡縮状態になります。

可変幅の「td」に幅値を指定しない場合は、「table」や可変幅「td」は完全に自由な拡縮状態になりますが、可変幅「td」の幅のコントロールがアレンジ側で出来なくなり、この指定方法は却下しました。



アレンジ後の「table」の拡縮の様子


ウインドウ幅が900px以上の場合は、下図の様に「table」の左右に余白が出来、「table」幅は最大値(約830px)に固定です。

a0349576_21523166.png

ウインドウ幅が900pxより小さくなると「サブカテゴリ」と「内容・タイトル」の列が縮まり始めます。 下図はウインドウ幅が760pxの時で、上に比べると可変幅の列内の右余白部分だけが減っています。

a0349576_21581924.png

可変幅の文字列(a要素)は、文字数が一定ではありません。 ウインドウ幅を縮めて行くと、文字の多い列から折り返しが始まります。 下はウインドウ幅735pxの時で、「サブカテゴリ」の列が折り返されています。

a0349576_22061471.png

更にウインドウ幅を縮めると「内容・タイトル」列も折り返されます。 レスポンシブではないですが、この様にして幅をコンパクトにアレンジしました。 小幅のモニターでも使用し易い、或いはブラウザで拡大表示してもデスクトップを占拠しない事を基本として、この様なアレンジをしているのです。



実際に価格.comをアレンジするには


このアレンジスタイルは、スタイル投稿サイト「userstyles.org」に、スタイル名「Kakakucom Viewer」として登録しています。

Chrome あるいは Firefox のブラウザを使用されているなら、拡張機能の「Stylus」(最新の「Stylish」でも可)を導入して、以下のリンク先で「Kakakucom Viewer」をインストールすれば、アレンジが有効になります。


「Kakakucom Viewer」の他のアレンジ内容については、以下のリンク先を参照ください。





「Kakakucom Viewer」のセクション構成


最新の「Kakakucom Viewer」は 10セクションの構成です。

セクション1  価格.com 掲示板 基本CSS

セクション2  写真ビューワー画面 基本CSS

セクション3  コメント編集画面・レビュー編集画面 基本CSS

セクション4  レビュー編集画面 追加 基本CSS

セクション5  フォント メイリオ指定 / 画面背景色

セクション6  フロート部 機材詳細の非表示オプション

セクション7  フロート部 カテゴリタブの非表示オプション

セクション8  フロート部 全体の非表示オプション

セクション9  白熱スレッドランキング 基本CSS

セクション10  PHOTOHITO 基本CSS


●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。

●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。

● 初期設定は、「セクション1~6, 9, 10」を有効、「セクション7, 8」を無効に設定しています。

●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。



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

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善

2018年 02月 12日

スタイルリストのチェックボタンの誤操作


管理画面のインストールしたスタイルリストは、各行の先頭のチェックボタンで、そのスタイルのON/OFFを切り替える事が出来ます。 管理画面も余り開かないユーザーも居るかもしれませんが、スタイルを編集/作成する場合は、スタイルの問題点の洗い出しなどで、スタイルのON/OFFをする事が非常に増えます。 そんな場合に、一番利用するのがこのリスト行先頭のボタンです。 また、リストの行自体をクリックすると、そのスタイルの編集画面が開きます。

a0349576_09041121.png

以前のStylusでは、行頭の「チェックボタン」とその右側の「スタイル名」の部分は押し間違える事は無かったのですが、最近にデザインが変更され、上図の様に「チェックボタン」を「スタイル名」の部分が囲う様になりました。 この結果、ON/OFFの切替えのつもりが編集画面が開く事が時々生じ、操作性の悪さを感じていました。



上手い回避策があった


前ページで触れましたが、これを改善するために、チェックボタンのサイズを標準の「12px」から「16px」に拡大したのですが、他の人の投稿スタイルを調べると、上手くこの問題を回避している人が居ました。

その方法は、「pointer-events: none;」を使い、赤い部分をクリックで反応しない様にしていたのです。 なるほど、その手があったかと早速輸入しました。

以下は、この部分の要素の構成です。

a0349576_09064340.png

「style-name」に「pointer-events: none;」を指定し、「input.checker」と「a.style-name-link」に「pointer-events: auto;」を指定する事で、昔の操作状態に戻せました。

●改善前
下図の部分はファイル名と同様に、編集画面を開くスイッチとして反応。

a0349576_09074325.png

●改善後
同じ部分にマウスを置いても、反応せず背景色も変化しない。 つまり、ここをクリックしても編集画面が開くことは無い。

a0349576_09084637.png

「チェックボタン」にマウスを乗せると下の様に反応するが、「ファイル名」との間には反応しない部分があります。

a0349576_09092303.png
a0349576_09093557.png

この改善策で誤操作の心配がなくなったので、スタイル名のフォントに比べて大きすぎの感があったチェックボタンのサイズを、「16px」から「15px」に減らしました。 12pxでもOKですが、操作性ではこの位が良いと判断しています。



[PR]
by Ataron | 2018-02-12 10:07 | PC環境(ハード/ソフト) | Comments(0)