Studio TA Subsite の案内とお知らせ

カテゴリ:ブログスキンのアレンジ( 298 )

ADの新規の設置?が目立つ / エキサイトブログ

2018年 06月 20日

やめて欲しいブログタイトルの上のAD表示


経営上の要件があるのでしょうが、エキトイトブログは最近に新規のAD設置が進行している様です。

最初に気付いたのは、記事のブログタイトル上部の大きなAD表示です。 これはエキサイトにログインしているエキサイトユーザーには表示されませんが、外からの訪問者には80%程度の確率で表示されます。 もともとエキサイトは良心的で、全てのページでこれを表示せず、時々は非表示にして控える仕様らしい。 でも、ブログのタイトル部のデザインが台無しになり、悲しい。 もちろん有料会員になったら完全に非表示になりますが。

a0349576_12252715.png



記事下のADの仕様変更でデザイン崩れ


日本サッカー初戦の夜、ブログのサイドバーがページ下方に送られ、記事下方のAD周囲からデザイン崩れが発生しました。 複数の非アレンジと思われるスキンで同様の症状で、新仕様のAD設置でHTML構造が乱されているのを確認しました。 ADのインポーズ方法に問題があるのか、AD自体に問題があるのか、当夜は解決出来ず。

翌6/20日の午前の内に何等かの修正があった様で、HTML構成を壊す事は改善された様子です。 下は改善後の問題のADです。

a0349576_13410383.png



ブラウザのウインドウ下端に迫り出すADの新設?


未だ設置テスト段階なのか、それとも適当にランダムに表示させる仕様なのか、現在のところ不明ですが、下の様にブラウザウインドウの下部に迫り出すフロートフッター型ADが、今回見られる様になりました。

a0349576_13493224.png

嫌な順では「ブログタイトルの上」>「記事下」>「ウインドウ下端」ですが、このフッター型ADは「ページ上方に戻るボタン」を隠してしまいます。 こういったフロート表示は、「position: fixed;」で「z-index」を大きく指定しているのが定石です。 DevToolsで調べると、やはり「z-index: 1000000;」を指定していました。

a0349576_13580658.png

このフッター型ADが常設されるのかどうかは判りませんが、「ページ上方に戻るボタン」に更に大きな「z-index」を指定して、常に表示される様に予防線を張って置く事にしました。 このボタンについての詳細は以下のリンク先を参照ください。



対策は簡単で、上記リンク先のこのボタンのコードに、「z-index: 1000001;」の一行を追加するだけです。

a0349576_14112093.png

これで、フッター型ADが表示されても、ボタンがその上に表示されます。



全てのスキン修正はADの設置が落ち着いてから


とりあえず、「ページ上方に戻るボタン」だけスキンのCSSに対策を施しました。 ADがテストか新設か定かでないので、設置が落ち着いてから、スキンを見直そうと思っています。 当ブログの様に表示が乱れた方も、慌てずに少し様子を見た方が良いと思います。





この記事はカテゴリ「ブログ」にトラックバックしています。


[PR]
by Ataron | 2018-06-20 14:37 | ブログスキンのアレンジ | Comments(0)

ブログ管理画面をユーザースタイルシートでアレンジする / エキサイトブログ

2018年 04月 12日

管理画面のユーザースタイルシートによるアレンジ


エキサイトのブログ管理画面は、良く整理されて判り易いものです。 雑然としたインターフェイスでは、多機能のブログシステムをユーザーが充分に使いこなせなくなります。 ブログ管理画面を見れば、そのシステムの素性が判るというものです。

さて、以前に管理画面の「記事一覧」を扱い易くしようと、簡単なアレンジをしていました。 これは未公開ですが、早い話が「記事一覧」のテーブルは画面幅を必要とするので、左側の管理メニューなどテーブル以外の表示は全て非表示にしたものです。

a0349576_11033599.png

「ブログ編集画面」以外で、私がブログ管理画面で日常的に利用するのは「アクセスレポート」「下書き一覧」「コメント一覧」などです。 その比重はユーザーによって異なるでしょうが、ユーザースタイルシートの機能を使えば、全メニューで、各ユーザーのニーズに合わせたカスタマイズが可能になります。

とは言っても、実際のところは良く纏まったレスポンシブル設計のエキサイト管理画面で、「手を加えなければ我慢出来ない」といった部分は殆ど見当たりません。 しかし、今後の良いアイデアのためにも、アレンジのベースを作っておく事にしました。



管理画面のアレンジは適用先指定が重要


管理画面をアレンジする場合、「適用先」の指定をいいかげんにしていると、後で必ず困った事になります。 というのは、各メニューは共通したセレクタを使用している部分が多く、あるメニューでのアレンジが、予想外のメニューのデザインを変えてしまう(誤適用)ことが生じ得るからです。

特に「ブログ編集画面」も「管理画面」の一部として組み込まれているので、「編集画面」も「管理メニュー」もアレンジしようというなら、他の管理メニューとの区別は必須です。

という事で、最初にエキサイトのブログシステムの「URL」を、可能な範囲で整理しました。 以下の表示は次を基準としています。

◎ブログ編集画面として開く画面「■」
◎検索機能で開く画面「■」

◎管理メニューの選択ボタン「
◎管理メニュー内にタブ選択があり、タブ毎に異なるURLを持つ場合は「▸」で表示

◎URLが「userconf.exblog.jp」以外のドメインのもの「★」
◎URLが非SSLのもの「ⓘ」



ブログ編集画面


■新期投稿
https://userconf.exblog.jp/entry/

■再編集
https://userconf.exblog.jp/entry/?

■フリーページ作成
https://userconf.exblog.jp/entry/fp/

■テンプレート作成
https://userconf.exblog.jp/entry/template/

■このテーマで記事を書く
https://userconf.exblog.jp/entry/bookmarklet/

■〔トラックバック会員専用〕★ ⓘ
http://www.exblog.jp/myblog/entry/bookmarklet/



管理メニュー


マイページTOP
https://userconf.exblog.jp/

記事一覧
▸記事一覧
https://userconf.exblog.jp/posts/

下書き一覧
▸https://userconf.exblog.jp/drafts/

フリーページ作成
https://userconf.exblog.jp/entry/fp/

フリーページ一覧
https://userconf.exblog.jp/fps/

画像管理
https://userconf.exblog.jp/image/

テンプレート作成
https://userconf.exblog.jp/entry/template/

アクセスレポート
▸ブログアクセス
https://userconf.exblog.jp/access/blog/

▸記事別アクセス
https://userconf.exblog.jp/access/post/

▸タグ別アクセス
https://userconf.exblog.jp/access/tag/

▸リンク元URL
https://userconf.exblog.jp/access/referer/

▸検索キーワード
https://userconf.exblog.jp/access/keyword/

ブロクイイネ
▸新着イイネ一覧
https://userconf.exblog.jp/likes/

▸イイネレポート
https://userconf.exblog.jp/likes/report/

コメント・トラバ一覧
▸コメント一覧
https://userconf.exblog.jp/comments/

▸トラックバック一覧
https://userconf.exblog.jp/trackbacks/

コメント・トラバ設定
▸コメント・トラックバック設定
https://userconf.exblog.jp/config/comment/option/

▸ID・URL拒否設定
https://userconf.exblog.jp/config/comment/url/

▸IP拒否設定
https://userconf.exblog.jp/config/comment/ip/

▸キーワード拒否設定
https://userconf.exblog.jp/config/comment/keyword/

ファン管理
▸ファン申請管理
https://userconf.exblog.jp/config/fan/message/

▸ファンブログ一覧
https://userconf.exblog.jp/config/fan/list/

基本設定
▸基本設定
https://userconf.exblog.jp/config/basic/

▸メニュー設定
https://userconf.exblog.jp/config/menu/option/

▸メニュー並べ替え
https://userconf.exblog.jp/config/menu/sort/

プロフィール設定
https://userconf.exblog.jp/config/profile/

ジャンル設定
https://userconf.exblog.jp/config/genre/

デザイン設定
▸PCデザイン設定
https://userconf.exblog.jp/config/design/pc/

