Studio TA Subsite の案内とお知らせ

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

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

2019年 02月 02日

Chrome版 More拡張 ver.8.3 との整合


私が最初に編集画面のアレンジを始めた時は、IE11を主ブラウザとして使用していました。 その後、拡張機能が使えるChromeを導入し、自在にアレンジが出来る環境を手に入れました。 Chromeの開発機能 DevTools の扱い易さに感心する一方、IE11の開発機能 DOM Explorer は不具合が目立ち始め、現在はアレンジ環境として扱い難い状態です。

もはや、IE11のアレンジは中止したい位ですが、実は私自身にとってIE11版を手放しにくい理由があります。 それは、記事を編集する際に、改行入力がシンプルな「 <br> 」を生成するからです。 Chromeでは改行入力は「<div><br></div>」、記述行は「<div> ~ </div>」といった、ブロック構成のタグが生成されます。 ページ表示上は同じですが、Chromeの「div包み」は HTMLの見通しが悪く、つい消してしまう事もあります。

Chrome版 / Firefox版でアレンジ更新を行った場合は、IE11版も同内容の更新を行い、なるべく均一の環境を保つ様にして来ました。 しかし最近目立つ事は、IE11に新しいCSS機能のサポートが無く、Chrome版のコードが使えない問題です。 ver.8.3ではIE11が「focus-within」に非対応で、下部の投稿オプション群の改善が出来ませんでした。 それでも、使えないわけでは無いので、整合を保つ様にはしています。



IE11版 ver.8.3 の更新部分


● 目立つ部分は「トラックバック枠」のデザイン更新です。 従来はトラックバックを設定した場合に、URLが覗く窓といったデザインでしたが、これに「TrackBack」のキャプションを付けて、ボタンのデザインにしました。

a0349576_22274186.png

従来の通り、トラックバックを設定する際にはこのボタンを押すと、URLを書き込む編集枠の形になります。

a0349576_22274448.png

トラックバックの説明書は、IE11版のみ入力枠の上に表示する形にしています。

●「みんなの投稿」のポップアップ時の背景は、従来はデフォルトの「白」背景でしたが、「お知らせリスト」のポップアップに合わせて、ウインドウ背景色に改めました。

a0349576_22435347.png

このポップアップの中で、中央列の「投稿先」のボタン選択が見難くなったので、選択した場合に赤枠を表示する様に改めました。



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


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



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


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



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

/* 全体構成 *****************************************/
body.win input {
box-shadow: none !important; }

body.win input[type=radio],
body.win input[type=checkbox] {
margin: 0 5px 2px 0 !important; }

#wrapper {
min-width: 960px !important; /* 全体幅指定 */
max-width: 1500px !important;
min-height: 0 !important;
margin-bottom: 5px !important;
background: none !important; }



/* フッター・フロートアンケート
 この指定は、他の管理メニューでも非表示になります */

.global-footer {
display: none !important; }

.sticky-feedback {
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 #entry > #form {
min-width: 930px; }


/* テンプレート選択 ***********************************/
.page_entry #entryTemplateList {
position: absolute !important;
top: 15px !important;
left: 938px !important;
padding: 0 !important;
border: none !important; }

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 20px !important;
height: 28px !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 18px !important;
margin-left: -4px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#effaff 0%,#bce8f1 80%) !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 420px !important;
padding: 15px 15px !important; }


/* 編集アラート */
.page_entry .alert.alert-red {
position: absolute !important;
width: 300px !important;
padding: 2px 14px 0 !important;
font-size: medium !important; }


/* 本文タイトル **************************************/
.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important; }

.page_entry #entryEditHead-new th {
display: none !important; }

.page_entry #entryEditTitle {
position: absolute !important;
top: 15px !important;
width: 300px !important;
z-index: 1 !important;
transition: 0.5s !important; }

.page_entry #entryEditTitle:hover {
width: 928px !important; }

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 928px !important;
background: #fff !important; }

.page_entry #entryEditTitle input {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }

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


/* おすすめブログテーマ */
.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
bottom: -756px;
left: 850px;
margin: 0 !important;
padding: 0 !important;
max-height: 40px;
max-width: 77px;
background: #fff;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden !important;
transition: 0s;
z-index: 2; }

#trb_themeTtl {
margin: 0 !important; }

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

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

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover #trb_themeTtl div {
padding-top: 15px !important; }


/* カテゴリ */
.page_entry #entryEditCategory {
position: absolute !important;
top: 15px !important;
left: 310px !important; }

.page_entry #entryEditCategory select {
position: absolute !important;
width: 140px !important;
font-size:13px !important;
height: 28px !important;
padding: 4px 5px 0 !important;
text-shadow: none !important; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryEditCategory select:hover {
width: 180px !important;
z-index: 1; }

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

.page_entry #entryBlogCategoryDialog.btn input {
width: 28px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
text-indent: -61px !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }


/* タグ */
.page_entry #entryEditTags {
position: absolute !important;
width: 442px !important;
top: 15px !important;
left: 490px !important; }

.page_entry .entryElement {
display: flex !important; }

.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 15px 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; /* 読込み遅延対策 */
overflow: hidden;
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: 14px !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::after {
content: "TracBack";
position: absolute;
bottom: 2px;
left: 9px;
width: 68px;
font-size: 14px;
background: #fff;
pointer-events: none;
z-index: 1; }

.page_entry #entryTrackback header.boxHead.head-h3 {
display: block;
position: relative;
top: 15px;
left: -380px;
width: 459px;
border: 1px solid #ccc;
background: #eceff1;
height: 28px;
opacity: 0;
transition-delay: 0s;
z-index: -1; }

.page_entry #entryTrackback:hover header.boxHead.head-h3 {
opacity: 1;
z-index: 5;
transition-delay: 1s; }

.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 {
line-height: 17px !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: 679px !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; }


/* アイコン・ボタンの輪郭線と背景色 **********************/
#_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_webpushad {
top: auto !important;
bottom: 5px !important;
left: 705px !important; }

#exbtn_webpushad::before {
content: "\f0f3";
font: 15px /22px FontAwesome;
color: #ffaa00;
padding: 0 3px; }

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


/* カラーパレットのバー配色 */
#palletbar {
background: #eee; }


/* エモーティコンパレットの移動 */
#emojibar {
position: relative;
margin: 0 5px -15px 0 !important;
padding: 2px 0 0 !important;
height: 18px;
background: #eee; }



/* キャンペーン枠 ************************************/
.page_entry .campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0 !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%);
z-index: 5; }

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

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

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

.page_entry .campaign-container:hover::before {
content: ""; }

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


/* みんなの投稿枠 ************************************/
.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 0 45px !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%);
z-index: 5; }

.page_entry .entryRadioBtoM {
margin: 4px 8px 4px 4px !important; }

