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

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル

2016年 06月 09日
ブログ編集画面のアレンジ続行中です。

今回のバージョンの特徴は「タイトル、カテゴリ、タグ」の入力部をプルダウンメニューに納めている点です。 このデザインの利点で、「テンプレート」機能を省かずに上部のコンパクト化が可能でした。

以下、全てのハードコピーはChromeの画面拡大率100%、フォントサイズ「中」の状態です。 図をクリックすると等倍表示になります。


最初は編集画面のウインドウ全体の様子です。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_22004712.png

●画像パレットの高さに全てを納めたので、全体のウインドウに右スクロールバーが出ていない事に注意してください。 編集画面全体は上下に移動することが無くとても快適で、この状態での使用がブラウザ画面拡大率が125%でも普通に可能です。 マウスのスクロールは、必ず編集文書のスクロールとして働きます。
この操作性を得るために、上下方向のコンパクト化が是非とも必要で、それが必要でなければ無理をする必要が無いとも言えます。

●一番特徴のある部分は「タイトル、カテゴリ、タグ」の入力部です。 マウスを下図のブルーの感知部に持って行くと、入力部がプルダウして現れます。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_22124490.png

実際はブルーを白に変え、落ち着いた画面にしています。 下はプルダウンした様子です。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_22191640.png

プルダウンのベース面は広くとれるので、入力部分のレイアウトに余裕があります。

●上図は再編集時の画面で「テンプレート枠」が表示されていませんが、新規作成時には「タイトル枠」の右にスイッチが出ます。 プルダウンを開き「テンプレート」スイッチを押すと、左に拡張して下図の様にテンプレート選択が可能になります。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_22282202.png

開いたベース外へポインターが移動すると、ベースは消失します。 ただし入力枠はそのまま残り、入力や選択操作が可能です。 下図はタイトル入力中にベースが消失した状態で、背景が透けて露出していますが実際は困った状態ではありません。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_22381119.png

●消え残った入力枠には入力や選択操作が可能で、不要ならウインドウ内の何処かをクリックして消せます。 しかし、タグ枠の下に伸びる選択枠だけは、その内部をクリックしない限り消えません。 そして、これは必ずタグの選択になります。 これは意図しないタグ設定となり気付かない可能性があります。 下図の左側が、べースが消えた問題のタグ選択枠です。 この状態で選択が効き、選択するしか消えないという事です。 もしタグ選択をせずに消したいなら、もう一度プルダウンして、右側の小さなボタンを押す必要があります。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_23145946.png

慣れれば困りませんが、この様なちょっと変なメニュー動作は、CSSによるプルダウン改造の限界です。

●コンパクト化のため、このバージョンは「More機能」を省きました。 過去に「More機能」で記述した投稿は、「本文部」は編集可能ですが「More部」は編集できません。 「本文部」編集によって「More部」が損失する事はなく、編集画面に表示されず単に触れなくなるという事です。(プレビューにはMore部が表示され、編集を抜けると以前通りです) この省略は、縦幅を抑えるために必要と判断しました。

●「トラックバック枠」「みんなの投稿枠」は省きました。 やはり縦幅をかせぐ目的です。

●下部の「この投稿に対して」は省略可の気がしますが、「投稿日時」「公開設定」は省くと困るでしょう。 この3種の項目を一行に纏められたので「この投稿に対して」を残せました。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_23560914.png

下部の3種の項目、更にその下の「画像管理」「マイブログ」「プレビュー」「保存」「下書き保存」も、最初はプルアップのデザインをしました。 しかし、本文編集枠がかなりの縦幅を取れる余裕に気付きました。(現状の縦幅は600pxで、エキサイトのオリジナルは400pxです) そこで、視認性や操作性を無理して損なう必要はないと考え、これらに2行を与える事に改めたのです。

ただ、上記の3種の項目は小型にして、マウスフォバーでそれぞれ拡張して操作する様にしています。

編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_23554491.png
編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_00171942.png
編集画面をアレンジする(7)/ エキサイトブログ Chrome版-プルダウンタイトル_b0174191_00172670.png

3種のフォントサイズを固定とすれば、もう少し綺麗なデザインに出来ますが、今回は3種を1行に納め、まずまずの操作性を得たのでよしとしました。

●下部のスイッチ類に2行に納めるなら、上部に1行を与えて操作性を改善したメニュー部を作れるのではと考えています。 これは次のバージョンの課題です。

●「画像管理」スイッチは、右クリックで別途に画像管理画面を開く目的で設置しています。 左クリックでは、編集内容が破棄されるので注意が要ります。「#sidemenu .sidemenu1 li:nth-child(4) a 」(基本部CSS下から3項目)の項を削除すると「画像管理」スイッチが非表示となり、この危険を避けられます。



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

〔Chrome版-プルダウンタイトル〕

基本部CSS


/* Chrome版-プルダウンタイトル */

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

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

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

#wrapper {
min-width: 1025px;
background: none; }

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

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

.hasmenu #contents {
margin: 0;
padding: 0;
border: none;
border-radius: 0; }

#toOldVersion {
display: none; }

header.boxHead.head-h1 {
display: none; }

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


/* *** */

#entryEditHead-new {
border: 1px solid #ccc;
padding: 15px 30px 150px;
margin: 0px 0px 575px;
height: 30px;
background: #fff; }

