Studio TA Subsite の案内とお知らせ

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

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

2018年 08月 02日

デザインの定まらない「おすすめブログテーマ」


エキサイト編集画面で「おすすめブログテーマ」は、全く無い時期もあれば、季節に合わせて突然に表示されたりします。 今まで、この表示の割り込みでアレンジデザインが崩れ、何度も対策をして来ました。 さすがに崩れ難くなりましたが...

以下は今期の様子ですが、右下にテーマ投入が開始された事を教えるために、小さな通知枠が表示され、テーマ表示の一部が見えています。 これは、一応設計の通りです。

a0349576_17450007.png

マウスを乗せると、中身が全て表示されるデザインでしたが、実際は以下の様に右が切れてます。

a0349576_17491013.png

今回は2個のテーマを投入して来た上に、サイズも横に大きくなり、従来のデザインではその全てを表示できなくなっているのです。 アレンジをOFFにして、今回の「おすすめブログテーマ」の全体を見ると、下の様に大きなものです。

a0349576_17515185.png

こんな大サイズの表示にも対応できる様に、フォバー時の表示を編集画面上に持って来る事にしました。 また、今回のテーマは「padding-top」を指定されていて、通知枠の隅に追いやられています。 こういう問題にも対応する事に。

下は、新しいアレンジの通知枠の状態で、通知枠いっぱいにテーマが表示されています。

a0349576_18003060.png

マウスを乗せた時は、下の様にハーフトーンの背景がせり上がり、中央に「おすすめブログテーマ」が表示されます。 これだけ余裕があれば、隠れる事はないでしょう。

a0349576_18033960.png

IE11版の再アレンジは比較的簡単でしたが、Chrome版やFirefox版は「z-index」の問題がありました。 従来コードでは拡張するテーマ枠が、画像パレットや下部メニューの下に潜り込みます。 今回は、上部のタイトル編集枠周辺から「z-index」指定を整理しなおし、ようやく上記のせりあがりデザインを実現できました。

スタイルシートは「Chrome版 / Firefox版 - More拡張 ver.7.3」に更新しています。



Excite Blog Writer を使用するには


「Excite Blog Writer」で編集画面をアレンジするには、ユーザースタイルシート拡張機能「Stylus」がブラウザに導入されている必要があります。

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先を参照ください。「Stylus」の導入と基本的な使用方法を纏めているので、まず使用ブラウザに適合した「Stylus」を導入をしてください。 既に「Stylus」を導入している場合は、この作業は不要です。


❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Writer (Chrome)」「Excite Blog Writer (Firefox)」が登録されています。 これらは、このページのアレンジ内容で ver.7.3 に更新済です。
以下のリンク先を選択して、ブラウザに適合するスタイルを入手してください。

Excite Blog Writer(Chrome) --- More拡張 ver.7.3
Excite Blog Writer (Firefox) --- More拡張 ver.7.3
〔注意〕
上記リンクで「userstyles.org」の「Excite Blog Writer」のページが開きます。
「Excite Blog Writer」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

但し、スタイルの「インストールスイッチ」に見える、まぎらわしい「ダウンロードスイッチ」があるので注意してください。 無関係で困ったアプリのインストールは必ず避けてください。




この記事はカテゴリ「ブログ」にトラックバックしています。


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

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

2018年 08月 02日

デザインの定まらない「おすすめブログテーマ」


エキサイト編集画面で「おすすめブログテーマ」は、全く無い時期もあれば、季節に合わせて突然に表示されたりします。 今まで、この表示の割り込みでアレンジデザインが崩れ、何度も対策をして来ました。 さすがに崩れ難くなりましたが...

以下は今期の様子ですが、右下にテーマ投入が開始された事を教えるために、小さな通知枠が表示され、テーマ表示の一部が見えています。 これは、一応設計の通りです。

a0349576_17450007.png

マウスを乗せると、中身が全て表示されるデザインでしたが、実際は以下の様に右が切れてます。

a0349576_17491013.png

今回は2個のテーマを投入して来た上に、サイズも横に大きくなり、従来のデザインではその全てを表示できなくなっているのです。 アレンジをOFFにして、今回の「おすすめブログテーマ」の全体を見ると、下の様に大きなものです。

a0349576_17515185.png

こんな大サイズの表示にも対応できる様に、フォバー時の表示を編集画面上に持って来る事にしました。 また、今回のテーマは「padding-top」を指定されていて、通知枠の隅に追いやられています。 こういう問題にも対応する事に。