.page_entry .entryRadioBtoM#b2m_checked,
.page_entry .entryRadioBtoM:hover {
outline: 3px solid #f00; }

.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 #blog2media:hover::before {
content: ""; }


/* お知らせリスト ************************************/
.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; }

.page_entry #announceList:hover ul li::before {
content: ""; }

/* お知らせの文字 */
.page_entry .alert-blue a {
font-size: 16px;
padding-top: 12px;
color: #000 !important; }

/* ***********************************************/


/* テンプレート編集画面 *******************************/
#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: height 0s; }

.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;
transition: height .5s; }


.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 ,
#entry #blog2media:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */

body.win .dialogInner {
background: #fbfbfb !important; } /* ダイアログ 背景色 */



/* オプションコードは、ここより後方にペーストしてください ****/

/* ******************* オプション ********************/


/* 2行編集アイコン ワイド 表示オプション */
/*
#_panel:hover {
height: 75px !important;
margin-top: -75px !important;
transition-delay: 0.2s; }
*/


/* おすすめブログテーマ 非表示オプション */
/*
.page_entry entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none !important; }
*/


/* お知らせリスト 非表示オプション */
/*
#entry #announceList {
display: none !important; }
*/


/* キャンペーン枠 非表示オプション */
/*
.page_entry .campaign-container {
display: none !important; }
*/


/* みんなの投稿 非表示オプション */
/*
.page_entry #blog2media {
display: none !important; }
*/


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

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

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

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

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

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

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

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






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

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

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





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




by Ataron | 2019-02-02 23:13 | ブログスキンのアレンジ | Trackback | Comments(0)

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

2019年 01月 30日

配色管理にCSS変数を導入しました


今回の更新は表面上は大きな違いがありませんが、アレンジコードの全域に手が加えられています。「Excite Blog Writer」は、明背景と暗背景の2種のカラー設定を用意しています。

「Code 7」配色オプション ブルーグレー(明背景)を選択した場合
a0349576_20261617.png

「Code 8」配色オプション ダークグリーン(暗背景)を選択した場合
a0349576_20265967.png

しかし、もし好みの独自の配色をお望みなら、カラー設定のCodeを書換えることで、安全に細部に至るまで配色設定をアレンジできます。「CSS変数」は配色設定を一ヵ所で管理が出来るので、現在では多くのページのスタイル管理に利用されています。


CSS変数名の一覧


エキサイト編集画面の配色設定をするCSS変数名と指定対象は以下です。


【CSS変数名 と 指定対象】

--bgc1 全体背景
--bgc2 画像パレット背景色
--bgc3 入力枠文字の背景色
--bgc4 編集アイコンの背景色
--bgc5 本文編集枠の背景色
--bgc6 Moreタイトルの背景色
--bgc7 画像パレットのドロップボックス背景色
--bgc8 ダイアログの背景色

--col1 文字色 全体
--col2 文字色 画像パレットのドロップボックス内
--col3 文字色 ディマーキャプション(少し淡い文字)
--col4 文字色 公開ボタン
--col5 文字色 キャンペーン・みんなの投稿・お知らせリストのボタン
--col6 文字色 セレクトボックスのブルー反転行
--col7 文字色 トラックバック済の記事のURL表示

--btc1 ボタン カテゴリ・テンプレート・タグ(画面最上行のボタン)
--btc1h ボタン 画面最上行のボタンのフォバー
--btc2 ボタン More
--btc2h ボタン Moreフォバー
--btc3 ボタン notmore
--btc3h ボタン notmoreフォバー
--btc4 投稿時間指定オプション・画像パレットの年月選択オプション
--btc5 ボタン 選択された投稿オプション
--btc6 ボタン プレビュー・下書き
--btc6h ボタン プレビューフォバー・下書きフォバー
--btc7 ボタン 公開ボタン
--btc7h ボタン 公開ボタンフォバー
--btc8 ボタン マイブログ
--btc8h ボタン マイブログフォバー
--btc9 ボタン キャンペーン
--btc10 ボタン みんなの投稿
--btc11 ボタン お知らせリスト

--gsc パレットの画像サムネイルリストのフォバー時の枠色
--wrc 全体のボーダー線色
--wrcs 公開ボタンのボーダー線色


「Code 7」は明背景の色値をこれらの変数に代入するコード群です。「Code 8」は暗配色の色値を代入するコード群です。 これにならって独自の色値を代入する様に書換えれば、カスタマイズが出来ます。



投稿オプションのインターフェイスに「focus-within」を使用


編集枠下の投稿オプションのボタン群は、操作時にフォバー拡張するデザインでコンパクト化しています。 この方式はマウスポインタが離れると閉じるため、特に「時間設定」は扱い難さがありました。 今回、この部分に擬似クラス「focus-within」を使い、操作性が大変に改善しました。

a0349576_18150793.png

このコードは、操作でどれかのボタンにfocusがある間は拡張表示が閉じません。 ウインドウ内の他所をクリックするまではこれが続き、ポインターがボタンから離れても閉じないのです。 時刻設定で日付→時刻などとボタンを続けて押しても、Focusはこの部分に留まるために操作が中断されません。 このインターフェイスは、「投稿オプション」「時刻設定」「公開設定」の3者に導入しています。

Excite Blog Writer(Chrome)と Excite Blog Writer(Firefox)の両版で、以上の更新とブラシュアップを完了しました。 バージョン名は「More拡張 ver.8.3」になります。



Excite Blog Writer を使用するには


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

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先の「📌」マークの記事を参考にして、使用ブラウザに適合した「Stylus」を導入してください。 既に「Stylus」を導入している場合は、この作業は不要です。


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

  Excite Blog Writer(Chrome) --- More拡張 ver.8.3

  Excite Blog Writer (Firefox) --- More拡張 ver.8.3

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

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



Code構成と各種オプション


「More拡張 ver.8.3」は、以下の14個のCode数に再編成しました。

 Code 1    More拡張 ver.8.3 基本CSS

 Code 2    画像パレットCSS

 Code 3    ダイアログCSS

 Code 4    テンプレート編集CSS

 Code 5    フリーページ編集CSS

 Code 6    編集終了画面CSS

 Code 7    配色オプション ブルーグレー(明背景)

 Code 8    配色オプション ダークグリーン(暗背景)

 Code 9    2行編集アイコン 表示オプション ★

 Code 10    編集ヘルプ 非表示 ★

 Code 11    おすすめブログテーマ 非表示 ★

 Code 12    追加キャンペーン対応CSS ★

 Code 13    「Excite Blog Writer」のオプション指定チュートリアル ★

 Code 14     読者登録用バナーのポップアップ説明 (期間限定)★


◎「Code 7」以降がオプションに関するCodeで、それぞれの「適用先」を変更することで Code単位で「有効」「無効」が選べます。
 ▪ 適用先が「次で始まる URL」の Code →「有効」
 ▪ 適用先が「URL」の Code →「無効」
「適用先」を変更したら、Stylusの左メニュー「保存」を必ず押します。 これで変更が決定されます。

◎「Code 1」~「Code 6」は基本構成として必要で、常に「有効」としてください。

◎「」印の Codeは配色オプションです。「Code 7」と「Code 8」のどちらかを有効にします。
  これらは適用先が2行ありますが、変更する際は2行をまとめて変更してください。

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

◎ オプション内容の詳細は、このブログ内の説明記事を検索してください。





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



by Ataron | 2019-01-30 20:57 | ブログスキンのアレンジ | Trackback | Comments(0)

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

2019年 01月 24日

「読者登録用バナー」のアイコン新設に対応しました


読者登録をしたブログの更新をダイレクトにユーザーに知らせる通知機能は、最近のウェブ機能のトレンドのひとつです。 記事中に下の様な「読者登録用バナー」を簡単に設置できる編集アイコンが、編集画面に追加されました。

更新を通知する

この設置を契機に、若干の編集画面のHTMLの更新があった様で、従来ユーザースタイルシートでは表示崩れが生じたので、アレンジコードを修正しました。

下は、新しく追加された「読者登録用バナー」のアイコンです。

a0349576_19393493.png



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


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



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


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



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

/* 全体構成 *****************************************/
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; }



