Studio TA Subsite の案内とお知らせ

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

エキサイト編集画面のアレンジ(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 テンプレート・フリーページ編集対応 2018.02.15 */

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"] + div[class*="campaign"] {
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"] + div[class*="campaign"]: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行編集アイコン ワイド 表示オプション」
「おすすめブログテーマ 非表示オプション」
「お知らせリスト 非表示オプション」
「キャンペーン枠 非表示オプション」
「みんなの投稿 非表示オプション」

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







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



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

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

2018年 02月 15日

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


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

a0349576_20024637.png

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

a0349576_20100809.png

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

a0349576_20135930.png

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

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

a0349576_20353278.gif




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


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


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

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

CSS:

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

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


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

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

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

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

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

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





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

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

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


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

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


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


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


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


 Excite Blog Writer のインストール 

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

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


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

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

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

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

a0349576_16304400.png

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

a0349576_16312253.png


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


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



 Excite Blog Writer の扱いについて 

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

a0349576_20185946.png

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


 Stylus管理画面 の リスト操作 

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

a0349576_20371229.png

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


 Excite Blog Writer の セクション 

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

a0349576_22211165.png

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


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

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

a0349576_10105589.png

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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





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



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

「ブログ内検索」機能についてのあれこれ / エキサイトブログ

2018年 02月 01日

「ブログ内検索」は特別な検索


この検索機能は、ブログにアップロードした個々のユーザーの投稿データのみを対象範囲にできます。 これが一般のブラウザ検索と全く異なる点です。「ブログ内検索」の機能はブログのメンテナンスには欠かせない大事な機能です。 気になる事について、自分の過去の記事を探す時にも必要です。 エキサイトのブログシステムは、この機能をしっかり備えています。



「ブログ内検索」について気付いた事


ファイル更新日時が表示される


「Stylist」というChrome拡張機能が配布中止になりました。 私は「Stylist」を複数の記事で紹介していたので、それらに「入手不能の但し書き」をする事にしました。「ブログ内検索」で関連記事を拾い出し再編集をしたのですが、その過程で「興味深い仕様」に気付きました。

下図は、「Stylist」でブログ内検索をしたところです。 この画面は、前ページのアレンジを施していますが、未アレンジでも同内容で、
●赤枠のタイムスタンプが再編集をした日時になっている
●検索結果はこの日時の順に並んでいる
という、ブログの他所では決して見られない内容が表示されています。

a0349576_16441883.png

ブロク設定の「記事一覧」、サイドメニューの「カテゴリの一覧表示」「投稿年月別の一覧」、ブログ自体も含め、色々な場合に「投稿日時」が表示され、一覧はその順に並びます。 その「日時」は常に記事の編集画面の「投稿日時」で設定したものです。

ところが「ブログ内検索」の「日時」だけは、最後に編集をした「日時」が表示されます。 つまりここだけ「ファイル更新日時」が表示されるのです。

また上図を見て判る様に、検索結果はこの「ファイル更新日時」順に並びます。 ブログ上では昔の日付で並ぶ記事が、再編集した事で先頭に出て来たわけです。 上側の2件がそうですが、それ以外の件は再編集をしていないので、本来の並びです。 この仕様は、投稿の再編集の履歴を推測する手がかりとして利用が可能でしょう。


訪問済のリンク


下図は上と同じページですが、ピンク枠で示したのは「訪問済」で暗赤に着色されたリンクです。

a0349576_17411050.png

この着色はブラウザの履歴機能を元に演出されます。「未訪問」「訪問済」の着色の有無、その色や文字デザインなど、全てがページのスキンで変更可能ですが、ここの色はChromeのデフォルトのままです。

注意が要るのは、着色したリンクは「ブログ内検索」のページの履歴で「訪問済」だという事です。 ブログ内検索と無関係に同じページを「訪問」していても、このページのリンクは着色されません。 一方、「ブログ内検索」のページで一旦リンクを押して「訪問済」になると、全く他の事で「ブログ内検索」をした場合もその履歴が残っていて着色されます。

この着色による標識も、ブログのメンテナンスの場合などに「既チェック」の標識として利用出来るでしょう。 但し、そういう作業の前には、過去の「訪問済」の履歴をリセットしておく必要があります。


訪問済リンクの履歴をリセット


Chrome に対して「Ctrl + Shift + Delete」を押します。 下の様なダイアログが開くので、適当な履歴の時間的範囲、履歴内容を選択して、履歴の削除を実行します。

a0349576_19080009.png

この操作で先の「訪問済」の標識がリセットされ、「ブログ内検索」の全てのリンクが、下図の様に「未訪問」の状態になります。

a0349576_19104198.png




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



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

「ブログ内検索」の検索ページをアレンジ / エキサイトブログ

2018年 01月 31日

SSL移行の部分的な未完状態


エキサイトブログのSSL移行の過程と思われますが、現在「ブログ内検索」の結果リストのページが、スキンレスの状態となっています。

a0349576_14301591.png

上図の様にCSS修飾が無い「素」の表示で、実用上も見難く扱い難い状態です。 これは「https://」で表示したもので、従来の「http://」での表示は以下の様なデザインです。

a0349576_14315337.png

2月下旬の移行完了時には「素」の表示は改善されると思いますが、ユーザースタイルシートでこちらの好みにアレンジして、SSL移行後もそのスタイルを使おうと考えました。 移行に際してHtmlの変更があれば、作ったスタイルの修正が必要になりますが、たいした構成でもないので気軽にアレンジしてみました。



アレンジ後のデザイン


ページ上部のヘッダー部や最下部のフッター部は、実際に利用した事がありません。 ネット全体の検索はブラウザの検索窓を使用しますが、このデフォルトのデザインは画面上に余計な検索窓が存在します。 ブログ内検索のページは、ユーザーが迷わない様にシンプルが一番です。

下は「https://」の表示にアレンジスタイルを適用した状態で、Stylusアイコンが「有効」を示しています。

a0349576_14321657.png

検索結果は1ページに11件ずつ表示されますが、各件の左肩に「01~11」の番号を表示しました。 残念ながらページを変えるとリセットされ、これは全件の通し番号ではありません。 しかし、リストの1件ずつを修正する時には、終了した件をこの番号で確認出来ます。

他に、フォントを少し大きくしたり、各件の内容「タイトル」「登録日時」「タグ」「本文」の配置やインデントなど、リストとしての見易さを考慮しました。



スタイルを手作業で Stylus に登録する


このアレンジスタイルは、SSL移行後に修正が必要となるかも知れず、「userstyles.org」への登録は控えました。 手作業でのスタイル登録になりますが、コードは簡単です。


① ウェブページのアレンジする拡張機能「Stylus」を導入


●Chrome を使用している場合は、下のページから拡張機能「Stylus」の導入します。

●Firefox を使用している場合は、下のページから拡張機能「Stylus」の導入します。

➁ アレンジスタイルを「Stylus」に登録する


Chrome / Firefox で、「Stylus」の表示や機能は全く同じです。
「Stylus」の「管理画面」から「新スタイルを作成」を押して、下図の「スタイルを追加」(スタイル編集画面)を表示させます。

a0349576_20082684.png

「スタイル名」は適当で良いのですが、上図は「Excite Search inside My Blog」としています。

「適用先」の指定は以下に設定します。
   「 次で始まるURL 」=「 https://www.exblog.jp/search/

「CSSコード」は、以下のコードをコピーペーストで記入します。



/* 2018.02.01 Excite Search inside My Blog */

body {
margin: 0; }

#exHeaderWrapper {
display: none; }