▸スマホデサイン設定
https://userconf.exblog.jp/config/design/sm/

SNS設定
▸SNS連携
https://userconf.exblog.jp/config/sns/list/

▸SNSボタン設定
https://userconf.exblog.jp/config/sns/display/

メール投稿・通知設定
https://userconf.exblog.jp/config/mobile/

ブログパーツ
https://userconf.exblog.jp/config/blogparts/

エキプロへ引越し
https://userconf.exblog.jp/config/import/basic/

ブログ削除
https://userconf.exblog.jp/config/delete/

ブログを本にする
https://userconf.exblog.jp/config/mybooks/

ライフログ
https://userconf.exblog.jp/config/amazon/

ヘルプ ★
https://www.exblog.jp/bloghelp/blog/

ご利用コースの確認
https://userconf.exblog.jp/status



検索


■エキサイトヘッダー検索 ★
https://search.exblog.jp/

■ブログ内検索 ★ ⓘ
http://www.exblog.jp/search/?



適用先指定で注意すべき部分


◎「マイページTOP」が「https://userconf.exblog.jp/」でサブディレクトリ(.jp/以降)を持ちません。
適用先を「次で始まるURL」=「https://userconf.exblog.jp/」と指定すると、他の管理メニューや編集画面などに誤適応が生じ得ます。 この場合は、適用先「URL」=「https://userconf.exblog.jp/」と指定すると、他のサブディレクトリを持つ画面への適用を避けることができます。「マイページTOP」だけ適用先指定が別扱いになります。

◎他の画面は、「次で始まるURL」=「サブディレクトリまで指定」で、完全に適用先の区別が出来ます。

◎従来、編集画面のアレンジでは「https://userconf.exblog.jp/ent」を「適用先」の基本的な文字列として、編集画面の種類で個別アレンジをする場合は、個別サブディレクトリまで指定して区別して来ました。 これは、そのままで変更する必要がありません。

◎「ヘルプ」メニューだけは、特別なドメインに送られ、これは管理画面とは全く別のアレンジになります。

以上が、管理画面をアレンジする際の適用先指定の注意点です。



実際のアレンジした様子


以下は、今回作ったスタイル「Excite Blog Config Style」を拡張機能「Stylus」に登録して、アレンジを適用した状態です。

◎左メニューのスライドアウト、スクロールメニュー化で、ウインドウの最小幅を780px程度にコンパクト化。
◎不要の表示を省略して、管理機能の操作に限った表示としています。

管理画面の「左メニュー」は常に画面の左側に隠れていて、マウスポインタを画面の左端に近付けると出て来ます。

a0349576_01095970.png

「マイページTOP」は、「アンケート枠」「お知らせリスト」等の通知内容を省略せず、これを開くボタンをメニュー列から独立させています。(赤枠) それ以外の「左メニュー」はスクロールで表示されます。 Chromeではwebkit利用で細いスクロールバーとしましたが、Firefoxでは普通のスクロールバーになります。

「左メニュー」からマウスが退くと、ページの全体表示となり、ウインドウ幅は最小で780px程度です。 管理画面のページは本来レスポンシブデザインです。 デスクトッブの状況に合せ、必要なら右方向に大きくウインドウを拡げる事も可能です。

下は「基本設定」の画面の上部です。 余計な表示がなく、あっさりとした印象です。

a0349576_22501324.png

ヘルプは、全く構成の異なるページですが、管理画面から開く事が多いので、ウインドウの最小幅が同じとなる様にアレンジしました。 やはり「左メニュー」を左側に待避させています。

a0349576_22560298.png

マウスポインタを左側に寄せると、メニューが現れてヘルプ項目の選択が可能になります。

a0349576_22574400.png



アレンジの実装方法 Chrome / Firefox 


〔手順1〕
Chrome / Firefox でアレンジを実現するには、そのベース環境として各ブラウザ専用の拡張機能「Stylus」が必要で、その導入は簡単です。(拡張機能「Stylish」でも可) 拡張機能の入手先はブラウザにより異なります。 導入手順は、使用しているブラウザに合った以下のリンクを参照ください。

  Chrome版「Stylus」の入手と設定手順

  Firefox版「Stylus」の入手と設定手順


〔手順2〕
「Stylus」が導入されたら、「Excite Blog Config Style」をインストールします。 入手先の「userstyles.org」は、ユーザーの作ったスタイルを配布するサイトで、下のリンク先に私が登録したこのスタイルがあります。

  ◎スタイル名は「Excite Blog Config Style (chrome / Firefox)」です。
  ◎アレンジ結果を示すメイン画像の右下の Install Style を押します。
  ◎スタイルのインストールは一瞬で完了し、同時に働き始めます。
  ◎紛らわしい「DownLoad」などのボタンを、間違って押さない様に注意!!
  ◎アレンジを停止するには「Stylus」の管理画面でこのスタイルを「無効」にします。

  スタイルの入手先


〔注釈〕
各メニューのページ内容については、気の付いた部分を修正した程度です。 管理画面カスタマイズのベースとして利用していただければと思っています。




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



[PR]
by Ataron | 2018-04-12 01:19 | ブログスキンのアレンジ | Comments(0)

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

2018年 04月 09日

IE11版 - More拡張 ver.7.2 の更新内容


エキサイト編集画面で「おすすめブログテーマ」の表示が無くなり、編集画面に白枠だけが表示されています。 この時期が長いので、無告知の状態でテーマ表示枠サイズが縮小する様にしました。 告知が再開されれば、従来の「おすすめブログテーマ」枠が表示されます。

また、ヘルプぺージを表示するアイコンを編集アイコンの横に表示させるオプションを追加しました。 デフォルトではアイコンは非表示で、表示させるには当該オプションコード部のコメントアウトを外してください。

これらの更新の詳細は、エキサイト編集画面のアレンジ(80)を参照ください。



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


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




IE11版 - More拡張 ver. 7.2 CSSコード


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



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

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

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

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

.ad728 {
display: none !important; }


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


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

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

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

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


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


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

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

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

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

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

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

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


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

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


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

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

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

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

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

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


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

.page_entry .entryElement {
display: flex; }

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

#new_icon {
display: none !important; }


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

#loginUser {
height: 0; }

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

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

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

#exFooterWrapper {
display: none !important; }


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#exbtn_autoeol.disabledBtn {
opacity: 0; }

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


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


/* キャンペーン枠 */
.page_entry .campaign-container {
position: absolute;
bottom: 0;
margin: 0 0 0 0 !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background:linear-gradient(to bottom,#f1ebdb 0%,#ffcc33 100%);
z-index: 5; }

.page_entry div[class*="campaign-c"] + div[class*="campaign-c"] {
margin: 0 0 0 22px !important; }

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

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

.page_entry div[class*="campaign-c"] + div[class*="campaign-c"]:hover {
margin: 0 0 0 0 !important; }


/* みんなの投稿枠 */
.page_entry #blog2media {
display: block !important;
position: absolute;
bottom: 0;
margin: 0 0 0 45px !important;
padding: 28px 0 0 18px !important;
width: 0 !important;
max-height: 0;
border: 1px solid #ccc !important;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(to bottom,#dcff7a 0%,rgb(150, 234, 66) 100%);
z-index: 5; }

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

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


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

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

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

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



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

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

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

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

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

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

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

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


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

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


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

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


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

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

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


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


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

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

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

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

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


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


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

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

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

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

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

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


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

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


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

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


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

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

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

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

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

.page_entry_fp #announceList {
display: none; }



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

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


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

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

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



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


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


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

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


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


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


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


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


/* Pチェッカー オプション */
/*
.POST_BODY p {
background: #4DD0E0; }

p::before , p::after {
font: bold 1.15em/1.2em FontAwesome;
background: #fff;
position: absolute; }

#_entryContent p::before, #_moreEntryContent p::before,
.POST_BODY p::before {
content: "\f0d9\2005P ";
color: red;
left: 0; }

#_entryContent p::after, #_moreEntryContent p::after,
.POST_BODY p::after {
content: "P\2005\f0da";
color: blue;
left: 0.6em; }
*/

