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

編集画面をアレンジする(18)/ エキサイトブログ Chrome版-ブラッシュアップ(通常アイコン)

2016年 10月 22日
エキサイト編集画面のアレンジは、ユーザースタイルシート(CSS)を適応して実現します。 ブラウザに「Chrome」を利用している場合は、この目的のために拡張機能「Stylist」が必要です。 初めて編集画面のアレンジを設定する場合は、最初に以下のリンク先の説明を参照ください。




編集アイコンを1行にダイエットした編集画面が、私としては好みで、編集枠の高さを圧迫しないので、最も推奨されるデザインだと考えています。
しかし、環境や理由で編集の仕方はユーザーによって違うことを認めなければなりません。 そういう意味では、公式に提供されている編集アイコンを削らずにデフォルトの組み合わせのまま置いたバージョンは、広いユーザーに対しての保障になると考えました。

また、先月に行われたリッチリンクの追加など、編集アイコンのパネルが更新される事は、今後も予想されます。 そういった場合に、編集アイコンがデフォルトの構造だと、アレンジの修正なしで済ませられます。 これらの考えから、今回の「Chrome版-ブラッシュアップ(通常アイコン)」を追加しました。




●「タイトル入力」「カテゴリ選択」「タグ」「テンプレート」の入力は、最上部の1行にコンパクトに収めています。

●編集アイコンはエキサイト標準の2行です。

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

以下はオプションです。

●「small指定」... タイトル枠や文書編集枠のフォントが一回り小型になります。 編集画面のフォントが大き過ぎると感じる事が多い場合に、このオプション追加します。

●「トラックバック枠」「みんなの投稿枠」... デフォルトは省いていますが、これらの入力枠の追加するオプションです。

●「More用パレット」...「More編集」を多用する場合に、画像パレットが編集ウインドウに固定され、使い易くなります。

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




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

編集画面をアレンジする(18)/ エキサイトブログ Chrome版-ブラッシュアップ(通常アイコン)_b0174191_19484092.png

以下は「Stylist」に登録するCSSです。 これは Chrome専用のユーザースタイルシートです。


〔 Chrome版-ブラッシュアップ(通常アイコン)〕

基本部CSS


/* 〔 Chrome版-ブラッシュアップ(通常アイコン)〕 */

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

body.win select {
height: 28px;
padding: 3px 5px 0px;
font-size: 1.3rem }

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

#wrapper {
min-width: 1024px;
min-height: 0;
background: none;
margin-bottom: 25px; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }


/* *** */

#container.hasmenu {
position: relative;
margin: 0px -205px 0px 0px;
float: left;
z-index: 1; }

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

.hasmenu #contents {
margin: 0;
padding: 0px 2px 0px 15px;
background: #fbfbfb;
border: none;
border-radius: 0; }

#announceList {
display: none; }

header.boxHead {
display: none; }


/* タイトル部 */

section#entry > #form {
width: 100%; }

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

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none;
z-index: 1; }

#entryTemplateList select:focus {
left: -400px;
width: 421px; }

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

#entryEditHead-new th {
display: none; }

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

#entryEditTitle:hover {
width: 792px; }

#entryEditTitle :focus {
position: relative;
width: 792px; }

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

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

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


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

#entryEditCategory select {
position: absolute;
width: 100px;
padding: 4px 5px 0px;
font-size:13px; }

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

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

#entryBlogCategoryDialog.btn input {
font-weight: normal;
text-indent: -61px;
font-size: 13px;
width: 28px;
padding: 2px 10px 0px; }

#entryEditTags {
position: absolute;
top: 15px;
left: 353px;
width: 480px; }

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

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

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

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

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

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

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


/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
margin: 56px 215px 0px 0px;
padding: 0; }

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

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

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

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

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

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

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

#new_icon {
display: none !important; }

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

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


/* 編集部 */

#_entryContent, #_moreEntryContent {
background: #fbfbfb;
line-height: 150%;
margin: 0;
height: 565px;
font-size: medium; }

#entryContent, #moreEntryContent {
background: #fbfbfb;
line-height: 150%;
margin: 0;
height: 565px;
font-size: medium; }