center form > table {
position: absolute;
top: 0;
width: 100%;
text-align: center;
padding: 1em;
background: #E1F5FE; }

#query {
height: 2em;
font-size: medium;
padding: .2em 1em 0.1em;
border-radius: 4px;
border: 1px solid #aaa; }

.excite_submitButton {
background: url(//s.eximg.jp/exblog/user2/img/header/btn-search-white.png?1516773691) center top no-repeat;
margin-left: -44px;
margin-bottom: 4px;
height: 22px;
width: 33px;
outline: none;
border: 0;
vertical-align: bottom; }

center form > table font {
font-size: medium !important; }


/* 検索結果 全ページ 目次 */
#rh {
position: relative;
top: 3.2em;
display: flex;
width: 100%;
background: #ECEFF1;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
font-size: 14px; }

#rh > * {
padding: 5px 10px 4px;
white-space: nowrap; }

#rh .r-period {
font-weight: normal !important; }


/* 検索結果 各ページ 内容 */
#resultsBody {
position: absolute;
top: 12em;
margin: 1em;
font-size: 14px; }


/* スポンサーリンク */
.ss_info {
display: none; }

.ss_link {
display: none; }


/* 検索リスト */
#resultsBody ul {
overflow: hidden;
padding-left: 2.2em; }

#resultsBody li {
list-style-type: decimal-leading-zero;
position: relative;
margin-bottom: 1em;
background: #ECEFF1; }

#resultsBody li h3 {
position: absolute;
top: 0.6em;
padding: 0 1em;
margin: 0;
text-align: left;
white-space: nowrap; }

#resultsBody li h3 a {
text-decoration: none; }

