Studio TA Subsite の案内とお知らせ

<   2017年 07月 ( 32 )   > この月の画像一覧

エキサイト編集画面のアレンジ(41) Chrome版 - More拡張 ver.3

2017年 07月 30日
Chrome版で画像パレットのアレンジが可能になりました。 デフォルトの画像パレットは2列でサムネイルが小さく画像の順番が不明瞭で、画像の取り違いを生じ易い欠点があります。 似た画像の登録/差替えで、困った経験をお持ちの方は多いでしょう。 IE11版では当初から画像パレットを1列化し、確実にこのデザインが有効と考えていたので、Chrome版に導入出来たのは感無量です。

このアレンジでは、Stylistにスタイルを登録する方法がこれまでと異なり、画像パレット部のスタイル適応URLを、編集画面と異なるURLで登録します。 これはテンプレート補正を編集画面と異なるURLで扱うのと同様の登録方法です。 このため、「基本CSS」「画像パレットCSS」「テンプレート補正CSS」「オプションCSS」の4個の登録に分けて登録する必要があります。 各CSSは、従来の ver.2 と互換がなく、以前のバージョンを登録している場合は全て削除して、このページ「Chrome版 - More拡張 ver.3」のものを登録し直してください。

下図は編集画面全体の様子です。

a0349576_07351913.png

編集画面はウインドウの縦スクロールバーを表示させない様に、かなりコンパクトにしています。 マウスのスクロール操作は、文書編集枠と画像パレットにのみ使われ、編集操作は軽快です。 ブラウザの画面拡大で文字を見易くしたり、ノートPCの小さな画面で編集する場合など、編集画面のコンパクトさはとても有効です。

More編集の特徴や操作については、以下の初期バージョンの説明を参照ください。


More編集の構造を受け継ぎ、この ver.3 は以下の点を改善しました。

●画像パレットを1列化し、大きなサムネイルで確認/識別をし易くしました。
●高さを抑えたパレットで最上段を空け、タイトル幅を拡張し、右上隅を常時表示としました。
●「おすすめブログテーマ」「キャンペーン」「みんなの投稿」「お知らせリスト」「トラックバック枠」など、元の編集画面の情報をすべて表示可能としました。 各情報の表示は、編集ウインドウのコンパクトさを損なわない工夫をしています。 またオプションで、個々の非表示化が可能です。
●編集アイコンを明瞭化しています。 編集画面の配色を好みに変更可能です。 また、オリジナルデザインのアイコン使用、背景のテクスチャー使用などが、一定のスキルがあれば可能です。
●一部の編集アイコンを省略していますが、「2行編集アイコン」のオプションで全アイコンを使えます。



この編集画面のアレンジは「Chrome」と拡張機能「Stylist」を利用して実現します。「Stylist」の導入は簡単で、設定方法は以下のリンク先に説明しています。


「Chrome版 - More拡張 ver.3」は、CSSによってURL指定(下図の)が異なります。 このページの各CSSごとに指定した ①➁➂ を Stylistに貼り付けて、4個のスタイルを登録してください。

a0349576_13490576.png

登録は上図の例の様に、「基本CSS」「画像パレットCSS」「テンプレート補正CSS」「オプションCSS」の順に登録する必要があります。「テンプレート補正CSS」「オプションCSS」は、後方の順でなければ無効になります。



スタイル名 : 基本CSS
適応URL :「regexp」=「//userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます



/* Chrome版 - More拡張 ver.3 2017.08.08 */

body.win input {
height: 28px;
padding: 3px 10px 0px;
box-shadow: none; }

body.win select {
height: 28px;
padding: 3px 5px 0px;
font-size: 1.3rem; }

body.win label {
height: 28px;
line-height: 30px; }

#wrapper {
min-width: 975px;
min-height: 0;
background: none; }

header#exHeaderWrapper {
display: none; }

.ad728 {
display: none; }

#wrapperInner {
padding: 0px; }

footer#exFooterWrapper {
display: none; }



/* 編集画面ベース */

#container.hasmenu {
margin: 0;
float: none; }

.alert.alert-green.csEnqueteLink {
display: none; }

.hasmenu #contents {
margin: 0;
padding: 0px 15px 0px 15px; /* 編集枠左余裕 画像パレット 右余裕 */
background: #fbfbfb;
border: none;
border-radius: 0; }

header.boxHead {
display: none; }



/* テンプレート選択 */

#entryTemplateList {
position: absolute;
top: 15px;
left: 865px;
padding: 0 !important;
border: none !important; }

#entryTemplateList select {
position: absolute;
min-width: 10px;
width: 20px;
height: 28px;
padding: 4px 0 0;
font-size:13px;
box-shadow: none; }

#entryTemplateList select:focus {
left: -400px;
width: 420px;
z-index: 3; }



/* 編集アラート */

.alert.alert-red {
position: absolute;
width: 300px;
padding: 2px 14px 0;
font-size: medium; }



