Studio TA Subsite の案内とお知らせ

<   2017年 11月 ( 22 )   > この月の画像一覧

エキサイト編集画面のアレンジ(74) IE11版 - More拡張 ver.5.2

2017年 11月 30日

IE11版を ver.5.2 に更新しました


「おすすめブログテーマ」のセレクタ変更と、「トラックバック枠」のデザイン変更をして、IE11版を「ver.5 → ver.5.2」に更新しました。 更新の詳細は(73)「おすすめブログテーマ」の割込み対策 を参照ください。


IE11で編集画面をアレンジするには


このアレンジはIE11のユーザースタイルシートの機能を利用します。 その操作方法は、以下のリンク先を参照ください。




IE11版 ver. 5.2 CSSコード


IE11版 - More拡張 ver.5.2 テンプレート・フリーページ編集対応  基本CSS

/* IE11版 - More拡張 ver.5.2 テンプレート・フリーページ編集対応 2017.11.30 */

body.win input {
box-shadow: none !important; }

body.win input[type=radio],
body.win input[type=checkbox] {
margin: 0 5px 2px 0 !important; }

#wrapper {
min-width: 960px !important; /* 全体幅指定 */
max-width: 1500px !important;
min-height: 0 !important;
margin-bottom: 5px !important;
background: none !important; }

.ad728 {
display: none !important; }


/* 編集画面ベース */
.page_entry #entry > #form {
width: calc(100% - 30px) !important;
position: absolute !important;
top: 0;
left: 0;
padding: 0 15px !important;
background: #fbfbfb; }


/* テンプレート選択 */
.page_entry #entryTemplateList {
position: absolute !important;
top: 15px !important;
left: 938px !important;
padding: 0 !important;
border: none !important; }

.page_entry #entryTemplateList select {
position: absolute !important;
min-width: 10px !important;
width: 20px !important;
height: 28px !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important; }

.page_entry #entryTemplateList select::-ms-expand {
width: 18px !important;
margin-left: -4px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#effaff 0%,#bce8f1 80%) !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 420px !important;
padding: 15px 15px !important; }


/* 編集アラート */
.page_entry .alert.alert-red {
position: absolute !important;
width: 300px !important;
padding: 2px 14px 0 !important;
font-size: medium !important; }


/* 本文タイトル */
.page_entry #entryEditHead-new {
position: absolute !important;
top: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important; }

.page_entry #entryEditHead-new th {
display: none !important; }

.page_entry #entryEditTitle {
position: absolute !important;
top: 15px !important;
width: 300px !important;
z-index: 1 !important;
transition: 0.5s !important; }

.page_entry #entryEditTitle:hover {
width: 928px !important; }

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 928px !important;
background: #fff !important; }

.page_entry #entryEditTitle input {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }

.page_entry #entryEditTitle .alert {
top: 0;
left: 310px;
z-index: -1; }


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

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


/* カテゴリ */
.page_entry #entryEditCategory {
position: absolute !important;
top: 15px !important;
left: 310px !important; }

.page_entry #entryEditCategory select {
position: absolute !important;
width: 140px !important;
font-size:13px !important;
height: 28px !important;
padding: 4px 5px 0 !important;
text-shadow: none !important; }

.page_entry #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryEditCategory select:hover {
width: 180px !important;
z-index: 1; }

.page_entry #entryBlogCategoryDialog.btn {
position: absolute !important;
left: 142px !important;
height: 28px !important; }

.page_entry #entryBlogCategoryDialog.btn input {
width: 28px !important;
font-size: 13px !important;
font-weight: normal !important;
white-space: nowrap !important;
text-indent: -61px !important;
height: 28px !important;
line-height: 28px !important;
padding: 1px 10px 0 !important; }


/* タグ */
.page_entry #entryEditTags {
position: absolute !important;
top: 15px !important;
left: 490px !important; }

.page_entry .entryElement {
display: flex; }

.page_entry #entryEditTags span.tags {
width: 147px !important; }

.page_entry #entryEditTags span.tags input {
width: 130px !important;
font-size: 13px !important;
height: 28px !important;
line-height: 28px !important; }


#entryEditTags span.tags a {
font-size: 13px !important;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 3px 3px 0;
background: linear-gradient(to bottom,#fff 0%,#E3F2FD 100%) !important;
text-decoration: none !important; }

#entryEditTags span.tags a::before {
content: "\f0d7";
font: 12px FontAwesome;
color: #000;
padding: 0 4px; }

.tagCompletionBox {
width: 178px !important;
font-size: 13px !important; }

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

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

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

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


/* 編集部wrap構成 */
.page_entry #entryEditWrap {
margin: 0 !important; }

.page_entry #entryEditInner {
margin: 0 !important; } /* 最下部まで背景を延長可能 */

.page_entry #entryEditContents {
margin: 56px 180px 0 0 !important; /* 画像パレット右余裕 */
overflow: visible !important;
padding: 0 !important; }

#entryEditContents .entryPreview.btn-s {
position: relative !important;
height: 32px !important;
opacity: 0; } /* 読込み遅延対策 */

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

#editorSwither {
position: absolute !important;
top: 2px !important;
padding: 0 !important;
line-height: 23px !important;
z-index: 3 !important; }

#editorSwither .current {
line-height: 25px !important;
margin: 0 4px 0 0 !important; }

#editorSwither li {
margin: 2px 4px 0 0 !important; }

#editorSwither a {
padding: 2px 0 0 !important; }

#_panel {
height: 32px !important;
margin-top: -32px !important; /* 読込み遅延対策 */
border: none !important;
background: none !important;
z-index: 2 !important; }

#new_icon {
display: none !important; }