#resultsBody li .c {
padding: 4em 3em 0.4em;
text-align: left; }

#resultsBody li .t {
position: absolute;
top: 2.4em;
left: 11em;
color: transparent;
white-space: nowrap; }

#resultsBody li .t span {
color: #000;
font-weight: bold; }

#resultsBody li .t span a {
text-decoration: none;
font-weight: bold; }

#resultsBody li .b {
position: absolute;
top: 2.4em;
left: 1.2em; }

#resultsBody li .b span:first-child {
display: none; }

#resultsBody li cite {
display: none; }


/* 検索結果 ページ送り */
#wrapper + div > table {
position: absolute;
top: 9em;
width: 100%;
padding-left: 1.1em; }

#wrapper + div > table td > font {
color: transparent; }

#wrapper + div > table td > a {
background: #2196F3;
padding: 2px 15px 1px;
border: 1px solid #fff;
border-radius: 6px;
color: #fff;
text-decoration: none;
box-shadow: 2px 2px 4px #00000040; }


/* フッター */
#exFooterWrapper {
display: none; }




上記の書き込みを確認して「保存」を押します。

以上の手順で「Excite Search inside My Blog」のスタイル名で、検索ページのアレンジスタイルが登録されます。 このスタイルは「Stylus」で常時ONでも構わないでしょう。 自分のブログ内の検索をSSL環境で行った時だけに、このスタイルが適用されます。




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



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

エキサイト「SSL」への移行は 2018年2月21日

2018年 01月 27日

エキサイト SSL 移行スケジュール


いよいよエキサイトのSSL移行の期日が発表されました。

発表から移行までの1ヵ月の期間は、「ユーザーに対して」与えられた移行に関する準備期間です。 移行後に対処しても取返しの付かない事はなさそうですが、早めに上記ページの注意ポイントだけはチェックするのがベターと思います。

私なりに要点を纏めると、

明らかにチェックを要するもの
●投稿文やスキン上(アレンジしている場合)に書き込まれた「http://」のリンクが問題になりうる。
●「外部リンクによって表示している表示物」や「動作させている機能」で「http://」のリンクで引いて来ている要素が、表示されなくなったり機能しなくなったりする。

おそらく問題の生じないもの
●単なる外部リンク、これまでのエキサイト内のリンク、自己ブログ記事内のリンク、は「http://」であっても無問題。 メニュー上の「フォロー」「外部リンク」、記事中の「リッチリンク」なども。
●「YouTube」は2014年7月にSSL移行しているので、それより後の記事は当然問題ないはずですが、それ以前に記事に埋め込んだ、つまり動画URLが「http://」の動画も問題が無い様です。 意図的に動画リンクのURLを「http://」に書き換えても問題なく動画が表示され、これは「YouTube」側のリダイレクト処理の結果らしい。



SSL状態の自ブログをチェック


現在は、非SSL、SSL、の両方のURLで自ブログをチェック出来ます。 上記ページの説明通り「https://」への書き換えをして、SSL状態の自ブログをチェックして見ました。 後で説明しますが、これは簡単な「非SSLチェッカー」を使っています。

a0349576_11204617.png

以前は「SSL」以前の状態でチェックしていたので、それに比べるとずい分と「赤」が減ったというのが実感です。 エキサイトヘッダーの「マイブログ」は気にする必要はないでしょう。 上図のページ上にはリンク2個を「http://」で書き込んでいたのでチェックが付いてます。 しかし、こういうリンクは無問題のはずです。 ただ、上記はフリーページ(看板ページ)なので、気になるので「https://」表記に書き換えました。

同ページの下方にスクロールすると、メニューの「フォロー中のブログ」「外部リンク」が全てチェックされます。

a0349576_11320045.png

これらは単なるリンクで無問題です。「フォロー中のブログ」はSSL移行後に、再フォローすれば皆んなチェックが消えるはずですが、その手間の必要はないと思います。 また「Excite外部のリンク」は、リンク対象が非SSLなら「http://」とせざるを得ず、それが駄目という事はあり得ない話ですね。

上図は「リッチリンク」が2個あり、下側はチェックされています。 HTML編集で調べると自ブログ内記事へのリッチリンクですが、昔に設置した物で記述が「http://」になっていました。 これも、単なるリンクで無問題と思いますが、「https://」に書き換えて善処しました。

まあ、チェックされる部分は「気持ちの問題」という無問題の場合が殆どです。



非SSLチェッカーについて


スキンアレンジをしたり、特別な機能をページで使用しているユーザーは、「見落とし」ている問題がないか、SSL化前に自ブログをチェックをすると確実でしょう。 変わった事をしていないユーザーは、こんなチェックの必要は無いと思います。