/* フッター・フロートアンケート
 この指定は、他の管理メニューでも非表示になります */

.global-footer {
display: none !important; }

.sticky-feedback {
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 #entry > #form {
min-width: 930px; }


/* テンプレート選択 ***********************************/
.page_entry #entryTemplateList {
position: absolute !important;
top: 15px !important;
left: 938px !important;
padding: 0 !important;
border: none !important; }

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 20px !important;
height: 28px !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 18px !important;
margin-left: -4px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#effaff 0%,#bce8f1 80%) !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 420px !important;
padding: 15px 15px !important; }


/* 編集アラート */
.page_entry .alert.alert-red {
position: absolute !important;
width: 300px !important;
padding: 2px 14px 0 !important;
font-size: medium !important; }


/* 本文タイトル **************************************/
.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important; }

.page_entry #entryEditHead-new th {
display: none !important; }

.page_entry #entryEditTitle {
position: absolute !important;
top: 15px !important;
width: 300px !important;
z-index: 1 !important;
transition: 0.5s !important; }

.page_entry #entryEditTitle:hover {
width: 928px !important; }

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 928px !important;
background: #fff !important; }

.page_entry #entryEditTitle input {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }

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


/* おすすめブログテーマ */
.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
bottom: -756px;
left: 850px;
margin: 0 !important;
padding: 0 !important;
max-height: 40px;
max-width: 77px;
background: #fff;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden !important;
transition: 0s;
z-index: 2; }

#trb_themeTtl {
margin: 0 !important; }

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

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

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover #trb_themeTtl div {
padding-top: 15px !important; }


/* カテゴリ */
.page_entry #entryEditCategory {
position: absolute !important;
top: 15px !important;
left: 310px !important; }

.page_entry #entryEditCategory select {
position: absolute !important;
width: 140px !important;
font-size:13px !important;
height: 28px !important;
padding: 4px 5px 0 !important;
text-shadow: none !important; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryEditCategory select:hover {
width: 180px !important;
z-index: 1; }

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

.page_entry #entryBlogCategoryDialog.btn input {
width: 28px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
text-indent: -61px !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }


/* タグ */
.page_entry #entryEditTags {
position: absolute !important;
width: 442px !important;
top: 15px !important;
left: 490px !important; }

.page_entry .entryElement {
display: flex !important; }

.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 15px 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; /* 読込み遅延対策 */
overflow: hidden;
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-delay: 0s;
z-index: -1; }

.page_entry #entryTrackback:hover header.boxHead.head-h3 {
opacity: 1;
z-index: 5;
transition-delay: 1s; }

.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 {
line-height: 17px !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: 679px !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; }


/* アイコン・ボタンの輪郭線と背景色 **********************/
#_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_webpushad {
top: auto !important;
bottom: 5px !important;
left: 705px !important; }

#exbtn_webpushad::before {
content: "\f0f3";
font: 15px /20px FontAwesome;
color: #fbc448;
padding: 0 3px;
text-shadow: 1px 1px 1px #000; }

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


/* カラーパレットのバー配色 */
#palletbar {
background: #eee; }


/* エモーティコンパレットの移動 */
#emojibar {
position: relative;
margin: 0 5px -15px 0 !important;
padding: 2px 0 0 !important;
height: 18px;
background: #eee; }



/* キャンペーン枠 ************************************/
.page_entry .campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0 !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%);
z-index: 5; }

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

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

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

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


/* みんなの投稿枠 ************************************/
.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 0 45px !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%);
z-index: 5; }

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

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


/* お知らせリスト ************************************/
.page_entry #announceList {
position: absolute;
left: 0;
bottom: 0;
margin: 0 0 0 90px !important;
padding: 0 !important;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%);
z-index: 5; }

.page_entry #announceList ul li {
margin: 10px 30px !important; }

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

.page_entry #announceList:hover {
margin: 0 0 0 15px !important;
padding: 30px 0 50px !important;
max-width: none;
width: calc(100% - 212px) !important;
max-height: 300px;
transition: max-height 1s;
z-index: 4; }



/* ***********************************************/


/* テンプレート編集画面 *******************************/
#contents.page_entryTemplate {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entryTemplate .head-h1 {
display: none !important; }

.page_entryTemplate #editTemplateList {
padding: 0 !important; }

.page_entryTemplate #editTemplateList select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate select {
height: 28px !important;
line-height: 28px !important;
padding: 0 15px !important; }

.page_entryTemplate input {
line-height: 28px !important;
height: 28px !important; }

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 4px 0 0 20px !important; }


.page_entryTemplate #entryEditHead-new {
width: calc( 100% - 190px);
margin-bottom: 0 !important; }

.page_entryTemplate #entryEditTmpTitle .alert {
position: absolute;
left: 600px;
padding: 3px 15px !important; }


.page_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate .btn {
height: 28px !important; }


.page_entryTemplate #entryEditWrap {
overflow: visible !important;
height: 660px !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditInner {
margin-bottom: 0 !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditContents {
margin-right: 180px !important;
overflow: visible !important; } /* 2行アイコン表示に必要 */


.page_entryTemplate #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


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

.page_entryTemplate #entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px !important;
background: none !important;
border-bottom: none !important; }

.page_entryTemplate #entryTrackbackTextarea {
position: relative;
width: calc(100% - 420px) !important;
margin: 0 0 0 420px !important;
min-height: 20px !important;
height: 28px !important;
padding: 5px 0 0 20px !important;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important;
box-shadow: none !important;
font-size: medium !important;
overflow-y: auto !important;
transition: height 0s; }