/* 編集ヘルプ 表示オプション */
/*
.boxHead.head-h1 {
display: block;
height: 0;
margin: 0;
font-size: 0; }

.boxHead.head-h1 .btn-s {
position: absolute;
top: 60px;
left: 720px;
z-index: 3;
overflow: visible !important;
border: none !important; }

.boxHead.head-h1 .btn-s a {
width: 0 !important;
padding: 0 !important; }

.boxHead.head-h1 .btn-s a:before {
content: "\f059";
font: normal 22px/23px FontAwesome;
display: block;
width: 28px;
text-shadow: none;
color: #fff;
background: #a4c1ce; }
*/





●上記コードの末尾に、以下の簡単なオプションがあります。

「2行編集アイコン ワイド 表示オプション」
「おすすめブログテーマ 非表示オプション」
「お知らせリスト 非表示オプション」
「キャンペーン枠 非表示オプション」
「みんなの投稿 非表示オプション」
「Pチェッカー オプション 」
「 編集ヘルプ 表示オプション 」

各オブションのコード部を囲むコメントアウト「/*」「*/」を削除すると、オプションコードが有効になります。





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



[PR]
by Ataron | 2018-04-09 11:21 | ブログスキンのアレンジ | Comments(0)

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

2018年 04月 09日

空白の「おすすめブログテーマ」枠


先月から「おすすめブログテーマ」が無い状態が続き、また一時期2個に増えていた「キャンペーン」も無い状態が続いています。 エキサイトの方針が編成中で、いずれ賑やかにそれらが活用されるのかも知れませんが。

これらの枠の中身が無い場合も、編集画面のデザインは崩れませんが、「おすすめブログテーマ」は白地の枠が目立ちます。 これは、もうすこしスマートにしたいところです。

a0349576_18134769.png

テーマ告知の内容は「#trb_themeTtl」としてHTMLにインポーズされますが、現在のHTMLの状態は以下で、ブルーの文字の部分は中身が空のブロックになっています。

<td rowspan="2" style="vertical-align:top;">
<div id="trb_themeTtl">
<div id="trb_themeTtl">
         </div>
</div>

</td>

どういう理由か「#trb_themeTtl」が二重になっていますが、これに「height」「width」を指定すると、実際の表示に現れます。 下図の赤い部分は「height:75px; width:200px;」を指定した仮想の要素で、テーマ告知がある場合は、この様な状態です。

a0349576_19432019.png

本来のテーマ告知がある状態は、以下の過去記事が参考になります。


現在、「お知らせリスト」などのボタンは、HTMLにコード(要素実体)がインポーズされない場合に、ボタンが姿を消す様な工夫をしています。 これは「max-height」「max-width」を使い、ボタンサイズを明示的に指定せず、リンク実体が無い場合にボタンのサイズが無くなる様にしています。(但しボタンの枠線が残りますが)

「#trb_themeTtl」が空要素の場合に目立つのを防ぐために、同様の方法を採る事にしました。



「max-height」「max-width」を使って書き換える


要点はボタンのサイズを「max-height」「max-width」で指定する事ですが、「padding」指定があると空状態でも幅を持ってしまいます。 また、枠線だけは空状態でも表示されるので、その枠線の配置場所も考慮しました。

「#trb_themeTtl」を内包する上記のHTMLコードの「td」を、「おすすめブログテーマ」のボタンにしています。 この「td」には class名も id名も無く、「#entryEditHead-new tr:nth-child(1) td:nth-child(3) 」という長いセレクタ表記になっていますが、要はマウスが乗った時に拡がるだけです。


#entryEditHead-new {
height: 0; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
bottom: -756px;
left: 850px;
margin: 0;
max-height: 40px;
max-width: 77px;
padding: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
transition: 0.5s; }

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


〔注〕
最初の項は、新規作成と再編集でテンプレート選択tableの有無がある事に対応するもの。 bottom指定で「td」を配置する場合は、この補正が無いと新規作成と再編集で配置位置が変わってしまいます。(top指定では変化しない)

●テーマ告知がある場合
マウスが乗った hover時は「padding」の有無は関係なくなるので、内部の「#trb_themeTtl」の配置の調整に padding を使用しています。 下図の余白の部分が「padding: 5px 10px;」に相当します。

a0349576_20302863.png

●テーマ告知が無い場合
内部の「#trb_themeTtl」が無い場合は、マウスが乗らない場合は下図の様に目立たない短い線になります。

a0349576_20365238.png

幅が若干あるのは「#trb_themeTtl」に「margin-left: 10px;」の指定があるためです。 これを下手に変更すると、インポーズされる「#trb_themeTtl」の内容次第で、まずい表示になりかねません。

この高さ2pxの線に上手くマウスを乗せると、下の様に「padding: 5px 10px;」分の拡張をしますが、マスウでポイントするのは難しい位なので許容します。

a0349576_20372956.png



ヘルプアイコンを表示するオプション


編集ヘルプのページを開く「」のアイコンを、オプションで編集アイコン横に表示する様にしました。 このヘルプについては、以下のリンク先を参照ください。

なお、「編集ヘルプ 表示オプション」のセクションの適用先指定で、アイコンの表示/非表示が選択可能です。



Excite Blog Writer を使用するには


「userstyles.org」に登録した、「Excite Blog Writer (Chrome)」「Excite Blog Writer (Firefox)」は、このページのアレンジ内容で ver.7.2 に更新済です。 それらの入手先は以下のリンク先になります。
(下記スタイルの使用には拡張機能「Stylus」の導入が必要です。 また「Stylish」でも使用可能です。)

ブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先を参照ください。「Stylus」の導入と基本的な使用方法を纏めているので、使用ブラウザに適合した「Stylus」を導入をしてから、「Excite Blog Writer」を導入してください。





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



[PR]
by Ataron | 2018-04-09 11:18 | ブログスキンのアレンジ | Comments(0)

エキサイト編集画面のアレンジ(79) ヘルプページ表示のオプション

2018年 03月 26日

エキサイト編集画面のヘルプ


エキサイトブログは、旧ヘルプページとリニュアルしたヘルプページが共存する形でしたが、SSL移行に伴いリニュアルしたヘルプページに完全に移行した様です。 2018年3月では、「スキン編集ヘルプ」や、このページで問題にする「編集画面のヘルプ」などが、既にリニュアルを完了しています。

エキサイト編集画面のアレンジを利用しようと言う方は、ある程度以上のスキルを持つユーザーでしょう。 そういったユーザーを前提として、開発当初は簡素化を優先しました。 しかし、アレンジのノウハウの蓄積で余裕が出来て、編集画面上の機能をなるべく捨てない方向に、方針を変えて来ました。

「2行編集アイコン」のオプションで、全編集アイコンを利用可能とし、「お知らせリスト」「みんなの投稿」「キャンペーン」「トラックバック枠」などの機能枠を、既にアレンジ編集画面上にコンパクトに組み込んでいます。 残ったのは「ヘルプ」です。

ヘルプは2種あり、その1種は「」の4個のマークで、下の様なチュートリアルが表示されます。

a0349576_19392097.png

これは面白い演出ですが、ごく初歩の説明で、無理して採り入れる必要は無いと判断しました。

もう1種のヘルプは「ヘルプ」のキャプションのあるボタンです。 それらは、以前は旧ヘルプページの関連個所を開いたのですが、現在はリニュアルしたヘルプページを開きます。(設定画面のヘルプ)

編集中でもこのヘルプボタンで、他のウインドウでヘルプが参照できます。 これは、使い慣れたユーザーでも有効な場合があるかも知れません。 そこで、実装は先ですが、アレンジコードを作っておく事にしました。



ヘルプボタンを編集画面上に表示する


調べると、この「ヘルプ」ボタンは結局同じ所を表示します。 つまり、ボタンは編集画面内に1個あれば良いでしょう。 どれかのヘルプ項目を開ければ、他の項目も開く事が出来ますから。

アレンジ元にしたのは、本来の編集画面の一番上部のものです。 これは早い内から、新ヘルプを開くリンクになっていました。

a0349576_20040830.png