「非SSLチェッカー」の詳細は、以下のリンク先を参照ください。
このチェッカーは、ユーザースタイルシートの機能を使用しています。

●Chrome を使用している場合は、下のページから拡張機能「Stylus」の導入します。

●Firefox を使用している場合は、下のページから拡張機能「Stylus」の導入します。

●IEの場合は、以下のページの手順を参照ください。



Stylusでのチェッカー登録


Chrome / Firefox で、「Stylus」の表示や機能は全く同じです。

「Stylus」の「管理画面」から「新スタイルを作成」を押して、下図の「スタイルを追加」(スタイル編集画面)を表示させます。

a0349576_15135485.png

❶「スタイル名」は適当で良いのですが、上図は「非SSLチェッカー」と記入しています。

❷「CSSコード」は、以下のコードをコピーペーストで記入します。


/* SSL非対応リンクチェッカー */

a[href^="http://"] {
background: red !important;
border: 1px solid red !important; }

img[src^="http://"] {
border: 3px solid red !important; }



❸ 上記の書き込みをして「保存」を押します。

以上の手順で「非SSLチェッカー」のスタイル名で、チェッカーが登録されます。
「Stylus」でこのスタイルをOFFとしない限り、ブラウザが表示する全サイトで「非SSLリンク」が「赤背景」で表示されます。

〔注意〕
● 登録後は即ブラウザの表示にこのチェッカーが反映します。 平常の場合は「Stylus」でこのスタイルをOFFとしてください。
● 自ブログをチェックする場合、「https://」でアクセスした自ブログでチェックしないと意味がありません。




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



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

エキサイト編集画面のアレンジ(76) 編集の終了確認画面の修復

2018年 01月 26日

編集の終了確認画面


編集画面から「公開」や「下書き保存」を押すと、編集後データの送信を確認する下の様な画面が表示されます。

a0349576_14380223.png

この状態は、既に編集画面ページから移動していますが、編集画面と共通のセレクタが多く、編集画面の適用先を厳密にしないと、このページの表示に影響が出ます。 そこで「エキサイト編集画面のアレンジ(37)」から、このページを積極的にアレンジするセクションを設けています。

下図はアレンジが適用された状態です。

a0349576_14494124.png

このページは、エキサイトからの告知版の意味があり、それらを漏れなく表示するアレンジとしています。



修飾タイミングの遅れ


この画面の表示で、少し美しくない一瞬が気になっていました。 下はこのページが表示される最初の瞬間です。

a0349576_14570852.png

これは、1秒も経たない内に、下の様にアレンジ通りの表示になります。

a0349576_14582211.png

この様な修飾の遅延は、色々とコードを触って改善を試みるのが近道と思っています。 少し調べると、下の要素の修飾が遅れている事が判りました。

「div#result.mb10」の「padding」「background」

a0349576_15075907.png

「div.message」の下「margin」

a0349576_15082845.png

これらの指定は私のアレンジではなく、既成のエキサイトのCSSに含まれる指定です。 あれっと思いアレンジOFFとして良く見ると、元々からこの表示崩れが生じています。 まあ、アレンジが原因ではないですが、気に入らない以上、これを改善しました。



アレンジコードで明示的に指定するだけで改善


ユーザースタイルシートはエキサイトCSSより表示上で優先されます。 従って、編集画面のアレンジCSSは、エキサイトCSSの適応遅れと無関係です。 この理由で、遅れる修飾内容を、アレンジCSSで明示的に指定してやると、一瞬の崩れが無くなりました。 また、ついでに背景色の表示に「transition」を指定して、「マイブログ」ボタンを目立たせる演出をしました。 使い慣れたユーザーには不要な演出ですが。

以下は、このページのアレンジコードで、太字は今回追加した部分です。
(登録形式はStylusを基本にしています)

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

セクションのCSS:


/* 編集終了画面CSS */

#result {
padding: 20px;
transition: background-color .5s; }

#result .message {
margin-bottom: 15px; }


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



「userstyles.org」に登録した、「Excite Blog Writer (Chrome)」「Excite Blog Writer (Firefox)」の内容は、このアレンジを追記して更新しています。
(下記スタイルの使用にはStylusの導入が必要です)




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


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

スキン「レインボー」の惜しい部分をアレンジ

2018年 01月 21日
いつも拝見しているページで、タイトル部分が非常に気になるスキンがあります。 このブログ主、細かい背景のズレなんか気にしてないって感じ。 ブログ内容が豊富で、そんな些細な事にかまってないところがまたカッコイイんですが、見るたびにタイトルに目が行くので...

