Studio TA Subsite の案内とお知らせ

タグ:エキサイトブログ ( 201 ) タグの人気記事

エキサイト編集画面のアレンジ(54) 縦書き入力や縦書き表示は可能

2017年 08月 22日
殆どの人は記事を書くのは横書きだろうし、日本語を縦書きで書く人はとても少なくなっていると思います。 しかし、小説や文庫本の類は縦書きが主流です。 これは文化というか馴染みと言うか、縦書きを読みながら左へ左へとページをめくるのがしきたりで、余り変わる気配が有りません。

で、現代で小説を書こうという人は、原稿用紙にペンを使う硬派は別として、キーボードを叩いている人はどうしているのでしょうか? 私達のブログと同じ様に、横書きで入力して、印刷は縦書きにしているだけなのでしょうか。 少し興味がある所です。



ところで、文字を書き込む「textarea」は、最近は縦書き「上→下方向で右→左へ改行」や「横書き右→左方向で上→下へ改行」に出来る様になっているので、いわゆる「縦書き」入力のスタイルを試して見ました。

操作はとても簡単で、「textarea」に「縦書き」のモードを指定するだけです。 昔はIEだけの独自機能だった様ですが、最近はChromeも対応しています。

#_entryContent, #_moreEntryContent {
writing-mode: tb-rl; }

エキサイトのブログ編集画面では、上記の2種のセレクタが「通常編集」「More通常編集」の「textarea」になります。「HTML編集画面」にも縦書きは指定出来そうですが、余り気分の良い表示にはならないでしょうから、これは指定しません。 「HTML編集画面」は従来の通りの表示になります。

以下が縦書きを試した状態です。

a0349576_21135506.png


スクロールバーが下側に付き、左方向にスクロールする様になります。 簡単に縦書き仕様が実現出来ましたが、慣れていないのでとても扱いづらいです。 システム上では全く問題は無い様です。 また、これは表示上で縦書きにしているだけで、作成されるデータは横書きと同一です。

画像は左寄せが上付きになり、右寄せが下付きになります。 編集画面上の画像の大きさは、ある程度好みに調整可能です。 これは、以下を参照ください。

編集枠上の画像サイズは「幅400px上限」ですから、縦書きでは少し幅が大きい気がします。 ブログ誌面の表示を考える必要が有りますが、誌面も縦書きとするなら、挿絵程度の小型画像や縦長の画像が納まりが良さそうです。



次に、書き込んだデータのブログ誌面上での縦書き表示を試してみます。(縦書きで作成したデータである必要はなく、従来のデータも縦書き表示に出来ます。 但し、英数字などは横倒しになります。)

私のブログスキンの場合は、「.POST_BODY」というセレクタで、投稿本文を指定出来ます。(スキンによっては、セレクタ名が異なる場合もあります) この本文に対して、縦書き表示と横スクロールバーの表示指定をします。 横スクロールの指定をしないと、一般のスキンでは左の先が読めなくなります。

.POST_BODY {
height: 630px;
overflow-x: scroll; }

ブログの投稿本文に横スクロールバーを出すには、本文の「高さを適当な固定値」として、「横方向にあふれた分はスクロール」という指定の仕方です。(高さ630pxは、本文の縦幅になります)

以下が、この指定をしたページ表示の例で、左方向へスクロールして読み進みます。

a0349576_21565439.png

私のスキンを突貫で縦書きにしただけですが、右メニューは下方に伸びたままです。 本気で縦書き表示のブログスキンを追及するなら、メニューの配置を根本的に考え直す必要があります。 それにしても、ずいぶんとユニークなブログ画面です。




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



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

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

2017年 08月 21日
More拡張 ver.3 と基本部分は同じですが、全ての編集アイコンをフォント描画に改めました。 同時にタグ選択スイッチもフォント描画とし、スプライト画像を全く使わない編集画面となっています。

また ver.4から、Chrome版とIE11版のデザイン及びコード上の差異を出来るだけ無くす方針で、細かな修正をしています。 IE11版とChrome版では同一コードに出来ない部分が生じますが、コードを近付ける段階で、両者の良い部分を統一出来たり、より最適なコードを見つけられる場合があります。

a0349576_22132614.png



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



この IE11版 - More拡張 ver.4 は、編集画面のアレンジと、テンプレート編集画面のアレンジを、まとめて適応します。 全ての編集アイコン使用する2行編集アイコン等のオプションは、このページの最後にあります。


IE11版 - More拡張 ver.4 テンプレート編集対応 基本CSS



/* IE11版 - More拡張 ver.4 テンプレート編集対応 2017.08.21 */

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

#wrapper {
min-width: 960px !important; /* 全体幅指定 */
max-width: 1500px !important;
min-height: 0 !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; }



/* テンプレート編集画面ベース */

#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_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: aquamarine !important; }

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

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

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 4px 0 0 20px !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 .btn {
height: 28px !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_entryTemplate #entryEditHead-new {
margin-bottom: 0 !important; }



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

.page_entry #trb_themeTtl {
position: absolute;
top: 5px;
left: 972px;
margin: 0 !important;
padding: 5px 0 !important;
height: 40px !important;
width: 50px !important;
overflow: hidden !important;
transition: 0.5s;
z-index: 1; }

.page_entry #trb_themeTtl:hover {
left: 638px !important;
width: 342px !important;
padding: 5px 20px !important;
background: #fff;
box-shadow: -1px 2px 2px #aaa; }



/* カテゴリ */

.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_entryTemplate #entryEditCategory select::-ms-expand {
border: none !important;
background: none !important; }