/* タイトル */

#entryEditHead-new {
position: absolute;
top: 0;
padding: 0;
margin: 0;
border: none;
z-index: 2; }

#entryEditHead-new th {
display: none; }

#entryEditTitle {
position: absolute;
top: 15px;
width: 255px;
font-size: medium;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 855px; }

#entryEditTitle :focus {
position: relative;
width: 855px;
background: #fff; }

#entryEditTitle input {
padding: 4px 10px 0px; }

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



/* おすすめブログテーマ */

#trb_themeTtl {
position: absolute;
top: 5px;
left: 898px;
margin: 0;
padding: 5px 0;
height: 40px;
width: 50px;
overflow: hidden;
transition: 0.5s;
z-index: 2; }

#trb_themeTtl:hover {
left: 500px;
width: 405px;
padding: 5px 20px;
background: #fff;
box-shadow: 0px 2px 2px #aaa; }



/* カテゴリ */

#entryEditCategory {
position: absolute;
top: 15px;
left: 260px; }

#entryEditCategory select {
position: absolute;
width: 120px;
padding: 4px 5px 0px;
font-size:13px; }

#entryEditCategory select:hover {
width: 160px;
z-index: 1; }

#entryBlogCategoryDialog.btn {
position: absolute;
left: 120px;
height: 28px; }

#entryBlogCategoryDialog.btn input {
font-weight: normal;
text-indent: -61px;
font-size: 13px;
width: 28px;
padding: 2px 10px 0px; }



/* タグ */

#entryEditTags {
position: absolute;
top: 15px;
left: 415px; }

#entryEditTags .entryElement {
display: flex; }

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

#entryEditTags span.tags input {
width: 130px;
font-size: 13px; }

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

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

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

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

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



/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

#entryEditContents {
overflow: visible;
margin: 56px 180px 0px 0px;
padding: 0; }

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

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

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

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

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

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

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

#new_icon {
display: none !important; }



/* 編集部 */

#_entryContent , #entryContent ,
#_moreEntryContent , #moreEntryContent { /* 文書編集枠基本設定*/
position: relative;
background: #fbfbfb;
line-height: 150%;
margin: 0;
font-size: medium;
border-radius: 3px; }

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

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

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

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

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

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



/* More部 */

#more.w100 {
display: block;
height: 28px;
width: 74px;
margin: 15px 0px 15px;
background: linear-gradient(to bottom, #ffffff 0%,#ececec 100%); }

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

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

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

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

input#moreEntrySubject {
font-size: medium;
height: 28px;
padding: 3px 10px 0px;
background: #f1f6f9; }

#entryMoreText {
margin: 2px 0 0; }



/* 下部整理 1 */

#entryOptions {
position: absolute;
top: 613px;
display: block;
left: 120px;
margin: 0;
padding: 12px 0px 10px;
width: 110px;
height: 32px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
z-index: 4;
transition: 0.5s; }

#entryOptions:hover {
width: 100vw; }

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

#entryOptions .optionGroup label {
margin: 0px 0px 7px;
padding: 0px 5px;
font-size: 13px; }

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

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



/* トラックバック枠 */

#entryTrackback {
position: relative;
margin: -57px 0 5px 110px;
padding: 14px 0 10px; }

#entryTrackbackTextarea {
position: relative;
width: 90px;
margin: 0 0 0 680px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
box-shadow: none;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

textarea#entryTrackbackTextarea:hover {
width: 770px;
margin: 0;
padding-left: 150px;
z-index: 4; }

textarea#entryTrackbackTextarea:focus {
height: 48px;
width: 770px;
margin: 0 0 -20px;
padding-left: 150px;
z-index: 4; }

.notesBoxHead {
position: absolute;
top: -35px;
left: -110px;
line-height: 28px;
padding: 5px 20px 0 200px;
width: calc(100% + 110px);
background: rgba(58, 135, 173, 0.2); }

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

.notesInner {
position: absolute;
top: -35px;
left: 300px;
padding: 7px 0 5px;
font-weight: bold; }



/* 画像パレット */

#entryEditIframe {
position: absolute;
top: 56px;
right: 16px;
width: 165px; /* 画像パレット右余裕 */
z-index: 2; }

#entryEditIframe iframe {
width: 165px;
height: 612px; }



/* 下部整理2 */

#entryOptionsPstdate {
position: absolute;
top: 669px;
left: 260px;
width: 214px;
margin: 0;
padding: 14px 10px 8px;
white-space: nowrap;
overflow: hidden;
border: none;
background: #fbfbfb;
font-size: 13px;
z-index: 3;
transition: 0.5s; }

#entryOptionsPstdate:hover {
width: calc(100vw - 294px); }

#entryOptionsPstdate span {
line-height: 32px;
margin-right: -20px; }

#entryPstdateElement select {
font-size: 13px;
min-width: 20px;
width: 65px; }

#entryPstdateElement option:nth-child(1) {
display: none; }