で、ついスキンアレンジをしてしまう。 きっと彼の耳には届かないだろうけど。



時代を感じさせるスキン


このスキンは、未だ「border-radius」「box-shadow」等のCSS修飾機能が流布しない時代のスキンで、タイトル背景には「画像」が使われてます。 デザイン自体は個性的で愛用している方を他でも見ます。

タイトル文字数が少ない場合、綺麗に背景の枠に収まります。

a0349576_10092282.png

しかしタイトルが複数行の場合、下の様に背景枠からはみだして残念です。 背景の画像サイズが変わらないので仕方がありません。

a0349576_11224241.png

また、タイトルが背景に対して左に偏っています。 これは、投稿日付を右側に入れる案が途中で中止になった結果らしく、気になる部分です。



勝手にCSSアレンジ


タイトル枠の背景を、最近のCSSで描画する様にアレンジしてやれば、複数行のタイトルなら背景枠もそれに応じて自動的に拡がる様に出来ます。

アレンジ前
a0349576_10242747.png

アレンジ後
a0349576_10254933.png

背景のタイトル枠は、本来の「画像」をなるべく忠実に真似たCSSによる描画です。

上の例は、たまたまタイトル文字数が元スキンのタイトル幅にぴったりで、アレンジ前は2行目がキリ良く「~」で始まってます。 アレンジ後の方は「~」が1行目に廻り、逆に悪くなった様ですが、これは偶然です。 タイトル中にスペースを入れる等で行送りを調節して来た場合は、このアレンジで狂いが生じますが、そうでないなら、多くの場合で行送りは良い方に結果するでしょう。(これまでの投稿も含めてです)

下は良い結果の例です。

アレンジ前
a0349576_10352401.png

アレンジ後
a0349576_10361158.png

エキサイトのスキンは、タイトル文字はユーザーの意図で改行出来ません。 このアレンジで、タイトルの一列の文字数が増えます。 また、左右のバランスが改善されると思います。



CSSコード


スキンをアレンジするには、ブログ設定の「デザイン設定」の「PCデザイン設定」でスキン編集を行う必要があります。 エキサイトのスキンは「HTML」「CSS」のセットになっています。 その「CSS」の末尾に以下のアレンジCSSを追記すれば、ブログページの表示がアレンジされます。

タイトル枠背景のアレンジCSS


DIV.POST_HEAD {
padding: 0;
margin-bottom: 50px;
overflow: visible; }