.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 {
top: 43px !important;
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_entryTemplate #entryEditWrap {
overflow: visible !important;
height: 660px !important; } /* テンプレート「登録」ボタン位置 */

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

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

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

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

#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: 430px;
z-index: 1; }

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



/* More部 */

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

#notmore.w100 {
position: absolute !important;
top: 627px !important;
width: 74px !important;
height: 28px !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; }



/* 下部整理 1 */

.page_entry #entryOptions {
position: absolute !important;
top: 613px !important;
left: 110px !important;
width: 110px !important;
margin: 0 !important;
padding: 12px 0 10px !important;
height: 32px !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 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: relative !important;
margin: -57px 0 5px 110px !important;
padding: 14px 0 10px !important; }

.page_entry #entryTrackback header.boxHead {
display: none !important; }

.page_entry #entryTrackbackTextarea {
position: relative !important;
width: 80px !important;
margin: 0 0 0 740px !important;
min-height: 20px !important;
height: 28px !important;
padding: 5px 0 0 7px !important;
box-shadow: none !important;
border: 1px solid #aaa;
border-radius: 4px;
font-size: medium !important;
overflow-y: auto !important;
transition: 0.5s;
z-index: 1; }

.page_entry textarea#entryTrackbackTextarea:hover {
width: 820px !important;
margin: 0 !important;
padding-left: 150px !important;
z-index: 2; }

.page_entry textarea#entryTrackbackTextarea:focus {
height: 48px !important;
width: 820px !important;
margin: 0 0 -20px !important;
padding-left: 150px !important;
z-index: 2; }

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

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

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

.page_entryTemplate #entryTrackback {
position: relative !important;
margin: -57px 0 0 110px !important;
padding: 14px 0 10px !important; }

.page_entryTemplate #entryTrackback header.boxHead {
margin: 0 !important; }

.page_entryTemplate #entryTrackbackTextarea {
height: 40px !important;
min-height: 40px !important;
border: none !important;
font-size: medium !important;
background: #fbfbfb !important;
box-shadow: none !important;
overflow-y: auto !important; }



/* 画像パレット */

.page_entry #entryEditIframe {
position: absolute !important;
top: 56px;
right: 16px;
width: 165px !important; } /* 画像パレット右余裕 */

.page_entryTemplate #entryEditIframe {
width: 165px !important; }

#entryEditIframe iframe {
width: 165px !important;
height: 612px !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 li div input {
position: relative !important;
left: 53px !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 .alert {
margin: 0 !important; }



/* 下部整理2 */

.page_entry #entryOptionsPstdate {
position: absolute !important;
top: 669px !important;
left: 245px !important;
width: 536px !important;
margin: 0 !important;
padding: 14px 10px 10px !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: 30px !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 #entryOptionsPpenflag {
position: absolute !important;
top: 669px !important;
left: 480px !important;
width: 210px !important;
margin: 0 !important;
padding: 14px 0 10px 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: 30px !important;
margin-right: -20px !important; }

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



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

.page_entry #entrySubmitBtm {
width: 100% !important;
border: none !important;
padding: 0 !important;
margin: 0 0 25px !important; }

.page_entry #entrySubmitBtm .btn {
margin-top: 5px !important;
height: 28px !important; }

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

.page_entryTemplate #entrySubmitBtm {
display: block !important;
margin: -10px 0 0 !important;
padding: 0 auto !important; }


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

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

#exFooterWrapper {
display: none !important; }

#loginUser {
height: 0; }

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


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

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

#sidemenu li a {
white-space: nowrap !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; }



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

#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 {
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%); }

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

.page_entry .campaign-container:hover {
margin: 0 0 20px 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 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%); }

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

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


#entry #announceList {
display: block !important;
position: absolute;
left: 0;
bottom: 0;
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; }

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

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

#entry #announceList:hover {
margin: 0 0 20px 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; }



/* 背景色デザイン */

.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; } /* ダイアログ 背景色 */



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









編集アイコンは、デフォルトでは良く使われると思われるものだけを選び、1行に纏めています。 省略された編集アイコンを利用したい場合は、以下のオプションを、基本CSSの末尾に追記して下さい。 編集アイコン行にマウスを乗せると上側に省略したアイコンが表示され、すべての編集アイコンが使用可能になります。

2行編集アイコン 表示オプション

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

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



各情報機能は、以下の各オプションで非表示にできます。 必要なオプションのコードを、基本CSSの末尾に追記してください。 オプションは1個だけでも、複数でも使用可能です。

各情報機能の 非表示オプション

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

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




基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を指定しています。 ここのカラーコードを変更すれば、簡単に好みの背景色に設定できます。 また、背景色の代わりにテクスチャー画像を使用することが可能です。 手順は以下のページを参考にしてください。

また、編集画面の各部ごとの背景色の詳細については、以下のページを参考にしてください。




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



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

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

2017年 08月 21日
More拡張 ver.3 以降の一番の更新部分は、編集アイコンのフォント描画で実現した事です。 デザイン上の工夫で「全ての編集アイコン」と「タグ選択ボタン」をスプライト画像からフォントによる描画に改めました。 フォントはエキサイトが標準で使用するWebフォント「FontAwesome」を利用しています。 これで編集画面からスプライト画像に依存する部分がなくなり、アレンジした明瞭なアイコンを標準実装して提供できる様になりました。

また、デザインアレンジと同時にアイコンの配置を改め、アイコン列の右方向への増長を少し改善しています。 編集アイコンは、以下のハードコピーを参照ください。

a0349576_20252848.png