#entryOptionsPpenflag {
position: absolute;
top: 669px;
left: 510px;
width: 200px;
margin: 0;
padding: 14px 10px 8px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
font-size: 13px;
z-index: 2;
transition: 0.5s; }

#entryOptionsPpenflag:hover {
width: calc(100vw - 544px); }

#entryOptionsPpenflag span {
line-height: 32px;
margin-right: -20px; }



/* サブミットボタン・メニュー */

#entrySubmitBtm {
border: none;
padding: 0;
margin: 0 0 25px 80px; }

#entrySubmitBtm .btn {
margin-top: 5px;
height: 30px; }

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

#entrySubmitBtm input {
line-height: 31px;
padding: 0px !important; }

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

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


#menu {
height: 0; }

#myblogBtn {
position: absolute;
left: 15px;
bottom: 25px;
width: calc(6.8em + 43px);
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%,#b0eae0 100%); }

#myblogBtn:hover {
background: #8cf3f3; }

#myblogBtn a {
line-height: 27px;
color: #333;
text-shadow: none; }

#exFooterWrapper {
display: none; }



/* 編集アイコン配置・デザイン */

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px;
background-position: -1px -1px; }

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px;
background-position: -26px -1px; }

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px;
background-position: -51px -1px; }

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px;
background-position: -76px -1px; }

#exbtn_link {
top: initial;
bottom: 5px;
left: 549px;
background-position: -251px -27px; }

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px;
background-position: -126px -1px; }

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px;
background-position: -151px -1px; }

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px;
background-position: -176px -1px; }

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px;
background-position: -201px -1px; }

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px;
background-position: -226px -1px; }

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px;
background-position: -376px -1px; }

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px;
background-position: -276px -1px; }

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px;
background-position: -301px -1px; }

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px;
background-position: -326px -1px; }

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px;
background-position: -426px -1px; }

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px;
background-position: -401px -1px; }

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px;
background-position: -451px -1px;}

#exbtn_indent.disabledBtn {
background-position: -451px -27px; }

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px;
background-position: -476px -1px; }

#exbtn_outdent.disabledBtn {
background-position: -476px -27px; }

#exbtn_hr {
top: initial;
bottom: 5px;
left: 431px;
background-position: -351px -1px; }

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 653px;
background-position: -101px -1px; }

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 627px;
background-position: -676px -1px; }

#exbtn_instagram {
top: initial;
bottom: 5px;
left: 705px;
background-position: -751px -1px; }

#exbtn_map {
top: initial;
bottom: 5px;
left: 601px;
background-position: -626px -1px; }

#exbtn_genre {
top: initial;
bottom: 5px;
left: 679px;
background-position: -576px -1px; }

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 575px;
background-position: -601px -1px; }

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 464px;
background-position: -551px -1px; }

#exbtn_removeformat.disabledBtn {
background-position: -551px -27px; }

#exbtn_undo {
top: initial;
bottom: 5px;
left: 490px;
background-position: -501px -1px; }

#exbtn_undo.disabledBtn {
background-position: -501px -27px; }

#exbtn_redo {
top: initial;
bottom: 5px;
left: 516px;
background-position: -526px -1px; }

#exbtn_redo.disabledBtn {
background-position: -526px -27px; }

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background-position: -701px -1px; }

#exbtn_autoeol.disabledBtn {
background-position: -701px -27px; }

#exbtn_autoeol.activeBtn {
background-position: -701px -131px; }

#exbtn_status {
position: absolute;
bottom: 5px;
right: 0;
margin: 0;
padding: 2px 2px 0px 2px;
height: 19px;
width: auto;
font-size: 13px;
color: blue;
text-align: center;
background: white;
border: 1px solid #ccc;
border-radius: 3px; }



/* アイコン・ボタンの輪郭線 */

#_panel .panelBtn { /* 編集アイコンの枠デザイン */
width: 21px;
height: 21px;
border: 1px solid #aaa; /* 編集アイコンの枠線色 */
border-radius: 3px;
z-index: 1; }

#entryEditTags span.tags a {
border-radius: 0 3px 3px 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% - 252px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }

.campaign-container::before {
content: "C";
position: absolute;
top: 5px;
left: 4px;
color: #666;
font-weight: bold; }


#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% - 210px);
max-height: 300px;
transition: max-height 1s;
background: #fff;
z-index: 4; }

#blog2media::before {
content: "M";
position: absolute;
top: 5px;
left: 3px;
color: #666;
font-weight: bold; }


#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% - 212px);
max-height: 300px;
transition: max-height 1s;
z-index: 5; }

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

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



/* 背景色デザイン */

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background: #a4c1ce; } /* 編集画面 背景色 */






スタイル名 : 画像パレットCSS
適応URL :「regexp」=「//userconf.exblog.jp/parts/image/
以下の枠内のCSSコードを貼り付けます



/* 画像パレット ver.3 2017.07.30 */

