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

エキサイト旧編集画面のアレンジ(1) Chrome版 - プロトタイプ

2017年 03月 12日
新管理画面のアレンジは細部のアレンジも煮詰まった感がありますが、旧編集画面の方はフェイドアウトの予測から手を着けずにいました。 しかし、旧編集画面は現在も使用可能なので、腕慣らしがてらアレンジをしてみました。 旧編集画面を利用されていて Chromeユーザーには、比較的簡単に導入できるアレンジ環境です。

タグ選択機能が後半の方にあったり、画像パレットに修飾が可能だったり、とにかくHtmlの構成は大きく違います。 また、編集アイコンの種類が少なく、文字カラーのアイコンが無効のままなど、エキサイトのシステムから取り残された感があります。 ただ、基本操作は問題が無く「Html不使用」は避けて、利用上の問題はなさそうです。

エキサイト旧編集画面のアレンジ(1) Chrome版 - プロトタイプ_b0174191_04533576.png

アレンジは、新編集画面で行った基本方針を踏襲しています。 タイトル枠、本文記入枠、テンプレート選択枠はMedium(16px)、他の記入枠やラベルは基本的にSmall(13px)を使用。 編集画面をコンパクト化して、ブラウザ側の拡大で、高精細モニター上で拡大率を上げ易い様にしています。

(下はブラウザ拡大率100%時のハードコピーで、画像クリックで実寸表示されます)

エキサイト旧編集画面のアレンジ(1) Chrome版 - プロトタイプ_b0174191_21274840.png

本文編集枠の比率が大きく無駄なスクロールが減ります。 また編集時に、ウインドウ自体のスクロールバーが出にくい様にしています。 上の状態では、編集画面には本文編集枠と画像パレットに縦スクロールバーが出ますが、マウスのスクロール操作が全てそれらに割り当てられます。 これだけで編集操作はずいぶんスムーズになります。

旧編集画面のHtml構成で、各パーツの記述の前後関係や、ブロック・テーブルの内包構造で、アレンジに限界が生じます。 そういう制限から、投稿の各種設定を本文編集画面の上部に集めました。 結果として、新編集画面のアレンジほどのスマートさはありませんが、編集・投稿上で基本機能はほぼ受け継いでいます。(トラックバック枠、みんなの投稿枠、などは省略しています)



編集画面のアレンジは、ユーザースタイルシートという機能を利用します。 このページのアレンジには、ブラウザの Google Chrome と、スタイルシートを管理する Stylist という Chrome拡張機能が必要です。 Stylistは簡単にセット可能で、それに下のスタイルシートを設定します。 その操作は、以下のリンク先を参照ください。

但し上のページで、エキサイト編集画面のURLを記入する の枠は、新編集画面の説明です。 旧編集画面の場合は、この枠に設定するURLは、
http://www.exblog.jp/myblog/entry/new/
http://www.exblog.jp/myblog/entry/edit/
になります。



以下がユーザースタイルシートです。 Stylist に以下のCSSをコピー・ペーストしてスタイル登録をします。 以下のCSSは、ブラウザが Chrome でないと正しく動作しません。


/* 旧編集画面用 スタイルシート Chrome版 ver.1 */


#exHeaderWrapper {
display: none; }

#wrapper {
min-width: 940px; }

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

#toUserconf , #csEnquete {
display: none; }

#wrapper>div>table {
width: 100% !important; }

#exFooterWrapper {
display: none; }

#wrapper>div>table>tbody>tr>td:first-child {
display: none; }

#wrapper>div>table>tbody>tr>td:nth-child(2) {
width: auto !important;
display: block;
padding-left: 15px !important; }


/* *** */

#entry_header {
display: none; }

#template {
position: absolute;
top: 15px;
left: 660px;
height: 24px;
width: 90px;
padding: 4px 4px 0px !important;
overflow: hidden; }

#template:hover {
left: 150px;
height: auto;
width: 600px;
padding: 8px 10px 0px !important;
background: #fff !important;
z-index: 2; }

#template_names {
overflow: hidden; }

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

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

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

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


/* *** */

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

#subject_title {
display: none; }

#subject input {
width: 590px !important;
height: 23px;
padding: 3px 20px 0px;
font-size: medium;
border: 1px solid #ccc;
border-radius: 3px; }

#subject input:focus {
width: 692px !important; }


/* *** */

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

#category_title {
display: none; }

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

#CateStr input.submit {
height: 24px !important;
padding: 2px 0 0 !important;
vertical-align: top; }

/* *** */

#tags {
position: absolute;
top: 55px;
left: 305px;
width: 448px;
padding: 0 !important; }

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

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

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

#tags .tag a {
width: 13px !important;
height: 13px !important;
border-radius: 13px;
background-position: -5px -4px; }

#tags_attention {
display: none; }


/* *** */

#entrydate {
position: absolute;
top: 90px;
border: 1px solid #ddd;
padding: 4px 6px !important; }

#entrydate_setting select {
height: 21px !important;
background-color: #eee; }

#entryopen {
position: absolute;
top: 90px;
left: 332px;
width: 410px;
padding: 5px 0px 29px 6px!important;
border: 1px solid #ddd; }

#entryopen_title {
width: 65px !important; }

#entryopen_title >a {
display: none;}

#entrydate_setting {
margin-left: 0 !important; }

#ping_form {
position: absolute;
top: 120px;
left: 340px;
white-space: nowrap; }