#entryEditHead-new:hover {
position: relative;
background: #f7f7f7;
z-index: 2; }


#entryEditHead-new .innTable01 {
border-bottom: none !important;
background: none; }

#entryEditHead-new .innTable01 select {
position: absolute;
top: 80px;
left: 640px;
width: 200px; }

#entryEditHead-new .innTable01 select:focus {
left: 200px;
width: 600px;
z-index: 2; }


.alert.alert-red {
position: absolute;
left: 160px;
z-index: 1; }


/* *** */

#entryEditHead-new table {
background: none; }

#entryEditHead-new th {
display: none; }


#entryEditTitle {
position: absolute;
top: 80px;
width: 600px; }

#entryEditTitle input:focus {
position: relative;
z-index: 2; }


#entryEditCategory {
position: absolute;
top: 25px; }

#entryEditCategory select {
width: 180px; }

#entryBlogCategoryDialog.btn {
height: 32px; }

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


#entryEditTags {
position: absolute;
top: 25px;
left: 260px; }

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

#entryEditTags span.tags input {
width: 180px; }

.tagCompletionBox {
width: 178px; }

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

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

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

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


/* *** */

#entryEditWrap {
position: absolute;
top: 15px;
margin: 0;
background: #fff;
width: 100%;
height: 710px;
z-index: 1; }


#entryEditInner {
margin: 0px -205px 0px 0px; }

#entryEditContents {
padding: 0px 0px 0px 15px; }


#entryEditContents .entryPreview.btn-s {
height: 30px;
top: 4px;
right: 16px;
width: 96px;
z-index: 1; }

#entryEditContents #preview {
font-weight: bold;
padding: 0px 0px 3px; }

#exbtn_status {
margin: 36px 12px 0px;
width: 100px; }

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

#editorSwither {
position: absolute;
top: 15px;
left: 450px; }

#editorSwither a {
padding: 0; }

#entryTabmenu li {
margin-right: 4px; }

#new_icon {
display: none !important; }


/* 編集枠部 */

#_entryContent, #entryContent{
line-height: 150%;
height: 600px;
margin: 0px 0px 80px; }


span#more {
display: none; }

span#notmore {
display: none; }

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

#entryMoreArea {
display: none !important; }


/* 下部整理 1 */

#entryOptions {
position: absolute;
top: 660px;
left: 628px;
width: 180px;
height: 32px;
padding: 2px 0px 10px;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }

#entryOptions:hover {
position: relative;
height: 123px;
top: -155px;
left: 0px;
width: auto;
padding: 0px 15px;
z-index: 1; }

#entryOptions .head-h3 {
margin: 6px 0px 6px;
border: none; }

#entryTrackback {
display: none; }


/* 画像パレット部 */

#entryEditIframe iframe {
width: 198px;
height: 770px;
position: fixed;
top: 0;
z-index: 1; }


/* 下部整理2 */

#blog2media {
display: none; }

#entryOptionsPstdate {
position: absolute;
margin: 0;
top: 660px;
left: 15px;
width: 273px;
overflow: hidden;
white-space: nowrap;
padding: 6px 10px 0px;
border: 1px solid #ccc;
border-radius: 3px;
background: #f7f7f7; }

#entryOptionsPstdate:hover {
top: 660px;
left: 15px;
width: 773px;
z-index: 1; }

#entryPstdateElement select {
width: 82px; }

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

#entryOptionsPpenflag {
position: absolute;
top: 660px;
left: 325px;
width: 260px;
overflow: hidden;
white-space: nowrap;
padding: 6px 10px 0px;
border: 1px solid #ccc;
border-radius: 3px;
background: #f7f7f7; }

#entryOptionsPpenflag:hover {
top: 660px;
left: 15px;
width: 580px;
padding: 6px 0px 0px 213px; }

#entrySubmitBtm {
position: absolute;
top: 730px;
left: 30px;
width: 100%;
border: none;
padding: 0;
margin: 0; }

#entrySubmitBtm .btn {
padding: 2px 10px 0px; }

#entrySubmitBtm .w250 {
width: 200px; }

#menu {
float: right; }

#loginUser {
display: none; }

#myblogBtn {
position: absolute;
top: 730px;
left: 140px; }

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

#sidemenu .sidemenu1 li:nth-child(4) a {
position: absolute;
top: 730px;
left: 20px;
line-height: 36px;
border-radius: 3px; }

#sideRakutenMW {
display: none; }

#exFooterWrapper {
display: none; }



Medium指定CSS


/* Medium版 オプション */

#entryEditTitle {
font-size: medium; }

#_entryContent, #entryContent {
font-size: medium; }



Small指定CSS


/* Small版 オプション */

#entryEditTitle {
font-size: small; }

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



基本部CSSMedium指定CSS を追記」したCSSを登録すれば、Medium版の環境になります。
基本部CSSSmall指定CSS を追記」したCSSを登録すれば、Small版の環境になります。

上のどちらかの組合わせを Stylist に登録することで、上記の編集画面を実現できます。 Medium版とSmall版のどちらが適しているかはユーザー側の常用環境でテストして判断してください。
Stylistの操作については過去記事の「編集画面をアレンジする(1)」を参照ください。


by Ataron | 2016-06-09 11:34 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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