/* 編集部 */
#_entryContent , #entryContent ,
#_moreEntryContent , #moreEntryContent {
position: relative;
background: #fbfbfb !important;
line-height: 150% !important;
margin: 0 !important;
font-size: 1.6rem !important;
border-radius: 3px; }

#_entryContent , #entryContent {
height: 580px !important; }

#_moreEntryContent , #moreEntryContent {
height: 500px !important; }

#_entryContent:focus , #entryContent:focus ,
#_moreEntryContent:focus , #moreEntryContent:focus {
z-index: 2; }

#_entryContent .IMAGE_LEFT , #_moreEntryContent img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

#_entryContent img.IMAGE_RIGHT , #_moreEntryContent img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

#_entryContent img.IMAGE_MID , #_moreEntryContent img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

#entryEditWrap .alert {
top: 95px;
left: 325px;
z-index: 1; }

#entryMoreText .alert {
top: 45px;
left: 310px;
z-index: 1; }


/* More部 */
#more.w100 {
display: block !important;
height: 28px !important;
width: 74px !important;
margin: 15px 0 0 !important; }

#notmore.w100 {
position: absolute !important;
bottom: 0 !important;
height: 28px !important;
width: 86px !important;
margin: 15px 0 0 !important;
background: linear-gradient(to bottom, #FFF9C4 0%,#FFD54F 100%) !important; }

#more.w100 span , #notmore.w100 span {
padding: 2px 0 0 !important;
line-height: 26px !important;
font-size: small !important; }

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

#entryMoreArea {
position: absolute !important;
top: 75px !important;
width: 100% !important;
margin: 0 !important;
padding-top: 7px !important; }

input#moreEntrySubject {
font-size: 1.6rem !important;
height: 28px !important;
line-height: 28px !important;
padding: 3px 10px 0 !important;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0 !important; }


/* 投稿オプション */
.page_entry #entryOptions {
position: absolute;
bottom: 0;
left: 110px !important;
width: 110px !important;
margin: 0 !important;
height: 28px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
transition: 0.5s !important;
z-index: 1; }

.page_entry #entryOptions:hover {
width: 820px !important;
z-index: 3; }

.page_entry #entryOptions .head-h3 {
display: none !important; }

.page_entry #entryOptions .optionGroup {
line-height: 26px !important; }

.page_entry #entryOptions .optionGroup label {
font-size: 13px !important;
margin: 0 0 7px !important;
padding: 0 5px !important;
height: 28px !important;
line-height: 28px !important; }

.page_entry #entryOptions .optionGroup label:nth-child(n+2) {
width: 130px !important;
transition: 0.5s !important; }

.page_entry #entryOptions .optionGroup label:nth-child(n+2):hover {
width: 160px !important; }


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

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

.page_entry #entryTrackback 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; }

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

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

.page_entry #entryTrackbackTextarea:hover {
width: 459px !important;
margin: 0 0 0 -380px !important;
padding: 5px 0 0 20px !important;
overflow-y: scroll !important;
z-index: 2; }

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

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

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

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


/* 画像パレット */
.page_entry #entryEditIframe {
position: absolute !important;
top: 56px;
right: 16px;
width: 165px !important; /* 画像パレット右余裕 */
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


#entryEditIframe iframe {
width: 165px !important;
height: 610px !important;
border-radius: 0 !important; }

.partsWrap#wrapper {
min-width: 0 !important; } /* 再設定 サムネイル整列に必須 */

#partsImage {
position: static !important; } /* 背景指定に必要 */

#partsImage #droppable {
font-size: 13px !important;
margin: 5px 5px 10px !important;
color: #fff !important;
background: #4096ee !important;
box-shadow: none !important; }

#partsImage #droppable:hover {
background: #b8e2f7 !important; }

#partsImage .mod-fileUpload {
margin: 0 5px !important; }

#partsImage .fileUploadWrapper {
border: none !important;
margin: 0 !important; }

#partsImage .fileUploadWrapper span,
#partsImage .fileUploadWrapper input {
font-size: 13px !important;
padding: 0 1px !important; }

#partsImage .fileUploadWrapper .fileUploadBtm {
position: absolute;
top: 0;
left: 72px;
width: 83px !important; }

#partsImage .optionGroup {
margin: 0 0 0 15px !important;
padding: 0 !important; }

#partsImage #search .optionGroup select {
position: absolute !important;
left: 5px;
padding: 0 15px !important;
height: 28px !important; }

#partsImage .optionGroup select::-ms-expand {
border: none !important;
background: none !important; }

#partsImageContainer {
overflow-y: scroll !important;
margin: 0 5px 10px !important;
height: 356px !important; }

#partsImageContainer li {
margin: 0 !important;
width: 132px !important;
height: 90px !important; }

#partsImageContainer input {
position: relative !important;
left: 53px !important;
line-height: 16px !important; }

#partsImageContainer input:hover {
background: red !important;
color: #fff !important;
font-weight: bold !important; }

#partsImageContainer li a {
background-size: cover !important;
width: 128px !important;
height: 86px !important; }

#partsImage .pager {
margin: 0 !important; }

#partsImage .pager li {
margin: 0 2px !important; }

#partsImage .pager li a:hover {
text-decoration: none !important; }

#partsImage .alert {
margin: 0 !important; }


/* 投稿日時 */
.page_entry #entryOptionsPstdate {
position: absolute;
bottom: 41px;
left: 245px;
width: 536px !important;
margin: 0 !important;
padding: 0 10px 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
border: none !important;
background: #fbfbfb !important;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPstdate:hover {
width: 682px !important;
z-index: 2 !important; }