.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;
transition: height .5s; }


.page_entryTemplate #entrySubmitBtm {
padding: 0 !important;
margin: 0 !important; }



/* フリーページ編集画面 ********************************/
#contents.page_entry_fp {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entry_fp .head-h1 {
display: none !important; }

.page_entry_fp #template {
height: 28px !important;
padding: 2px 10px 0 !important; }

.page_entry_fp #template::-ms-expand {
border: none !important;
background: none !important; }

.page_entry_fp input {
line-height: 28px !important;
height: 28px !important; }

.page_entry_fp #entryEditCategory input {
font-weight: bold !important; }


.page_entry_fp #entryEditWrap {
display: table; /* 高さを拡げる */
width: 100%;
margin: 0 !important; /* サブミットの位置を決定 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditInner {
margin: 0 -180px 0 0 !important; } /* 画像パレット右余裕 最下部まで背景を延長 */


.page_entry_fp #entryEditContents {
margin-right: 180px !important; /* 画像パレット右余裕 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


.page_entry_fp #entryOptionsPpenflag {
position: absolute;
bottom: 13px;
left: 20px; }

.page_entry_fp #entryOptionsPpenflag span {
line-height: 32px !important; }

.page_entry_fp #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }

.page_entry_fp #entrySubmitBtm {
margin: 15px 0 0 230px !important;
padding: 0 !important; }

.page_entry_fp #entrySubmitBtm .btn {
height: 30px !important; }

.page_entry_fp #announceList {
display: none; }



/* ************************************************/

/* 背景色デザイン */
.page_entry_fp#contents ,
.page_entry_fp #entryEditHead-new table ,
.page_entry_fp #entryEditHead-new th {
background: #a4c1ce !important; } /* フリーページ編集画面 背景色 */


.page_entryTemplate#contents ,
.page_entryTemplate #editTemplateList ,
.page_entryTemplate #entryEditHead-new table ,
.page_entryTemplate #entryEditHead-new th ,
.page_entryTemplate #entryMoreArea {
box-shadow: none !important;
background: #a4c1ce !important; } /* テンプレート編集画面 背景色 */

body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */

body.win .dialogInner {
background: #fbfbfb !important; } /* ダイアログ 背景色 */



/* オプションコードは、ここより後方にペーストしてください ****/

/* ******************* オプション ********************/


/* 2行編集アイコン ワイド 表示オプション */
/*
#_panel:hover {
height: 75px !important;
margin-top: -75px !important;
transition-delay: 0.2s; }
*/


/* おすすめブログテーマ 非表示オプション */
/*
.page_entry entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none !important; }
*/


/* お知らせリスト 非表示オプション */
/*
#entry #announceList {
display: none !important; }
*/


/* キャンペーン枠 非表示オプション */
/*
.page_entry .campaign-container {
display: none !important; }
*/


/* みんなの投稿 非表示オプション */
/*
.page_entry #blog2media {
display: none !important; }
*/


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

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

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

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

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

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

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

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





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

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

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




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


by Ataron | 2019-01-24 08:00 | ブログスキンのアレンジ | Trackback | Comments(0)

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

2019年 01月 23日

「読者登録用バナー」のアイコン新設に対応しました


ブログ読者登録用バナー


ブログの読者登録をしたユーザーに対して、PCのデスクトップやスマホ画面に、ブログ更新を直接に知らせる「Webプッシュ通知機能」は、この間エキサイトが推進している新しい機能です。 特にお好みのブログを読者登録しておけば、最新版を素早く見落とす事なく読めます。

読者登録は、以下の方法から登録が出来ます。
 ◎ 対象のブログを訪れた時に、ブログ上部に割込んで表示されるブルー帯をクリック
 ◎ 対象ブログのサイドバーのプロフィール枠にある「更新通知を受け取る」をクリック

この読者登録に新しいルートを用意するのが、編集画面に新設された「ベル」マークの編集アイコンです。 編集時にこれを押すと、本文のカーソル位置に下の様なバナーが書き込まれます。

更新を通知する

上は一例で、アイコンを押すと多種のバナーデザインが表示され、ページに合ったデザインを選択出来ます。 読者がこのバナーをクリックすれば、そのブログを読者登録するページが開かれる仕組みです。 読者登録を期待する場合は、ページデザインの見栄えを考えた上でバナーを設置すれば良いと思います。


新アイコンでアレンジデザインが崩れました


今回、アイコン新設と同時に HTMLの一部更新があった様です。 下はアレンジが崩れた状態のアイコン列の部分です。

a0349576_18330902.png

散々な状態ですが、新アイコンの空白化と配置ズレは予想された事です。 しかし、タイトル列と編集枠の間隔が異常で、本来表示しないサブアイコン列が表示パネルの背景無しで表示されています。 また、編集枠全体が下方にズレ、下方の投稿日時や公開設定等のボタン群の配置が崩れました。

HTMLの更新部分を後から調べるのは難しく、デザイン崩れの対処に手間取りました。 なんとか、本来のデザインに纏め、新しいアイコンはアイコン列の右端に配置しました。

a0349576_19393493.png

編集アイコンは全てエキサイト本来のグラフィツクと異なり、ウェブフォントの「FontAwesome」を利用して鮮明な表示にしています。 デザイン崩れの修復の過程で、幾つかの部分のデザインを改善しました。

改善点
 ◎「2列編集アイコン」表示時の背景マスクを横方向にも拡張しました。
 ◎「トラックバック枠」のフォバー時、枠内に説明を表示する方法を改善しました。
 ◎「テンプレート編集画面」のテンプレ選択、テンプレ名枠、削除ボタン等の拡縮をスムーズに改善。
 ◎ エキサイトトップから「ブログテーマ」を選択して編集画面を開く場合に、編集画面の幅を確保。
 ◎ Firefox版で「select要素」の文字配置ズレを修正。

Excite Blog Writer(Chrome)と Excite Blog Writer(Firefox)の両版で、以上の修正とブラシュアップを完了しました。 バージョン名は「More拡張 ver.8」になります。



Excite Blog Writer を使用するには


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

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先の「📌」マークの記事を参考にして、使用ブラウザに適合した「Stylus」を導入してください。 既に「Stylus」を導入している場合は、この作業は不要です。


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

  Excite Blog Writer(Chrome) --- More拡張 ver.8

  Excite Blog Writer (Firefox) --- More拡張 ver.8

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

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





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


by Ataron | 2019-01-23 19:23 | ブログスキンのアレンジ | Trackback | Comments(0)

「ブログ内検索」の背景色を変更 / Excite Blog Serch ver.2018.12.29

2018年 12月 29日

多種の検索モードに対応


ブログページから「ブログ内検索」を実行すると、最初の検索結果の画面は「検索を始めたブログ」に検索範囲を固定した検索画面になります。 自分のブログで始めた場合は、ブログの点検や過去記事で調べものをする「自ブログ内検索」です。

検索窓の下の「記事・タグ・WEB」の選択ボタンを押さない限り、この「自ブログ内検索」のモードは続きます。 中央の検索窓に別の検索語を入れて再検索しても、「自ブログ内検索」モードは続きます。

a0349576_16242373.png

もし、「記事・タグ・WEB」のどれかを押すと、下の様な「記事・タグ・ブログ・WEB」の4ボタンに変わり、「自ブログ内検索」は解除され、「エキサイトブログ内」(左の3ボタン)か「WEB全体」(右のボタン)の検索モードになります。

a0349576_16323282.png

以上の様に、検索窓の下のボタンが、直接にモード切替になる仕組みです。

今回、「エキサイトブログ内」の検索を見て行くと、私自身のブログには類のない「記事本文の無いブログ」も出て来てました。 記事の引用部分が2行や3行になるブログも多く、その場合は検索結果リストが少なからず見難くなります。

a0349576_16391811.png

特に、各リスト項目の投稿記事の情報(投稿日付・ブログ名・タグ)が、次のリスト項目に近いので判別しずらくなります。 そこで、少しでも見易くするために、背景色を工夫してリスト項目の境界を示しました。

a0349576_16430812.png



「Excite Blog Search」を使用するには


「Excite Blog Search」でブログ内検索画面をアレンジするには、ユーザースタイルシート拡張機能「Stylus」がブラウザに導入されている必要があります。 また、このスタイルは Chrome版 と Firefox版の「Stylus」で動作を確認していますが、他ブラウザのユーザースタイルシート拡張機能でも使える可能性があります。

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

❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Search」が登録されています。
以下のリンクが「Excite Blog Search」の登録ページです。

Excite Blog Search ver. 2018.12.29

「Excite Blog Search」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

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


すでにインストールした「Excite Blog Search」を更新する場合は


「Excite Blog Search」を一度インストールすると、今回の様な更新のインストールは簡単です。 下図の様に「Stylus」の管理画面で、「全スタイルの更新をチェック」を押し、更に「すべての更新を適用」を押します。 userstyles.org側の問題で更新されない場合がありますが、その場合は一旦スタイルを「×」で削除して、再インストールしてください。

a0349576_16565166.png






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



by Ataron | 2018-12-29 17:19 | ブログスキンのアレンジ | Trackback | Comments(0)

エキサイト「ブログ内検索」のアレンジ更新版 / Excite Blog Serch ver.2018.12.27

2018年 12月 28日

元デザインの手直し更新があった様です


先日「ブログ内検索」をしたところ、デザイン崩れを生じていました。 ユーザースタイルシートのアレンジにはつきもので、アレンジ対象のページデザインが更新されると、デザイン崩れを生じる場合があります。

崩れた状態は下の赤枠の部分です。

a0349576_23133535.png

検索タイプの選択ボタンのデザインが変わり、検索結果のリストの本文に左マージンが指定された様です。 下図は、アレンジコードを対策修正した結果で、ほぼ初期のアレンジデザインに戻りました。

a0349576_23134218.png

今までのは記事文字数が少ない場合やタグ指定なしの場合に、リストが見苦しくなっていた様で、その改善をしています。



このスタイルのアレンジ内容


「Excite Blog Serch」は、新しいブログ内検索のデザインをアレンジし、操作性を向上させます。
以下はアレンジの要点は纏めたものです。

  ◎「検索文字の記入枠」など、画面上部のレイアウトを上に詰めて高さを節約。
  ◎ 下部の「ページャー」を上部に移動し、「検索結果のタイトル」と同居させる。
  ◎ 検索結果のリストで、サムネイル画像を小型にして1件ごとの高さを節約。
  ◎ サムネイル画像はフォバーで拡大確認できる様にする。
  ◎ 記事の投稿日時とタグ一覧を、縦2行から1行に変えて高さを節約。
  ◎ 背景を淡いグレーとして目の疲れを抑える。
  ◎ 画面の基本フォントは「メイリオ」とし、各所のサイズや濃度を最適化する。
  ◎ ヘッダー、フッター、AD等の不要な表示は非表示にする。
  ◎ 検索結果リストのタイトル文字色を「訪問済・未訪問」で区別。
  ◎ 検索結果リストに、ページ毎に 01~10 の連番を付ける。
  ◎ リンクフォバーをデフォルトの下線から文字背景色・文字色の反転に改め明瞭化。



「Excite Blog Search」を使用するには


「Excite Blog Search」でブログ内検索画面をアレンジするには、ユーザースタイルシート拡張機能「Stylus」がブラウザに導入されている必要があります。 また、このスタイルは Chrome版 と Firefox版の「Stylus」で動作を確認していますが、他ブラウザのユーザースタイルシート拡張機能でも使える可能性があります。

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

❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Search」が登録されています。
以下のリンクが「Excite Blog Search」の登録ページです。

Excite Blog Search ver. 2018.12.27

「Excite Blog Search」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

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



閲覧履歴をリセットしてチェック作業に利用する


訪問済タイトルの文字色は濃いブルーになります。 また、ブラウザの閲覧履歴を初期化すれば、訪問済タイトルを黒にリセット出来ます。 これを利用すると、多くの記事を対象に一連の記事チェック作業をする場合に、タイトルの文字色で作業済を判断出来ます。 途中でチェック済が曖昧にならないので、とても便利です。

訪問済タイトルの着色は「検索結果ページの履歴で訪問済」という事です。 普通に自ブログを遡って「訪問」しても、このページのタイトルは着色されません。 一方、「検索検索」のページから記事タイトルを開いて「訪問済」になると、全く他の事で「ブログ内検索」をした場合も、その履歴が残っていてタイトルが着色されます。

この着色を「既チェック」の標識として利用する場合、作業の前に過去の「閲覧履歴」をリセットしておく必要があります。

ブラウザの「閲覧履歴」は、メインの検索エンジンを利用する場合などにも利用され、既にチェックした事を示して検索作業を効率化します。 もし、それらを重視するなら、閲覧履歴のリセットは控えるべきでしょう。 しかし、ブログのメンテナンス等で必要なら、このリセットは有効です。 以下は、ブラウザが Chrome の場合の説明ですが、他のブラウザにも同様の機能があります。 要領は「閲覧履歴」のみをリセットする点です。


Chromeの閲覧履歴をリセット


Chrome で適当なページを開き、「Ctrl + Shift + Delete」を押します。 下の様なダイアログが開きます。

a0349576_17581389.png

基本 / 詳細設定 の選択があるので、「詳細設定」を開きます。
「閲覧履歴」のみにチェックを入れます。 他のチェックは必ず外します。
他のチェックが残っていないか、スクロールして下の方まで確認します。
時期を選択しますが、全期間にしないと履歴が残ってしまうかも知れません。

以上の設定が出来たら「データを消去」を押します。 この操作で先の「訪問済」の標識がリセットされ、「ブログ内検索」の検索結果の全ての記事タイトルが未訪問の状態になります。




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


by Ataron | 2018-12-28 00:36 | ブログスキンのアレンジ | Trackback | Comments(0)

「ブログイイネ」画面(管理画面)をアレンジする

2018年 11月 09日

新しい「ブログイイネ」画面をアレンジしました


2018年11月から、管理画面の「ブログイイネ」の画面が新しくなりました。「イイネ」はコミニュケーションツールとして有効なもので、エキサイトも改善・向上をこころがけている様ですが、今回の画面は少し間延びしていると感じました。
(サムネイルとブログ名は暈しを入れています)

a0349576_11002711.png

私は以前から「管理画面」の左メニューをスライドアウトさせ、少々幅の狭いモニターでも管理画面をフルに使えるデザインを工夫して来ました。 下はその例で「記事一覧」「下書き一覧」の画面で、左メニューに画面を取られないので、一覧表が広く、見易くなっています。

a0349576_11033599.png

同様の発想で、今回の「ブログイイネ」の画面も、アレンジしてみました。
下はアレンジした画面で、イイネのリストをコンパクトにし、また2列表示にする事で、1ページ分20件のリストがスクロール無しで一覧出来ます。

a0349576_11054759.png

左メニューはマウスを画面の左端に近付けると表示されます。

a0349576_11055403.png


〔追記〕
この記事を書いた後で、新たに「コメントイイネ」機能が追加される告知がありました。 上記のデザインはスペースの関係で「にイイネをしました」を省略していますが、ここが2種の「イイネ」を区別する表示になりそうです。 そこでレイアウトを下図の様に改め、表示を省略しない様にしました。 また、実際に「コメントイイネ」の運用が始まって問題があれば、修復の更新をします。

a0349576_19363480.png



Excite Blog Config Style の更新


「Excite Blog Config Style (Chrome / Firefox)」というアレンジスタイルは、エキサイトのブログ管理画面をアレンジするものです。 今回の新しい「ブログイイネ」の画面のアレンジもこれに追加しました。

また、従来は別扱いだった「Excite NoticeMessage(新着表示)」のアレンジスタイルも、これと統合しました。 このアレンジは、エキサイトTOP画面のメニューに表示される「イイネ」と「コメント」の新着表示を、ヘッダー側に表示するものです。 新着があればヘッダー部に表示され、どちらの新着かが判り、下のブログ管理メニューを開く必要がありません。

a0349576_11211906.png

このアレンジは、「ブログイイネ」の画面と直結するので、統合しました。



Excite Blog Config Style を利用するには


「Excite Blog Config Style (Chrome / Firefox)」は、ブラウザ Chrome および Firefox で利用出来ます。 更新バージョンは、コードの最初に日付で示されます。

このスタイルを有効にするには、CHrome または Firefox に拡張機能「Stylus」を導入している必要があります。「Stylus」は、このページで紹介したアレンジ用CSSを管理してブラウザに適用する拡張機能です。 他のブラウザでも同様のユーザースタイルシート拡張機能が使えるなら、このスタイルが利用できる可能性があります。(CSSの多くの部分はブラウザ共通ですから)


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

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

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


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

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

  スタイルの入手先


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





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


by Ataron | 2018-11-09 13:18 | ブログスキンのアレンジ | Trackback | Comments(0)

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

2018年 11月 03日

「絵文字パレット」を移動可能にしました


「絵文字パレット」は「顔文字」(エモーティコン)を入力するためのパレットです。 編集アイコンの「絵文字」アイコンを押すと表示されます。 下はアレンジを無効にした本来の編集画面ですが、この「絵文字パレット」を表示させたところです。

a0349576_18183003.png

良く似たパレットの「文字色パレット」はドラッグ可能ですが、「絵文字パレット」はドラッグが出来ません。 エキサイトは「絵文字パレット」を後で作り直したので、プログラマが忘れたのでしょう。 今回、この「絵文字パレット」をドラッグ可能にする方法が判り、IE11版 - More拡張にも組込みました。
(詳細は、エキサイト編集画面のアレンジ(86) を参照ください )

下は、移動可能になった「絵文字パレット」を「文字色パレット」と並べた所です。

a0349576_19114794.png



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


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



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


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



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

/* 全体構成 *****************************************/
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; }