/* More部 */

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

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

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

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

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

input#moreEntrySubject {
font-size: medium; }


/* 下部整理 1 */

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

#entryOptions:hover {
width: 100%; }

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

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

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

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


#entryTrackback {
display: none; }


/* 画像パレット */

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

#entryEditIframe {
position: absolute;
overflow: hidden;
right: 2px;
z-index: 2; }

#entryEditIframe iframe {
width: 200px;
height: 760px; }


/* 下部整理2 */

#blog2media {
display: none; }

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

#entryOptionsPstdate:hover {
width: 100%; }

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

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

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

#entryOptionsPpenflag {
position: relative;
left: 530px;
width: 200px;
top: -54px;
margin: 0px 0px -56px;
padding: 14px 10px 10px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
z-index: 2;
transition: 0.5s; }

#entryOptionsPpenflag:hover {
width: 100%; }

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

#entrySubmitBtm {
width: 100%;
border: none;
padding: 0;
margin: 0px 0px 5px; }

#entrySubmitBtm .btn {
height: 28px; }

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

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


#menu {
float: right; }

#myblogBtn {
position: absolute;
left: 130px;
height: 28px;
margin: 0;
bottom: 5px;
z-index: 1; }

#myblogBtn a {
line-height: 28px;
background: none;
text-indent: 0px; }

#sideRakutenMW {
display: none; }

#exFooterWrapper {
display: none; }


/* 配色 */

body, .hasmenu #contents, #entryOptions,
#entryOptionsPstdate, #entryOptionsPpenflag {
background:
url("http://pds.exblog.jp/pds/1/201606/23/91/b0174191_11353776.png"); }

ul#_panel {
background: none;
border: none; }

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

.panelBtn {
border-radius: 3px; }



以下はオプションです。 それぞれの項目を「基本部CSS」の後に追記すると、オプションが実効します。


small指定オプション


#entryEditTitle {
font-size: small; }

#_entryContent, #_moreEntryContent {
font-size: small; }

#entryContent, #moreEntryContent {
font-size: small; }

input#moreEntrySubject {
font-size: small; }



トラックバック枠追加オプション


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

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

#entryTrackbackTextarea {
height: 32px;
min-height: 32px;
font-size: medium; }



みんなの投稿枠追加オプション


#blog2media {
display: block !important;
margin: 0px 215px 60px 0px;
background-color: #f7f7f7; }

.entryRadioBtoM#b2m_checked {
border: 2px solid blue; }



More用パレット


#entryEditIframe {
position: fixed; }



配色アレンジ

①好みの背景テクスチャーを用意します。 ネット上から適当なものを探すか、画像アプリで作っても良いでしょう。 テクスチャー画像は「20×20px」程度の小型の「.png」画像が適当です。

➁通常の画像と同様にエキサイトにアップロードし、画像パレット上に登録されたテクスチャー画像を右クリックして「リンクのアドレスをコピー」します。(登録したテクスチャー画像のURLを入手する作業です)

➂コピーしたアドレスを以下の場所にペーストして、デフォルトのURLと置き換えます。
(既にStylistに基本部CSSを登録している場合は、Stylistを開いて該当箇所に直接コピーします)

ペースト場所:基本部CSSの最後から4項目の以下の着色した部分です。
body, .hasmenu #contents, #entryOptions,
#entryOptionsPstdate, #entryOptionsPpenflag {
background:
url("http://pds.exblog.jp/pds/1/201606/23/91/b0174191_11353776.png"); }

周囲の(" ")等を消さない様に、青文字の部分だけを書き換えます。

④書き換えた基本部CSSを Stylistに登録「save」して、リロードすると新しいテクスチャーが反映されます。

配色アレンジの詳細は(10)Chrome版-配色カスタマイズ を参照ください。



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



〔追記〕 2017.01.15
画像パレット「×」スイッチの新設により、「画像管理」スイッチを廃止しました。
(参照:(22)画像削除スイッチ新設に対応する) 上記の基本部CSSは修正済みです。



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

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



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



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



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

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