またこの ver.4 は、IE11版とデザイン上での均質化を進めました。 Chrome版の「タイトル」「カテゴリ」「タブ」の列は、画像パレットがアレンジ出来なかったver.2までの窮屈な配置のままでした。 IE11版はこの部分のバランスが良く、Chrome版もそれに統一しました。 同時に、編集枠下部の投稿オプションスイッチ群の配置も同様にしています。 これは、投稿再編集時の最小ウインドウ幅で、「タブ枠」「画像パレット」「トラックバック枠」の右辺が並ぶ配置です。



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


「Chrome版 - More拡張 ver.4」は、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.4 2017.08.20 */

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: 960px;
max-width: 1500px;
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: 938px;
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;
padding: 4px 15px;
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: 300px;
font-size: medium;
transition: 0.5s;
z-index: 2; }

#entryEditTitle:hover {
width: 928px; }

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

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

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



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

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

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



/* カテゴリ */

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

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

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

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

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



/* タグ */

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

#entryEditTags .entryElement {
display: flex; }

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

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

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

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

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

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

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

.ui-autocomplete .tagOptions {
font-size: 13px;
padding: 0 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;
left: 110px;
width: 110px;
margin: 0;
padding: 12px 0px 10px;
height: 32px;
white-space: nowrap;
overflow: hidden;
background: #fbfbfb;
transition: 0.5s;
z-index: 4; }

#entryOptions:hover {
width: 100vw; }

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

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

#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: 80px;
margin: 0 0 0 740px;
min-height: 20px;
height: 28px;
padding: 5px 0 0 7px;
box-shadow: none;
border: 1px solid #aaa;
border-radius: 4px;
font-size: medium;
overflow-y: scroll;
transition: 0.5s; }

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

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

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

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

.notesInner {
position: absolute;
top: -35px;
left: 250px;
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: 245px;
width: 214px;
margin: 0;
padding: 14px 10px 8px;
white-space: nowrap;
overflow: hidden;
border: none;
background: #fbfbfb;
font-size: 13px;
transition: 0.5s;
z-index: 3; }

#entryOptionsPstdate:hover {
width: 682px; }

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

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

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

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


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

#entryOptionsPpenflag:hover {
width: 446px; }

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



/* アイコン・ボタンの輪郭線と背景色 */

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



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

#exbtn_bold {
top: initial;
bottom: 5px;
left: 223px; }

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

#exbtn_italic {
top: initial;
bottom: 5px;
left: 301px; }

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

#exbtn_underline {
top: initial;
bottom: 5px;
left: 249px; }

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

#exbtn_strikethrough {
top: initial;
bottom: 5px;
left: 275px; }

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

#exbtn_link {
top: initial;
bottom: 5px;
left: 523px; }

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

#exbtn_size1 {
top: initial;
bottom: 5px;
left: 327px; }

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

#exbtn_size2 {
top: initial;
bottom: 32px;
left: 327px; }

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

#exbtn_size3 {
top: initial;
bottom: 5px;
left: 353px; }

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

#exbtn_size4 {
top: initial;
bottom: 32px;
left: 353px; }

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

#exbtn_fontcolor {
top: initial;
bottom: 5px;
left: 379px; }

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

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

#exbtn_blockquote {
top: initial;
bottom: 32px;
left: 457px; }

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

#exbtn_left {
top: initial;
bottom: 32px;
left: 392px; }

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

#exbtn_center {
top: initial;
bottom: 5px;
left: 405px; }

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

#exbtn_right {
top: initial;
bottom: 32px;
left: 418px; }

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

#exbtn_ol {
top: initial;
bottom: 32px;
left: 249px; }

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

#exbtn_ul {
top: initial;
bottom: 32px;
left: 223px; }

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

#exbtn_indent {
top: initial;
bottom: 32px;
left: 275px; }

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

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

#exbtn_outdent {
top: initial;
bottom: 32px;
left: 301px; }

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

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

#exbtn_hr {
top: initial;
bottom: 32px;
left: 483px; }

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

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

#exbtn_emoji {
top: initial;
bottom: 5px;
left: 601px; }

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

#exbtn_youtube {
top: initial;
bottom: 5px;
left: 575px; }

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

#exbtn_instagram {
top: initial;
bottom: 5px;
left: 549px; }

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

#exbtn_map {
top: initial;
bottom: 5px;
left: 627px; }

#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: -2px;
left: -21px;
white-space: nowrap; }

#exbtn_genre {
top: initial;
bottom: 5px;
left: 653px; }

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

#exbtn_amazon {
top: initial;
bottom: 5px;
left: 679px; }

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

#exbtn_removeformat {
top: initial;
bottom: 5px;
left: 438px; }

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

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

#exbtn_undo {
top: initial;
bottom: 5px;
left: 464px; }

#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: 2px;
left: -20px; }

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

#exbtn_redo {
top: initial;
bottom: 5px;
left: 490px; }

#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: 2px;
left: -11px; }

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

#exbtn_autoeol {
top: initial;
bottom: 5px;
left: 190px;
background:#ddd !important; }

#exbtn_autoeol.disabledBtn {
opacity: 0; }

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

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


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



/* キャンペーン枠・みんなの投稿枠・お知らせリスト */

.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.4 2017.08.20 */

#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 span,
#partsImage .fileUploadWrapper input {
font-size: 13px;
padding: 0 1px !important; }

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

#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コードを貼り付けます

「テンプレート作成・編集」を行わない場合は、この「テンプレート補正CSS」を登録する必要はありません。 この登録は「テンプレート作成」画面の一部の表示崩れを修正するものです。



/* More拡張 テンプレート補正 ver.4 2017.08.20 */

