Studio TA Subsite の案内とお知らせ

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

2016年 09月 22日
エキサイト編集画面のアレンジ環境が Firefoxでも使える様になりました。 Chrome上でバージョンを重ねて来たMore拡張のスタイルシートは、大きな手を加える事なくFirefoxに移植出来ました。 バージョンは機能がChrome ver.5 と同等なので、初版ですがver.5としています。

ユーザースタイルシートの環境として、Firefox拡張機能の「Stylus」を使用します。 拡張機能は「Stylish」でも全く同様に動作します。(ページの最後を参照ください)



 編集画面のフェイス 

下図はアレンジされたブログの編集画面です。 細かな説明は過去のChrome版のページを参照ください。 元画面の編集に必要な機能を全て、コンパクトな画面に無駄なく収めています。

a0349576_20280593.png

下図は、テンプレート編集画面です。 上と似ていますが、テンプレート編集のために省略されたスイッチと追加されたスイッチがあります。

a0349576_20302911.png

下図は、フリーページ編集画面です。 上段も編集枠下側も通常の編集画面とかなり異なった構成です。

a0349576_20372522.png



 Stylusの導入とスタイルの登録手順 

この編集画面のアレンジは「Firefox」と拡張機能「Stylus」を利用して実現します。「Stylus」の導入は簡単で、設定方法は以下のリンク先で説明しています。



「Firefox版 - More拡張 ver.5」は、最大で6個のスタイルを「Stylus」に登録します。
下図は「Stylus」のスタイル編集画面ですが、各CSSをコピーしてこの編集画面に貼り付けます。

a0349576_12444987.png

CSSによって適用先の指定(上図の)が異なります。 CSSごとに ❶❷❸ の指定を明記していますので、間違わずにスタイル登録を行ってください。

登録するスタイル名は「基本CSS」「画像パレットCSS」「テンプレート編集CSS」「フリーページ編集CSS」「オプションCSS」「編集終了画面CSS」で、全てを登録すると以下の様になります。

a0349576_22435332.png



 スタイルデータ 

「Firefox版 - More拡張 ver.5」のスタイルデータです。 特にURLのコビーは、「」の内側だけをコピーし、余計な半角空白等が混ざらない様に注意してください。

スタイル名 : 基本CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます



/* Firefox版-More拡張 ver.5 基本CSS 2017.09.20 */

body.win input {
height: 28px;
padding: 3px 10px 0;
line-height: 28px;
box-shadow: none; }

body.win input[type=radio],
body.win input[type=checkbox] {
margin: 0 5px 2px 0;
width: 13px; } /* Fox 追加 */

body.win select {
height: 28px;
padding: 3px 5px 0;
font-size: 1.3rem;
-moz-appearance: none; } /* Fox 追加 */

body.win label {
height: 28px;
line-height: 28px; }


#wrapper {
min-width: 960px;
max-width: 1500px;
min-height: 0;
margin-bottom: 5px;
background: none; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }



/* 編集画面ベース */

#container.hasmenu {
margin: 0;
float: none; }

.alert.alert-green.csEnqueteLink {
display: none; }

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px; /* 編集枠左余裕 画像パレット 右余裕 */
background: #fbfbfb;
border: none;
border-radius: 0; }

header.boxHead {
display: none; }



/* テンプレート選択 */

#entryTemplateList {
position: absolute;
top: 15px;
left: 938px;
padding: 0 !important;
border: none !important; }

#entryTemplateList::before { /* Fox 追加項 */
content: "\f0d7";
font-family: FontAwesome;
color: #000;
position: absolute;
padding: 6px 5px;
background: aliceblue;
border: 1px solid #ccc;
border-radius: 3px; }

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 20px;
height: 28px;
padding: 4px 0 0;
font-size:13px;
box-shadow: none;
opacity: 0; } /* Fox 追加 */

#entryTemplateList select:focus {
left: -400px;
width: 420px;
padding: 4px 15px;
z-index: 3;
opacity: 1; } /* Fox 追加 */



