人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

編集画面をアレンジする(19)/ エキサイトブログ IE11版-ブラッシュアップ テンプレート管理画面対応(通常アイコン)

2016年 10月 23日
IE11でエキサイト編集画面のアレンジを実現するための基本手順は、以下のページを参考にしてください。




●エキサイトの標準の編集アイコンをそのまま配置しています。 1行アイコンで必要なアイコンが無い場合の選択枝ですが、エキサイトがアイコンを変更しても適応できる利点があります。

●テンプレート管理画面にこの編集画面のデザインが部分適応され、そのまま使用可能となります。

●最上部の1行に「タイトル」「カテゴリ」「タグ」「テンプレート」の枠をコンパクトにまとめています。 テンプレート枠はスイッチを押すと拡がります。 画像パレットの高さを低く抑え、入力枠に余裕を持たせたスタイルです。

●画像パレットは縦スクロールする1行タイプ、コンパクトで選択画像は逆に大きく画像順が明らかな優れものです。

●エキサイトの標準編集画面から、各種チュートリアルとヘルプは削除しています。

以下はオプション項目です。

●「small指定」... デフォルトは編集枠等の基本フォントサイズを「medium / 16px」としています。 このオプションで、基本フォントサイズを一回り小型の13pxに出来ます。 編集画面のフォントが大き過ぎると感じる事が多い場合に、このオプション追加してください。

●「トラックバック枠」「みんなの投稿枠」... 編集時の不本意な縦スクロールを防ぐため、画面全体の高さを抑えています。 この目的でこれらの枠を非表示としていますが、必要な場合は追加出来ます。

●「More用パレット」...「More編集」を多用する場合に、画像パレットがMore画面の近くに着いて来るので、使い易くなります。

●「配色アレンジ」... 編集画面の背景テクスチャーをデフォルトから好みに変更する方法を説明します。




下図は、この「ブラッシュアップ テンプレート管理画面対応(通常アイコン)」の編集画面の様子です。(IE11画面拡大率100%、フォント「中」のハードコピーで、クリックで拡大表示されます)

編集画面をアレンジする(19)/ エキサイトブログ IE11版-ブラッシュアップ テンプレート管理画面対応(通常アイコン)_b0174191_17483385.png


以下は、このアレンジを実現するIE11専用のユーザースタイルシートです。


〔 IE11版-ブラッシュアップ テンプレート管理画面対応(通常アイコン)〕

基本部CSS


/*〔 IE11版-ブラッシュアップ テンプレート管理画面対応版(通常アイコン)〕*/

body.win input {
box-shadow: none !important; }

#wrapper {
min-width: 970px !important;
min-height: 0 !important;
background: none !important; }

#entry {
min-width: 900px; }

.ad728 {
display: none !important; }

#entry #announceList {
display: none !important; }


/* タイトル部 */

.page_entry #entry > #form {
width: 100% !important;
position: absolute !important;
top: 0px;
left: 0px;
padding: 0 !important;
background: #fbfbfb;
z-index: 1; }

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

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

.page_entry #entryTemplateList select::-ms-expand {
width: 20px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: aquamarine !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 430px !important;
z-index: 1; }

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

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


.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
left:15px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
z-index: 2; }

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

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

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

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 792px !important; }

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

.page_entry .alert.alert-red {
position: absolute !important;
top: 150px !important;
left: 200px !important;
width: 300px !important;
z-index: 2; }

.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none; }


.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 0px !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_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.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 0px !important; }


.page_entry #entryEditTags {
position: absolute !important;
top: 15px !important;
left: 490px !important;
width: 445px !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; }

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

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

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

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

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


/* 編集部wrap構成 */

.page_entry #entryEditWrap {
overflow: visible !important;
margin: 0px 0px 0px 15px !important; }

.page_entry #entryEditInner {
margin: 0 !important; }

.page_entry #entryEditContents {
margin: 56px 167px 0px 0px !important;
padding: 0 !important;
overflow: visible !important; }

.page_entryTemplate #entryEditContents {
margin-right: 170px !important; }

#entryEditContents .entryPreview.btn-s {
display: none !important; }

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


#editorSwither {
position: absolute !important;
top: 2px !important;
left: -15px !important;
line-height: 40px !important; }

#editorSwither .current {
line-height: 46px !important;
margin: 2px 4px 0 0 !important; }

#editorSwither li {
margin: 6px 4px 0 0 !important; }

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

ul#_panel {
height: 55px !important;
background: #f7f7f7 !important; }

#new_icon {
display: none !important; }

li[id^="exbtn_"] {
margin-left: 230px !important; }

li#exbtn_status {
margin: 29px 0px 0px !important;
padding: 2px 2px 0px 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; }