従来のアレンジでは、「記事を書く」の枠全体を非表示にしていましたが、一旦表示に戻し、不要な要素を全て削いで、リンクの「a要素」のみを移動して使用します。

配置場所は編集アイコンの隣で、「ヘルプ」のままでは邪魔になるので「擬似要素」で FontAwesome のマークを表示して、それをコンパクトなスイッチにしました。

a0349576_20114647.png

以下がアレンジコードです。



/* 編集ヘルプ */

.boxHead.head-h1 {
/* display: none; */
display: block;
height: 0;
margin: 0;
font-size: 0; }

.boxHead.head-h1 .btn-s {
position: absolute;
top: 60px;
left: 720px;
z-index: 3;
overflow: visible;
border: none; }

.boxHead.head-h1 .btn-s a {
width: 0;
padding: 0; }

.boxHead.head-h1 .btn-s a:before {
content: "\f059";
font: normal 22px/23px FontAwesome;
display: block;
width: 28px;
text-shadow: none;
color: #fff;
background: #a4c1ce; }





これを正式に採り入れるなら、オプション項目のひとつになるでしょう。





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



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

スキンコードの世代交代

2018年 03月 25日
先日、この私のブログページのスキンを触って、コードの一部を書換えました。 ちまちまやっている事で、外から見て代り映えしないのですが、今回はちょっとした節目の意味があり、覚書き程度にまとめました。



レイアウトにかかわるコードの変遷



〔第1世代〕


当初のスキンは「table」タグを使用したものが多く、これはいかにも旧いスタイルです。 本来「table」は表を構成するためのタグです。 しかし、2次元の画面を要領良く構成するには「table」を利用すると都合が良く、エキサイトの旧時代のブログのスキンにも多用されていました。

私が最初にアレンジ元にしたスキンは「ワイド」ですが、ブログタイトル部(ブログヘッダー)、本文とサイドメニューの配置、本文のタイトル部、ページャー部など、ページのレイアウトは全て「tableタグ」で行っているとさえ言えるものでした。

a0349576_10425898.png

このスキンの「HTML全体」は以下で、「tableタグ」による構成が良く判ります。


<TABLE>
<TR>
<TD><DIV>
<DIV><$header$></DIV>
<DIV><$blogurl$></DIV>
</DIV>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD></TD>
<TD><DIV>
<$post$>
<HR>
<TABLE>
<TR>
<TD><$prepage type=1$></TD>
<TD></TD>
<TD><$nextpage type=1$></TD>
</TR>
</TABLE>
<BR><BR>
</DIV>
</TD>
<TD>
<DIV>
<DIV><$adminmenu type=1$></DIV>
<DIV></DIV>
<DIV>
<DIV>
<CENTER><$logoimage type=1$></CENTER>
<$description$><$nick$>
</DIV>
<$calendar type=1$>
<DIV><$menuright$></DIV>
</DIV>
<DIV></DIV>
<CENTER><$banner type=1$></CENTER>
<$xml$>
</DIV>
</TD>
<TD></TD>
</TR>
</TABLE>


私のアレンジも、これを見よう見まねで変形させたに過ぎず、当然「tableタグ」をそのまま使っていました。


〔第2世代〕


HTMLやCSSの知識が増えて来るに従い、デザイン(配置構成)の目的で「table」を使用するのは望ましくないという事を知りました。 これは、自動読み上げアプリは「table」を実際の「表」と受け取って読み上げる事を想像すれば、その意味が判ります。 並んだcellは関連した内容のはずが、デザイン目的の「table」はそんな関連性がありません。 検索ロボットは意味の判り難いページと判断するでしょう。 現在では、ページ内容の本質はHTML、デザインはCSSに分化させる事で、それぞれの高度化がはかられているのです。

私はその条件に準拠が必要と考え、スキンのHTMLコードから「table」を無くす事にしました。 そもそも「table」が用いられたのは、「div」などの要素が、ページ上で上から下方向に縦に並び、普通は横方向に並ばないからです。 2次元平面上のレイアウトをさせたい場合には、何らかの工夫が必要で、そのひとつが「table」利用だったわけです。

調べると、横並びレイアウトのために良く用いられるのが「float」プロパティでした。 しかし、常にその後処理「clear:both;」が問題となる様で、私は利用を避けました。 そして行き着いたのが、「display: table;」「display: table-cell;」というCSSプロパティです。 これを「div」要素に指定すると、そのまま「table」「cell」としてのレイアウトが可能で、「tableタグ」の書き換えには有難いプロパティです。 この導入で、HTML上の「tableタグ」を全て「div」タグに置き換えることが出来ました。

この段階で、もはやアレンジ元スキンのHTML構成に頼る必要が無いことが判って来ました。 何かアレンジ元のスキンを用意して、それを叩き台に一からスキンを作る目的で探したのが「ハルハル」というスキンでした。 構成がシンプルで、私のそれまでのデザインの移植先に良さそうで選んだのですが、現在Chromeからではアクセス出来ず、提供スキンの一覧にはありません。

a0349576_12302260.png

この公式スキンをベースに、メインサイトは基本フォントサイズを16px、サブサイトは13pxとして、スキンを組んでいます。


〔第3世代〕


「div」要素の2次元レイアウトを可能にする手法として、「display: table;」は初期のCSSには無かったプロパティでした。 しかし、スマートフォンの利用拡大に応じて、更に便利な「display: flex;」や「display: grid;」というプロパティが登場して来ました。 これらのプロパティは要素の2次元的配置そのものを目的に開発され、とても柔軟に扱えます。

今回は、いままで「display: table;」を使っていた場所を、全て「display: flex;」に置き換えました。 それは、本文とサイドメニューの配置で「display: flex;」が明らかに適していたからです。

「display: table;」「display: table-cell;」の指定では、「div」はあたかも「table」の様な振る舞いをします。 本文とサイドメニューを横並びにするため、これを使用していたわけです。 ところが、サイドメニューが無い場合は、本文の幅は「table」全体の幅になろうとします。 これも「table-cell」指定による特徴です。 これが原因して、ページの読み込み時に、本文幅が一旦横に広がり、メニューが読み込まれて縮まる表示になっていました。

a0349576_13181838.png

この落ち着きなさを改善するため、本文の幅指定を試みました。 ところが、どうしても「table-cell」としての振る舞いが邪魔をして、上手く行きません。 これが「display: flex;」に置き換えた理由です。 そして「display: flex;」に換えると、こちらの方が目的にかなった指定だと確信しました。

「display: table;」を「display: flex;」に換えるだけで、直下の内部要素は自動的にFlex配置になります。 更に配置の様式を直下の要素に細かく指定出来ますが、実際上は余り知らなくてもOKです。



Flexレイアウトとした結果


今回の「display: flex;」の導入で、サイドメニューの有無に影響を受けず、本文幅を指定する事が出来る様になりました。 以下のCSSコードは置き換えの中心で、「/* */」の部分は実際は置き換えて削除しています。 本文幅はウインドウ幅から「calc」によって指定しています。 また、ウインドウ幅が一定以上に狭まっても、従来と同様に本文幅が狭くならない様に「min-width」の指定をしています。

#W_CONTENTS {
/* display: table; */
display: flex;
width: 100%; }

#CONTENTS {
/* display: table-cell; */
/* vertical-align: top; */
width: calc(100vw - 288px);
min-width: 720px; }

#NAVIGATION {
/* display: table-cell; */ }

この書き換えで、ページ読込み時に本文幅の変化する事がなく、遅れて読み込まれたサイドメニューは空いた場所にすっと表示される様になりました。 特に前後のページへ移動した際に、以前より落ち着いた読込み表示になっています。





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



[PR]
by Ataron | 2018-03-25 14:02 | ブログスキンのアレンジ | Comments(0)

エキサイトヘッダー 穏やかなアレンジ

2018年 03月 17日

穏やかなヘッダーアレンジ


前ページでエキサイトヘッダーの積極的なアレンジについて纏めました。 しかし、私自身のページではエキサイトヘッダーを残したアレンジをしたままです。 これは、左隅の「お知らせリンク」やブログ内メニューなど、今に至るまでのアレンジの蓄積が多過ぎ、手を着けにくいからです。

