Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(79) ヘルプページ表示のオプション

2018年 03月 26日

エキサイト編集画面のヘルプ


エキサイトブログは、旧ヘルプページとリニュアルしたヘルプページが共存する形でしたが、SSL移行に伴いリニュアルしたヘルプページに完全に移行した様です。 2018年3月では、「スキン編集ヘルプ」や、このページで問題にする「編集画面のヘルプ」などが、既にリニュアルを完了しています。

エキサイト編集画面のアレンジを利用しようと言う方は、ある程度以上のスキルを持つユーザーでしょう。 そういったユーザーを前提として、開発当初は簡素化を優先しました。 しかし、アレンジのノウハウの蓄積で余裕が出来て、編集画面上の機能をなるべく捨てない方向に、方針を変えて来ました。

「2行編集アイコン」のオプションで、全編集アイコンを利用可能とし、「お知らせリスト」「みんなの投稿」「キャンペーン」「トラックバック枠」などの機能枠を、既にアレンジ編集画面上にコンパクトに組み込んでいます。 残ったのは「ヘルプ」です。

ヘルプは2種あり、その1種は「」の4個のマークで、下の様なチュートリアルが表示されます。

a0349576_19392097.png

これは面白い演出ですが、ごく初歩の説明で、無理して採り入れる必要は無いと判断しました。

もう1種のヘルプは「ヘルプ」のキャプションのあるボタンです。 それらは、以前は旧ヘルプページの関連個所を開いたのですが、現在はリニュアルしたヘルプページを開きます。(設定画面のヘルプ)

編集中でもこのヘルプボタンで、他のウインドウでヘルプが参照できます。 これは、使い慣れたユーザーでも有効な場合があるかも知れません。 そこで、実装は先ですが、アレンジコードを作っておく事にしました。



ヘルプボタンを編集画面上に表示する


調べると、この「ヘルプ」ボタンは結局同じ所を表示します。 つまり、ボタンは編集画面内に1個あれば良いでしょう。 どれかのヘルプ項目を開ければ、他の項目も開く事が出来ますから。

アレンジ元にしたのは、本来の編集画面の一番上部のものです。 これは早い内から、新ヘルプを開くリンクになっていました。

a0349576_20040830.png

従来のアレンジでは、「記事を書く」の枠全体を非表示にしていましたが、一旦表示に戻し、不要な要素を全て削いで、リンクの「a要素」のみを移動して使用します。

配置場所は編集アイコンの隣で、「ヘルプ」のままでは邪魔になるので「擬似要素」で FontAwesome のマークを表示して、それをコンパクトなスイッチにしました。

a0349576_20114647.png

以下がアレンジコードです。



/* 編集ヘルプ */

.boxHead.head-h1 {
/* display: none; */
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;
border: none; }

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

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





これを正式に採り入れるなら、オプション項目のひとつになるでしょう。





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



[PR]
by Ataron | 2018-03-26 20:30 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/28212837
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

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