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

エキサイト編集画面のアレンジ(73) 「おすすめブログテーマ」の割込み対策

2017年 11月 30日

おすすめブログテーマの配置異常


月末に「おすすめブログテーマ」が「スカパー」に差替えられましたが、編集画面の上部に割込んでしまいました。 このパーツ(下図の緑枠内)が割込むのは去年10月末以来です。

エキサイト編集画面のアレンジ(73) 「おすすめブログテーマ」の割込み対策_a0349576_14331808.png

下はデフォルトの「おすすめブログテーマ」で、タイトル入力枠の隣です。

エキサイト編集画面のアレンジ(73) 「おすすめブログテーマ」の割込み対策_a0349576_14285089.png

去年もこれが生じたのですが、何か理由がありそうですが、この要素のIDの「trb_themeTtl」が生じたり消えたりします。 私の最近のアレンジコードでは、IDを持っている事を前提にしていましたが、今回、再びIDが無くなり、アレンジによる配置指定が効かなくなりました。

今後の事を考慮して、IDが無い場合も有る場合にも対応する指定に改めました。 セレクタは、この要素をtable内の要素のある場所を指定する形で、下の様に少し長くなりました。 なお、プロパティは全く変える必要がありませんでした。

#entryEditHead-new tr:nth-child(1) td:nth-child(3)

対策で、「おすすめブログテーマ」は、下の様に本来のデザインになります。

エキサイト編集画面のアレンジ(73) 「おすすめブログテーマ」の割込み対策_a0349576_14405117.png

以上の対策して、Chrome版 Firefox版 のMore拡張各バージョンを「ver.6 → ver.6.2」に更新しました。


Chrome / Firefox で編集画面をアレンジするには


編集画面のアレンジは、各ブラウザに対応する拡張機能「Stylus」が導入されている事が前提です。 以下のページに「Stylus」の導入手順とスタイルのインストール手順を説明していますので、参照ください。

 「編集画面のアレンジ」を「userstyles.org」からインストールする

既に「Stylus」を導入している場合は、更新スタイルは以下の各リンク先から入手できます。

 Chrome版 「userstyles.org」 Excir Blog Writer (Chrome) のページ
 Firefox版  「userstyles.org」 Excir Blog Writer (Firefox) のページ



対策後の関連するCSSコード


以下は Chrome / Firefox版のコードで、IE版はセレクタに若干の調整や !important 追加をしています。


/* おすすめブログテーマ */
#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
top: 714px;
left: 850px;
margin: 0;
padding: 2px 0 2px 8px;
height: 36px;
width: 69px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
transition: 0.5s; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover {
top: 670px;
left: 700px;
height: 74px;
width: 207px;
padding: 5px 10px; }




トラックバック枠のデザイン変更


トラックバック枠のデザインを再度修正しました。 前コードは、IE版で画像パレットの後方になる問題があり、手を加えています。 この変更は各ver6.2に追加しています。


/* トラックバック枠 */
#entryTrackback {
position: absolute;
left: 850px;
bottom: 0;
width: 79px; }

#entryTrackback:hover {
z-index: 4; }

header.boxHead.head-h3 {
display: block;
position: relative;
top: 113px;
left: -378px;
width: 439px;
background: #eceff1;
height: 28px;
opacity: 0;
transition: opacity 1s;
z-index: -1; }

#entryTrackback:hover header.boxHead.head-h3 {
opacity: 1;
z-index: 5; }

#entryTrackbackTextarea {
position: relative;
width: 79px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
background: #fbfbfb;
box-shadow: none;
border: 1px solid #ccc;
border-radius: 3px;
font-size: medium;
overflow: hidden;
transition: 0.2s; }

#entryTrackbackTextarea:hover {
width: 459px;
margin: 0 0 0 -380px;
padding: 5px 0 0 20px;
overflow-y: scroll;
transition: 0.5s;
z-index: 4; }

#entryTrackbackTextarea:focus {
height: 100px;
width: 459px;
margin: 0 0 0 -380px;
padding: 5px 0 0 20px;
overflow-y: scroll;
z-index: 4; }

.notesBoxHead {
position: absolute;
bottom: 44px;
left: -849px;
line-height: 28px;
padding: 5px 20px 0 150px;
width: calc(100vw - 211px);
min-width: 749px;
background: rgba(58, 135, 173, 0.2); }

.notesBoxHead h1::before {
content: "トラックバック"; }

.notesInner {
position: absolute;
bottom: 48px;
left: -450px;
padding: 0;
font-weight: bold; }





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


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

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