#partsImage #droppable {
font-size: 13px;
margin: 5px 5px 10px;
color: #fff;
background: #459bc5;
box-shadow: none; }

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

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

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

#partsImage .fileUploadWrapper .fileUploadBtm {
position: absolute;
top: 0;
left: 78px;
width: 83px;
text-indent: -6px; }

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

#search .optionGroup select {
position: absolute;
left: 5px;
padding: 0 15px;
height: 30px; }

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

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

#partsImageContainer li div input {
position: relative;
left: 53px; }

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

#partsImage .pager {
margin: 0; }

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

#partsImage .alert {
margin: 0; }





スタイル名 : テンプレート補正CSS
適応URL :「regexp」=「//userconf.exblog.jp/entry/template/
以下の枠内のCSSコードを貼り付けます



/* More拡張 テンプレート補正 ver.3 2017.07.30 */

#editTemplateList {
position: absolute;
top: 15px;
left: 500px;
height: 28px;
width: 580px;
padding: 0 !important;
border: none !important;
background: none; }

#editTemplateList select {
position: absolute;
left: 400px;
min-width: 10px;
width: 21px;
height: 28px;
padding: 4px 10px 0px;
font-size:13px;
box-shadow: none; }

#editTemplateList select:hover {
left: 22px;
width: 400px;
z-index: 3; }

#entryEditTmpTitle {
position: absolute;
top: 15px;
left: 860px;
z-index: 1; }

#entryEditTmpTitle :hover {
margin-left: -353px;
width: 375px; }

#entryEditTmpTitle :focus {
margin-left: -353px;
width: 375px; }

#sidemenu {
display: none; }


/* More拡張 更新分 ver.3 */

#entryTrackback .boxHead.head-h3 {
display: block;
margin: 5px 0 -38px;
background: none;
position: relative;
z-index: 1; }

#entryTrackbackTextarea {
height: 40px;
min-height: 40px;
margin: 0;
width: 100%;
padding-left: 150px;
background: #fbfbfb;
box-shadow: none; }

textarea#entryTrackbackTextarea:hover {
width: 100%; }

textarea#entryTrackbackTextarea:focus {
height: 60px;
width: 100%; }





スタイル名 : オプションCSS
適応URL :「regexp」=「//userconf.exblog.jp/entry/
以下の枠内のCSSコードを貼り付けます

但し、各「表示オプション」「非表示オプション」の必要な項のみを残し、他は行ごと削除します。 また、オプション不要の場合は、この「オプションCSS」を登録する必要がありません。



/* Chrome版 - More拡張 オプションCSS ver.3 2017.08.02 */

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

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


/* お勧めブログテーマ 非表示オプション */

#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
display: none; }


/* お知らせリスト 非表示オプション */

#announceList {
display: none; }


/* キャンペーン 非表示オプション */

.campaign-container {
display: none; }


/* みんなの投稿 非表示オプション */

#blog2media {
display: none; }


/* トラックバック枠 非表示オプション */

#entryTrackback {
display: none; }







基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を変更出来ます。 また、編集画面の各部ごとの背景色の設定については、以下のページを参考にしてください。


オリジナル編集アイコンを使用する方法は、以下を参照ください。


配色や編集アイコンの設定は「基本CSSの末尾」か「オプションCSS」に追記します。 画像パレット部の配色指定は「画像パレットCSS末尾」に追記してください。



〔追記〕2017.08.02
タグ枠にflex導入、編集パネル読込み遅延対策、トラックバック枠拡張表示、2行編集アイコンワイドオプション、等の細部の追加更新をしました。 CSSの日付で更新を判断ください。



〔追記〕2017.08.08
(48)トラックバックカテゴリで起動した編集画面で、横スクロールバーが消えない不具合を修正。 上記の基本CSSは修正済です。




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



[PR]
by Ataron | 2017-07-30 13:59 | ブログスキンのアレンジ | Comments(0)

Chrome版で画像パレットのアレンジが可能に

2017年 07月 29日
Google Chromeでは、今までユーザースタイルシートから画像パレットをアレンジ出来ませんでした。

これは IE11との大きな違いで、ブラウザの仕様上で不可触の問題と思っていました。 しかし今朝、たまたまインジケーターのコードをONにすると、画像パレットにアレンジが反映したのです。 一瞬、目を疑うとはこのことです。

a0349576_07591347.png

インジケーターは「iframe」内の画像パレットのパーツ色をデフォルト「薄ベージュ」から「青」に変えるものでした。 このインジケーターを作ったのは、Chromeの仕様が変わり「iframe」内のアレンジが可能になれば、すぐにそれを知ることが出来ると期待したからです。

それ故に、インジケーターが働いた理由は、最初はChromeの仕様変更ではと考えました。 しかし、数時間調べて判って来ました。 これは、Stylistで「domain」=「exblog.jp」の適応範囲でインジケータを働かせたから反応したのです。