.page_entry #entryOptionsPstdate span {
line-height: 32px !important;
margin-right: -20px !important; }

.page_entry #entryOptionsPstdate label {
height: 28px !important;
line-height: 28px !important; }

.page_entry #entryPstdateElement select {
font-size: 13px !important;
height: 28px !important;
padding: 3px 5px 0 !important;
min-width: 20px !important;
width: 70px !important; }

.page_entry #entryPstdateElement select::-ms-expand {
border: none !important;
background: none !important; }

.page_entry #entryPstdateElement select:nth-child(n+2) {
width: 55px !important; }

.page_entry #entryPstdateElement select:nth-child(2n) {
margin: 0 0 0 -2px !important; }


/* 公開設定 */
.page_entry #entryOptionsPpenflag {
position: absolute;
bottom: 41px;
left: 480px;
width: 210px !important;
margin: 0 !important;
padding: 0 0 0 20px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
border-right: 95px solid transparent;
font-size: 13px !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPpenflag:hover {
width: 446px !important;
border-right: 0px solid transparent;
z-index: 2 !important; }

.page_entry #entryOptionsPpenflag span {
line-height: 32px !important;
margin-right: -20px !important; }

.page_entry #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }


/* サブミットボタン・メニュー */
.page_entry #entrySubmitBtm {
border: none !important;
padding: 0 !important;
margin: 15px 0 0 25px !important;
max-width: 1130px; }

.page_entry #entrySubmitBtm .btn {
height: 30px !important; }

.page_entry .btn {
background: linear-gradient(to bottom, #fff 0%,#ececec 100%) !important; }

.page_entry .btn:hover {
background: #eee !important; }

.page_entry #entrySubmitBtm input {
line-height: 31px !important;
height: 28px !important; }

.page_entry #entrySubmitBtm .btn.w250 {
width: 200px !important; }

.page_entry .btn-blue {
background: linear-gradient(to bottom, #0e9de4 0%,#2679ce 100%) !important; }

.page_entry .btn-blue:hover {
background: #1b83ed !important; }


#menu {
overflow: hidden !important;
height: 651px !important; } /* お知らせリストの高さ位置固定 */

#sidemenu .sidemenu1 {
height: 520px;
overflow-y: scroll !important; } /* サイドメニューの高さを減らす */

#sidemenu li a {
white-space: nowrap !important; }

#loginUser {
height: 0; }

#myblogBtn a::before {
content: none !important; }

#menu #sideBanner {
display: none !important; }

#menu #sideRakutenMW {
display: none !important; }

#exFooterWrapper {
display: none !important; }


/* アイコン・ボタンの輪郭線と背景色 */
#_panel .panelBtn { /* 編集アイコンの枠デザイン */
font-size: 16px !important; /* 枠内文字表示高さ基準 */
line-height: 16px !important; /* 枠内文字表示高さ基準 */
width: 21px !important;
height: 21px !important;
border: 1px solid #ccc; /* 編集アイコンの枠線色 */
border-radius: 3px;
background: #fff !important; /* アイコン デフォルト背景色 */
z-index: 1 !important; }


/* 編集アイコン配置・デザイン FontAwesome */
#exbtn_bold {
top: auto !important;
bottom: 5px !important;
left: 223px !important; }

#exbtn_bold::before {
content: "\f032";
font: 16px /22px FontAwesome;
padding: 0 4px; }

#exbtn_italic {
top: auto !important;
bottom: 5px !important;
left: 301px !important; }

#exbtn_italic::before {
content: "\f033";
font: 16px /22px FontAwesome;
padding: 0 6px; }

#exbtn_underline {
top: auto !important;
bottom: 5px !important;
left: 249px !important; }

#exbtn_underline::before {
content: "\f0cd";
font: 16px /22px FontAwesome;
padding: 0 4px; }

#exbtn_strikethrough {
top: auto !important;
bottom: 5px !important;
left: 275px !important; }

#exbtn_strikethrough::before {
content: "\f0cc";
font: 16px /22px FontAwesome;
padding: 0 3px; }

#exbtn_link {
top: auto !important;
bottom: 5px !important;
left: 523px !important; }

#exbtn_link::before {
content: "\f0c1";
font: 16px /24px FontAwesome;
color: #1E88E5;
padding: 0 3px; }

#exbtn_size1 {
top: auto !important;
bottom: 5px !important;
left: 327px !important; }

#exbtn_size1::before {
content: "F";
font: bold 12px /22px Tahoma;
padding: 0 7px; }

#exbtn_size2 {
top: auto !important;
bottom: 32px !important;
left: 327px !important; }

#exbtn_size2::before {
content: "F";
font: bold 16px /22px Tahoma;
color: #999;
padding: 0 6px; }

#exbtn_size3 {
top: auto !important;
bottom: 5px !important;
left: 353px !important; }

#exbtn_size3::before {
content: "F";
font: bold 18px /22px Tahoma;
padding: 0 5px; }

#exbtn_size4 {
top: auto !important;
bottom: 32px !important;
left: 353px !important; }

#exbtn_size4::before {
content: "F";
font: bold 22px /21px Tahoma;
padding: 0 4px; }

#exbtn_fontcolor {
top: auto !important;
bottom: 5px !important;
left: 379px !important; }

#exbtn_fontcolor::before {
content: "\f031";
font: 16px /22px FontAwesome;
color: red;
padding: 0 1px; }

#exbtn_fontcolor::after {
content: "\f031";
font: 16px /22px FontAwesome;
color: deepskyblue;
position: relative;
top: -22px;
left: 5px;
z-index: -1; }