で、いざ自分のページを見直すと、もっとエキサイトヘッダーを弄っても良いのではと思い出しました。 いわば「穏やかなアレンジ」になりますが、こちらはシンプルで殆どのスキンに適応し易いアレンジです。 実際に、このページのヘッダーには、このアレンジを施しています。



ヘッダー背景色とページとの境界線


デフォルトのエキサイトヘッダーは白か黒の背景色しか選択できず、ページデザインと合わせたい場合もありますね。 以下の指定は、ヘッダーを淡い灰色の背景色とした私の例です。

.exHeader {
background: #eee !important;
border-bottom: #eee !important; }

「background」がヘッダー背景色の指定、「border-bottom」はページとの境界線(ヘッダー下縁)の色指定です。「#eee」の部分を変えて好みの配色を指定できます。



検索窓の省略


下はアレンジ前の状態です。「検索窓」はエキサイトヘッダーが出来てから、長く手を着けずに来ました。 なんとなく必要かと思ったのですが、これを使う機会が全くありません。

a0349576_10201500.png

この窓幅の無駄で、ウインドウが狭い場合に肝心のメニューが隠れます。 サイドメニューの「ブログ内検索」があれば全く困らないので、ヘッダー側を削除する事にしました。

下は、ヘッダーの「検索窓」を見えなくするコードです。

#exSearch {
width: 40px !important;
opacity: 0;
pointer-events: none; }

透明化して幅を狭めるコードにしていますが、これは隙間の幅調節に透明化して利用しています。

a0349576_10301692.png



区切り線の透明化


次に、ヘッダーのメニュー「投稿」「設定」等の間の「 | 」を消します。

a0349576_10330130.png

これは、この要素の色を透明化を指定して、見えなくするだけです。

#toollink li {
color: transparent !important; }

この指定で、メニユーは下の様にすっきりします。

a0349576_10364368.png



フォバー時のアンダーラインを無くす


マウスを乗せた時に、デブォルトではアンダーラインが付きます。 これは余り美しくないので、ほんのりとボタン背景が明るくなる形に変えます。

#toollink li a:hover {
text-decoration: none !important;
background: #fff !important; }

a0349576_01431993.png



メニューのボタン化


左隅の「お知らせ」と統一して、もう少しメニューらしいデザインにしました。 これは「投稿」などの「a要素」に、ボーダー枠や背景色を着けるものです。 ごちゃごちゃ指定が続きますが、なるべく体裁の良いボタンにするためです。 margin値はボタンの上下位置やボタンの間隔を調節します。

#toollink li a {
display: block;
margin: 3px 2px 0;
padding: 2px 8px 0px !important;
line-height: 18px;
height: 19px;
color: #000;
border: 1px solid #bbb;
border-radius: 3px;
background: #f8f8f8; }

これで「文字」がボタンデザインになります。

a0349576_10502488.png

出来上がったコードを、他ブラウザからどう見えるかチェックしました。 IEは「!important」を付けないと反映しなかったり、思わぬ問題があります。「フォロー中のブログ新着」の文字が薄いなと思っていたら、これだけは「span要素」で表示されていました。 以下のコードを追加して改善しました。

#toollink li span {
color: #000 !important; }

a0349576_11583241.png



アレンジコードのまとめ


下は以上のコードをひとまとめにしただけです。 スキンCSSの末尾に追記すると、アレンジが反映します。 各段階のアレンジコードを独立して使用してもOKです。


/* エキサイトヘッダーのソフトアレンジ */

.exHeader {
background: #eee !important;
border-bottom: #eee !important; }

#exSearch {
width: 40px !important;
opacity: 0;
pointer-events: none; }

#toollink li {
color: transparent !important; }

#toollink li span {
color: #000 !important; }

#toollink li a {
display: block;
margin: 3px 2px 0;
padding: 2px 8px 0px !important;
line-height: 18px;
height: 19px;
color: #000;
border: 1px solid #bbb;
border-radius: 3px;
background: #f8f8f8; }

#toollink li a:hover {
text-decoration: none !important;
background: #fff !important; }





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


[PR]
by Ataron | 2018-03-17 15:19 | ブログスキンのアレンジ | Comments(0)

エキサイトヘッダーの本格的なアレンジ

2018年 03月 17日

エキサイトヘッダーは出島の仕様


エキサイトの他のユーザーのページを開いた時に、エキサイトヘッダーに「新着コメント○件」の表示が出た場合、クリックすると自ブログのコメント管理ページが開きます。「フォロー」「マイブログ」「投稿」「レポート」等のメニューが並ぶ「エキサイトヘッダー」ですが、他のエキサイトユーザーのページ上なのに、全て自分ページの様に機能します。

一方、有料会員でヘッダー非表示のページでは、「新着コメント」などのメニューが無くなります。 それを補う形で、ブログタイトル周辺に「フォロー」「マイブログ」等のリンクが表示されます。 非表示の場合は、自他のユーザーが困らない様にメニューが差替えられるわけですが、ブログ所有者自身に「新着コメント」が表示されない欠点があります。 また、ヘッダーがあった部分のエリアが残されたままとなる公式スキンが多く、デザイン上で気になる場合もあるでしょう。

エキサイトヘッダー非表示の場合、「新着コメント」のチェックは、コメント欄を直接見るか、ブログトップに行く必要があります。 コメントは一番最近のページに来るとは限りませんから、ヘッダー非表示とすると案外と不便です。 今回のアレンジは、この改善を試みたものです。



見る側によって変化するメニュー内容


ヘッダー部のメニューは、ページを見るユーザーに合わせて「差し替え」が行われます。 アレンジするには、この差替えの仕様を知っている必要があります。

以下の表は縦に「見る側」の区別、横を「ヘッダー表示設定」の区別として、表示される「メニュー項目」を整理したものです。 判り易くするために「メニュー項目」の並び順はページ上と異なります。

a0349576_14161303.png

表の「★」マークは必要度の高いメニューです。 ヘッダー非表示の列を見ると、Exユーザー自身には「新着コメント」「レポート」が足りません。 他の点では、ヘッダー非表示の不便は特になさそうです。


アレンジの方針


アレンジは、一旦環境を「ヘッダー表示」に設定し、「エキサイトヘッダー」側のメニューから必要なものを選択して、「ブログ内」の必要なメニューと併せて、自由な場所に配置する事にしました。

「アレンジ1」は、ブログ所有者はフルメニューが使え、訪問したExユーザーには適度に簡素化したメニューが表示されるタイプです。 これはアレンジの基本型にしています。

は全てのメニューを省略せず集めています。 これらは、ブログ所有者以外からは見えませんから、メニューがページデザインを損ないません。 特に「新着コメント」がブログ所有者のみに見えるのがポイントです。
訪れたExユーザーに、 自ブログのフォローしてもらう「フォロー」の表示は重要です。 また、訪れたユーザーが自ブログに戻る「マイブログ」も、使われる事が多そうです。(デザイン上でマイブログは省略したい場合はあるかも知れません)
何かの理由でログアウトになった場合を考えると、あらゆる場合で「トップ」はある方が良いでしょう。

「アレンジ2」はデザインより、他のExユーザーの便利を優先したタイプです。

の部分だけが異なります。 訪れた他のExユーザーに対して、フルメニューを表示します。 場合によってはヘッダーのデザインとした方が綺麗かも知れません。(元のエキサイトヘッダーよりスマートに出来ると思います)


差し替えられるHTMLの内容


メニューが見る側に合わせて変化するのは、「#toollink」という要素のHTML差替えで実現しています。 以下は、最もメニューが増えた状態を纏めたものです。 実際は、全メニューが常に並ぶわけではありません。


Exユーザ自身のブログで自身に示されるメニュー(新着コメント有り)
<ul id="toollink">
<li><a class="comment" href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/comments/">新着コメント 1 件</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/entry/">投稿</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/config/basic/">設定</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/access/blog/">レポート</a></li>
</ul>


