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

エキサイト編集画面のアレンジ(39) 「キャンペーン枠・みんなの投稿枠・お知らせリスト」の統合オプション

2017年 07月 28日
(38)で「キャンペーン枠」「みんなの投稿枠」のボタンで開く方式をデザインしましたが、これに「お知らせリスト」のボタンを追加しました。 エキサイトのシステム変更やメンテナンスなど、重要な告知はこのリストに載るので、アレンジした編集画面からでもリストが見れる方が良いという判断です。

このデザインの経過で、各ボタンのデザインと枠の開き方を改善しました。「お知らせリスト」は、告知を「×」で消して行くと行が減り、告知が無い状態では2×2pixの点となり邪魔になりません。(点を上手くポイントすると最下段にブランク枠が表示されます)

このオプションは(38)を拡張したもので、「キャンペーン枠・みんなの投稿枠・お知らせリスト」を纏めて追加します。(38)を既に追記している場合は、その行を削除して代わりにこの(39)を追記してください。

Chrome版の基本CSSは、最下段の余裕を作るために「マイブログを見る」の右端を隠し、「マイブログ」の短いボタンに改めました。 IE11版の基本CSSは、左メニューの露出抑止方法の修正が必要になりました。 表面上は変化がありませんが、このページの最後に更新部分を掲載しています。



Chrome版では、各枠を開くボタンは下図の様に配置されます。

エキサイト編集画面のアレンジ(39) 「キャンペーン枠・みんなの投稿枠・お知らせリスト」の統合オプション_a0349576_23404316.png

「お知らせリスト」のボタン上にポインタを乗せると、下図の様に未消去の告知行が表示されます。

エキサイト編集画面のアレンジ(39) 「キャンペーン枠・みんなの投稿枠・お知らせリスト」の統合オプション_a0349576_23421615.png

告知が無い時は、ボタンは点になり邪魔になりません。 告知があればボタンの表示で判断出来ます。
IE版のボタンは、最下段の左端に配置されます。

エキサイト編集画面のアレンジ(39) 「キャンペーン枠・みんなの投稿枠・お知らせリスト」の統合オプション_a0349576_23502456.png



新オプションは More拡張の各最新版にのみ対応します。 基本CSSの日付を確認して「2017.07.28」以前の日付の場合は、先に基本CSSを更新してください。

Chrome版 ver.2 2017.07.28 の基本CSSは以下にあります。

IE11版 ver.2 2017.07.28 の基本CSSは以下にあります。


「キャンペーン枠・みんなの投稿枠・お知らせリスト」を利用する場合は、各 More拡張の基本CSS の末尾に、以下のオプションを追記してください。

Chrome版 キャンペーン枠・みんなの投稿枠・お知らせリスト 表示オプション


/* キャンペーン枠・みんなの投稿枠・お知らせリスト 表示オプション */

#entrySubmitBtm {
margin: 0 0 25px 0; }


.campaign-container {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 160px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%); }

.campaign-container:hover {
margin: 0 0 20px 0;
padding: 20px 20px 10px;
width: calc(100% - 287px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 185px;
padding: 28px 0 0 18px;
width: 0;
max-height: 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%); }

#blog2media .boxHead {
display: block; }

#blog2media:hover {
margin: 0 0 20px 0;
padding: 15px 20px 20px;
width: calc(100% - 245px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#announceList {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 210px;
padding: 0;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%); }

#announceList:hover {
margin: 0 0 20px 0;
padding: 30px 0 10px;
max-width: none;
width: calc(100% - 247px);
max-height: 300px;
transition: max-height 1s;
background: #a4c1ce; /* 編集画面 背景色 */
z-index: 5; }

#announceList ul li {
margin: 10px 30px; }



IE11版 キャンペーン枠・みんなの投稿枠・お知らせリスト 表示オプション


/* キャンペーン枠・みんなの投稿枠・お知らせリスト 表示オプション */

.page_entry .campaign-container {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 25px 0 !important;
padding: 26px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%); }

.page_entry .campaign-container:hover {
margin: 0 0 20px 0 !important;
padding: 20px 40px 10px !important;
width: calc(100% - 274px) !important;
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 25px 28px !important;
padding: 26px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%); }

.page_entry #blog2media:hover {
margin: 0 0 20px 0 !important;
padding: 15px 40px 20px !important;
width: calc(100% - 192px) !important;
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }


#entry #announceList {
display: block !important;
position: absolute;
left: 0;
bottom: -32px;
margin: 0 0 25px 71px !important;
padding: 0 !important;
max-width: 18px;
max-height: 26px;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;

background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%);
z-index: 1; }

#entry #announceList:hover {
margin: 0 0 20px 15px !important;
padding: 30px 0 10px !important;
max-width: none;
width: calc(100% - 194px) !important;
max-height: 300px;
transition: max-height 1s;
background: #a4c1ce; /* 編集画面 背景色 */
z-index: 5; }

#entry #announceList ul li {
margin: 10px 30px !important; }





(36)Chrome版 More拡張の基本CSSの更新部分です。 基本CSSは既に更新済です。


#myblogBtn {
width: calc(6.8em + 43px); } /* フォントサイズに順応して右端を隠す */



(35)IE11版 More拡張 の基本CSSの更新部分です。 基本CSSは既に更新済です。


/* タイトル部 左メニューの露出抑止の目的の「z-index」指定を削除 */

.page_entry #entry > #form {
/* z-index: 1; */ }

/* 左メニュー 編集画面への露出抑止を個別に処理 */

#loginUser {
height: 0; } /* ログインユーザー部の露出抑止 */

#myblogBtn a::before {
content: none !important; } /* マイブログボタンのアイコンの露出抑止 */

#sidemenu .sidemenu1 {
height: 520px !important;
overflow-y: scroll !important; } /* 左メニューの高さ制限で露出抑止 */

#sidemenu li a {
white-space: nowrap !important; } /* 左メニューの行崩れを防止 */





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



by Ataron | 2017-07-28 12:30 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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