下は、新しいアレンジの通知枠の状態で、通知枠いっぱいにテーマが表示されています。

a0349576_18003060.png

マウスを乗せた時は、下の様にハーフトーンの背景がせり上がり、中央に「おすすめブログテーマ」が表示されます。 これだけ余裕があれば、隠れる事はないでしょう。

a0349576_18033960.png

以上の改善内容で、IE11版のスタイルシートを「IE11版 - More拡張 ver.7.3」に更新しました。



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


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




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


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

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

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: 0s;
z-index: 2; }

#trb_themeTtl {
margin: 0 !important; }

#trb_themeTtl div {
padding-top: 0 !important; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover {
left: 0;
max-height: 300px;
height: 300px;
max-width: 100vw;
width: calc(100vw - 33px);
min-width: 927px;
background: rgba(96, 125, 125, 0.4);
border-color: transparent;
transition: max-height 0.5s;
z-index: 6; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover #trb_themeTtl div {
padding-top: 15px !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; }
*/


/*

チェッカー オプション */
/*
.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; }
*/

/* 「h2 h3 h4」と「pre」の編集枠内表示 */
#_entryContent h2,
#_moreEntryContent h2,
#_entryContent h3,
#_moreEntryContent h3,
#_entryContent h4,
#_moreEntryContent h4 {
font-size: 1em !important;
font-weight: bold !important; }

#_entryContent h2 span,
#_moreEntryContent h2 span,
#_entryContent h3 span,
#_moreEntryContent h3 span,
#_entryContent h4 span,
#_moreEntryContent h4 span {
padding-top: 0.12em !important; }

#_entryContent pre,
#_moreEntryContent pre {
font-size: 1em !important;
font-family: inherit !important; }




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

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

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





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

価格.comを見るなら「Kakakuom Viewer」なんちゃって

2018年 07月 28日

暗背景に対応した「Kakakucom Viewer」


眼の疲れを意識すると、刺激性の少ない画面デザインを求める様になります。 その観点から「Kakakukom Viewer」を明るさを少し落とした配色にするオプションを追加しました。 また、アレンジを通じて点検して行くと「縁側」がSSL化していました。 昨今SSL導入が遅れる大型サイトが問題になっていますが、価格.comもそのひとつです。 巨大なシステムは小回りが利かないのでしょう。

下は「暗背景オプション」を設定した「Kakakukom Viewer」の画面です。 白黒の反転まではできない(後述)のでグレーに輝度を落とした配色になっています。 この配色はデフォルトとなり、暗背景オプションを無効にすると従来の明背景になります。

a0349576_16422457.png

下は画像ビューアの様子です。

a0349576_16421558.png

ウインドウ幅を740pxに抑えていること、「縁側」のページにも対応している点が、新しい「930」タイプとの違いです。


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


最新の「Kakakucom Viewer ver.2018.07.23」は 16セクションの構成です。

セクション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

セクション14 掲示板 コメント枠可変オプション

セクション15 暗背景オプション「レビュー」「クチコミ」画面のみ

セクション16 背景色指定チュートリアル


●「セクション3」「セクション14」「セクション15」はオプションです。
●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 スタイル編集画面でセクションの適用先を変更して「保存」を押すと、オプションの「有効/無効」が反映されます。
●「Kakakucom Viewer」の導入手順は、このページの最後を参照ください。



いちから作りなおした「Kakakucom Viewer 930」


暗背景対応でこれまでの「Kakakukom Viewer」を見直して、コードが入り混ざって整理されていない印象を強く感じました。 価格.comは大編成のページ構成で、テーマランドが幾つも組み合わさった様な印象です。 とても全部を調べ尽くせず、こんなページ、あんなページとアレンジを継ぎ足していく内に、共通化出来るコードを何度も書いていたり、しだいに雑然さが不満になって来ました。

で、これまでの「Kakakukom Viewer」の反省を踏まえ、新しいビューアーを最初から造りなおしました。

● 従来は740px幅に縮小していたが、新しいものは930pxのままアレンジする。
● サイドバーを削除せずに生かす。(少し煩いが有用な情報もある)
● Table表のリストをスクロール化する必要が無くなり、表は見易くなった。
● アレンジ目的は、眼に優しい表示とする事に重きを置く。(明配色なし)
● 対応ページの拡張を考慮し、コードを整理して、共用化を心がける。