他のExユーザーで未フォローのブログで示されるメニュー(自身に新着コメント有り)
<ul id="toollink">
<li><a class="comment" href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/comments/">新着コメント 1 件</a>|</li>
<li><a href="#" data-ex-id="register-bookmark" data-ex-value="{&quot;blog_id&quot;:&quot;x7777777&quot;}">フォロー</a>|</li>
<li><a href="https://atstudiota.exblog.jp/">マイブログ</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/entry/">投稿</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/access/blog/">レポート</a></li>
</ul>


他のExユーザーでフォロー中のブログで示されるメニュー(自身に新着コメント有り)

<ul id="toollink">
<li><a class="comment" href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/comments/">新着コメント 1 件</a>|</li>
<li><a href="https://www.exblog.jp/mydata/favorite/new/"><span>フォロー中のブログ新着</span></a>|</li>
<li><a href="https://atstudiota.exblog.jp/">マイブログ</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/entry/">投稿</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/access/blog/">レポート</a></li>
</ul>


ログアウトした訪問者に示されるメニュー

<ul id="toollink">
<li><a href="https://www.excite.co.jp/?lin=1&amp;si=blog&amp;ru=http%3A%2F%2Fatstudiota.exblog.jp%2F">フォロー</a>|</li>
<li><a href="https://www.excite.co.jp/?lin=1&amp;si=blog&amp;ru=http%3A%2F%2Fatstudiota.exblog.jp%2F">ログイン</a>|</li>
<li><a href="https://www.exblog.jp/new/pr/">ブログを作る!(無料)</a></li>
</ul>


上のHTMLの中で色付きの文字は、アレンジでメニューの表示/非表示を選択するためのキーに利用しました。

特に「blogid=b0000000」の部分は、「ブログID」と呼ばれる「アルファベット1文字」+「数字7桁」のIDコードです。 これは公開されていませんが誰でも調べる事が出来、特別な秘密性はありません。 システムがブログを特定するためのIDです。


ブログIDの調べ方


アレンジを行うには、「ブログID」をコードに書き込む必要があるので、ここに調べ方を記します。

自分のブログのヘッダー部を右クリックして、Chromeでは「検証」、Firefoxでは「要素の調査」、IE11 / Edgeでは「要素の検査」を押します。 以下はChromeの場合ですが、いずれも同様のHTMLが表示されるので、「exHeader」の項目を探します。(下図の青い部分で、エキサイトヘッダーを非表示にしていると、この項目はありません)

a0349576_19585624.png

そのすぐ下方に、「data-ex-blogid="b0000000"」の記述があります。これは例ですが、これが自ブログの「ブログID」です。



エキサイトヘッダーをアレンジする手順


先ず最初に、

●ブログの「設定」で「エキサイトヘッダー表示」に設定します。

以下に掲載するアレンジの基本型は、メニュー構成は「アレンジ1」に相当し、およそ以下のデザインです。

 ◎ブログのヘッダー設定は「エキサイトヘッダー表示」が必須です。
 ◎メニューは文字色が白、「新着コメント」は白背景で文字色は赤です。
  (従って、ヘッダー部の背景は濃い背景色が適しています)
 ◎メニューの配置は元のエキサイトヘッダーの高さで、右隅に寄った場所です。
 ◎エキサイトヘッダーの本来あったヘッダーエリアを、上方に詰めたデザインになります。

基本型が使用中のスキンに適さない場合は、後半の応用例を参考に修正します。


アレンジの基本型


●以下の枠内のコードをメモ帳等にコピーします。
●コード中で「b0000000」の部分を、自ブログの「ブログID」を調べて置き換えます。
●書き換えたコードを「PCデザインスキン」で使用中のスキンの「CSS最後尾」に追記します。
●編集をしたCSSを保存します。



/* エキサイトヘッダーのアレンジ */

/* ヘッダーエリアを詰める */
#hasExHeader {
margin-top: 0 !important; }


/* エキサイトヘッダー メニュー */
.exHeader {
background: transparent !important;
border-bottom-color: transparent !important;
top: 0;
left: initial;
right: calc(50% - 325px);
min-width: 0;
width: auto; }

.exHeader > *:not(#toollink) {
display: none !important; }

#toollink li {
color: transparent !important; }

#toollink li a {
font-family: Meiryo;
color: #fff;
text-decoration: none; }

#toollink li a.comment {
background: #fff;
border-radius: 4px;
padding: 1px 6px 0px;
margin-right: 5px; }


/* 表示対象コントロール */
#toollink li a:not([href*="blogid=
b0000000"]) {
display: none; }

/* マイブログを表示する */
#toollink li a[href$="exblog.jp/"] {
display: block !important; }

/* フォローを表示する */
#toollink li a[href="#"] {
display: block !important; }


/* ページ内ヘッダー メニュー */
#blog-head .inner {
position: static; }

#blog-admin {
font-size: 0;
position: absolute;
top: 5.2px;
right: calc(50% - 400px);
margin: 0;
z-index: 10000; }

#blog-admin a {
font-family: Meiryo;
font-size: 12px;
color:
#fff; }

#blog-admin a:nth-child(n+2) {
display: none; }



〔注意〕
現在使用中のスキンに対して、これまでに一度もアレンジをした事が無い場合は、スキンは「公式スキン」のままなのでアレンジを反映しません。 その場合は、一度だけ「マイスキン」に登録しなおす必要があります。 この手順は以下に纏めているので、初めての方は参照ください。



このアレンジによるヘッダー部の例で、下はExユーザ自身の表示です。(表のに相当)

a0349576_19412513.png

他のExユーザがこのブログを見た場合、下の様に見えます。(表のに相当)

a0349576_19415423.png

ログアウトしたExユーザーやExユーザー外の人がブログを見た状態です。(表のに相当)

a0349576_19433214.png


応用A: メニュー項目の変更


「アレンジ1」のコードで以下の部分は、赤のブログIDに関する「メニュー項目」以外は表示しない指定です。 他のExユーザーがこのブログを見た時、システムは訪問者のブログIDをメニュー項目のHTMLに組み込むため、それらのメニュー項目は非表示になります。

/* 表示対象コントロール */
#toollink li a:not([href*="blogid=b0000000"]) {
display: none; }

●このコードを削除する

基本型のコードからこの部分を削除すると、訪問したExユーザーにはフルメニューが表示されます。 これは「アレンジ2」に相当し、表示されるメニューはの状態になります。 なお、「フォロー」「フォロー中のブログ新着」は、両方同時に表示される事は無い様です。

下はこの項を削除した場合に、他のExユーザーに表示されるメニューです。

a0349576_20261276.png


応用B: 表示位置の移動


表示されるメニューは、おおむね何処にでも移動出来、ページの上部のデザインに合わせて配置出来ます。 配置に関するコードは「アレンジ1」のコード中で、ピンク色の数値です。 下は2ヵ所のtop値に「80px」「82.5px」として下方に80px下げたものです。 数値の増減は、常に両側で等量にします。

a0349576_20415669.png


応用C: メニューの文字色


基本型はメニュー文字色が「白」ですが、背景が白の場合は文字が見えません。 文字色の指定は「アレンジ1」のコード中の2ヵ所の「#fff」です。 例えば、白背景なら「#000」(黒)等のカラーコードに変更します。


応用D: メニューに背景色を付け、エキサイトヘッダー風にする


デザインを元に戻した様になりますが、表示されるメニュー内容は異なり、無駄なアレンジではありません。 また、ヘッダーの背景色は好みに変更が出来ます。

#hasExHeader {
margin-top: 29px !important;
background: #0077FF !important; }

上は「#0077FF」の青色を背景とするコードの例ですが、デザインに適したカラーコードを探して指定します。

ただし、上記のコードはhtml全体に色を指定するので、ページ下端などにこの背景色が露出する場合があります。 htmlへの色指定は避けて、ヘッダー周辺の背景画像などを利用した方が良いかも知れません。



「新着コメント」とデザインの可能性


このアレンジは「新着コメント」がブログ所有者に表示され、同時に上部ヘッダー枠の無いデザインを可能にします。 また、デザイン重視で訪問者の便宜を気にしない「ブログ所有者以外には一切のメニューを表示しないアレンジ」も、これを再アレンジすれば可能です。