/*
#exbtn_blockquote {
top: auto !important;
bottom: 32px !important;
left: 457px !important; }

#exbtn_blockquote::before {
content: "\f10d";
font: 13px /24px FontAwesome;
color: #1072c0;
padding: 0 5px; }
*/

#exbtn_left {
top: auto !important;
bottom: 32px !important;
left: 392px !important; }

#exbtn_left::before {
content: "\f036";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_center {
top: auto !important;
bottom: 5px !important;
left: 405px !important; }

#exbtn_center::before {
content: "\f037";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

#exbtn_right {
top: auto !important;
bottom: 32px !important;
left: 418px !important; }

#exbtn_right::before {
content: "\f038";
font: 16px /24px FontAwesome;
color: #999;
padding: 0 3px; }

/*
#exbtn_ol {
top: auto !important;
bottom: 32px !important;
left: 249px !important; }

#exbtn_ol::before {
content: "\f0cb";
font: 16px /23px FontAwesome;
padding: 0 3px; }
*/

/*
#exbtn_ul {
top: auto !important;
bottom: 32px !important;
left: 223px !important; }

#exbtn_ul::before {
content: "\f0ca";
font: 16px /23px FontAwesome;
padding: 0 3px; }
*/

#exbtn_indent {
top: auto !important;
bottom: 32px !important;
left: 275px !important; }

#exbtn_indent::before {
content: "\f03c";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_indent.disabledBtn::before {
opacity: 0.1; }

#exbtn_outdent {
top: auto !important;
bottom: 32px !important;
left: 301px !important; }

#exbtn_outdent::before {
content: "\f03b";
font: 16px /24px FontAwesome;
color: #1072c0;
padding: 0 3px; }

#exbtn_outdent.disabledBtn::before {
opacity: 0.1; }

#exbtn_hr {
top: auto !important;
bottom: 32px !important;
left: 483px !important; }

#exbtn_hr::before {
content: "\f0c8";
font: 16px /22px FontAwesome;
color: #cae0eb;
padding: 0 4px; }

#exbtn_hr::after {
content: "_";
font: 24px /12px Tahoma;
position: relative;
top: -29px;
left: 4px; }

#exbtn_emoji {
top: auto !important;
bottom: 5px !important;
left: 601px !important; }

#exbtn_emoji::before {
content: "\f118";
font: 16px /22px FontAwesome;
color: #ff8f00;
padding: 0 4px; }

#exbtn_youtube {
top: auto !important;
bottom: 5px !important;
left: 575px !important; }

#exbtn_youtube::before {
content: "\f167";
font: 16px /22px FontAwesome;
color: #be074a;
padding: 0 4px; }

#exbtn_instagram {
top: auto !important;
bottom: 5px !important;
left: 549px !important; }

#exbtn_instagram::before {
content: "\f16d";
font: 16px /22px FontAwesome;
color: #ff03d6;
padding: 0 4px; }

#exbtn_map {
top: auto !important;
bottom: 5px !important;
left: 627px !important; }

#exbtn_map::before {
content: "\f0f2";
font: 18px /22px FontAwesome;
color: #B2EBF2;
padding: 0 2px; }

#exbtn_map::after {
content: "MAP";
font: 10px /22px Tahoma;
position: relative;
top: -22px;
left: 1px;
white-space: nowrap; }

#exbtn_genre {
top: auto !important;
bottom: 5px !important;
left: 653px !important; }

#exbtn_genre::before {
content: "\f07c";
font: 16px /24px FontAwesome;
color: #e39009;
padding: 0 3px; }

#exbtn_amazon {
top: auto !important;
bottom: 5px !important;
left: 679px !important; }

#exbtn_amazon::before {
content: "\f02d";
font: 16px /22px FontAwesome;
color: #4a8c83;
padding: 0 3px; }

#exbtn_removeformat {
top: auto !important;
bottom: 5px !important;
left: 438px !important; }

#exbtn_removeformat::before {
content: "\f00d";
font: 16px /21px FontAwesome;
color: red;
padding: 0 4px; }

#exbtn_removeformat.disabledBtn::before {
opacity: 0.1; }

#exbtn_undo {
top: auto !important;
bottom: 5px !important;
left: 464px !important; }

#exbtn_undo::before {
content: "\f0e2";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 4px; }

#exbtn_undo::after {
content: "U";
font: bold 12px /12px Tahoma;
position: relative;
top: -16px;
left: 3px; }

#exbtn_undo.disabledBtn::before,
#exbtn_undo.disabledBtn::after {
opacity: 0.1; }

#exbtn_redo {
top: auto !important;
bottom: 5px !important;
left: 490px !important; }

#exbtn_redo::before {
content: "\f01e";
font: 18px /24px FontAwesome;
color: #4dbef7;
padding: 0 3px; }

#exbtn_redo::after {
content: "R";
font: bold 12px /12px Tahoma;
position: relative;
top: -16px;
left: 10px; }

#exbtn_redo.disabledBtn::before,
#exbtn_redo.disabledBtn::after {
opacity: 0.1; }

#exbtn_autoeol {
top: auto !important;
bottom: 5px !important;
left: 190px !important; }

#exbtn_autoeol::before {
content: "\f149";
font: 18px /22px FontAwesome;
color: #fff;
padding: 0px 5px;
display: block;
transform: rotate(90deg); }

#exbtn_autoeol.panelBtn {
background: #ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

#exbtn_autoeol.activeBtn {
background: red !important; }


/* 自動保存表示 */
#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0 !important;
padding: 2px 2px 0 2px !important;
height: 19px !important;
width: auto !important;
font-size: 13px !important;
color: blue !important;
text-align: center !important;
background: white !important;
border: 1px solid #ccc !important;
border-radius: 3px !important; }