.POST_HEAD table {
position: relative;
top: 10px;
left: 10px;
width: 550px;
padding: 15px !important;
background: #fff; }

.POST_HEAD tbody {
display: block;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
border-radius: 8px;
background: #f9f9f9;
box-shadow: inset 2px 2px 4px #ccc; }

.POST_HEAD td:first-child {
width: 100%; }

.POST_HEAD h2 {
margin: 10px 30px 8px; }




(注意)
同じスキン「レインボー」で、他の配色を利用している場合は、枠周囲の配色が異なるものがあります。その場合は、上のコードの色指定の部分を変更すれば使えます。 他配色が必要な方がおられましたら、コメントください。

スキンアレンジが初めての場合、CSSを書き換えても上手く反映しない事があります。 以下のページの手順を参照ください。




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



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

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

2018年 01月 11日

Chrome版 - More拡張 ver.6.3 の更新内容


ver.6.3 の更新内容は、微修正です。
今年に入ってから気付いたのですが、アイコンの表示が本来のアレンジとは異なって来ていました。

a0349576_18425336.png

本来のデザインは下で、赤枠の5個のアイコンが違っています。

a0349576_18430490.png

殆どのアイコンは「FontAwesome」などの文字を擬似要素「::before」で表示させていますが、問題の5個のみは擬似要素「::after」で更に文字を重ねて表示しています。 この「::after」で表示させた文字の配置指定が、何らかの理由でズレてしまった様です。 IE11版、Firefox版も同様のアレンジをしていますが、ズレの発生はChromeのみで、ブラウザかOSで何かの仕様変更があったのかも知れません。

いずれにせよ、修正版の「ver.6.3」を「userstyles.org」にアップロードしました。



さて、すでにお気付きの方もおられると思いますが、エキサイトブログのシステムのSSL化が進んでいる様です。 これは未だ完全ではなく、公表もされていませんが。

ブログの「設定」画面に入ると、ブラウザのURL窓には「 http://userconf.exblog.jp/config/basic/ 」が表示されます。 これを「 https://userconf.exblog.jp/config/basic/ 」と「s」を追加して「Enter」を押すと、同じ「設定画面」が表示されます。 つまり、後者の「https://」のアドレスが既に有効になっているのです。 以前はそうではありませんでした。

a0349576_19290521.png

調べると、ブログ編集画面も既に「S」付きで表示できますが、画像パレットが以前のまま「http://」で呼び込んでいる様で、ChromeでもIE11でも「安全な接続」とは表示されません。 SSL環境が完成すれば公表があるはずで、ユーザーサイドで慌てる必要はない話ですが。

ただ、「S」付きのアドレスで編集画面を開く事が出来る様になると、Stylusの「適用先アドレス」を改めないとアレンジが適用されなくなります。 そこで、従来の適用先アドレスに「S」付きアドレスを併記して、SSL移行期に対応しました。 移行後には適用先アドレスの「S」無しのアドレス分は不要になりますが、そのまま放置しても問題はありません。

以上、More拡張 - ver.6.3 以降の適用先指定は、当分は「SSL」「非SSL」の併記になります。



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

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

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


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

Chromeで以下のリンクをクリックし、Chrome拡張機能の管理サイトの「Stylus」のページを開きます。

下図のページが表示されたら、ページ上の「 CHROMEに追加」を押します。

a0349576_14023058.png

下の様に確認のダイアログが出て「拡張機能を追加」を押すと、Chromeのツールバーの右端に「Stylusアイコン」が出来ます。

a0349576_16290744.png

ページがStylusのサイトに変わりますが、これで導入は完了です。 アイコンが出来たら自分のページに戻ります。
「Stylusアイコン」を左クリックして、メニューの「管理」を押します。 これが「Stylus」へのアクセス方法です。

a0349576_10482222.png

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

a0349576_19100672.png


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

次に「userstyles.org」から「Excite Blog Writer(Chrome)」のスタイルをインストールします。 このスタイルの中身は「Chrome版-More拡張」で、このスタイル名は登録する際のパッケージ名です。 このサイトに登録されているのは、常に「Excite Blog Writer / Chrome版-More拡張」の最新版です。

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


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

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

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

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

a0349576_16304400.png

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

a0349576_16312253.png



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

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

a0349576_20185946.png

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


 Stylus管理画面 の リスト操作 

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

a0349576_20371229.png

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


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

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

a0349576_22211165.png

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


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

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

a0349576_10105589.png

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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




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


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

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

2017年 12月 13日

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


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

a0349576_14345397.png

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


アレンジ可能な環境


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



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


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

a0349576_14405994.png

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

a0349576_14444739.png
a0349576_14450276.png

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

a0349576_15253956.png

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



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


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

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

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


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

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

  スタイルの入手先


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

a0349576_05251455.png

「コード2」は Firefox用の修正コードです。 Firefoxで新着表示ボタン上の文字位置が少し下寄りになるのを修正します。(修正なしでも実用上の問題はありません)


〔追記〕2018.01.04
Chrome / Firefox 版に「コード3」として、「非スクロール時新着表示をヘッダー部に表示するオプション」を追加し、これを標準デザインとしました。 本来の位置に表示させたい場合は、「コード3」の適用先を「正規表現に一致するURL」などに変更して「保存」を押してください。

新オプション追加後は以下の様に、「ヘッダー」あるいは「フロートヘッダー」に新着表示が表示されます。

a0349576_15054496.png


アレンジの実装方法 IE11 


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

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

〔 基本CSS 〕


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

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

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

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


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


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


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


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

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




〔追記〕2018.01.04
Chrome / Firefox版 と同様に、「ヘッダー」あるいは「フロートヘッダー」に新着表示が表示される様に改めました。
上記のコードは改正済みです。





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


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

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

2017年 12月 09日

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


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

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

a0349576_19430005.png

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

a0349576_19431664.png

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

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

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

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



「Stylus」の導入


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

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


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



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


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

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



セクション1


「適用先」

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

「CSSコード1」

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

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

#exFooterWrapper {
display: none; }

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

#toUserconf,
#csEnquete {
display: none; }


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


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

td.drop_invalid:nth-child(1) {
position: absolute; }

td.drop_invalid:nth-child(1) > :not(.capacity) {
display: none; }

td.drop_invalid:nth-child(1) > .capacity {
position: absolute;
top: 60px;
left: 700px;
width: 120px;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 3px; }

td.drop_invalid:nth-child(1) > .capacity > div > font {
color: #eee; }


/* 編集画面ベース 中央部 */
td.drop_invalid:nth-child(2) {
width: auto !important;
display: block;
padding-left: 15px !important; }


/* トラバ枠の削除 */
td.drop_invalid:nth-child(2) > form > table:last-of-type {
display: none; }


/* *** */
#entry_header {
display: none; }

