おすすめブログテーマの配置異常
月末に「おすすめブログテーマ」が「スカパー」に差替えられましたが、編集画面の上部に割込んでしまいました。 このパーツ(下図の緑枠内)が割込むのは去年10月末以来です。
下はデフォルトの「おすすめブログテーマ」で、タイトル入力枠の隣です。
去年もこれが生じたのですが、何か理由がありそうですが、この要素のIDの「
trb_themeTtl」が生じたり消えたりします。 私の最近のアレンジコードでは、IDを持っている事を前提にしていましたが、今回、再びIDが無くなり、アレンジによる配置指定が効かなくなりました。
今後の事を考慮して、IDが無い場合も有る場合にも対応する指定に改めました。 セレクタは、この要素をtable内の要素のある場所を指定する形で、下の様に少し長くなりました。 なお、プロパティは全く変える必要がありませんでした。
「
#entryEditHead-new tr:nth-child(1) td:nth-child(3)」
対策で、「おすすめブログテーマ」は、下の様に本来のデザインになります。
以上の対策して、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);
background: rgba(58, 135, 173, 0.2); }
@media screen and (max-width: 960px) {
.notesBoxHead {
width: 750px; } }
.notesBoxHead h1::before {
content: "トラックバック"; }
.notesInner {
position: absolute;
bottom: 48px;
left: -450px;
padding: 0;
font-weight: bold; }