/* フッター・フロートアンケート
 この指定は、他の管理メニューでも非表示になります */

.global-footer {
display: none !important; }

.sticky-feedback {
display: none !important; }



/* 編集画面ベース */
.page_entry #entry > #form {
width: calc(100% - 30px) !important;
position: absolute !important;
top: 0;
left: 0;
padding: 0 15px !important;
background: #fbfbfb; }


/* テンプレート選択 ***********************************/
.page_entry #entryTemplateList {
position: absolute !important;
top: 15px !important;
left: 938px !important;
padding: 0 !important;
border: none !important; }

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 20px !important;
height: 28px !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 18px !important;
margin-left: -4px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#effaff 0%,#bce8f1 80%) !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 420px !important;
padding: 15px 15px !important; }


/* 編集アラート */
.page_entry .alert.alert-red {
position: absolute !important;
width: 300px !important;
padding: 2px 14px 0 !important;
font-size: medium !important; }


/* 本文タイトル **************************************/
.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important; }

.page_entry #entryEditHead-new th {
display: none !important; }

.page_entry #entryEditTitle {
position: absolute !important;
top: 15px !important;
width: 300px !important;
z-index: 1 !important;
transition: 0.5s !important; }

.page_entry #entryEditTitle:hover {
width: 928px !important; }

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 928px !important;
background: #fff !important; }

.page_entry #entryEditTitle input {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }

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


/* おすすめブログテーマ */
.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
bottom: -756px;
left: 850px;
margin: 0 !important;
padding: 0 !important;
max-height: 40px;
max-width: 77px;
background: #fff;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden !important;
transition: 0s;
z-index: 2; }

#trb_themeTtl {
margin: 0 !important; }

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

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

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover #trb_themeTtl div {
padding-top: 15px !important; }


/* カテゴリ */
.page_entry #entryEditCategory {
position: absolute !important;
top: 15px !important;
left: 310px !important; }

.page_entry #entryEditCategory select {
position: absolute !important;
width: 140px !important;
font-size:13px !important;
height: 28px !important;
padding: 4px 5px 0 !important;
text-shadow: none !important; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryEditCategory select:hover {
width: 180px !important;
z-index: 1; }

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

.page_entry #entryBlogCategoryDialog.btn input {
width: 28px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
text-indent: -61px !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }


/* タグ */
.page_entry #entryEditTags {
position: absolute !important;
width: 442px !important;
top: 15px !important;
left: 490px !important; }