#template {
position: absolute;
top: 20px;
left: 700px;
height: 24px;
width: 90px;
padding: 4px 4px 0px !important;
overflow: hidden;
transition: 0.5s; }

#template:hover {
left: 170px;
height: auto;
width: 620px;
padding: 8px 10px 0px !important;
background: #fff !important;
box-shadow: 2px 2px 12px rgba(140, 140, 140, 0.5);
z-index: 91; }

#template_names {
overflow: hidden; }

#template_names > span {
display: block;
text-align: left;
margin: 0px 20px 6px;
width: 100%;
white-space: nowrap; }

span.tmp a,
span.st {
font-size: medium;
text-decoration: none; }

span:not(.tmp) {
text-align: right !important; }

#template_names input {
width: 90px !important;
height: 23px !important;
margin: 0 6px; }


/* *** */
#subject {
position: absolute;
top: 15px;
padding: 0 !important; }

#subject_title {
display: none; }

#subject_content > input {
width: 639px !important;
height: 23px;
padding: 3px 15px 0px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }


/* *** */
#category {
position: absolute;
top: 55px;
padding: 0 !important; }

#category_title {
display: none; }

#CateStr > select {
height: 23px;
font-size: inherit;
padding: 1px 0 0 !important;
border: 1px solid #ccc;
border-radius: 3px; }

#CateStr input[value="カテゴリ設定"] {
width: 85px !important;
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }


/* *** */
#tags {
position: absolute;
top: 55px;
left: 288px;
width: 450px;
padding: 0 !important; }

#tags_title {
width: 32px !important;
padding: 5px 0 0;
display: none; }

#tags_content > .tag {
width: 138px !important; }

#tags_content > .tag > input {
width: 116px !important;
height: 19px;
font-size: inherit;
padding: 2px 0 0 4px !important;
border: 1px solid #ccc;
border-radius: 3px; }

#tags_content > .tag > a {
width: 10px !important;
height: 10px !important;
border-radius: 10px;
text-decoration: none;
background: none; }

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

#tags_attention {
display: none; }


/* タグリストの幅拡大 公開設定の上に表示 */
body > #exHeaderWrapper ~ div[style*="width: 122px"]:last-child {
position: relative;
width: 162px !important;
z-index: 90; }

body > #exHeaderWrapper ~ div[style*="width: 122px"]:last-child > div {
width: 150px;
padding: 0 6px 0; }


/* *** */
#entryoption {
position: absolute;
top: 85px;
left: 15px;
width: 110px;
height: 23px;
overflow: hidden;
margin: 0px !important;
padding: 10px 0 10px !important;
transition: 0.5s;
z-index: 2; }

#entryoption:hover {
width: 695px; }

#entryoption_title {
display: none; }

#entryoption > .entryoption_menu {
height: 19px;
padding: 5px 4px 0;
margin: 0px 2px 15px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#entryoption > .entryoption_menu input {
margin: -3px -3px 0 0 !important; }

#entryoption > .entryoption_menu:nth-child(n+3) {
width: 125px;
overflow: hidden;
transition: 0.5s; }

#entryoption > .entryoption_menu:nth-child(n+3):hover {
width: 150px; }


/* *** */
#cdcdcd {
display: none; }


/* *** */
#entrydate {
position: absolute;
top: 85px;
left: 140px;
height: 26px;
width: 200px;
overflow: hidden;
margin: 0;
padding: 10px 0 10px !important;
transition: width 0s 1s;
z-index: 2; }

#entrydate:hover {
width: 550px;
transition: width 0s; }

#entrydate > div {
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#entrydate > div:nth-child(1) {
float: left;
height: 19px;
padding: 5px 0 0 6px;
margin: 0 0 15px !important;
width: 180px; }

#entrydate_content {
margin: 0 0 0 -20px; }

#entrydate_content > input {
margin: -4px 0 0;
vertical-align: middle; }

#entrydate > div:nth-child(2) {
float: left;
padding: 1px 0 1px 10px;
margin: 0 2px 0 !important;
width: 315px; }

#entrydate_setting > select {
height: 22px !important;
border: 1px solid #ccc; }

#entrydate_setting > select::-ms-expand {
height: 12px !important;
border: none !important;
background: none !important; }


/* *** */
#entryopen {
position: absolute;
top: 95px;
left: 345px;
height: 24px;
width: 200px;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6;
transition: width 0.5s;
z-index: 1; }

#entryopen_content > input {
vertical-align: middle;
margin: -4px 0 0 8px; }

#entryopen:hover {
width: 340px; }

#entryopen_title {
display: none; }

#entryopen_content {
text-align: left; }

#entryopen_content > input {
vertical-align: middle;
margin: 6px 0px 9px 8px; }