理由は明らかで、「iframe」が参照する画像サーバーは、編集画面のアレンジ適応範囲「http://userconf.exblog.jp/entry/」ではないからです。「iframe」の範囲だけ、ブラウザは別のアドレスにアクセスしていて、そのアドレスをアレンジ適応範囲に入れなかったので、画像パレットにアレンジが実行されなかったのです。 IE版では、ユーザースタイルシートに適応範囲指定が無いため、画像パレットはアレンジが可能だったわけです。

この事が判り(1年かかりました)、Chrome版でも編集画面の画像パレットのアレンジが可能になりました。 Stylistで「iframe」内のアレンジが問題なく出来る様になるので、他にも有効なアレンジ箇所が出て来るかも知れません。

とり急ぎ、Chrome版の画像パレットのアレンジに着手します。 Google Chromeと Stylistの素晴らしい環境に、感謝せずにはおれません。




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


[PR]
by Ataron | 2017-07-29 08:43 | ブログスキンのアレンジ | Comments(0)

明石公園 2017.07.28 ボートデッキで待っとったん

2017年 07月 28日
真夏の天気が続き、のろのろ生活のせいで公園に着くと14時でした。

林の中から池岸を偵察すると、アロハの叔父さんがハト達を集めて、時々餌をやってます。 人の楽しみを邪魔するのは本意でないので、ボートデッキで喉を潤すことにしました。 若い子供連れの家族が二組、賑やかにスワンボートに乗り込んで行きました。 人は幾つもの出来事を、どれくらい記憶するのでしょう。 幼かった頃はきっと色々とあったろうに、写真があっても覚えていない事もあります。

ボートデッキで冷たい缶コーヒーを半分位飲んだところで、ハト達がパラパラとポイントから飛んで来ました。 叔父さんが帰ってしまったのでしょう。 いつもの面々がどんどん集まり、カメラを出しました。 チェックというより、デッキで余り撮ってやる事がないので、ここで撮りたいと思ったのです。

直ぐに私に気付いたハト達が、おかまいなしに肩や頭に乗って来ました。 私以外に一人の爺さんが居ただけで良かった。 最初はアサッテ、シロ、そして左ユビ。 彼等は変な所に乗らないので良い。

b0174191_22091025.jpg

エルトやマギ3も居ました。

b0174191_22105391.jpg

ツメ白も膝に乗って来て、ブイブイ言い始めました。 ここで食事を出せないので、ポイントに急いで向うことに。 途中まで追いかけて来たハト達は、私の行く先を察知して先にポイントへ飛んで行き、私が着くのを待ちかまえていました。 およそ40羽位、ポイントですぐに食事を一斉配布。 アロハの叔父さんから色々貰っていたはずが、彼等はガッツリ食いましたね。

ここで、マギ2とカンも居ることが判りました。 カンや他のマーカー達にパンの手渡しをして、ついでにスズメ達や先日のハシブト君にもパンを配布。 さすがにハト達は最後は少し大人しくなり、腹を満たした様です。 左ユビはまだまだ欲しそうでしたが。

b0174191_22185662.jpg


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


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

エキサイト編集画面のアレンジ(40) 3枠の表示ボタンにキャプションを表示する

2017年 07月 28日
「キャンペーン枠・みんなの投稿枠・お知らせリスト」のボタンは色で区別するデザインですが、スイッチに文字(キャプション)を入れてより明確にする方法を試みてみました。

文字は「キャンペーン」を「C」、「みんなの投稿」を「M」、「お知らせリスト」を「A」として、擬似要素「::before」を使ってこれらの文字を表示させます。 Htmlを直接に書き換える事が出来ない場合、任意の文字列をCSSだけで表示させるには、この擬似要素を使うのが一般的な方法です。


/* ボタンのキャプション表示 */

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

.campaign-container::before {
content: "C";
position: absolute;
top: 6px;
left: 4px;
color: #666;
font-weight: bold; }

#blog2media::before {
content: "M";
position: absolute;
top: 6px;
left: 3px;
color: #666;
font-weight: bold; }


最初の「お知らせリスト」は、告知が無い場合にこのキャプション文字も一緒に消えさせたいので、擬似要素を「li」に対して記述しています。「li」は告知行の本体で、告知の無い場合は非表示となるので、擬似要素のコードが無効になります。 つまり告知行と一緒に「A」は消えて「お知らせリスト」のボタンは小さな点になります。

「li」の外側の「ul」や「#announceList」に擬似要素を設定して「A」を表示させる事は出来ますが、その場合は告知が無い時も「A」の文字を囲う小さなボタンとなり、下手な演出になります。

どのボタンも似た様なコードですが、挿入したキャプション文字に「 position: absolute」を指定して、それぞれの親要素の内部で、他のレイアウトに気兼ねなく、目的の場所に配置をさせています。 ボタン上の文字位置は「top」「left」の値での微調整できます。 フォントサイズやフォント、またブラウザの違いなどで、この微調整は常に必要です。(上記コードは Chromeで編纂したもので、IE11では「top: 4px;」が良い様です)