/* 編集部 */

#_entryContent, #_moreEntryContent {
background: #fbfbfb !important;
line-height: 150% !important;
margin: 0 !important;
height: 550px !important;
font-size: 1.6rem !important; }

.page_entryTemplate #_entryContent, #_moreEntryContent {
height: 530px !important; }

#entryContent, #moreEntryContent {
background: #fbfbfb !important;
line-height: 150% !important;
margin: 0 !important;
height: 550px !important;
font-size: 1.6rem !important; }

.page_entryTemplate #entryContent, #moreEntryContent {
height: 530px !important; }


/* More部 */

#more.w100 {
display: block !important;
width: 74px !important;
height: 28px !important;
margin: 15px 0px -43px !important; }

#more span {
padding: 2px 0px 0px !important;
font-size: small !important; }

#notmore.w100 {
width: 120px !important;
height: 28px !important;
margin: 15px 0px 10px !important; }

#notmore span {
padding: 2px 0px 0px !important;
font-size: small !important; }

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

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


/* 下部整理 1 */

.page_entry #entryOptions {
position: relative !important;
display: block !important;
left: 110px !important;
margin: 1px 0px 0px !important;
padding: 12px 0px 10px !important;
width: 110px !important;
height: 32px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
z-index: 4 !important;
transition: 0.5s !important; }

.page_entry #entryOptions:hover {
width: 100% !important; }

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

.page_entry #entryOptions .optionGroup label {
font-size: 13px !important;
margin: 0px 0px 7px !important;
padding: 0px 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 {
display: none !important; }

.page_entryTemplate #entryTrackback {
margin: 58px 0 0 !important; }

.page_entryTemplate #entryTrackbackTextarea {
height: 40px !important;
min-height: 40px !important;
font-size: medium !important;
background: #fbfbfb !important;
box-shadow: none !important; }


/* 画像パレット */

.partsWrap#wrapper {
min-width: 0px !important; }

.page_entry #entryEditIframe {
width: 155px !important;
position: absolute !important;
top: 56px;
right: 2px;
z-index: 2; }

.page_entryTemplate #entryEditIframe {
width: 155px !important; }

#entryEditIframe iframe {
width: 155px !important;
height: 695px !important; }

#partsImage {
padding: 5px 0px 0px !important;
position: static !important; }

#partsImage #droppable {
font-size: 13px !important;
margin: 0px 5px 10px !important;
color: #fff !important;
background: #4096ee !important;
box-shadow: none !important; }

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

#partsImage .fileUploadWrapper {
margin: 0 !important; }

#partsImage .optionGroup {
margin: 5px !important; }

#partsImage .optionGroup span {
display: none !important; }

#partsImage .optionGroup select {
font-size: small !important;
height: 26px !important;
padding: 2px 5px !important; }

#partsImage .optionGroup select::-ms-expand {
border: none !important;
background: none !important; }

#partsImage .optionGroup option {
font-size: 1em !important; }

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

#partsImageContainer li {
margin: 0px 0px 10px !important;
width: 122px !important;
height: 80px !important; }

#partsImageContainer li div input {
position: relative !important;
left: 43px !important; }

#partsImageContainer li a {
background-size: cover !important;
width: 118px !important;
height: 76px !important; }

#partsImage .alert {
margin: 0 !important; }


/* 下部整理2 */

.page_entry #blog2media {
display: none !important; }


.page_entry #entryOptionsPstdate {
position: relative !important;
left: 240px !important;
width: 530px !important;
top: -54px !important;
margin: 0px 0px -58px !important;
padding: 14px 10px 10px !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: 700px !important;
z-index: 3 !important; }

.page_entry #entryOptionsPstdate span {
line-height: 30px !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 0px !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: 53px !important; }


.page_entry #entryOptionsPpenflag {
position: relative !important;
left: 475px !important;
width: 310px !important;
top: -54px !important;
margin: 0px 0px -56px !important;
padding: 14px 0px 10px 30px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPpenflag:hover {
width: 455px !important;
z-index: 2 !important; }

.page_entry #entryOptionsPpenflag span {
line-height: 30px !important;
margin-right: -20px !important; }

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


.page_entry #entrySubmitBtm {
width: 100% !important;
border: none !important;
padding: 0 !important;
margin: 0px 0px 25px !important; }

.page_entry #entrySubmitBtm .btn {
height: 28px !important; }

.page_entry #entrySubmitBtm input {
height: 28px !important;
line-height: 28px !important; }

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


#menu #sideBanner {
display: none !important; }

#menu #sideRakutenMW {
display: none !important; }

#exFooterWrapper {
display: none !important; }

#sidemenu li a {
white-space: nowrap !important; }