#editTemplateList {
position: absolute;
top: 15px;
left: 575px;
height: 28px;
width: 510px;
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; }

#editTemplateList .fR {
width: 80px;
height: 28px;
border-radius: 3px; }

#editTemplateList .fR:hover {
width: 160px;
position: relative;
z-index: 3; }

#editTemplateList .fR a {
padding: 3px 2px; }

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

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

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

#sidemenu {
display: none; }


#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.4 2017.08.20 */


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


/* お知らせリスト 既読解除 */

#announceList .disNon {
display: block; }


/* キャンペーン 非表示 */

.campaign-container {
display: none; }


/* みんなの投稿 非表示 */

#blog2media {
display: none; }


/* トラックバック枠 非表示 */

#entryTrackback {
display: none; }







基本CSSの最後の「背景色デザイン」項で、編集画面全体の背景色を指定しています。 ここのカラーコードを変更すれば、簡単に好みの背景色に設定できます。 また、背景色の代わりにテクスチャー画像を使用することが可能です。 手順は以下のページを参考にしてください。

また、編集画面の各部ごとの背景色の詳細については、以下のページを参考にしてください。


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




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



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

エキサイト編集画面のアレンジ(51) 編集アイコンをWebフォントで描画する

2017年 08月 19日
編集アイコンのデザインは、アレンジを何度か繰り返して現在に至ります。 当初は、その数にしり込みしていましたが、取り組んでみるとそう多いと感じる事はなくなりました。

アイコン配置位置の組み換え、スプライト画像の改造、枠線のCSS描画化、スプライト画像の位置調整と進み、最近はスプライト画像からフォント描画への切り替えに進んでいます。

フォント描画に手を着けたのが以下の(47)からです。

しかし、アイコンに使える適当なフォントが複数にわたり、また「左寄せ」「右寄せ」「中央寄せ」に適したフォントがない、YouTube、インスタグラム等のグラフィックに適したフォントが無い、等の点で限界を感じて、中途半端なままでした。

しかし、エキサイトブログが「FontAwesome」というWebフォントを利用していることを先日発見しました。

このWebフォントのデザインは、現状のフォントニーズに良くマッチしていて、しかも、エキサイトの編集画面やブログスキン上で、このフォントが利用できる事が判りました。 このフォントを詳しく調べると、編集アイコンのほぼ全てが、このフォントで実現出来そうです。

以下が、このフォントの一覧です。

そこで今回は、全ての編集アイコンのフォント描画を試して見ました。

実際のフォントの指定は、下の例の様に、この「FontAwesome」特有のフォントコードを擬似要素のプロパティ「conent:""」内に指定します。

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

以下がその試みの結果です。

a0349576_15475287.png

❶➌❹❺ は「::before」「::after」を併用して、「FontAwesome」による「絵」と「Tahoma」による「文字」を組み合わせています。 また、フォント大小指定の「F」に「Tahoma」を指定して、結果としてこの2種のフォントだけで、編集アイコンを構成しました。

は少し苦労しましたが、背景色に「-webkit-gradient」を使っています。 しかし、こればかりは画像のアイコンにかないません。

下の「自動改行」のアイコンも、「FontAwesome」で描画しています。 これは「transform: rotate(90deg); 」で文字を回転する必要がありました。 どういうわけか良い「Enterマーク」を用意したフォントは少ないです。

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

a0349576_16304941.png

スプライト画像の呼び込みを指定しなかったので、 の部分などにはグレーアウト画像が無く、完全なプランクになっています。

編集アイコンの「hr」(水平線)は非推奨になりつつあり、現実にも余り使用されていない様なので、上段に移動しました。(上段は2行アイコンオプションを使用しないと表示されません) インスタグラムのアイコンが追加され、アイコン列の幅が増えて来ているので、整理したわけです。 また、同時に右側の各種機能アイコンの並びを改め、使用頻度の高そうなものを中央に寄せています。 これらアイコンデザインと配置変更は草案で、実装は先に考えています。




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



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

Chrome DevTools を使ってみよう (19)

2017年 08月 18日
エキサイトブログのトップページを DevToolsを使って調べます。 以下のリンク先をサンプルにしているので、Chrome・DevToolsで開きながら読まれると、より判り易いと思います。



 リンクボタンのアイコンはWebフォント 


 アイコンの実体は文字 

ログインしたエキサイトユーザーにはトップページに3つのボタンが表示されます。

a0349576_18024068.png

このボタンのアイコン部分の要素を調べると、興味深い事が判ってきます。

a0349576_18041621.png

これは、ボタンの「a要素」の「::before 擬似要素」として指定された「文字」なのです。

.navHeader_navLink.is-entry > a:before {
content: "\f040"; }

文字コードは「\f040」となっていますが、このフォントの他の文字を調べるために、以下の様なプロパティをメモ帳上で細工しました。 文字の間隔を「10px」ずつ開け、本来の位置より「左に600px」ずらし、フォントは一般に16進数でコード指定するので一桁に「0~f」の16文字並べ表記されるという方法です。 幾つあるのか不明なので、とりあえず「00~4f」の60個を表示してみる事に。

letter-spacing: 10px;
left: -600px;
content: "\f000\f001\f002\f003\f004\f005\f006\f007
\f008\f009\f00a\f00b\f00c\f00d\f00e\f00f\A
\f010\f011\f012\f013\f014\f015\f016\f017
\f018\f019\f01a\f01b\f01c\f01d\f01e\f01f\A
\f020\f021\f022\f023\f024\f025\f026\f027
\f028\f029\f02a\f02b\f02c\f02d\f02e\f02f\A
\f030\f031\f032\f033\f034\f035\f036\f037
\f038\f039\f03a\f03b\f03c\f03d\f03e\f03f\A
\f040\f041\f042\f043\f044\f045\f046\f047
\f048\f049\f04a\f04b\f04c\f04d\f04e\f04f\A";