/* 編集アラート */

.alert.alert-red {
position: absolute;
width: 300px;
padding: 2px 14px 0;
font-size: medium; }



/* 本文タイトル */

#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 300px;
font-size: medium;
transition: 0.5s;
z-index: 2; }

#entryEditTitle:hover {
width: 928px; }

#entryEditTitle :focus {
position: relative;
width: 928px;
background: #fff; }

#entryEditTitle input {
padding: 4px 10px 0; }

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



/* おすすめブログテーマ */

#trb_themeTtl {
position: absolute;
top: 714px;
left: 850px;
margin: 0;
padding: 2px 0 2px 8px;
height: 36px;
width: 69px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
transition: 0.5s; }

#trb_themeTtl:hover {
top: 670px;
left: 700px;
height: 74px;
width: 207px;
padding: 5px 10px; }



/* カテゴリ */

#entryEditCategory {
position: absolute;
top: 15px;
left: 310px; }

#entryEditCategory select {
position: absolute;
width: 140px;
font-size:13px;
padding: 3px 5px 0; } /* Fox 修正 */

#entryEditCategory select:hover {
width: 180px;
z-index: 1; }

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

#entryBlogCategoryDialog.btn input {
width: 28px;
font-size: 13px;
font-weight: normal;
text-indent: -61px;
padding: 1px 10px 0px; } /* Fox 修正 */



/* タグ */

#entryEditTags {
position: absolute;
top: 15px;
left: 490px; }

#entryEditTags .entryElement {
display: flex; }

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

#entryEditTags span.tags input {
width: 130px;
font-size: 13px; }

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

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

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

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

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

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

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



/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
overflow: visible;
margin: 56px 180px 0px 0px;
padding: 0; }

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

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

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

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

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

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

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

#new_icon {
display: none !important; }



/* 編集部 */

#_entryContent , #entryContent ,
#_moreEntryContent , #moreEntryContent { /* 文書編集枠基本設定*/
position: relative;
background: #fbfbfb;
line-height: 150%;
margin: 0;
font-size: medium;
border-radius: 3px; }

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

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

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

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

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;
height: 28px;
width: 74px;
margin: 15px 0 0;
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

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

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

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

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

input#moreEntrySubject {
font-size: medium;
height: 28px;
padding: 3px 10px 0px;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0; }



/* 下部整理 1 */

#entryOptions {
position: absolute;
bottom: 0;
left: 110px;
width: 110px;
margin: 0;
height: 28px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
transition: 0.5s;
z-index: 4; }

#entryOptions:hover {
width: 820px; }

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

#entryOptions .optionGroup {
line-height: 28px; }

#entryOptions .optionGroup label {
font-size: 13px;
margin: 0 0 7px;
padding: 0 5px; }

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

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



/* トラックバック枠 */

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

#entryTrackbackTextarea {
position: relative;
width: 79px;
margin: 0 0 0 740px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
background: #fbfbfb;
box-shadow: none;
border: 1px solid #ccc;
border-radius: 3px;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

#entryTrackbackTextarea:hover {
width: 819px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

#entryTrackbackTextarea:focus {
height: 58px;
width: 819px;
margin: 0;
padding: 5px 0 0 150px;
z-index: 4; }

.notesBoxHead {
position: absolute;
bottom: 45px;
left: -110px;
line-height: 28px;
padding: 5px 20px 0 150px;
width: calc(100% + 110px);
background: rgba(58, 135, 173, 0.2); }

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

.notesInner {
position: absolute;
bottom: 45px;
left: 250px;
padding: 7px 0 5px;
font-weight: bold; }



/* 画像パレット */

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

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



/* 下部整理2 */

#entryOptionsPstdate {
position: absolute;
top: 683px;
left: 245px;
width: 214px;
margin: 0;
padding: 0 10px 0;
white-space: nowrap;
overflow: hidden;
border: none;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 3; }