価格.comは930pxのページ幅を基準としているので、幅縮小作業が省けた点は楽でした。 その代わり、背景の輝度を落とす配色を全面に適応したので、全てのパーツをそれに最適化する作業が主になりました。

価格.comはユーザーのアバター、各種マーク、タイトルなどにグラフィックを多用しています。 試されると判りますが、これが足枷になり黒背景等の反転アレンジが困難です。 このことから、白色背景の輝度を落としてグレー化するというアレンジに落ち着きました。 しかし背景配色の変更は、各種の矩形枠の表示で様々な問題を引き起します。

角を丸めた矩形表示は、全てグラフィックパーツで行う旧い方式です。 下は意図的に構成パーツを離して表示していますが、赤枠のパーツが全てグラフィックです。

a0349576_16520349.png

これらのパーツは、矩形枠内の背景色を変更すると、そぐわない状態になります。 配色アレンジでそれらはほぼ使いものにならず、グラフィックを非表示とし、「border-radius」「overflow: hidden」で描き改める必要がありました。

背景指定がない枠も多く、濃い背景が露出して文字が読めなくなります。 それらは適当な背景色の指定で済む場合が多い。 ただ、枠内に白背景を前提のグラフィックがある場合、背景をグレーにするとミスマッチで苦労します。 まあ、体裁を納得できる範囲にするには、相当の艱難辛苦があります。


デザインの概観


各ページの幅は930px基準です。 背景は濃い藍色、殆どのパネル色はグレーか淡いグレーを使っています。 コメント欄の文字色は読み難くなるのを防ぐために、完全な黒としてコントラストを稼ぎました。

a0349576_16510876.png

明らかに不要なADは省き、ページに関連した製品情報は残しています。

下は、コメント添付の画像を開くページで、元の白背景に比べると見易いと思います。 このページは930px幅に合わせるため、本来より少し画像が小さくなっています。(必要なら拡大表示が使えますから)

a0349576_16545715.png

下はテーブルを使用した表があるページで、表の幅はそのままのサイズです。

a0349576_16553142.png

主要な掲示板と並ぶページ以外では、現在のところ「白熱スレッドランキング」「マイページ」を930px幅アレンジとして追加しています。

a0349576_16560821.png
a0349576_16563865.png

コードを整理したくてここまで来ましたが、740px幅の初代はサイドメニューを省いた潔さが好ましく感じます。 ウインドウ幅を狭めるとサイドバーが消えるアレンジもあるなぁと、改めて考えてしまいます。

とりあえず使える様になったので、今後の拡張や修正を前提でアップロードします。


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


Kakakucom Viewer 930 ver.2018.07.28」は 12セクションの構成です。

セクション1 価格.COM 全ページ共通

セクション2 タブ画面(レビュー・クチコミ以外の全て)

セクション3 レビュー タブ画面

セクション4 クチコミ タブ画面

セクション5 画像ビューア画面 

セクション6 コメント・レビュー・ピックアップリスト 作成画面

セクション7 プロフィール画面

セクション8 掲示板・レビュー 総合ページ

セクション9 外部リンクへ移動時の警告画面

セクション10 マイページ

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

セクション12 PHOTOHITO



Kakakucom Viewer / Kakakucom Viewer 930 を使用するには


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


ウェブページのアレンジには、拡張機能(アドオン)の「Stylus」が必要です。 これは、Chrome用とFirefox用があり、使用中のブラウザに合わせて導入します。

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


➁ Kakakucom Viewer / Kakakucom Viewer 930 をインストール


「userstyles.org」はスタイル投稿サイトです。 私はこのサイトに「Kakakucom Viewer」や「Kakakucom Viewer 930」を登録しています。 これらのスタイルは Chrome版 / Firefox版 どちらの「Stylus」でも使用出来ます。
必要なビューアを以下のリンク先のぺージでインストールしてください。 比較のために両方のビューアをインスールする事は問題ありませんが、同時使用はデザイン崩れを生じる場合があります。「Stylus」でどちらか一方のみを有効にして使用してください。

  「userstyles.org」 Kakakucom Viewer (Chrome/Firefox)
  「userstyles.org」 Kakakucom Viewer 930 (Chrome/Firefox)

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




この記事はカテゴリ「コンピュータ」にトラックバックしています。



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

価格.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)