/* *** */

#entrymenu {
position: absolute;
top: 180px;
width: 700px; }

#entrymenu_title {
display: none; }

#entrymenu_content {
width: auto !important; }

span#usehtml a {
border-radius: 3px; }

span#usehtml br {
display: none; }


/* *** */

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

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

#smallPallet {
position: relative;
left: 60px;
height: 20px !important; }

#skype {
position: relative;
left: 195px; }

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

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

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

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


/* *** */

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

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

#no_html input.SUBMIT {
display: none; }


/* *** */

td.mid {
padding-right: 20px; }

form[name="insertform"] td.mid {
padding-bottom: 0 !important; }

form[name="insertform"]>table:first-of-type {
width: 100%; }

form[name="updateform"]>table:first-of-type {
width: 100%; }

textarea#content {
width: 100% !important;
height: 440px !important;
font-size: medium;
padding: 5px 10px;
position: relative;
top: 200px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


.mt5 {
position: relative;
top: 200px;
height: 24px;
width: 80px;
padding: 3px 0 0 !important; }

.mt5 label {
vertical-align: 2px !important; }

.mt5 span.HELP {
display: none; }

#morehtml table {
width: 100%;
position: relative;
top: 200px; }

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

#morehtml span.HELP {
display: none; }

textarea#morecontent {
width: 100% !important;
height: 440px !important;
font-size: medium;
padding: 5px 10px;
margin-bottom: 24px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important; }


/* *** */

form[name="insertform"]>table:last-of-type {
display: none; }

form[name="updateform"]>table:last-of-type {
display: none; }


/* *** */

#entryoption {
position: absolute;
top: 150px;
width: 733px;
height: 21px;
overflow: hidden;
margin: 0 !important;
background: none !important;
border: 1px solid #ddd; }

#entryoption_title {
display: none; }

.entryoption_menu {
margin: 3px 8px 3px 5px !important; }

.entryoption_menu input {
margin: 0 -2px 0 0 !important; }

#cdcdcd {
display: none; }

#upload {
display: none; }

div#upfile_list {
display: none; }

#upload_notes {
display: none; }

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

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

#file_drop {
height: 120px !important;
border: solid 3px #eee !important;
border-radius: 3px !important; }

#preview {
margin-top: 6px !important;
height: 570px !important;
border-radius: 3px !important; }


/* *** */

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

*{ font-family: "メイリオ","Meiryo" !important; }

body {
background-color: #98c1dc; }





このユーザースタイルシートを使ったアレンジは、編集画面のスキンアレンジです。 ブラウザ表示にフィルターをかけているだけで、編集や通信作業は本質的に同じです。 Stylistのスイッチを切り替えてページをリロードすれば、簡単に普通の表示に戻ります。 データ上は安全で、エキサイト側に何の影響も与えません。



背景色などの変更について

ユーザースタイルシートを使った環境下では、編集画面の背景色を好みのものに変更するのは簡単です。 一番最後の「body」で始まる項目は画面全体の背景色の指定です。

body {
background-color: #98c1dc; }

#98c1dc」の部分のカラーコードを、好みの色のコードに書き換えて、簡単に背景色を変更出来ます。

〔注意〕
背景色の指定に限りませんが、ある要素に対しての修飾指定コードを記入しても、それが反映する場合としない場合があります。 指定した対象の要素や指定内容の間違い等もありますが、先ず疑うべきは、本来のデザインで、その要素に既に別の指定がされている場合です。 その場合は、こちらの指定の優先順位を強くする「!important」を割り込ませれば反映します。 この例では、以下の様な記述になります。

body {
background-color: #98c1dc !important; }



また、背景色を指定する代わりに、テクスチャー画像を背景に出来ます。 テクスチャー画像は「.gif」「.png」形式の軽い小画像で、これを敷き詰めて背景にします。 カラーコードの単色では表せない、肌ざわり感のある背景が可能です。

以下は、先の「body」の項目を、テクスチャー画像を背景にした形に書き換えた例です。

body {
background:
url(http://image.excite.co.jp/jp/exblog/userconf/images/userconf_base/bg_wrapper.gif); }

太字の部分は、ネット上に置かれたテクスチャー画像のURLです。 これは、エキサイトの編集画面の背景に使われているテクスチャーです。 自分でアップロードしたオリジナルのテクスチャー画像も、同様にして背景に設定可能です。

下図はこのテクスチャー画像を背景に設定した状態です。 大人しいテクスチャーですが、上半分の設定の区分けの細線がほぼ同色なので、見わけが付かなくなっています。

エキサイト旧編集画面のアレンジ(1) Chrome版 - プロトタイプ_b0174191_22134426.png



「body」のひとつ上の項目は、ページ上で使用されるフォントを指定するもので、小さなラベルや本文編集枠のフォントまで、ほぼ全てがここの指定で入れ替わります。 既定は、下の太字の部分で「メイリオ」を指定していますが、この項を書き換えれば別フォントを指定できます。 文書全体にわたるフォント指定は、普通は元から何等かの指定がされているので、この場合も「!important」を入れたコードで変更しています。

*{ font-family: "メイリオ","Meiryo" !important; }



〔追記〕2017.03.30
「エモーティコン」アイコンが削除され、編集アイコン配置が崩れたため、配置コードを修正済みです。




by Ataron2 | 2017-03-12 00:00 | ブログ旧編集画面のアレンジ