#entryOptionsPstdate:hover {
width: 682px; }

#entryOptionsPstdate span {
line-height: 32px;
margin-right: -20px; }

#entryPstdateElement select {
font-size: 13px;
min-width: 20px;
width: 70px; }

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

#entryPstdateElement option:nth-child(1) {
display: none; }


#entryOptionsPpenflag {
position: absolute;
top: 683px;
left: 480px;
width: 210px;
margin: 0;
padding: 0 0 0 20px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 2; }

#entryOptionsPpenflag:hover {
width: 446px; }

#entryOptionsPpenflag span {
line-height: 32px;
margin-right: -20px; }



/* サブミットボタン・メニュー */

#entrySubmitBtm {
border: none;
padding: 0;
margin: 15px 0 0 25px;
max-width: 1130px; }

#entrySubmitBtm .btn {
height: 30px; }

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

#entrySubmitBtm input {
line-height: 31px;
padding: 0px !important; }

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

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


#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 120px;
bottom: 0;
width: calc(6.8em + 23px);
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%,#b0eae0 100%); }

#myblogBtn:hover {
background: #8cf3f3; }

#myblogBtn a {
line-height: 27px;
padding: 0 5px;
color: #333;
text-shadow: none; }

#exFooterWrapper {
display: none; }



/* アイコン・ボタンの輪郭線と背景色 */

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



/* 編集アイコン配置・デザイン FontAwesome */

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px; }

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

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px; }

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

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px; }

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

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px; }

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

#exbtn_link {
top: initial;
bottom: 5px;
left: 523px; }

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

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px; }

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

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px; }

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

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px; }

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

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px; }

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

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px; }

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

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

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px; }

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

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px; }

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

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px; }

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

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px; }

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

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px; }

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

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px; }

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

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px; }

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

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

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px; }

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

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

#exbtn_hr {
top: initial;
bottom: 32px;
left: 483px; }

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

#exbtn_hr::after {
content: "_";
font: 24px /12px Tahoma;
position: relative;
top: -30px; /* Fox 修正 */
left: 4px; } /* Fox 修正 */

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 601px; }

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

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 575px; }

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

#exbtn_instagram {
top: initial;
bottom: 5px;
left: 549px; }

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

#exbtn_map {
top: initial;
bottom: 5px;
left: 627px; }

#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; /* Fox 修正 */
left: 1px; /* Fox 修正 */
white-space: nowrap; }

#exbtn_genre {
top: initial;
bottom: 5px;
left: 653px; }

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

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 679px; }

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

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 438px; }

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

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

#exbtn_undo {
top: initial;
bottom: 5px;
left: 464px; }

#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: -17px; /* Fox 修正 */
left: 2px; } /* Fox 修正 */

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

#exbtn_redo {
top: initial;
bottom: 5px;
left: 490px; }

#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: -17px; /* Fox 修正 */
left: 10px; } /* Fox 修正 */

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

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background:#ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

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

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


#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0;
padding: 2px 2px 0px 2px;
height: 19px;
width: auto;
font-size: 13px;
color: blue;
text-align: center;
background: white;
border: 1px solid #ccc;
border-radius: 3px; }



/* キャンペーン枠・みんなの投稿枠・お知らせリスト */

.campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%); }

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

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


#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 0 30px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%); }

#blog2media .boxHead {
display: block; }

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

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


#announceList {
position: absolute;
top: 726px;
margin: 0 0 0 60px;
padding: 0;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%); }

#announceList ul li {
margin: 10px 30px; }

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

#announceList:hover {
top: initial;
bottom: 0;
margin: 0 0 0 0;
padding: 30px 0 10px;
max-width: none;
width: calc(100% - 212px);
max-height: 300px;
transition: max-height 1s;
z-index: 5; }



/* 背景色デザイン */

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background: #a4c1ce; } /* 編集画面 背景色 */