これを「+」で「.navHeader_navLink.is-entry > a:before」のセレクタのCSSを作り、ソースウインドウで貼り付けました。 60個ほどのフォントが表示されました。 表示が重なる他の要素は、みんなキーボードの「h」で非表示にしています。(「h」は、要素を仮り非表示にするショートカットです)

a0349576_18302411.png

「\f040」は「ペン」ですが、タグのアイコンも見覚えがあります。 このアイコンに使える文字は、エキサイトが標準で使用しているフォントの様です。 他の所でも、このフォントを利用しているかも知れません。


 Webフォント「FontAwesome」 

この要素のCSSの下の方を見ると、「font-family: "FontAwesome";」と指定しています。

a0349576_18420375.png

「FontAwesome」を検索すると、これは有名な「Webフォント」のひとつだと判りました。 下のリンク先にこのフォントの一覧があります。
このフォントを利用するには、「ページのhead要素内に指定リンクを表記する必要」があります。 フォントはWebフォントのサーバーにあり、ページ上で表示する際に呼び込む必要があるわけです。

アレンジ上でも、このフォントを使える可能性がありますが、エキサイトがこのフォントを使用しているページ内に限られます。 例として、ブログスキン上では可能です。(ブログ本文内での表示はできませんでした)

ブログスキンのアレンジで、どうしても使いたいアイコンデザインがこの「FontAwesome」の中にあれば、このトップページの使い方を真似ることで表示可能です。 文字は500種もあるそうですし、Webフォントですから、機種やOSを問わず同じデザインで表示できます。 また、色やサイズ、回転、アニメーション、重ね合わせ等も可能となっています。




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



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

Chrome DevTools を使ってみよう (18)

2017年 08月 18日
エキサイトブログのトップページは、デザイン工夫の良い見本です。 今回は、DevToolsを使って、このページを調べてみます。 以下のリンク先をサンプルにしているので、Chrome・DevToolsで開きながら読まれると、より判り易いと思います。



 リンクボタンのデザイン 


デザイナーは小さな所に気を使い、それとなくスマート感を演出します。 ページの右上のユーザーの利用頻度の高いメニューボタンは、マウスポインタを乗せると「ふわっと淡く」なります。 これも、そんな演出のひとつです。

a0349576_12394166.png

このボタンを右クリックしてDevToolsを開くと、下の様に「<span>記事を書く</span>」がターゲットになって開きます。

a0349576_12413563.png

しかし、右ウインドウのCSSを見ても、アイコンや文字の色などの指定がなく、どうやら親要素の方にそれが有りそうです。 そこで親要素の「a」要素にターゲットを移してみました。( a要素を親にしているのは、このボタンでリンク先を開く様にしたからで、これは一般的なボタンのHTML構造です)

a0349576_12474094.png

a要素のCSS(赤枠)に、ブルーのcolor指定が出て来て、ここでボタンの色を指定している事が判ります。 試しに「color」プロパティのチェックを外すと、ボタン全体が黒になります。

a0349576_12593252.png

「color」プロパティの下に「transition」プロパティがあります。 これは、変異を次第に変化する様に表示し、アニメーション効果を演出するものです。 その「値」は「0.2秒」の意味で、これが「ふわっ」の効果の元です。 これもチェックを外すと、効果の意味が良く判ります。

「淡くなる」の指定は「:hover」時の状態です。 これはToolsの右上の「:hov」からアクセスしない限り、内容を見たり編集する事が出来ません。 下図は「:hov」→「□:hover」にチェックを入れた状態です。

a0349576_13043301.png

右ウインドウに「a:hover」のCSSが表示されました。 ここのプロパティが、マウスポインタを乗せた時の演出です。 2個のプロパティのチェックを外すと、その方法が判ります。

a0349576_13074051.png

「opacity」を外すと「淡く」なっていたアイコン・文字が明瞭になります。 このプロパティが「淡く見せる」の指定です。 また「text-decoration: none;」の指定は、リンク文字の下に付く下線を消していた様です。 確かに下線が出ると汚く見える事が多いですから。

「記事を書く」だけブルーにしたのは、右側の「ブログ管理」「メニュー」はメニュー表示になるが、「記事を書く」は編集画面に飛び「ちょっと違う」という所を明らかにしたかったのだと思います。 このボタンに設定された幾つかの工夫は、いずれもブログスキンのアレンジにも利用できますね。




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



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

Chrome DevTools を使ってみよう (17)

2017年 08月 17日
背景画像の設定は、ページデザイン上で必ず必要になります。 テクスチャーの利用や、ネット速度の向上で、最近は大きい画像を背景にする事も多くなっています。 今回はその基礎になるテストです。 以下のテスト手順は、実際のアレンジのテスト作業にも応用できると思います。

Toolsの編集画面の説明は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 背景画像のプロパティ書式をテストする 〕 


 「body」の確認とプロパティの準備 

サンプルページの下方の、空白の多い所までスクロールしています。 DevToolsを起動して、左ウインドウのHTMLを上方に辿り「body」と言う要素を探し、これをクリックしてターゲットにしました。

a0349576_19300478.png