スキンによっては、ここに挙げたコードの手直しが必要な場合があるかも知れませんが、ヘッダー周辺のアレンジの参考になれば幸いです。




この記事はスキン編集にトラックバックしています。



[PR]
by Ataron | 2018-03-17 00:06 | ブログスキンのアレンジ | Comments(0)

「イイネ・コメント」の新着表示アレンジを小修正 / エキサイトブログ

2018年 03月 14日

「イイネ・コメント」の新着表示の欠点


ブログトップ画面には、「イイネ・コメント」があった場合に「」マークの新着表示が出ます。 このマークは「イイネ」「コメント」の区別がないのが欠点、下の様に「ブログ管理」を開かないとどちらの新着か判りません。

a0349576_01575817.png

エキサイトヘッダーを非表示としているユーザーは、ブログ画面で「新着コメント」の案内が見えません。 従って「ブログトップ」→「ブログ管理」と開き確認する事になります。

さて、「新着コメント」をチェックすると「」マークはすぐ消えます。 しかし「新着イイネ」をチェックしても、一定時間たたないと「」マークは消えません。 そのため、エキサイトヘッダー非表示で、沢山のコメントをやり取りするユーザーは、「」マークを見て「新着コメント」と思ったら「イイネ」だったと言う事が繰り返されます。「新着コメント」だけを確認出来ず、いささか不親切なデザインです。

「Excite NoticeMessage(新着表示)」は、トップ画面に新着表示内容を表示して、この不便を解消します。


アレンジ可能な環境


このアレンジは「ユーザースタイルシート」というブラウザ機能で実現します。 多くのブラウザではこの機能をコントロールする拡張機能(アドオン)を導入すれば、非常に有効確実にアレンジを実現できます。 Edgeの場合は現在は未開拓でこれが困難です。 IE11は可能ですが拡張機能がなく、アレンジスタイルを1個しか登録出来ず不便です。 このページは Chrome / Firefox でのアレンジと、IE11でのアレンジについて掲載しています。



新着表示「イイネ」「コメント」をトップ画面のヘッダー部に表示する


「Excite NoticeMessage(新着表示)」は、「ブログ管理」の新着表示のデザインをアレンジします。
新着があれば下図の様に、ユーザーメニューの上部にその内容が表示されます。(ブロクの持主にしか見えません)

a0349576_02334426.png

上図は両方の新着がある場合ですが、それぞれの新着を別々に表示します。
  ◎「コメント」の新着表示はクリックしてコメントを見に行くと、その段階で赤い表示が消えます。
  ◎「イイネ」の新着表示は、他のユーザーが「イイネ」を押し一定時間(1日程度?)後にブルー表示が消えます。

トップページで下方に一定以上スクロールすると、上部にフロートヘッダーが現れます。 下図の様にヘッダーにユーザーメニューが移動して表示されますが、同時に新着表示もこのヘッダーに表示されます。

a0349576_02481324.png

今回、従来のコードを見直して、新着表示の文字の高さ位置のズレを Chrome / Firefox 間で最小限としました。

a0349576_03033993.png

問題にしたのは、ブルー / 赤のベース枠に対する「新しい~」の文字位置の事です。 上は Firefox が僅かに文字が低いのですが、許容範囲と思います。 この文字の高さ位置は、ブラウザ拡大率で微細に変わり、常に中央にするのは難しいものです。



アレンジの実装方法 Chrome / Firefox 


〔手順1〕
Chrome / Firefox でアレンジを実現するには、そのベース環境として各ブラウザ専用の拡張機能「Stylus」を、ブラウザに導入します。 導入は簡単で、不要だと思えばすぐ削除できます。 拡張機能の入手先はブラウザにより異なります。 導入手順は以下のリンクの必要な方を参照ください。

  Chrome版「Stylus」の入手と設定手順

  Firefox版「Stylus」の入手と設定手順


〔手順2〕
「Stylus」が導入されたら、「Excite NoticeMessage(新着表示)」をインストールします。 入手先の「userstyles.org」は、ユーザーの作ったスタイルを配布するサイトで、リンク先に私が登録した「Excite NoticeMessage(新着表示)」があります。

  ◎スタイル名は「Excite NoticeMessage(新着表示)Chrome / Firefox」です。
  ◎アレンジ結果を示すメイン画像の右下の Install Style を押します。
  ◎スタイルのインストールは一瞬で完了し、同時に働き始めます。
  ◎紛らわしい「DownLoad」などのボタンを、間違って押さない様に注意!!
  ◎アレンジを停止するには「Stylus」の管理画面でこのスタイルを「無効」にします。

  スタイルの入手先




アレンジの実装方法 IE11 


IE11には、Stylusの様な拡張機能がありません。 IE11でアレンジを実装するには、以下のページを参考にしてください。
上記の説明は「編集画面のアレンジ」を目的に書いていますが、このページの「新着表示のアレンジ」も全く同様です。

  ◎ユーザースタイルシートのファイル名は適当で良く、説明の様に「Excite.css」などでOKです。
  ◎ファイルの内容になる「基本CSS」は以下です。

〔 基本CSS 〕


/* 2018.03.14 ブログトップの新着表示を拡張表示 (IE11) */

/* 閉じたメニューを非表示メニューにする */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) {
display: block !important;
padding: 0 !important;
border: 0 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active)::before,
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active)::after {
content: none !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) > * {
display: none !important; }


/* ヘッダー上のデザイン */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) ul:nth-child(2) {
display: flex !important;
justify-content: center;
position: absolute;
top: -159px;
right: 180px;
margin: 0 !important;
width: 370px;
border: none !important; }


/* ヘッダー上のデザイン スクロールダウン時 */
body[data-event-category="page-top"] .is-down .navHeader_navPanel.is-userconf:not(.is-active) ul:nth-child(2) {
display: flex !important;
justify-content: center;
position: absolute;
top: -52px;
right: 180px;
margin: 0 !important;
width: 370px;
border: none !important; }


/* いいね・コメントが無い場合 管理画面トップを表示させない */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) a {
display: none !important; }


/* 新着表示のデザイン */
body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="likes"] {
display: block !important;
height: 23px;
line-height: 0;
padding: 12px 8px 0 !important;
margin-right: 8px !important;
border-radius: 4px;
text-decoration: none !important;
color: #fff !important;
background: #03a9f4 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="likes"]:hover {
background: #068af3 !important;
opacity: 1 !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="comments"] {
display: block !important;
height: 23px;
line-height: 0;
padding: 12px 8px 0 !important;
border-radius: 4px;
text-decoration: none !important;
color: #fff !important;
background: red !important; }

body[data-event-category="page-top"] .navHeader_navPanel.is-userconf:not(.is-active) .noticeMessage a[href*="comments"]:hover {
background: #dc0f00 !important;
opacity: 1 !important; }







〔注意〕
IE11の場合、ユーザースタイルシートは一度に1個しか利用出来ません。 編集画面のアレンジや、何かのスタイルシートを他に利用している場合は、利用する場合に応じて切替える必要があります。 このため、ユーザースタイルシートの本格的な利用には不便です。




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


[PR]
by Ataron | 2018-03-14 08:35 | ブログスキンのアレンジ | Comments(1)

ページ上方にスクロールして戻るボタンを設置する / エキサイトブログ

2018年 03月 04日

新しいCSS機能「scroll-behavior」


ページの上方に戻るボタンを備えたページは見慣れたものになりました。 エキサイトブログのトップ画面にも、下方へ少しスクロールすると黒いスイッチが出て来ます。 これはエキサイトが用意したスクリプトで演出しているので、ブログページ上でもそのスクリプトが利用出来ないか試したのですが、残念ながら駄目でした。 そこで色々調べると、最近はCSSの「scroll-behavior」というプロパティを使い、これに近い演出が出来る事を知りました。