.page_entry .entryElement {
display: flex !important; }

.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 {
line-height: 17px !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: 679px !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; }


/* アイコン・ボタンの輪郭線と背景色 **********************/
#_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; }


/* カラーパレットのバー配色 */
#palletbar {
background: #eee; }


/* エモーティコンパレットの移動 */
#emojibar {
position: relative;
margin: 0 5px -15px 0 !important;
padding: 2px 0 0 !important;
height: 18px;
background: #eee; }



/* キャンペーン枠 ************************************/
.page_entry .campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0 !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%);
z-index: 5; }

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

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

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

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


/* みんなの投稿枠 ************************************/
.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 0 45px !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%);
z-index: 5; }

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

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


/* お知らせリスト ************************************/
.page_entry #announceList {
position: absolute;
left: 0;
bottom: 0;
margin: 0 0 0 90px !important;
padding: 0 !important;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%);
z-index: 5; }

.page_entry #announceList ul li {
margin: 10px 30px !important; }

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

.page_entry #announceList:hover {
margin: 0 0 0 15px !important;
padding: 30px 0 50px !important;
max-width: none;
width: calc(100% - 212px) !important;
max-height: 300px;
transition: max-height 1s;
z-index: 4; }



/* ***********************************************/


/* テンプレート編集画面 *******************************/
#contents.page_entryTemplate {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entryTemplate .head-h1 {
display: none !important; }

.page_entryTemplate #editTemplateList {
padding: 0 !important; }

.page_entryTemplate #editTemplateList select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate select {
height: 28px !important;
line-height: 28px !important;
padding: 0 15px !important; }

.page_entryTemplate input {
line-height: 28px !important;
height: 28px !important; }

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 4px 0 0 20px !important; }


.page_entryTemplate #entryEditHead-new {
width: calc( 100% - 190px);
margin-bottom: 0 !important; }

.page_entryTemplate #entryEditTmpTitle .alert {
position: absolute;
left: 600px;
padding: 3px 15px !important; }


.page_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate .btn {
height: 28px !important; }


.page_entryTemplate #entryEditWrap {
overflow: visible !important;
height: 660px !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditInner {
margin-bottom: 0 !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditContents {
margin-right: 180px !important;
overflow: visible !important; } /* 2行アイコン表示に必要 */


.page_entryTemplate #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


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

.page_entryTemplate #entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px !important;
background: none !important;
border-bottom: none !important; }

.page_entryTemplate #entryTrackbackTextarea {
position: relative;
width: calc(100% - 420px) !important;
margin: 0 0 0 420px !important;
min-height: 20px !important;
height: 28px !important;
padding: 5px 0 0 20px !important;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important;
box-shadow: none !important;
font-size: medium !important;
overflow-y: auto !important;
transition: 0.5s; }

.page_entryTemplate #entryTrackbackTextarea:hover {
width: 100% !important;
margin: 0 !important;
padding: 5px 0 0 150px !important;
z-index: 2; }

.page_entryTemplate #entryTrackbackTextarea:focus {
height: 80px !important;
width: 100% !important;
margin: 0 !important;
padding: 5px 0 0 150px !important;
z-index: 2; }


.page_entryTemplate #entrySubmitBtm {
padding: 0 !important;
margin: 0 !important; }



/* フリーページ編集画面 ********************************/
#contents.page_entry_fp {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entry_fp .head-h1 {
display: none !important; }

.page_entry_fp #template {
height: 28px !important;
padding: 2px 10px 0 !important; }

.page_entry_fp #template::-ms-expand {
border: none !important;
background: none !important; }

.page_entry_fp input {
line-height: 28px !important;
height: 28px !important; }

.page_entry_fp #entryEditCategory input {
font-weight: bold !important; }


.page_entry_fp #entryEditWrap {
display: table; /* 高さを拡げる */
width: 100%;
margin: 0 !important; /* サブミットの位置を決定 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditInner {
margin: 0 -180px 0 0 !important; } /* 画像パレット右余裕 最下部まで背景を延長 */


.page_entry_fp #entryEditContents {
margin-right: 180px !important; /* 画像パレット右余裕 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


.page_entry_fp #entryOptionsPpenflag {
position: absolute;
bottom: 13px;
left: 20px; }

.page_entry_fp #entryOptionsPpenflag span {
line-height: 32px !important; }

.page_entry_fp #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }

.page_entry_fp #entrySubmitBtm {
margin: 15px 0 0 230px !important;
padding: 0 !important; }

.page_entry_fp #entrySubmitBtm .btn {
height: 30px !important; }

.page_entry_fp #announceList {
display: none; }



/* ************************************************/

/* 背景色デザイン */
.page_entry_fp#contents ,
.page_entry_fp #entryEditHead-new table ,
.page_entry_fp #entryEditHead-new th {
background: #a4c1ce !important; } /* フリーページ編集画面 背景色 */


.page_entryTemplate#contents ,
.page_entryTemplate #editTemplateList ,
.page_entryTemplate #entryEditHead-new table ,
.page_entryTemplate #entryEditHead-new th ,
.page_entryTemplate #entryMoreArea {
box-shadow: none !important;
background: #a4c1ce !important; } /* テンプレート編集画面 背景色 */

body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */

body.win .dialogInner {
background: #fbfbfb !important; } /* ダイアログ 背景色 */



/* オプションコードは、ここより後方にペーストしてください ****/

/* ******************* オプション ********************/


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

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


/* おすすめブログテーマ 非表示オプション */
/*
.page_entry entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none !important; }
*/


/* お知らせリスト 非表示オプション */
/*
#entry #announceList {
display: none !important; }
*/


/* キャンペーン枠 非表示オプション */
/*
.page_entry .campaign-container {
display: none !important; }
*/


/* みんなの投稿 非表示オプション */
/*
.page_entry #blog2media {
display: none !important; }
*/


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

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

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

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

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

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

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

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






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

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

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






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


by Ataron | 2018-11-03 23:29 | ブログスキンのアレンジ | Trackback | Comments(0)

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

2018年 11月 03日

「絵文字パレット」を移動可能にしました


「絵文字パレット」は「顔文字」(エモーティコン)を入力するためのパレットです。 編集アイコンの「絵文字」アイコンを押すと表示されます。 下は「Excite Blog Writer」を無効にした素の編集画面で、この「絵文字パレット」を表示させたところです。

a0349576_18183003.png

良く似たパレットに「文字色パレット」があり、それはドラッグして編集の邪魔にならない場所に移動できますが、より邪魔になる「絵文字パレット」の方がドラッグが出来ません。 エキサイトは「絵文字パレット」を後で作り直したので、プログラマが忘れたのでしょう。

このパレットを以前もドラッグ可能にしようと考えましたが、その時は判らず諦めました。「Close」の部分をつまむとドラッグ出来ますが、ボタンに触れるので置くと消え、結局はドラッグできません。 今回、知恵が着いたのか、方法が判りました。

下は DevToolsで「絵文字パレット」の部分を表示した所ですが、「文字色パレット」のドラッグする部分と同じ場所に「drHandler」と言う名前の要素があり、これはつまり「ドラッグハンドル」だと気付いたのです。

a0349576_18282606.png

ただ、この要素の高さは「0」で、表示部分が無いのでドラッグ出来ないらしい。 そこで DevToolsで、この要素「#emojibar」に「height: 20px;」を指定したのが下図です。

a0349576_18344194.png

この指定で、めでたくパレットをドラッグできました。 ただ「ハンドル」が「絵文字のリスト」を押し下げているので、下のコードでこれを補正しました。

#emojibar {
position: relative;
height: 20px;
margin-bottom: -15px; }