「body」という要素はネット上の殆どのページに有りますが、その全てで「body」に背景画像や背景色を設定しているとは限りません。 しかし、このサンプルページは「body」にテクスチャーを背景画像として設定しています。 右側のCSSを見ると、青い下線付きの「URL」の文字列があり、それがすぐにわかります。 この「background」プロパティのチェックを外すと、ページ全体の背景が白になるのが確認出来ます。

今回は、背景に画像を使いたいので、このページのブログジャンルのバッジの画像を利用します。 下図はToolsの左上のボタンを押し、このバッジをクリックしてターゲットにした所です。

a0349576_19390298.png

左ウインドウのHTMLを右クリックして、メニューでこの要素のコピーを指定します。

a0349576_19404907.png

これをメモ帳にペーストして、バッジの画像のURLを調べました。(下のその内容ですが、改行して見易くしています)

    src="http://md.exblog.jp/img/genre/banner/2/banner_l_11-9.gif"
alt="ブログ"
style="background: none;">

必要なのは上の太字の部分だけです。 今回はネットを調べて、背景画像の配置に関して、使い手の多いプロパティを用意しました。 メモ帳の上で、これを使える形に清書して、上のURLも組み込んで用意したのが下です。

    background: url(http://md.exblog.jp/img/genre/banner/2/banner_l_11-9.gif);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-size: cover;
background-size: contain;



 プロパティをまとめて貼り付ける 

それではToolsに、これらのプロパティを一度に貼り付けます。
背景を指定する対象は「body」ですから、これをターゲットに設定して、Toolsの右上の「」を押して、新しいCSS項を作りました。

a0349576_19502547.png

右上の「inspector-stylesheet:1」のリンクを押し「ソースウインドウ」で作業します。

a0349576_19542338.png

「ソースウインドウ」が表示されました。 プロパティの入力を待つ状態でカーソルが入っています。

a0349576_19572825.png

先ほどメモ帳に用意したプロパティを貼り付けたところです。 貼り付けたとたんに、Chrome画面の様相が一変します。

a0349576_20055738.png

デフォルトの「body」の背景指定に対して、Toolsは「inspector」の指定を優先し、直ちに背景指定が変更されたのです。



 各プロパティの効果をテストする 

Toolsの左上「Elements」を押して、メイン画面に戻ります。 CSS項に貼り付けたプロパティのチェックを、最初の行以外は一旦全部外します。 この状態は、「background」プロパティの「値」に、背景画像の「URL」を指定しただけですが、この書式は画像を敷き詰めるのがデフォルトという事です。

a0349576_20094855.png

この後は、2行目以降のチェックを1個ずつ入れ、各プロパティの効果をテストしました。
以下が有効にしたプロパティとその時のChrome画面の表示です。

background-repeat: no-repeat;
 背景画像が左上隅の1個(大きな画像なら様になる)
a0349576_20321147.png

background-repeat: repeat-x;
 背景画像が横方向に並ぶ
a0349576_20360079.png

background-repeat: repeat-y;
 背景画像が縦方向に並ぶ
a0349576_20371182.png

background-size: cover;
 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
 (注)「cover」はページの高さに画像を拡大した状態です。
a0349576_20381136.png

background-size: contain;
 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
 (注)「contain」はページの幅に画像を拡大した状態です。
a0349576_20420828.png

〔参考〕
「background」の書式には、背景色、背景画像(色と画像が記述されていると画像が優先)、背景画像の繰り返し、背景画像の表示位置、などの複数の指定をまとめて行う事が可能です。「-color」「-image」「-repeat」「-position」など複数プロパティ行を纏められ、システムへの負担も減ります。
順序に決まりはなく、下の参考例の様に半角スペースで区切って列挙します。

background: #aabbcc url(~~~.gif) no-repeat;



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



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

Chrome DevTools を使ってみよう (16)

2017年 08月 16日
DevTools を使い慣れた人には自明の事かも知れませんが、DevToolsのウインドウ設定の基本を整理します。


 〔 DevTools のウインドウ設定 〕 


 Chrome画面とDevTools 同居か別居か 

DevToolsの右上、「」メニューの最初で、「Chrome画面とDevToolsが同じウインドウ」 か、「Chrome画面とDevToolsが別ウインドウ」 かが選択出来ます。

a0349576_18260792.png

デスクトップに余裕があれば「別ウインドウ」として、Toolsを拡げて使う方が快適です。 特にHTMLは、折り返しが少ない方が構造が読み易くなります。(私の説明は掲載面積の関係でにしている事が多いですが)


 DevTools は縦分割か横分割か 

DevTools のウインドウの右上の「」をクリックして、メニューから「Settings」を押します。

a0349576_17593882.png

「Settings」の最初の「Preferences」→「Appearance」で、下図の「Panel layout」の設定があります。
これは DevTools の複数のウインドウを、縦分画(vertical)にするか横分割(horizontal)にするかの設定です。

a0349576_18115683.png

私はHTMLを縦方向に広く見たいので「vertical」に設定しています。 私の説明のハードコピーは縦分割の状態ですが、横分割にしていても特に判り難いことはないでしょう。(横分割はHTMLの折り返しが一番少ない設定です)


 ウインドウの幅調節 

下図は、Chrome画面とDevToolsが同居したの設定ですが、
▪Chrome画面とDevToolsの境界
▪DevToolsの左ウインドウと右ウインドウの境界
は、それぞれ境界部をドラッグして調節出来ます。

a0349576_18123395.png

DevToolsが独立したでも同様で、左右ウインドウの境界をドラッグして調節出来ます。


 ウインドウ内表示の拡大・縮小 

ウインドウ内表示の拡大・縮小を「Ctrl + マウススクロール」で操作できる様になったのは、いつからでしょう。 Chrome画面(ブラウザ画面)は、当然この操作に対応しています。 また、DevToolsもこの操作に対応しています。(使う人は少ないと思いますが「Ctrl 」+「+」「-」でも操作可能です)

a0349576_18542827.png





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



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

Chrome DevTools を使ってみよう (15)

2017年 08月 16日
今回は実践編です。 実際に私がスキンアレンジをした経過の順を追ってレポートします。

私は、「右クリック禁止」のブログパーツを利用しています。 コピー禁止などは全く考えになく、画像の拡大視をスマートに実現したいからです。 今までの基本的な設定は以下を参照ください。

で、この今までの設定で、少し気になっていたのが、このブログパーツの「CLOSE」の表示です。 どこをクリックしても抜けられるので無くても良いが、抜け方に迷わない様に置いています。

a0349576_10195345.png

しかしこれは、白背景用にデザインされた小さな絵で、横の余裕が無くていまいちです。 このグラフィック表示を文字で描画する様にアレンジします。

以下の説明は私のブログページをサンプルにしています。 ここで説明するアレンジは既にスキンに登録しているため、DevToolsで開くとアレンジ後のCSSになっていて、説明と相違があります。 アレンジで追加されたプロパティのチェックを外すと、アレンジ前の状態が判ります。 また、このブログパーツをアレンジ無しで使用されている方のページをToolsで開けば、説明の通りでしょう。 アレンジ前とアレンジ後をToolsで比較されると、説明が判り易いと思います。




 〔 右クリック禁止ブログパーツの「CLOSE」を文字化する 〕 


 要素の特定 

ポップアップに表示される「CLOSE」をDevToolsで調べようとすると、うまく出来ません。 下の様に画像の要素には辿り着けるのですが。

a0349576_10260538.png

Chrome画面で画像をクリックしてポップアップさせても、Toolsにはポップアップの要素らしきものが表示されません。

a0349576_10275428.png

こういう時は、Toolsの左上のボタンが威力を発揮します。 これを押してChrome画面で「CLOSE」をポイントすると、Toolsは簡単にターゲット要素を探り当てました。 この要素は画像と全く違った所にあり、ブログバーツのスクリプトでこれを導く様です。

a0349576_10285578.png


 擬似要素「::before」を使ってアレンジ 

要素は「img」で「CLOSE」の画像そのものです。 アレンジ方針としては「擬似要素」の「::before」を使って文字を表示させるのですが、この要素に対して指定しても上手く文字が出てくれません。 そこで、この親要素「a.close」をターゲットに変えて「::before」を指定しました。

Toolsの右上の「」で、新しいCSS項を作成します。

a0349576_10391875.png

セレクタ「a.close」を「a.close::before」に書き換えて、「CLOSE ×」を白色文字で表示する指定にすると、今度は上手く文字が出てくれました。(「×」は「ばつ」を変換して出る記号文字です)

a0349576_10420076.png

元のグラフィックを非表示にします。「img」をターゲットに変えて「」ボタンでCSS項を作ると、「img.close_image」という適切なセレクタを設定してくれました。 セレクタが「img」だと、画面上の全部の画像が消えてしまいます。 首尾よくグラフィックの「CLOSE」だけが消えました。

a0349576_10471385.png

左ウインドウのHTMLを見ると、先ほど作った「::before」は、「a.close」と「img」の間に出来ています。 これをクリックしてターゲットにすると、右ウインドウに内容が表示されました。 以降は「::before」はこちらで編集します。

a0349576_10581740.png


 擬似要素「::after」も加える 

さて、一応「CLOSE ×」が出来たのですが、「×」が小さ過ぎます。 しかし、この文字だけのサイズ変更はできません。 そこで、この文字のみを「::after」を使って表示し、フォント修飾を別個にする事にしました。 下図は、「::before」の方を「CLOSE」だけとし、「×」を表示する「a.close::after」のCSS項を作っている所です。

a0349576_11082194.png

「×」の文字サイズを「36px」で「bold」を指定し、サイズのバランスは良くなりました。

a0349576_11111612.png

「::before」の方は「20px」「bold」に。

a0349576_11124033.png

文字の高さ位置が変ですね。 これを調節する一番簡単な方法は「position: relative;」の使用です。(他の方法もありますが大変です) 下図の様に「top: -4px;」に決めました。 こういう値はフォント種やサイズで変わる事があります。

a0349576_11152262.png


 修飾内容の整理とコピー 

ここまでTools上で加えた修飾を、整理してみます。 下図の様に編集したCSS項の右上にある「inspector-stylesheet」のリンクを押します。

a0349576_11233847.png

これで、編集を加えたCSSの内容が全て一覧出来ます。

a0349576_11260411.png

これを見ると、「::before」「::after」で同じ指定があります。 こういうのは纏めた方が綺麗で、共通のプロパティを「a.close」で指定します。(コードは1行減るだけですが) この「Source」ウインドウでの編集は、ここまでの「Elements」の側にも反映します。

a0349576_11341542.png

これでChrome画面が目的通りにアレンジされているなら、「Source」ウインドウの内容をメモ帳などにコピーして、後でブログスキンのCSSに追加貼付します。


 スキンに登録してみないと判らない事 

PCスキン編集で実際にCSSに追加登録をしてみると、思い通りにならない事はままあります。 Chromeでは上手く表示されたのに、IE11では違うとか、Chrome上でさえToolsの状態と異なる時もあります。 これは頑張り所で、その原因を知れば得るものが多いものです。

今回は、見落としがありました。 スキンのCSSに追加して画像のポップアップを試すと、「CLOSE」を押そうとすると、下の様にフォバーで白の文字背景が出てしまいました。

a0349576_12164719.png

これは、もっと下位で「:hover」時のリンクの背景色を指定していて、これが継承されていると思われます。 この「a.close」要素の「:hover」時の背景を「none」(無し)に指定しました。

a0349576_12224214.png

これで白反転がなくなりました。
更に、「CLOSE ×」の配置が少し画像に近過ぎると感じたので、「a.close」に「line-height: 45px;」を追加指定して、距離を採っています。 再度マイスキンのCSSにこの指定を追加登録して、アレンジ完成です。

以下に以前からのアレンジ内容も含めて、「右クリック禁止」ブログパーツのアレンジを整理しておきます。

「右クリック禁止」ブログパーツ アレンジCSS

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br, #facebox .b {
display: none !important; }