下図は、Chromeでの結果です。

a0349576_20382108.png

各ボタンにキャプションが表示されています。 上のサンプルは簡素に収めましたが、文字自体やフォント、文字色、掘り込み立体文字など、CSSで好きに修飾が可能です。

この方法の唯一の弱点は、枠が展開した状態でも、キャプションが親要素の左上隅に表示されてしまう事です。
逃げ方のひとつは、キャプションの文字色を白とし、親要素の背景色の白に隠してしまう事です。 その場合、ボタンの文字も白色となり濃いボタン色が必要です。 また「A」が隠れないので「お知らせリスト」の背景も白にする必要があります。 結局、現状のデザインを優先して、そのままとしましたが。

上記コードをオプションコードとして追記すれば、キャプション表示が可能ですが、擬似要素を使うテクニックの参考例として挙げました。




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



[PR]
by Ataron | 2017-07-28 21:05 | ブログスキンのアレンジ | Comments(0)

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

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

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

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

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



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

a0349576_23404316.png

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

a0349576_23421615.png

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

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; } /* 左メニューの行崩れを防止 */





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



[PR]
by Ataron | 2017-07-28 12:30 | ブログスキンのアレンジ | Comments(0)

エキサイト編集画面のアレンジ(38) 「キャンペーン枠」「みんなの投稿枠」のオーバーレイ表示

2017年 07月 27日
従来の「キャンペーン枠」と「みんなの投稿枠」の表示オプションは、編集枠の下方にそれらが追加表示されるデザインで、編集ウインドウのコンパクトさを損なうものでした。 このレイアウトを見直し、各枠を編集枠上に重ねて表示するオーバーレイ表示にしました。

同時に枠別だったオプションを改め、この2枠を纏めて追加する簡潔なオプションとしています。 この「キャンペーン枠・みんなの投稿枠 表示オプション」を追加すると、Chrome版では「マイブログ」と「プレビュー」ボタンの間に2個のボタンが表示されます。

a0349576_23162080.png

「キャンペーン」ボタンにマウスを乗せると、下図の様に「キャンペーン枠」が表示されます。 ポインターが枠上にあれば表示されたままで、この枠に対する操作が可能です。

a0349576_23164729.png

同様に「みんなの投稿」ボタンにマウスを乗せ、「みんなの投稿枠」を表示させて操作ができます。

a0349576_08595681.png

いずれの場合も編集ウインドウ全体の高さに変化がなく、コンパクトな操作環境を維持します。 この新しい方式は、従来の編集環境を大きく変えず、追加リスクのないオプションです。

IE11版の場合は、最下段の配置に余裕が有り、左隅にボタンを配置しています。

a0349576_23280695.png



More拡張版の基本CSSの末尾に下記のオプションコードを追記すると、「キャンペーン枠」「みんなの投稿枠」が使用可能になります。

Chrome版 キャンペーン枠・みんなの投稿枠 表示オプション

/* キャンペーン枠・みんなの投稿枠 表示オプション */

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

.campaign-container {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 180px;
width: 2px;
max-height: 18px;
border-radius: 3px;
overflow: hidden;
background: #fff; }

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

#blog2media {
display: block;
position: absolute;
bottom: 0;
margin: 0 0 25px 204px;
width: 18px;
max-height: 29px;
border-radius: 3px;
overflow: hidden;
background: #fff; }

#blog2media .boxHead {
display: block; }

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


IE11版 キャンペーン枠・みんなの投稿枠 表示オプション

/* キャンペーン枠・みんなの投稿枠 表示オプション */

