More拡張 ver.3 以降の一番の更新部分は、編集アイコンのフォント描画で実現した事です。 デザイン上の工夫で「全ての編集アイコン」と「タグ選択ボタン」をスプライト画像からフォントによる描画に改めました。 フォントはエキサイトが標準で使用するWebフォント「FontAwesome」を利用しています。 これで編集画面からスプライト画像に依存する部分がなくなり、アレンジした明瞭なアイコンを標準実装して提供できる様になりました。
また、デザインアレンジと同時にアイコンの配置を改め、アイコン列の右方向への増長を少し改善しています。 編集アイコンは、以下のハードコピーを参照ください。
またこの ver.4 は、IE11版とデザイン上での均質化を進めました。 Chrome版の「タイトル」「カテゴリ」「タブ」の列は、画像パレットがアレンジ出来なかったver.2までの窮屈な配置のままでした。 IE11版はこの部分のバランスが良く、Chrome版もそれに統一しました。 同時に、編集枠下部の投稿オプションスイッチ群の配置も同様にしています。 これは、投稿再編集時の最小ウインドウ幅で、「タブ枠」「画像パレット」「トラックバック枠」の右辺が並ぶ配置です。
+
この編集画面のアレンジは「Chrome」と拡張機能「Stylist」を利用して実現します。「Stylist」の導入は簡単で、設定方法は以下のリンク先に説明しています。
「Chrome版 - More拡張 ver.4」は、CSSによってURL指定(下図の
➁)が異なります。 このページの各CSSごとに指定した
①➁➂ を Stylistに貼り付けて、4個のスタイルを登録してください。
登録は上図の例の様に、「基本CSS」「画像パレットCSS」「テンプレート補正CSS」「オプションCSS」の順に登録します。
「テンプレート補正CSS」「オプションCSS」は、後方の順でなければ無効になります。
+
①スタイル名 :
基本CSS
➁適応URL :「
regexp」=「
//userconf.exblog.jp/entry/ 」
➂以下の枠内のCSSコードを貼り付けます
/* Chrome版 - More拡張 ver.4 2017.08.24 */
body.win input {
height: 28px;
padding: 3px 10px 0px;
box-shadow: none; }
body.win select {
height: 28px;
padding: 3px 5px 0px;
font-size: 1.3rem; }
body.win label {
height: 28px;
line-height: 30px; }
#wrapper {
min-width: 960px;
max-width: 1500px;
min-height: 0;
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 select {
position: absolute;
min-width: 10px;
width: 20px;
height: 28px;
padding: 4px 0 0;
font-size:13px;
box-shadow: none; }
#entryTemplateList select:focus {
left: -400px;
width: 420px;
padding: 4px 15px;
z-index: 3; }
/* 編集アラート */
.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: 5px;
left: 972px;
margin: 0;
padding: 5px 0;
height: 40px;
width: 50px;
overflow: hidden;
transition: 0.5s;
z-index: 2; }
#trb_themeTtl:hover {
left: 638px;
width: 342px;
padding: 5px 20px;
background: #fff;
box-shadow: 0px 2px 2px #aaa; }
/* カテゴリ */
#entryEditCategory {
position: absolute;
top: 15px;
left: 310px; }
#entryEditCategory select {
position: absolute;
width: 140px;
font-size:13px;
padding: 4px 5px 0; }
#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: 2px 10px 0px; }
/* タグ */
#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: 43px !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: 450px;
z-index: 1; }
#entryMoreText .alert {
top: 45px;
left: 435px;
z-index: 1; }
/* More部 */
#more.w100 {
display: block;
height: 28px;
width: 74px;
margin: 15px 0px 15px;
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }
#notmore.w100 {
position: absolute;
top: 627px;
height: 28px;
width: 74px;
margin: 0;
background: linear-gradient(to bottom, #FFF9C4 0%,#FFD54F 100%); }
#more.w100 span , #notmore.w100 span {
padding: 2px 0px 0px;
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;
top: 613px;
left: 110px;
width: 110px;
margin: 0;
padding: 12px 0px 10px;
height: 32px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
transition: 0.5s;
z-index: 4; }
#entryOptions:hover {
width: 100vw; }
#entryOptions .head-h3 {
display: none; }
#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: relative;
margin: -57px 0 5px 110px;
padding: 14px 0 10px; }
#entryTrackbackTextarea {
position: relative;
width: 80px;
margin: 0 0 0 740px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
box-shadow: none;
border: 1px solid #aaa;
border-radius: 4px;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }
textarea#entryTrackbackTextarea:hover {
width: 820px;
margin: 0;
padding-left: 150px;
z-index: 4; }
textarea#entryTrackbackTextarea:focus {
height: 48px;
width: 820px;
margin: 0 0 -20px;
padding-left: 150px;
z-index: 4; }
.notesBoxHead {
position: absolute;
top: -35px;
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;
top: -35px;
left: 250px;
padding: 7px 0 5px;
font-weight: bold; }
/* 画像パレット */
#entryEditIframe {
position: absolute;
top: 56px;
right: 16px;
width: 165px; /* 画像パレット右余裕 */
z-index: 2; }
#entryEditIframe iframe {
width: 165px;
height: 612px; }
/* 下部整理2 */
#entryOptionsPstdate {
position: absolute;
top: 669px;
left: 245px;
width: 214px;
margin: 0;
padding: 14px 10px 8px;
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: 669px;
left: 480px;
width: 210px;
margin: 0;
padding: 14px 0 8px 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: 0 0 25px 80px; }
#entrySubmitBtm .btn {
margin-top: 5px;
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: 25px;
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: 0px;
left: -11px; }
#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: -8px;
left: -18px; }
#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: -2px;
left: -21px;
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: 2px;
left: -20px; }
#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: 2px;
left: -11px; }
#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 25px 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 20px 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 25px 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 20px 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: 731px;
margin: 0 0 25px 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 20px 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 :「
regexp」=「
//userconf.exblog.jp/parts/image/ 」
➂以下の枠内のCSSコードを貼り付けます
/* 画像パレット ver.4 2017.08.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;
height: 30px; }
#partsImageContainer {
overflow-y: scroll;
margin: 0 5px 10px;
height: 356px; }
#partsImageContainer li {
margin: 0;
width: 132px;
height: 90px; }
#partsImageContainer li div input {
position: relative;
left: 53px; }
#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 :「
regexp」=「
//userconf.exblog.jp/entry/template/ 」
➂以下の枠内のCSSコードを貼り付けます
「テンプレート作成・編集」を行わない場合は、この「テンプレート補正CSS」を登録する必要はありません。 この登録は「テンプレート作成」画面の一部の表示崩れを修正するものです。
/* More拡張 テンプレート補正 ver.4 2017.08.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; }
#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3; }
#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; }
#sidemenu {
display: none; }
#entryTrackback .boxHead.head-h3 {
display: block;
margin: 5px 0 -38px;
background: none;
position: relative;
z-index: 1; }
#entryTrackbackTextarea {
height: 40px;
min-height: 40px;
margin: 0;
width: 100%;
padding-left: 150px;
background: #fbfbfb;
box-shadow: none; }
textarea#entryTrackbackTextarea:hover {
width: 100%; }
textarea#entryTrackbackTextarea:focus {
height: 60px;
width: 100%; }
①スタイル名 :
オプションCSS
➁適応URL :「
regexp」=「
//userconf.exblog.jp/entry/ 」
➂以下の枠内のCSSコードを貼り付けます
各「表示オプション」「非表示オプション」の必要な項のみを残し、他は行ごと削除します。 また、オプションが不要の場合は、この「オプションCSS」を登録する必要はありません。
/* Chrome版 - More拡張 オプションCSS ver.4 2017.08.20 */
/* 2行編集アイコン ワイド 表示オプション */
#_panel:hover {
height: 75px;
margin-top: -75px;
transition-delay: 0.2s; }
/* お勧めブログテーマ 非表示オプション */
#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none; }
/* お知らせリスト 非表示 */
#announceList {
display: none; }
/* お知らせリスト 既読解除 */
#announceList .disNon {
display: block; }
/* キャンペーン 非表示 */
.campaign-container {
display: none; }
/* みんなの投稿 非表示 */
#blog2media {
display: none; }
/* トラックバック枠 非表示 */
#entryTrackback {
display: none; }
+
基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を指定しています。 ここのカラーコードを変更すれば、簡単に好みの背景色に設定できます。 また、背景色の代わりにテクスチャー画像を使用することが可能です。 手順は以下のページを参考にしてください。
また、編集画面の各部ごとの背景色の詳細については、以下のページを参考にしてください。
配色の設定変更の指定は「基本CSSの末尾」か「オプションCSS」に追記します。 画像パレット部の配色変更の指定は「画像パレットCSS末尾」に追記してください。
+
〔追記〕2017.08.23
「お知らせリスト」のボタンの編集開始時の初期配置を修正、基本CSSは修正済です。
〔追記〕2017.08.24
最下段のボタンデザインをIE11版に同調させました。基本CSSは修正済です。
+
この記事はカテゴリ「
スキン編集」にトラックバックしています。