#facebox .body {
background: rgba(25,25,25,0.04) !important; }

#facebox .msg {
display: none; }

#facebox .footer {
border: none !important; }

a.close {
color: #fff;
font-weight: bold;
line-height: 45px; }

a.close:hover {
background: none; }

a.close::before {
content: "CLOSE";
font-size: 20px;
position: relative;
top: -4px; }

a.close::after {
content: "×";
font-size: 36px; }

img.close_image {
display: none; }

.facebox_overlayBG {
opacity: 0.8 !important; }

.POST center[draggable=""] > a:hover,
.post center[draggable=""] > a:hover{
background: none; }


(最後の項は、IE11とEdgeで中央配置の画像をポイントすると、フォバー背景色が表示されるのを回避するものです)




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



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

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について

2017年 08月 15日
編集画面の編集枠・入力枠・画像パレット・各種ボタンなどを除いた部分、いわゆる画面背景部の背景色は、各基本CSSの最後に纏めて指定する様にしています。 本来は画面のパーツ各所での指定になりますが、これをこの場所で纏めて指定するのは、メンテナンスを良くするためです。

このコードの部分は以下の部分で、この部分で「background」の指定を変える事で、簡単に好みの配色に出来ます。

Chrome版 - More拡張 ver.3

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


IE11版 - More拡張 ver.3

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; } /* 編集画面 背景色 */