/* 配色 */

body.win, #partsImage, .page_entry #entryOptions,
.page_entry #entryOptionsPstdate, .page_entry #entryOptionsPpenflag {
background:
url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif")
repeat !important; }

.page_entry #entry > #form {
background:
url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif")
repeat !important; }

.page_entry ul#_panel {
background: none !important;
border: none !important; }

#entryEditTags span.tags a {
border-radius: 0 3px 3px 0 !important; }

#_panel .panelBtn {
border-radius: 3px !important; }





以下はオプションです。 それぞれのオプションCSSを「基本部CSS」の後に追記すると、各機能を追加することができます。 オプションは単独でも複数でも追加可能です。

small指定


.page_entry #entryEditTitle input {
font-size: 1.3rem !important; }

#_entryContent, #_moreEntryContent {
font-size: 1.3rem !important; }

#entryContent, #moreEntryContent {
font-size: 1.3rem !important; }

.page_entry input#moreEntrySubject {
font-size: 1.3rem !important; }



トラックバック枠の追加


.page_entry #entryTrackback {
display: block !important;
margin: -15px 0px 60px !important; }

.page_entry #entryTrackback .boxHead {
background: none !important;
margin: 15px 0px 0px !important; }

.page_entry #entryTrackbackTextarea {
min-height: 32px !important;
height: 32px !important;
font-size: medium !important;
background: #fbfbfb !important;
box-shadow: none !important; }



みんなの投稿枠の追加


.page_entry #blog2media {
display: block !important;
background-color: #fbfbfb !important;
margin: 0px 170px 60px 0px !important; }

.entryRadioBtoM#b2m_checked {
border: 2px solid deepskyblue !important; }



More用パレット


.page_entry #entryEditIframe {
position: fixed !important;
top: 56px !important;
right: 2px !important; }





配色アレンジ

上の基本部CSSで使ったテクスチャ画像は、エキサイトブログの各設定画面で使用されているものです。「body.win」にもこのテクスチャを指定しているので、他の設定画面の背景にも反映しますが、違和感を与え難いでしょう。

このテクスチャ画像を差し替えて編集画面の背景を好みの配色とする事が出来ます。
テクスチャ画像は基本部CSSの最後の「配色」で指定しています。 以下はその部分の引用で、着色した文字がテクスチャ画像の実際に置かれたURLです。 自分の好みのテクスチャ画像を入手するか作るかして、エキサイトブログで画像登録し、そのURLを調べて下の着色した文字と置き換えてください。(2ヵ所)


body.win, #partsImage, .page_entry #entryOptions,
.page_entry #entryOptionsPstdate, .page_entry #entryOptionsPpenflag {
background:
url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif")
repeat !important; }

.page_entry #entry > #form {
background:
url("http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif")
repeat !important; }





IE版のアレンジは、適応サイトの選択機能の無いIEのユーザースタイルシート機能を利用するもので、若干の問題点があります。

●同じセレクタ名を記述したエキサイトの他の「設定」メニュー等で、スタイルの誤適応が発生する可能性があります。 そのため、セレクタ名の記述を綿密にして、誤適応の回避を心がけています。 誤適応は見栄えの問題が生じる程度ですが、IE11のこの機能を一時的にOFFにすれば誤適応は解消します。

●編集内容を棄ててマイブログに復帰したい場合は、保存をせず単にウインドウかタブを閉じて、別にマイブログを開いて下さい。



〔追記〕2016.10.26
タイトル入力枠の隣へのADインポーズの対策を修正。 上記の「基本部CSS」は対策更新されたものです。



〔追記〕2016.10.27
テンプレート管理画面の対応に関して追加修正しました。 追加コードの詳細は(15)IE11版ブラシュアップを参照ください。



〔追記〕 2017.01.15
画像パレット「×」スイッチが新設され、スイッチ位置を修正する下の項目を追加しました。
(参照:(22)画像削除スイッチ新設に対応する) 上記の基本部CSSは修正済みです。


#partsImageContainer li div input {
position: relative !important;
left: 43px !important; }




〔追記〕 2017.01.24
新設「お知らせリスト」の対策として、「基本部CSS」に対策項目を追加しました。
(参照:(23)「お知らせリスト」新設に対応する

〔追記〕 2017.03.04
「お知らせリスト」対策を削除。



〔追記〕2017.03.04
自動保存表示をスイッチ型にアレンジしました。 基本部CSSの関係個所を更新しました。
(参照:(25)自動保存表示のマイナーアレンジ



〔追記〕2017.03.05
「この項目に対して」のアコーディオン表示の関連コードを更新しました。
(参照:(26)トラックバック禁止の標準化に対応




by Ataron | 2016-10-23 17:33 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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