「margin」で引き戻すと、引き戻した下の部分(透明で見えません)が「#emojibar」に被さりドラッグ出来なくなります。 そこで「position: relative;」を指定して表に出しています。 これで下の様に「絵文字のリスト」が良い位置になりました。

a0349576_19020987.png

更に、「ハンドル」の部分が正確には見えずドラッグしぞこなうので、淡い背景色を付ける事に。 ついでに「文字色パレット」の「ハンドル」もデザインを合わせて背景色を付けました。 最終的な追加コードは以下です。

/* 文字色パレットのハンドル色 */
#palletbar {
background: #eee; }

/* 絵文字パレットのハンドル色と移動 */
#emojibar {
position: relative;
height: 18px;
margin: 0 5px -15px 0;
padding: 2px 0 0;
background: #eee; }

下は、移動可能になった「絵文字パレット」を「文字色パレット」と並べた所です。

a0349576_19114794.png

このコードを追加して「Excite Blog Writer」を更新しました。



Excite Blog Writer を使用するには


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

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先の「📌」マークの記事を参考にして、使用ブラウザに適合した「Stylus」を導入してください。 既に「Stylus」を導入している場合は、この作業は不要です。


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

  Excite Blog Writer(Chrome) --- More拡張 ver.7.7

  Excite Blog Writer (Firefox) --- More拡張 ver.7.7

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

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




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


by Ataron | 2018-11-03 21:59 | ブログスキンのアレンジ | Trackback | Comments(0)

エキサイト「ブログ内検索」のアレンジ更新版 / Excite Blog Serch ver.2018.09.28

2018年 09月 30日

検索結果リストで「訪問済・未訪問」をタイトル文字色で区別


「Excite Blog Serch」は、新しいブログ内検索のデザインをアレンジし、操作性を向上させます。
以下はアレンジの要点は纏めたものです。

  ◎「検索文字の記入枠」など、画面上部のレイアウトを上に詰めて高さを節約する。
  ◎ 下部の「ページャー」を上部に移動し、「検索結果のタイトル」と同居させる。
  ◎ 検索結果のリストで、サムネイル画像を小型にして1件ごとの高さを節約する。
  ◎ サムネイル画像はフォバーで拡大確認できる様にする。
  ◎ サムネイルの小型化で引用本文を4行から3行に減らし、高さを節約する。
  ◎ 記事の投稿日時とタグ一覧を、縦2行から1行に変えて高さを節約する。
  ◎ 背景を淡いグレーとして目の疲れを抑える。
  ◎ 画面の基本フォントは「メイリオ」とし、各所のサイズや濃度を最適化する。
  ◎ ヘッダー、フッター等の不要な表示は非表示にする。

下は、今回追加したアレンジ内容です。

  ◎ 検索結果リストのタイトル文字色を「訪問済・未訪問」で区別。
  ◎ 検索結果リストに、ページ毎に 01~10 の連番を付ける。
  ◎ リンクフォバーをデフォルトの下線から文字背景色・文字色の反転に改め明瞭化。



アレンジの効果


下は、今回追加したアレンジ内容を示したものです。

a0349576_18335100.png

訪問済タイトルの文字色を濃いブルーにしていますが、以前のブログ内検索はこの様に訪問済を可視化するデザインでした。 この種のデザインはリンク要素の「:visited」で配色を変えますが、それはブラウザの閲覧履歴を反映させたものです。 従って、ブラウザの閲覧履歴を初期化すれば、訪問済の表示をリセット出来ます。(この方法はページの最後を参照ください)

これを利用すると、多くの記事を対象に一連の記事チェック作業をする場合に、この文字色で作業済を判断出来ます。 その様な作業は、たいてい途中でどこまて進めたか判らなくなり、チェック済の記事を開いて手間取りますから、訪問済の可視化はとても便利です。



「Excite Blog Search」を使用するには


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

このスタイルは Chrome版 と Firefox版の「Stylus」で動作を確認していますが、他ブラウザのユーザースタイルシート拡張機能でも使える可能性があります。


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

❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Search」が登録されています。
以下のリンクが「Excite Blog Search」の登録ページです。

Excite Blog Search ver. 2018.08.31


「Excite Blog Search」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

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



「Excite Blog Search」の閲覧履歴をリセットする


訪問済タイトルは着色されますが、これは「検索結果ページの履歴で訪問済」だという事です。 普通に自ブログを遡って「訪問」しても、このページのタイトルは着色されません。 一方、「検索検索」のページから記事タイトルを押して「訪問済」になると、全く他の事で「ブログ内検索」をした場合も、その履歴が残っていてタイトルが着色されます。

この着色を「既チェック」の標識として利用する場合、作業の前に過去の「閲覧履歴」をリセットしておく必要があります。

ブラウザの「閲覧履歴」は、メインの検索エンジンを利用する場合などにも利用され、既にチェックした事を示して検索作業を効率化します。 もし、それらを重視するなら、閲覧履歴のリセットは控えるべきでしょう。 しかし、ブログのメンテナンス等で必要なら、このリセットは有効です。 以下は、ブラウザが Chrome の場合の説明ですが、他のブラウザにも同様の機能があります。 要領は「閲覧履歴」のみをリセットする点です。


Chromeの閲覧履歴をリセット


Chrome で適当なページを開き、「Ctrl + Shift + Delete」を押します。 下の様なダイアログが開きます。

a0349576_17581389.png

基本 / 詳細設定 の選択があるので、「詳細設定」を開きます。

「閲覧履歴」のみにチェックを入れます。 他のチェックは必ず外します。

他のチェックが残っていないか、スクロールして下の方まで確認します。

時期を選択しますが、全期間にしないと履歴が残ってしまうかも知れません。

以上の設定が出来たら「データを消去」を押します。 この操作で先の「訪問済」の標識がリセットされ、「ブログ内検索」の検索結果の全ての記事タイトルが未訪問の状態になります。




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



by Ataron | 2018-09-30 18:41 | ブログスキンのアレンジ | Trackback | Comments(0)