.page_entry .campaign-container {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 25px 0 !important;
width: 4px !important;
max-height: 16px !important;
border-radius: 3px;
overflow: hidden !important;
background: #fff; }

.page_entry .campaign-container:hover {
margin: 0 0 20px 0 !important;
width: calc(100% - 209px) !important;
max-height: 300px !important;
transition: max-height 1s;
z-index: 4; }

.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 25px 26px !important;
width: 20px !important;
max-height: 27px !important;
border-radius: 3px;
overflow: hidden !important;
background: #fff; }

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



〔追記〕2017.07.28
この改良版を編纂しました。 以下のリンクを参照ください。




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



[PR]
by Ataron | 2017-07-27 00:07 | ブログスキンのアレンジ | Comments(0)

明石公園 2017.07.26 夏休みだ

2017年 07月 26日
完全に夏、正午の公園に。 駐車場は一杯、そうか夏休みなんだ。

でも池端は、木陰にちらほらとしか人影はなく静かです。 最初からシロとお連れの1羽がいて、ハト様ポイントのベンチにまず座りました。 シロが歩いて近付いて来ます。

b0174191_14283319.jpg

すると、まもなく左ユビも現れました。 左ユビもこのあたりで待っていたのか、出て来るのが早過ぎます。

b0174191_14315305.jpg

今日はパンが無くて、食事を少しずつ配っていたら、1~2分でハト達の群が飛んで来て40羽ほどになりました。 すぐに私を責め立てるので、どんどん食事を撒きながら、マーカーを調べ始めました。 先ず目立ったのが、マギ3、彼はやんちゃで手に乗って咬む。 ちらっと似たのを見かけて探すと、やっぱりアサッテが居ました。 食事が終わりかけ、久しぶりに手の上に誘って食事を食べさせました。

b0174191_15113181.jpg

その内にツメ白を発見。 いつもの通りの仁王立ち。

b0174191_14463017.jpg

エルトのケンカも毎回のことです。

b0174191_14464470.jpg

欠席も少しあるけど、まあ皆んな元気です。


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



[PR]
by Ataron | 2017-07-26 14:58 | 鳥さんの写真 | Comments(0)

SSL化対策「http://」リンクチェッカー / エキサイトブログ

2017年 07月 26日
多くのメジャーブログでSSL化が行われつつある様ですが、エキサイトブログはその直前の段階です。


上記にSSL化による影響が出る部分が、かなり詳しく説明されていますが、なお不明な部分があります。

私が疑問に思っている事は、エキサイトがSSL化しても、もちろん非SSLサイトは存在するわけで、非SSLサイトに対するリンクを本文中に書き込んだ(書き込んでいた)場合に、どうのような扱いになるかと言う問題です。

色々調べると、これに関して参考になりそうな以下のページを見つけました。


最後の方のピンク背景の「重要」という部分を参照ください。 この方の環境では、下手に「//www~」のスキーム無し表記としたら、ブラウザが「遷移先が安全でない」という表示を出す様になったという事です。
良く判らないのは、その後の「ブラウザに警告が出るのは自分のサイトで呼び出すファイルにhttpアドレスが含まれていた場合で、外部サイトのリンクはhttpアドレスを設定しても警告は出ません」の下線の内容。 私にはピンと来ないのですが、外部サイトのリンクは(無対策の)「http://」のままで警告が出なかった様です。 しかし、これがエキサイトのシステムにも当てはまるかは不明で、実際のSSL施行を待った方が賢明と思われます



もし過去の投稿文内の各所に設置した「http://」表記のリンクが問題となるのなら、これを逐一修正するのは手間のかかる作業です。 上の例の様に、無対策の方が良かったというなら有難いわけです。

一応、最悪の場合のためのチェッカーを考えてみました。 こういう事に簡単に使えるのが Stylist のユーザースタイルシートです。 これはChrome専用の環境で、導入は簡単です。


上のページの枠のURL指定を、
「domain」=「exblog.jp
とドメイン指定を使いました。 他の人のブログも調べて見る必要があったので。 枠に登録するCSSは以下の簡単なものです。

/* SSL非対応リンクチェッカー */
a[href^="http://"] {
background: red !important;
border: 1px solid red !important; }

img[src^="http://"] {
border: 3px solid red !important; }

白背景のブログなら上の様に「red」の指定で、黒背景のブログでは「white」が目立って良いでしょう。

このチェッカーを働かせると、自分のChromeにだけですが、ページ内の「http://」形式のリンクを赤く表示します。 但し、リンクとして機能するものに限り、単なる「http://」の文字列は対象外です。 また、動画はチェックされない様で、画像は普通の埋め込み方ではチェックされますが、他要素の背景画はチェック出来ません。



実際のチェックの様子を、私のブログで試してみます。

a0349576_10075630.png

「タイトル」や「メニュー」項目等、多数のリンクが埋め込まれているのが判ります。 システムによって生成されるリンクは、SSL化後にほぼチェック表示されなくなるはずです。 もしチェック表示が残れば、その理由を調べる必要があるでしょう。

a0349576_10183654.png

「画像」は下線もしくは枠の形でチェック表示されます。 画像サーバーがSSL化され、SSL化後はチェックが無くなるはずですが、外部の非SSLサイトの画像をリンクして表示している場合はチェック表示が残ります。
「YouTube動画」に関しては、URLが「http://」形でもチェック表示が不能ですが、SSL施行後にどういう扱いになるのか要チェックです。

非SSLサイトへの外部リンクは、最初に書いた様に扱い方が不明です。 メニューの「外部リンク」は、SSL化後にそのまま機能するのではないかと推測されます。 ただ、メモ帳で登録している外部リンクは、「//~」形に書き換えるべきか、その逆かが不明です。 上図の「外部リンク+」は、メモ帳で登録したものですが、早まって「//~」形に書き換えたのでチェック表示がありません。 SSL施行後に書き戻しが必要になる可能性があります。

a0349576_03455877.png

リッチリンクの対象が非SSLサイトである場合、上図の様にチェック表示されます。 これはユーザーが手の届かない問題ですが、SSL化後にこの様なリンクをクリックした場合、警告が出るのか出ないのかが気になる点です。

単なるテキストの「http://」はチェックされません。 テキスト表記として「エキサイト自身のURL」を書いている場所があれば、これはチェッカーに頼らず探して修正する必要が出て来ます。

a0349576_10303580.png

「ブログパーツ」はすべて要注意の対象です。 既に利用不可が示されたものもありますが、SSL後に動作のチェックが必要でしょう。 このパーツにはチェッカーが働きません。

a0349576_10322527.png

上図の様に、投稿文中に配置したリンクが「http://」形なら、チェック表示されます。 これが自ブログや他のエキサイトブログの記事へのリンクなら、修復する必要がありそうに思えます。 ただ、外部リンクで非SSLサイトへのリンクは、どう扱うべきか現在は判りません。

下図は、ブログランキングなどのなどバナーの設置例です。

a0349576_10365890.png

ランキングサイトなど外部バナーは、SSL対策済みのバナーに早めに切り替えておくべきでしょう。 おそらく過去記事に配置したバナーも、正常な動作を望むなら再編集で貼り直しが必要と思われます。 これは少々大変です。 上図を見た所ではチェッカーが表示を出す様ですが、全ての種類のバナーがチェック可能かは不明です。



SSL化の後に対策の方針が決まれば、このチェッカーを持ち出すかどうかも決まりそうです。 バナー以外に関しては、投稿文の再編集に着手するのはSSL化後の状態を確認してからの方が良さそうです。



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

Win10 カーネルこちょこちょイジったの?

2017年 07月 25日
しきりにアップデートの要請が出るので、Win10を再起動すると、やたらと時間がかかっています。

a0349576_21393413.png

暇だから画面のハードコピーを取ったが、再起動してクリップボードは飛ぶかなと思ったら、何故か上の画像が残ってました。 実際、数十分は何かやっていたので、これはカーネルまで弄ってるなと訝ったのですが、実際はどうでしょう。

●テキスト編集の時に画面中央に文字入力のポップアップが出る様になった
調べてみると、これはIMEの新機能で、嫌ならOFFに出来る様です。 タスクバーのIMEを右クリックして、下図の様に進むと表示のON/OFFの選択が出ます。 末行の「精細設定」で本来のダイアログが出る様に変更されてます。

a0349576_21394674.png

以下のサイトに目ぼしい変更点の内容と、それらの対処方法を整理してくれてます。 よくお世話になるサイトです。


●「コントロールパネル」がメニューの底に行ってしまった
OS設定の管理にコンパネを使うデザインは時代遅れとの判断なのか、フムフム。 まあ、設定はなんとでもアクセス出来るからいいけど。

●IE11に「Edge」を開くタブが勝手に付いた
こんなタブは要らないな。 そんなのするなら、早くEdge標準のユーザースタイルシート機能を作って欲しい。 もう1年も待ってるけど、Edge専用アプリを探してもその影もありません。 勝手に作れって? 私、そこまで詳しくないのです。 まあ、そんなのが揃わない間は宣伝をしても、Edgeユーザーは増えないと思う。

こんな事が、今回の感想。 アップデートは欠かせないですから。



[PR]
by Ataron | 2017-07-25 13:44 | PC環境(ハード/ソフト) | Comments(0)

明石公園 2017.07.24 ハシブト少年

2017年 07月 24日
ハト達の集まりが変なので、少し早めに公園をめざす。 正午前に着き、池岸に降りると涼みの先客が一人。 少し北のベンチでハト達を待つと、岸辺を当たっていたらしい左ユビとシロの率いる数羽が歩きでやって来ました。

さっそく膝に乗って来た左ユビです。

b0174191_20214407.jpg

シロと左ユビに手渡ししながら、他のハト達にもパン配り。 マギ2も居ました。 マギ2は毎回現れます。 マギ2にベンチの背で手渡しをしていると、シロが割って入りました。

b0174191_20244841.jpg

その内にどっと群れで集まって来て、約50羽位になりました。 マーカーは、エルトとツメ白を確認したものの、それだけでした。 少し早く来たのが良かったか、まあまあの集まりです。

食事を一斉配布していると、ハシブトが一羽現れました。 この時期は、親元を離れ始めた子供をよく見ます。 彼もそうで、口の中が赤く目の色も少し緑っぽい。 人に妙になついている所があり、すぐ近くまで来ます。 きっと色々な人に可愛がってもらっているのでしょう。

b0174191_20331612.jpg

彼にコーンを選んで投げてやると、珍しそうに試食します。 地上の草を引っ張ったり、まあ何でも試して楽しいのでしょう。 アオドンが居た所に急に飛び降りたので、アオドンは驚いて毛を逆立ててます。

b0174191_20364588.jpg

ハト達は、カラスに驚く事が良くありますが、この相手にはほぼ平気です。 悪さをしそうな大人のカラスと、そうでない場合は区別している様です。


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



[PR]
by Ataron | 2017-07-24 20:41 | 鳥さんの写真 | Comments(4)