スタイル名 : 画像パレットCSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/parts/image/
以下の枠内のCSSコードを貼り付けます



/* Firefox版 ver.5 画像パレットCSS 2017.09.20 */

#partsImage #droppable {
font-size: 13px;
margin: 5px 5px 10px;
color: #fff;
background: #459bc5;
box-shadow: none; }

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

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

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

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

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

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

#search .optionGroup select {
position: absolute;
left: 5px;
padding: 0 15px 0 10px; /* Fox 追加 */
height: 28px; /* Fox 追加 */
width: 120px; /* Fox 追加 */
-moz-appearance: none; } /* Fox 追加 */

#partsImage .optionGroup::before { /* Fox 追加項 */
content: "\f0d7";
font-family: FontAwesome;
position: absolute;
right: 50px;
top: 167px;
height: 0px;
z-index: 1; }


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

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

#partsImageContainer input {
position: relative;
left: 53px; }

#partsImageContainer input[type=submit][value="×"]:hover {
background: red;
color: #fff;
font-weight: bold; }

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

#partsImage .pager {
margin: 0; }

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

#partsImage .alert {
margin: 0; }






スタイル名 : テンプレート編集CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/template/
以下の枠内のCSSコードを貼り付けます

「テンプレート作成・編集」を行わない場合は、この「テンプレート編集CSS」を登録する必要はありません。 この登録は「テンプレート作成」画面の一部の表示崩れを修正するものです。



/* Firefox版 ver.5 テンプレート編集CSS 2017.09.20 */

#editTemplateList {
position: absolute;
top: 15px;
left: 575px;
height: 28px;
width: 510px;
padding: 0 !important;
border: none !important;
background: none; }

#editTemplateList select {
position: absolute;
left: 400px;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none;
opacity: 0; } /* Fox 追加 */

#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3;
opacity: 1; } /* Fox 追加 */

#editTemplateList::before { /* Fox 追加項 */
content: "\f0d7";
font-family: FontAwesome;
color: #000;
position: absolute;
padding: 6px 6px;
background: aliceblue;
border: 1px solid #ccc;
border-radius: 3px;
left: 400px; }


#editTemplateList .fR {
width: 80px;
height: 28px;
border-radius: 3px; }

#editTemplateList .fR:hover {
width: 160px;
position: relative;
z-index: 3; }

#editTemplateList .fR a {
padding: 3px 2px; }

#entryEditTmpTitle {
position: absolute;
top: 15px;
left: 938px;
z-index: 1; }

#entryEditTmpTitle :hover {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle :focus {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle .alert {
position: absolute;
right: 0px;
z-index: -1; }

.alert.alert-green {
position: absolute;
top: 10px;
z-index: 5; }



#sidemenu {
display: none; }


#entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px;
background: none; }

#entryTrackbackTextarea {
margin: 0 0 0 420px;
width: calc(100% - 420px);
padding: 5px 0 0 20px; }

#entryTrackbackTextarea:hover {
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }

textarea#entryTrackbackTextarea:focus {
height: 80px;
width: 100%;
margin: 0;
padding: 5px 0 0 150px; }






スタイル名 : フリーページ編集CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/fp/
以下の枠内のCSSコードを貼り付けます

「フリーページの作成・編集」を行わない場合は、この「フリーページ編集CSS」を登録する必要はありません。 この登録は「フリーページ編集画面」の一部の表示崩れを修正するものです。



/* Firefox版 ver.5 フリーページ編集CSS 2017.09.20 */

#entryEditHead-new tr:first-child td {
position: absolute;
left: 700px;
top: 10px; }

#entryEditHead-new tr:last-child td:first-child {
position: absolute;
left: 600px;
top: 15px; }

#entryEditHead-new tr:last-child {
position: absolute;
left: 310px;
top: 15px;
background: #fff;
height: 26px;
padding: 0 0 0 5px;
border: 1px solid #ccc;
border-radius: 3px; }