これらの基本CSSの指定色「#a4c1ce」は、私が決めたデフォルトの色指定です。 このカラーコードを書き換えると、背景色が変わります。



一方、「background」プロパティには、背景画像とその配置方法を指定する事が出来ます。 基本CSSを書き換えても良いですが、後方指定の優先原則を利用して、背景画像を指定するオプションCSSを基本CSSに追記する方法がお勧めです。 これは、オプションCSSに問題があった場合は、元の配色のままとなり救われるからです。

背景画像を指定するオプションCSSの書式例は、以下の様なものです。 例とした背景画像は、エキサイトが公的ページで使用しているテクスチャーで、削除される事は無いと思います。

Chrome版 - More拡張 ver.3

body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background:
url("http://md.exblog.jp/skn/img/a/01/29/4/bg_wrapper.gif")
repeat; } /* 背景テクスチャー */


IE11版 - More拡張 ver.3

body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background:
url("http://md.exblog.jp/skn/img/a/01/29/4/bg_wrapper.gif")
repeat !important; } /* 背景テクスチャー */



要するに「background」の内容を下の様に書き換えているだけです。

    background: url(" ~画像のURL~ ") repeat;




ブログの「画像管理」で、背景に使えそうな画像を幾つか登録して試して見ました。 以下の作業はChrome版での作業で、拡張機能の「Stylist」上でオプションCSSを作り実験しています。

a0349576_14211986.png

最初は、インディゴ布のテクスチャーです。 下はクリックして拡大表示させたところです。

a0349576_14235435.png

画像を右クリックして「画像のアドレスをコピー」を押します。

「Stylist」で基本CSSの最後に追記する形で、「オプション背景画像」の項を作っています。 下図は、最初の公的ページのテクスチャーの「URL部分のみ」を反転させた所です。

a0349576_15071490.png

これに先ほどの布テクスチャーのURLを貼り付けます。

a0349576_15074022.png

貼り付けでURL内容が変わった事を確認したら、「Save」を押します。

a0349576_15042387.png

編集画面を開くか、既に開いていたらリロードします。 下図は、布テクスチャーが背景画像として表示された状態です。

a0349576_15083075.png



面白半分で、下の様な画像を背景に指定してみました。 下の画像は縮小していますが、実際に使ったのは「1600×1100px」程の大きさです。

a0349576_15105534.jpg
a0349576_15142559.png

ずいぶん賑やかになりましたが、編集枠の下のスイッチ群の背景が、空の部分で変になります。 ボタン類の背景は、フォバー時に下のボタンを隠すためのものです。 背景画像の位置を細かく指定すれば、違和感を無くせますが、指定行が増えるので、どうしてもこういう絵を背景にしたい時以外はしません。



少し大き目のレンガのテクスチャーを使ってみました。 下はその実寸大です。

a0349576_15243958.png
a0349576_15254131.png

先ほどではないですが、アイコン等のスイッチを背景が邪魔する気がします。
このテクスチャーのサイズを1/4にしてみました。

a0349576_15294395.png
a0349576_15295935.png

この程度なら、馴染んでいると思います。
更にテクスチャーのサイズを1/2にしました。

a0349576_15312113.png
a0349576_15313258.png

これは全くOKでしょう。 テクスチャー画像が小さければ良いというわけでは無いですが、ボタン類が判り難くならないかは、考えどころと思います。




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



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