/* キャンペーン枠 */
.page_entry .campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0 !important;
padding: 28px 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::before {
content: "C";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold; }

.page_entry .campaign-container:hover {
margin: 0 0 0 0 !important;
padding: 20px 40px 10px !important;
width: calc(100% - 292px) !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 0 30px !important;
padding: 28px 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::before {
content: "M";
position: absolute;
top: 5px;
left: 3px;
color: #666;
font-weight: bold; }

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


/* お知らせリスト */
.page_entry #announceList {
position: absolute;
left: 0;
bottom: 0;
margin: 0 0 0 75px !important;
padding: 0 !important;
max-width: 18px;
max-height: 28px;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#effaff 0%,#bce8f1 100%);
z-index: 1; }

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

.page_entry #announceList ul li::before {
content: "A";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold;
text-shadow: none; }

.page_entry #announceList:hover {
margin: 0 0 0 15px !important;
padding: 30px 0 10px !important;
max-width: none;
width: calc(100% - 212px) !important;
max-height: 300px;
transition: max-height 1s;
z-index: 4; }



/* *********************************** */

/* テンプレート編集画面 */
#contents.page_entryTemplate {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entryTemplate .head-h1 {
display: none !important; }

.page_entryTemplate #editTemplateList {
padding: 0 !important; }

.page_entryTemplate #editTemplateList select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate select {
height: 28px !important;
line-height: 28px !important;
padding: 0 15px !important; }

.page_entryTemplate input {
line-height: 28px !important;
height: 28px !important; }

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 4px 0 0 20px !important; }


.page_entryTemplate #entryEditHead-new {
width: calc( 100% - 190px);
margin-bottom: 0 !important; }

.page_entryTemplate #entryEditTmpTitle .alert {
position: absolute;
left: 600px;
padding: 3px 15px !important; }


.page_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.page_entryTemplate .btn {
height: 28px !important; }


.page_entryTemplate #entryEditWrap {
overflow: visible !important;
height: 660px !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditInner {
margin-bottom: 0 !important; } /* テンプレート「登録」ボタン位置 */

.page_entryTemplate #entryEditContents {
margin-right: 180px !important;
overflow: visible !important; } /* 2行アイコン表示に必要 */


.page_entryTemplate #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


.page_entryTemplate #entryTrackback {
position: absolute;
bottom: 0;
margin: 0 0 0 110px !important;
width: calc(100% - 110px) !important; }

.page_entryTemplate #entryTrackback .boxHead.head-h3 {
display: block;
margin: 0 0 -35px !important;
background: none !important;
border-bottom: none !important; }

.page_entryTemplate #entryTrackbackTextarea {
position: relative;
width: calc(100% - 420px) !important;
margin: 0 0 0 420px !important;
min-height: 20px !important;
height: 28px !important;
padding: 5px 0 0 20px !important;
border: 1px solid #ccc;
border-radius: 3px;
background: #fbfbfb !important;
box-shadow: none !important;
font-size: medium !important;
overflow-y: auto !important;
transition: 0.5s; }

.page_entryTemplate #entryTrackbackTextarea:hover {
width: 100% !important;
margin: 0 !important;
padding: 5px 0 0 150px !important;
z-index: 2; }

.page_entryTemplate #entryTrackbackTextarea:focus {
height: 80px !important;
width: 100% !important;
margin: 0 !important;
padding: 5px 0 0 150px !important;
z-index: 2; }


.page_entryTemplate #entrySubmitBtm {
padding: 0 !important;
margin: 0 !important; }


/* フリーページ編集画面 */
#contents.page_entry_fp {
position: absolute;
top: 0px;
left: 0px;
margin: 0 !important;
padding: 15px !important;
z-index: 1;
width: 100%; }

.page_entry_fp .head-h1 {
display: none !important; }

.page_entry_fp #template {
height: 28px !important;
padding: 2px 10px 0 !important; }

.page_entry_fp #template::-ms-expand {
border: none !important;
background: none !important; }

.page_entry_fp input {
line-height: 28px !important;
height: 28px !important; }

.page_entry_fp #entryEditCategory input {
font-weight: bold !important; }


.page_entry_fp #entryEditWrap {
display: table; /* 高さを拡げる */
width: 100%;
margin: 0 !important; /* サブミットの位置を決定 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditInner {
margin: 0 -180px 0 0 !important; } /* 画像パレット右余裕 最下部まで背景を延長 */


.page_entry_fp #entryEditContents {
margin-right: 180px !important; /* 画像パレット右余裕 */
overflow: visible !important; } /* 2行アイコン表示に必要 */

.page_entry_fp #entryEditIframe {
width: 165px !important;
height: 610px !important; /* 容れ物の高さ指定 */
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden; }


.page_entry_fp #entryOptionsPpenflag {
position: absolute;
bottom: 13px;
left: 20px; }

.page_entry_fp #entryOptionsPpenflag span {
line-height: 32px !important; }

.page_entry_fp #entryOptionsPpenflag label {
height: 28px !important;
line-height: 28px !important; }

.page_entry_fp #entrySubmitBtm {
margin: 15px 0 0 230px !important;
padding: 0 !important; }

.page_entry_fp #entrySubmitBtm .btn {
height: 30px !important; }

.page_entry_fp #announceList {
display: none; }



/* ********************************* */

/* 背景色デザイン */
.page_entry_fp#contents ,
.page_entry_fp #entryEditHead-new table ,
.page_entry_fp #entryEditHead-new th {
background: #a4c1ce !important; } /* フリーページ編集画面 背景色 */