/* *** */
#ping_form {
position: absolute;
top: 95px;
left: 558px;
height: 21px;
width: 106px;
overflow: hidden;
margin: 0;
padding: 3px 0 0 20px !important;
border: 1px solid #eee;
border-radius: 3px;
background: #b7d3e6; }

#ping_form > label {
line-height: 22px; }

#ping_form > input {
position: absolute;
top: 3px;
left: 2px; }


/* 文書編集部 */
#entrymenu {
position: absolute;
top: 135px;
width: 660px; }

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }


/* アイコン基本デザイン */
#usehtml > a {
text-decoration: none;
width: 21px;
height: 21px;
margin: 0 0 0 4px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff !important; }

#usehtml > br {
display: none; }


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* *** */

/* 新パレットが下に表示されるバグ回避 */
#colorPallet {
z-index: 101 !important; }

#colorPallet > .curve-head,
#colorPallet > .curve-head > div,
#colorPallet > .curve-body,
#colorPallet > .curve-body > .curve-body_left,
#colorPallet > .curve-bottom,
#colorPallet > .curve-bottom > div {
background: none !important; }

#colorPallet {
border: 1px solid #777;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 12px rgba(140, 140, 140, 0.5); }


/* *** */
#no_html {
padding: 2px 6px 0px 2px;
border: 1px solid #fff;
border-radius: 3px;
height: 20px; }

#no_html > label {
vertical-align: 1px; }

#no_html > input[value="プレビュー"] {
display: none; }


/* *** */

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


/* 編集枠のtableを指定
編集枠の高さ位置 */
#entrymenu + table {
width: 100%;
margin-top: 150px !important; }


/* ★編集枠縦幅の指定 */
textarea#content {
position: relative;
width: 100% !important;
min-height: 440px !important;
font-size: medium;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


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

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

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


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

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

#morehtml span.HELP {
display: none; }


/* More時の文書編集枠以下の高さ調整 */
textarea#morecontent {
width: 100% !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 29px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


/* *** */
#upload {
display: none; }

#imageframe {
display: none !important; }

#upfile_list {
display: none; }

#upload_notes {
display: none; }


/* *** */

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

input[value="プレビュー"] {
width: 100px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%, #eee 100%) !important; }

input[value="送信"] {
width: 150px;
height: 26px;
padding: 3px 0 0;
background: linear-gradient(to bottom, #fff 0%, #B3E5FC 100%) !important; }


/* *** */

/* 画像パレットベース */
td.drop_invalid:nth-child(2) + td > div {
margin: -5px 10px 0 10px !important; }

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

#preview {
margin-top: 6px !important;
height: 466px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border-radius: 3px !important; }

.image_info {
float: left;
width: 154px;
height: 126px;
padding: 0 !important;
margin: 10px 4px 0;
background: #fff;
border: 3px solid #fff !important;
overflow: hidden; }

.preview_img_top {
padding: 0 !important;
margin: 0 !important;
background: none !important;
width: 100% !important; }

.preview_img {
float: none !important;
opacity: 1 !important;
width: auto !important;
height: 104px;
border: none !important; }

.preview_img:hover {
box-sizing: border-box;
border: 3px solid #000 !important; }


/* *** */
.pos_select {
margin-top: -4px;
white-space: nowrap; }

.pos_select td:nth-child(1):before {
content: "<";
display: block;
margin: 0px 0px -18px -8px; }

.pos_select td:nth-child(3):after {
content: ">";
display: block;
margin: -15px 0px -2px 21px; }

.pos_select td:nth-child(4):after {
content: "×";
font-size: 18px;
font-weight: bold; }

.delete_icon {
float: none !important;
height: 12px;
margin: 8px -18px 0 30px !important;
opacity: 0; }

.pos_select tr:last-child {
display: none; }


/* *** */
#template,
input[value="カテゴリ設定"],
.mt5,
input[value="プレビュー"],
input[value="送信"] {
border: solid 1px #aaa !important;
border-radius: 3px !important;
text-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
box-sizing: border-box;
background: linear-gradient(to bottom, #fff 0%, #ddd 100%); }


/* フォント指定 */
* {
font-family: "メイリオ", "Meiryo" !important; }


/* 背景色指定 */
#entryoption,
#entrydate,
body {
background-color: #98c1dc !important; }





セクション2


「適用先」

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

「CSSコード2」

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


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

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

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

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

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

#media_ct {
display: flex; }

#media_ct div {
width: 120px; }

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





セクション3


「適用先」

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

「CSSコード3」

Firefox拡張

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


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

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


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

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

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

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


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

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

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

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

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







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


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

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

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




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


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