#entryEditHead-new .linkPath {
white-space: nowrap;
overflow: hidden;
display: inline-block;
width: 278px;
text-align: right; }

#entryEditCategory {
position: absolute;
left: 285px;
top: -1px;
width: 98px; }

#entryEditCategory input {
font-weight: bold; }

#entryEditCategory .alert {
left: 205px; }


#entryOptionsPpenflag {
position: absolute;
bottom: initial;
top: 683px;
left: 5px;
width: 350px !important; }

#entrySubmitBtm {
margin: 15px 0 0 230px; }

#announceList {
display: none; }

#myblogBtn {
display: none; }






スタイル名 : オプションCSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます

「2行編集アイコン 表示オプション」は、省略した編集アイコンを基本アイコンの上側の行に表示して、使える様にします。「おすすめブログテーマ 非表示」は、この機能ボタンが表示されない様にします。 不要なオプションは、項ごと削除してください。 またオプションがすべて不要の場合は、この「オプションCSS」を登録する必要はありません。



/* Firefox版 ver.5 オプションCSS 2017.09.20 */

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

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


/* おすすめブログテーマ 非表示 */

#trb_themeTtl {
display: none; }







スタイル名 : 編集終了画面CSS
適応先 :「次で始まる URL」=「http://userconf.exblog.jp/entry/complete/
以下の枠内のCSSコードを貼り付けます

編集終了時に「マイブログへ」等のスイッチがある「編集終了画面」が表示されます。 この登録は、その画面の表示崩れを修正するものです。 この崩れを気にしない場合は「編集終了画面CSS」を登録する必要はありません。



/* Firefox版 ver.5 編集終了画面CSS 2017.09.20 */

.url a {
font-size: medium;
padding: 4px 40px 2px;
border: 1px solid #aaa;
border-radius: 3px;
color: #335c6f;
background: linear-gradient(to bottom, #e2f2f9 0%,#a5c2cf 100%);
text-decoration: none; }

.url a:hover {
background: #a3d7ef; }

#wrapperInner {
padding: 15px; }

.notesInner {
position: static; }

.notesBoxHead {
position: static;
padding: 0 10px;
width: auto;
background: none; }

.notesBoxHead h1::before {
content: none; }

#menu {
display: none; }






基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を指定しています。 ここのカラーコードを変更すれば、簡単に好みの背景色に設定できます。 また、背景色の代わりにテクスチャー画像を使用することが可能です。 手順は以下のページを参考にしてください。

また、編集画面の各部ごとの背景色の詳細については、以下のページを参考にしてください。


配色の設定変更の指定は「基本CSSの末尾」か「オプションCSS」に追記します。 画像パレット部の配色変更の指定は「画像パレットCSS末尾」に追記してください。


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

「Stylus」では、編集画面の起動時に、画像パレットのみアレンジされません。「年月の選択」を一度切り替えるか、画像を登録を一度すると、以降はアレンジが適応されます。 これだけが現在解決できない問題点です。 今後、改善を追及したいと思っています。

「Stylish」の現在のバージョンは、Firefox拡張の「旧型」扱いですが、現状は問題なく動作します。 適応先の指定は、手書きで「Mozilla Format」で書き込み登録する形になります。 しかし、こちらは「Stylus」の問題が発生しません。 商用化問題と拡張機能の新しい基準でない事を厭わないなら、良い環境と言えます。

また「Stylish」にはこの問題が無く、「Stylus」が β版なので、今後に問題が改善される可能性は有り得ます。



〔追記〕2017.09.20
「おすすめブログテーマ」を最下段右へ移動。 画像パレットにボーダー。 「公開」ボタン群」の配置修正と、横移動範囲の限定。その他の小修正。 上記のCSSは更新済です。


[PR]
by Ataron2 | 2016-09-22 22:50 | ブログ編集画面のアレンジ | Trackback | Comments(0)
トラックバックURL : http://ataron.exblog.jp/tb/237750316
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
名前
URL
削除用パスワード

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