.page_entryTemplate#contents ,
.page_entryTemplate #editTemplateList ,
.page_entryTemplate #entryEditHead-new table ,
.page_entryTemplate #entryEditHead-new th ,
.page_entryTemplate #entryMoreArea {
box-shadow: none !important;
background: #a4c1ce !important; } /* テンプレート編集画面 背景色 */

body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */

body.win .dialogInner {
background: #fbfbfb !important; } /* ダイアログ 背景色 */



/* オプションコードは、ここより後方にペーストしてください */


/* ******************* オプション ***************** */


/* 2行編集アイコン ワイド 表示オプション */

/*
#_panel:hover {
height: 75px !important;
margin-top: -75px !important;
transition-delay: 0.2s; }
*/


/* おすすめブログテーマ 非表示オプション */
/*
.page_entry entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none !important; }
*/


/* お知らせリスト 非表示オプション */
/*
#entry #announceList {
display: none !important; }
*/


/* キャンペーン枠 非表示オプション */
/*
.page_entry .campaign-container {
display: none !important; }
*/


/* みんなの投稿 非表示オプション */
/*
.page_entry #blog2media {
display: none !important; }
*/






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



[PR]
by Ataron | 2017-11-30 17:56 | ブログスキンのアレンジ | Trackback | Comments(0)

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

2017年 11月 30日

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


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

a0349576_14331808.png

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

a0349576_14285089.png

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

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

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

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

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





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


[PR]
by Ataron | 2017-11-30 17:54 | ブログスキンのアレンジ | Trackback | Comments(0)

明石公園 2017.11.29 雨のあい間に

2017年 11月 29日
朝から小雨の天気、一番ましと思えた正午に公園に。 それでも、ポツポツと降っていました。

ハト達は今日は40羽と多く、やはり早く来ないと。 ちょうどハト様ポイントに降り立ち、一斉に周回道に行って地面をツツキ始めました。 てっきり私に向かって来ると思ったが、彼等は地上に落ちた何かの実が目的だったらしい。 これはマギ3で、一心に食べてます。

b0174191_18003631.jpg

でも、一羽だけすぐに向きを変えて私を確かめる様な仕草。 左ユビ、何日か会えなかった。

b0174191_18022598.jpg

今日のマーカーは、左ユビ、マギ3、エル2、ツメ白。 他は確かめる余裕がありませんでした。 食事のストックが尽きかけ、いつもより手持ちが少ないのに、ハト達は倍の数。 パンもみな彼等に配りましたが、多分足りなかったでしょう。 この後、買い出しに行きましたが、戻った時には皆んな引き上げた後でした。 これから本気で早く公園に出ないと。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2017-11-29 18:08 | 鳥さんの写真 | Trackback | Comments(0)

明石公園 2017.11.28 チャメ似

2017年 11月 28日
今日も良く晴れ、少し暖か。 公園に13時前に着く。

すぐにハト達はやって来ましたが、相変わらず20羽ほどで、左ユビは居ませんでした。 マーカーはツメ白、エル2だけ。 ツメ白はやっぱりバックを離れず。 他のハトがやって来ると怒ってみせます。

b0174191_21580128.jpg

今日はシロロンの10羽位が乱入して、食べられないのにハトの食事に加わろうとしました。 ギャーギャーと威嚇鳴きをして、ハトの尻尾を引っ張るヤツも居ます。 やはり要注意な連中と感じます。
エル2はすっかり馴れて来ました。 私の手から直接食べたり、立っていても飛び付いて来ます。(もっと食べたいという事ですが)

b0174191_21580780.jpg

今日のメンバーの中に、チャメと同じ位に目が茶色いハトが居ました。 人を恐れない点は似ているのですが、顔はふっくらして、タイトなチャメとは違う様です。

b0174191_21581328.jpg

こうなると、目の色だけに区別を頼ってられません。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。




[PR]
by Ataron | 2017-11-28 22:12 | 鳥さんの写真 | Trackback | Comments(0)

明石公園 2017.11.27 ライト

2017年 11月 27日
綺麗に晴れた月曜、しかし寒いと起動が遅いのが私の特徴。 14時半に公園に着くが、ハト達の姿は全くありません。 一体どこに行ってしまうのでしょう。

仕方なくハト様ポイントで、ヒガモン達を相手に幾らかのパンを配りました。 シロロン達(ユリカモメ)は各所の餌撒きを席巻しているに違いなく、私は敢えて配布しない様にしています。 下手をするとハト達への配給も蹂躙されかねず、冷たい様ですが彼等には極力パンが渡らない様にしてます。

それでも、ヒガモン達が集まれば彼等もすぐに集まって来ました。 直接手渡しか、足元に来たヒガモンにのみパンを配給する様にすると、シロロンは私に近付けずに、少し離れて悔しそうにしています。 このシロロンは私の目前で体を膨らまして、嘆く様にキーキーと鳴いて周るのです。

b0174191_19360379.jpg

ヒガモン達は、すっかりこの池に慣れた様子です。 余り本気ではなくパンを配りますが、今日は9割は手渡しでした。 だんだん慣れて来て、一羽が手から取ると、見ていた周りの中から次のヒガモンがトライします。 一度成功したヒガモンは、コツを覚えて更にやる気を出します。 自分が出来ないので、取る事が出来たヤツを悔しがって咬むヤツも居ます。

ヒガモンの見分けは難しいのですが、唯一見分けが付くのが彼。 右の目が曇っている雄のヒガモンで、ライト君としておきます。

b0174191_19360818.jpg

彼には何度か手渡しをしていて、少し慣れて来ています。 しかし見ていると、彼が手から取ろうと近付くと、周囲のヒガモン達が邪魔します。 競争心から普通に良くある事ですが、彼はちょっと打たれ弱い様です。 私はマーカーを育成したいので、その邪魔に抗して彼に手渡しを試みるのです。 今日は、かなり彼に手渡し出来ました。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2017-11-27 19:58 | 鳥さんの写真 | Trackback | Comments(0)

明石公園 2017.11.24 エル2

2017年 11月 24日
晴れてはいるが風が冷たい日、公園に12時半。

ハト達の数はじりひんで20羽ほど。 ヒガモンと混じって食事です。 今日のマーカーはツメ白だけで、左ユビは居ません。 ツメ白はバックにとりついて離れず。

b0174191_18121934.jpg

エルトに似たヤツ。 とても気軽に膝に乗って来ました。 エル2としてマーカーに入れる事にします。

b0174191_18130281.jpg

他には見分けられるハトは居ませんでした。 最後までベンチ上でたそがれていたヤツ。

b0174191_18155200.jpg

ちょっと寒い日が続きそうですね。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2017-11-24 18:17 | 鳥さんの写真 | Trackback | Comments(0)

ブログ上のコード表記について

2017年 11月 24日

スマホのコード表記枠に問題


ブログ上にコードを表記するのは以前からしている事ですが、前ページの事象で調べて行くと今までの記載時に使っていた定型が、思い通りに効していない事が判りました。

PC版の方は前ページの問題だけで、「overflow-y:hidden」を明示的に指定して、問題を出ない様にできました。 下は今までの定型の「overflow:auto」を「overflow-y:hidden」に変えた形です。(「overflow-x:auto」は省いてもいける様です)

<div style="overflow-y:hidden;max-width:660px; padding:0 30px; background: #eee; border: 1px solid #aaa;">
<pre>
~~~ ここにコードを記述 ~~~
</pre></div>

HTMLにインラインで「style」を指定しているのは、スマホでの表示をコントロールするためです。
ところが、その形で表記した上のコードを、今回スマホで表示を調べると以前のものと違い、コード枠内が自動改行されていて、コード内容がとても判り難い状態でした。

b0174191_16593988.png



原因と対策


これはスマホ用のスキンを変えた事があるので、そのスキンのCSSが原因なのか、それともスマホ全般でシステム変更があったのか判りませんが、不本意な状態です。 調べるとCSSの中で<pre>に以下の指定がされていました。

pre { white-space: pre-wrap; }

この指定のせいで、コード専用枠の中が改行されています。

対策として、やはりインラインで「white-space:pre」を再指定する事に。 コード枠の定型がますます冗長になりますが、仕方ありません。 下がこの指定をインラインに追加した定型です。

<div style="background:#f2f7f8; border:1px solid #aaa;overflow-y:hidden; max-width:660px; padding:0 30px;">
<pre style="white-space:pre;">
~~~ ここにコードを記述 ~~~
</pre></div>

以上で、スマホのコード枠にも横スクロールバーが出て、PCと同じ状態に出来ました。

b0174191_17293751.png

しかし、Chrome / Firefox と汎用スマホでは良いのですが、Edge と IE11ではこの指定だけでは以下の様に自動改行されて表示されます。

b0174191_22533985.png

これはPCブログスキンで「word-wrap: normal」を指定すると、Edge / IE11 の表示が改善されました。 現在はスキンでこの補正を済みで、PCブラウザ4種から正常に見えるはずです。

過去のコードを書き直すのはとてもムリなので、これからこの定型でコード記述をすることにしました。 このページのブロックはその定型を使っています。



[PR]
by Ataron | 2017-11-24 16:51 | ブログスキンのアレンジ | Trackback | Comments(0)

縦スクロールバーの謎(Chrome)

2017年 11月 24日
 「overflow」が変な扱われ方になった? 

ブログのHTML編集枠に下の枠内のHTMLを記述すると、「■■」のある文字列を折り返しをしない1行で、背景が灰色のブロック内に表示するという事になります。(実際のHTMLは改行無しの数珠繋がりです。

<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>

このHTMLで、囲みの<div>は400pxの幅で、それより幅の短い文字列ではスクロールバーが表示される事はないはずです。

■■■■■■■ これはサンプル ■■■■■■

ところが実際は縦スクロールバーが出る事があります。 もしChromeをお使いでしたら、ブラウザの拡大率を125%等の倍率にして、このページを見てください。
文字列をもっと長くしたものが下です。

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■■

横スクロールバーはHTMLの通りですが、今度は縦スクロールバーが出たり、出なかったり。 なんじゃこれは。


 ブラウザによる見え方の違い 

上の表示はブラウザによって異なる様です。「スクロールバーの表示の仕方」がブラウザによって異なる仕様なのは、昔から皆を悩ませて来た問題ですね。 今回はそれは別件なんですが、これを見ている人が何を言ってるのか判らなくならない様に、まずハードコピーで上の見え方を示すと。

b0174191_10231260.png
b0174191_10234880.png
b0174191_10241976.png
b0174191_10254699.png

マイクロソフトのEdgeは相変わらず独自路線でIEと同じ、スクロールバーを出してくれず折り返されます。 ChromeとFirefoxは同じ表示になりました。 で、今回の縦スクロールバーはChromeだけの問題の様です。



 異常表示はまばらに出る 

現象は、このコードを複数並べると気付き易いのですが、110%以上の拡大率で見ると、いくつか置きに縦スクロールバーが出たり出なかったりします。 ブロックは全く同じコードですが、拡大率により異常表示が出るブロックが変わります。 これは、編集画面上でもブログ誌面上でも同じです。

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

「overflow: auto;」の指定で、文字列が右端に達しておらず、また本来は縦スクロールバーは出ないはずです。 しかし、縦スクロールバーが出たり出なかったりするという事です。

横スクロールバーを意図的に表示させるこういったブロックは、コード掲載などで昔から利用して来ました。 ブロックの書き方を定型化して同じ形なのに、縦スクロールバーのこんな出方は気付かなかったのです。 最近にこの様なことが生じた様に思えますが、確証がありません。


〔追記〕
問題の切り分けのために、インラインの指定を部分的に外して行きました。

<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>


〔padding: 0 20px〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


〔background: #ddd〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


〔border: 1px solid #aaa〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


なんとなく予想していた「border」が関係しているらしい。 実際に私のページで生じている事は、こういう縦幅が極小のブロックではなく、縦に数十行以上のブロックでも、同様に不規則にスクロールバーが表示されてしまいます。

当然、「overflow-x:auto; overflow-y: hidden」等で逃げる事は出来そうですが、理屈の不明な表示の放置は、という気がします。 この定型でHTMLのインラインでブロックのスクロール表示の仕方を指定しているのは、スマホでのコード表記枠の見え方を考慮しているからです。 エキサイトの場合、スマホでの表示は、HTMLでスタイルを指定するインライン記述でしか修飾出来ないのです。 この様なブログシステムは多いのですが、スマホ向けのCSSデザインはブログシステム任せで、ユーザーが細かいアレンジや要望を盛り込む事は出来ないため、苦労します。


とりあえずの改善策で、「overflow-x:auto; overflow-y: hidden」としてみます。

<div style="overflow-x:auto; overflow-y: hidden; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>

上のコードのサンプル

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

400pxを越える長い内容の場合

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

まあ、あたり前ですが、これで意図した通りの表示になる様です。

他の解決策を探して、「height」「line-height」「上下padding」など闇雲に試しましたがどうも妙薬は見つかりません。



[PR]
by Ataron | 2017-11-24 02:13 | PC環境(ハード/ソフト) | Trackback | Comments(0)

明石公園 2017.11.22 おちゃめさん

2017年 11月 22日
天気予報の通り西から曇って来ていたが、幸い降られずに済む。 公園到着は正午前、上出来です。

ハト達は直ぐに私を見つけて20羽位がやって来ました。 ヒガモン達にパン、ハト達に食事の配布というスタイル。 この時間帯、やはり前とほぼ同じマーカーが揃いました。 左ユビ、左アシ、チャメ、ツメ白、マギ3など、全体数の割にはマーカーが多い。

今年のヒガモン達は何か飢えている感じで、内輪喧嘩を良くします。 ハトの食事を食べるヒガモンがとても増えたのも、そう思う理由のひとつです。 シロロンは数十羽は来てますが、いまのところ襲って来ません。

b0174191_18535882.jpg

チャメは急に現れたのに、とても親しげに振舞います。

b0174191_18562253.jpg

今日は少し多めに食事を用意したので、みな十分食べたでしょう。 左ユビに手渡ししていたら、ツメ白が見つけて割り込みました。

b0174191_18582164.jpg

ツメ白は頭の右後ろの毛が生え変わっている最中です。
この時間帯には、いつもの連中が居る様です。 もっと早い時刻はどうなのかも気になります。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



[PR]
by Ataron | 2017-11-22 19:05 | 鳥さんの写真 | Trackback | Comments(0)

エキサイト編集画面のアレンジ(72) トラックバック枠の改良

2017年 11月 22日
エキサイトユーザーで実際にトラックバック機能を利用している方が、どれくらいおられるのか判りません。 この機能は、ブログシステムが一般化した時から有った様です。 下はエキサイトの通常の編集画面のトラックバック枠ですね。

a0349576_10164323.png

一時期はこの機能が無くなるかもと思っていましたが、エキサイトは新しい利用方法で成果を出している様です。 それは、ユーザーにテーマ枠を提唱して、それに対する投稿を募るという投稿スタイルです。「おすすめブログテーマ」「このテーマで記事を書く」などのコースを選んで記事を投稿すると、自動的にエキサイトが用意したテーマページにトラックバックが設定され、テーマページの側にリンクが表示されるというものです。 単純に記事を書くのでなく、同じ趣向/テーマ記事のリンク集積ページにリンクを置くことで、ユーザー間の交流やアピールに役立つという様なものでしょう。



私は一時期このトラックバック機能をアレンジ対象から外す傾向にあったのですが、最近はこういう利用に意義を感じて、常に配置する様にしています。

アレンジしたトラックバック枠は、編集枠の隅の小さな窓になっています。

a0349576_10455600.png

これにマウスを乗せ更にクリックすると大きく拡大して固定し、記入し易くなる形です。

a0349576_10462210.png

実際はこんな幅は不要と思われ、また、トラックバックは3件までの記載の表示がない事も気になっていました。 拡張時の高さを増やし、幅は必要最低限に抑え(幅を越えても実際は記入出来ます)、3件の制限表示を入れました。 この表示は、擬似要素の機能でこちらで用意した文言です。

a0349576_10550848.png

未だ実装していませんが、他のアレンジアイデアが溜まった所で、アレンジに加えたいと思っています。

トラックバック枠の改善CSS

#entryTrackbackTextarea {
position: relative;
width: 79px;
margin: 0 0 0 740px;
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-y: scroll;
transition: 0.3s; } /* 変更 */

#entryTrackback::before {
content: "トラックバックURLは改行で区切り3件まで設定可能です";
position: relative;
top: 96px;
left: 365px;
z-index: 5;
background: #eee;
padding: 2px 50px 0px; }

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

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





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



[PR]
by Ataron | 2017-11-22 11:06 | ブログスキンのアレンジ | Trackback | Comments(0)