ブロック等に、このプロパティを「scroll-behavior: smooth;」と指定すると、そのブロック内でのリンクによる移動が「ジャンプ」ではなく「スクロール」になるそうです。 しかし、エキサイトのブログ画面で試すとなかなか上手く行きません。 色々設定を試すと「html」にこの指定をした場合だけ、スムーズな「スクロール」をする事が判りました。

未だブラウザ対応がまちまちですが、Chrome と Firefox で動作する事が確認出来ました。 しかし、指定方法で次の様な違いがあります。「〇」がスクロール動作OKで「×」はスクロールがジャンプになります。

◎Chrome
  「html」にプロパティ指定「〇」 「body」や他の包括要素にプロパティ指定「×」
  「href="#"」のリンク先表記「〇」

◎Firefox
  「html」にプロパティ指定「〇」 「body」にプロパティ指定「〇」
  「href="#"」のリンク先表記「×」

両ブラウザで正しく動作させるには、
  プロパティ指定は  html {scroll-behavior: smooth;} 
  リンク先は、ページ上の実在のアンカーが必須  <a href="#~~~"></a>

という事になりました。 以上は私の環境で2018年初期に確認した事で、差異や間違いがあれば御指摘ください。



ボタンデザインの実際


実際に設置した時のボタンは下の様なデザインです。

a0349576_18262156.png

少し拡大すると、半透過で下にメニュー等があると少し透けて見えます。

a0349576_18270951.png

ページを下の方にスクロールしてメニューの下端を越えると目立ち、メニュー上にある時は余り邪魔にならない様に半透過としています。 マウスを乗せると、透過がなくなり下の様にはっきりします。

a0349576_18283008.png



ボタンを実装する


エキサイトブログであれば、どのタイプのスキンでも実装が可能と思います。

◎スキン編集でHTMLとCSSに加筆します。
◎PC表示にのみボタンは表示され、スマホ表示には影響がありません。
◎ブログの背景色、メニユー配置、などに合わせて最適なサイズ、配置、配色、に調整してください。
◎FontAwesomeを導入すれば、ボタンデザインを色々と選べます。
◎Chrome と Firefox でスクロール動作を確認しています。 非対応ブラウザでは従来のジャンプになります。
◎現在使用中のスキンが既にアレンジを施したものである場合は、万が一の場合に備えて下記〔手順4〕のスキンのバックアップをしてからアレンジされる事をお勧めします。



手順1 HTMLのペースト 


ブログ「設定」メニューの「デザイン設定」→「PCデザイン設定」→「PCデザインスキン」の画面で、「現在使用中のスキン」の「編集」を押します。(以下は公式スキンの場合の一例です)

a0349576_18535150.png

HTML & CSS編集の画面の「全体」を開き、下図の様に編集枠を一番下までスクロールして、「全体」の最末尾を表示します。

a0349576_19053760.png

一番最後の </div> の手前にカーソルを入れ、2~3回「Enter」を押し、下図の様に空行を作り、空行部分に以下のコードをペーストします。 エキサイトヘッダーがブログページに有るか無いかで、どちらかを選びます。

◎エキサイトヘッダー有りの場合
<div class="nav-top"><a href="#toollink"></a></div>

◎エキサイトヘッダー無し(有料会員でヘッダー無しを選択の場合)
<div class="nav-top"><a href="#hasExHeader"></a></div>

下図の様に間違いなくコードがペースト出来たらOKです。

a0349576_19541648.png



手順2 CSSのペースト


次にCSSのタブを押してCSS編集画面を表示し、やはりCSS編集枠の末尾までスクロールします。 今度は、CSSの一番末尾で改行を2度ほどして、下の様にCSSの末尾に空白行を作ります。

a0349576_19502663.png


CSSの最末尾に以下のコードをペーストします。


/* ページ上方に戻るボタン */
html {
scroll-behavior: smooth; }

.nav-top {
position: fixed;
bottom: 20px;
right: 20px; }

.nav-top a {
display: block;
opacity: 0.7;
width: 40px;
height: 40px;
border-radius: 40px;
background: #2196F3;
text-decoration: none; }

.nav-top a:before {
content: "▲";
margin: 8px;
font: bold 24px/40px Meiryo;
color: #fff; }

.nav-top a:hover {
opacity: 1; }




下図の様に間違いなくペーストができた事を確認して、最後に「作成する」のボタンを押します。

a0349576_20331120.png



手順3 編集したスキンをスキンに適用する


注意〕手順3は、使用中のスキンを始めて編集した場合の手続きで、使用中のスキンが以前にスキン編集を行ったものである場合は不要です。

「PCデザインスキン」の画面に戻り、「スキン選択」で「マイスキン」を選択します。 既に「マイスキン」が開かれている場合はそのまま先に進みます。

下図の下半分(スキン選択)には、過去に選択し使用したスキンや、編集をしたスキンが、履歴として並んでいます。 一番左上が最近の履歴で、これが先に編集し作成したスキンです。(赤枠のスキン)

a0349576_20362516.png

この下の赤枠のスキンの「適用」を押します。 初回の編集でこの操作がないと、編集結果が反映しません。 「現在使用中のスキン」が下の様に「プレビュー」「編集」の2ボタンに変わり、日付が現在のものに変っていたらOKです。

a0349576_20461001.png

これ以降は、再びこのスキンを編集をしても、手順3の操作は不要になります。



手順3 アレンジが反映したかを確認する


上の画面の「プレビュー」を押すと「上に戻るボタン」がウインドウの右下隅に表示されるはずです。 但し、プレビュー画面はリンク動作をしないので、実際のブログ画面を表示して動作を確認します。 もし動作がおかしかったり、デザインに問題があれば、再びこの「PCデザインスキン」の画面で「編集」をします。

万が一、ブログ画面がままならない崩れ方をして元に戻せなくなっても、慌てる事はありません。 その場合は、「PCデザインスキン」の「スキン選択」で、マイスキンでないカテゴリで元のスキンを探して適用すれば良いわけです。



手順4 スキンアレンジをしたらバックアップを手元に保存しておく


但し、注意が要るのは、これまでにスキン編集をしてアレンジして来た内容がある場合は、アレンジしたスキンのバックアップをとっていないと再現できなくなります。

スキン編集の前に、HTMLやCSSの編集画面で、右クリックをして「すべてを選択」を押し、スキンのコードをメモ帳などにコピーしておくと、まさかの場合にも完全に元に戻す事が出来ます。「全体」「本文」「右メニュー」「CSS」の4つのテキストファイルがバックアップになります。

a0349576_21092907.png



ボタンデサインのカスタマイズ


ボタンにFontAwesomeのフォントを使う


ボタンにFontAwesomeのアイコンフォントを使用すると、デザインを拡張出来ます。 このフォントの使用は、CSSの先頭に「@import」指定が必要です。 以下のページの「@import」指定の部分を参考にしてください。



「@import」指定を書き込んだ上で、上記のCSSコード中で「.nav-top a:before」の項のみを以下に置き換えます。


.nav-top a:before {
content: "\f106";
margin: 10px;
font: bold 32px/36px FontAwesome;
color: #fff; }


文字の種類、配置や大きさ等は、上のコードの次の値を調整します。
  FontAwesome の「文字コード」:「\f106」
  文字の左右位置:「10px」
  文字サイズ:「32px」
  文字の高さ位置:「36px」
  文字色:「#fff」

下図は「\f106」の文字を使った場合です。

a0349576_21472147.png



ボタンの配置を変更する


メニューの位置やその他のレイアウトで、ボタンの位置を変えたい場合があり得ます。 配置はウインドウの左右隅で下隅が一般的ですが、これは簡単に変えられます。

上記のCSSコード中で、以下の部分がボタンの配置に関係します。


.nav-top {
position: fixed;
bottom: 20px;
right: 20px; }


「bottom: 20px;」はウインドウ下辺からの距離、「right: 20px;」は右辺からの距離です。 下はそれぞれの値を「0;」とした状態で、値が増えた分だけ隅から離れます。

a0349576_22335778.png

また、「bottom: 20px;」「left: 20px;」とすれば、ウインドウ左下隅の配置になります。




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



[PR]
by Ataron | 2018-03-04 22:39 | ブログスキンのアレンジ | Comments(4)