Studio TA Subsite の案内とお知らせ

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

SNSボタンの周辺レイアウト / エキサイトブログ

2017年 07月 17日
ブログ発信者にとって、SNS連携でより広い層へのアピールを求めるのは常識となりつつある様で、私もそろそろ食わず嫌いを改めねばと考えています。

エキサイトは現在の所、ソーシャルネットワークツールとして6種のSNSボタンを用意しています。「ブログイイネボタン」は、エキサイトユーザー間の効果を重視した機能の様です。 また、他の「Twitter」「Facebookシェアボタン」 「はてなブックマーク」等は、とても気になる機能です。

さて、これらのSNSボタンは、私のアレンジ元の公式スキンでは、下図の様な微妙な場所に配置されます。

a0349576_22151577.png

上側は「タグリスト」、下側は「他記事のテキスト表示」「他記事の画像表示」に挟まれています。 周囲の機能はブログ内の他記事参照機能で、押せば他ページに飛んでしまいます。 このページに対して押してもらいたい「SNSボタン」は、どう考えても本文の直下にあるべきでしょう。

「タグリストは非表示で良い」という人は問題がないでしょう。 しかし、私の場合は「タグリスト」「他記事の画像表示」を必要と考えています。 そこで、この配置をスキンアレンジで変える事にしました。

以下の説明は「他記事のテキスト表示」を非表示とした有料会員を前提にしています。 有料会員でない場合は、「SNSボタン」の下に宣伝が入りますが、「SNSボタンを投稿本文の直下に移動するアレンジ手法」はそのままで有効です。 ただし、表示パーツの間隔は、適当に調整が必要と思います。



下図は「他記事のテキスト表示」を非表示とした、アレンジ前の状態です。

a0349576_22370349.png

IE11のDOMを使って「タグリスト」の構造を調べると、以下の様なものと判ります。

a0349576_22460507.png

「.taglist」は「margin: 20px 0 10px」(マージン値は、上/左右/下)で、その内部に「~をまとめ読み」の「.taglist-matome」が有ります。「SNSボタン」の移動先を上マージン「50px」と増して確保し、「~をまとめ読み」は表示しない事にしました。

.taglist {
margin: 50px 0 10px !important; }

.taglist-matome {
display: none; }

a0349576_22585530.png

SNSボタン群は、纏めて「.sm_icon_mini」というブロックに入っています。 ブロックの元のマージン値は「0」で、これを「.taglist」より上に配置するために、上マージン値を「-100px」のマイナス指定としました。

ここで配慮が必要なのは、SNSボタンは投稿ごとに「表示」「非表示」を切り替える場合がある事です。 両方の場合で、周囲のパーツの間隔が変わらないのがベストです。 これについては、
「マイナスマージン値」=「ボタン自身の高さ」+「プラスマージン」
とする事で、周囲パーツの間隔を「表示」「非表示」で不変にできるはずです。

ボタン自身の高さは「25px」程度です。(これは実は、後の背景着け後に修正した値です) そこで、とりあえず次のマージン値を設定しました。

.sm_icon_mini {
margin: -100px 0 75px; }

下図はこの指定の結果です。

a0349576_11044949.png

下図は、DOMのマージン表示を外した実表示の様子です。

a0349576_11080510.png

SNSボタンの配置を本文側に持って来れましたが、パーツの間隔が間延びしてる様に感じます。 これは本文の行間隔や、全体のスキンデザインの詰め方等との「バランスの問題」です。 余り詰めると堅苦しくなりますが、私は少し詰めることにしました。

「.taglist」の下マージン「10px」を「0」に、それでも足りず、リスト内部のパーツ「.taglist-list-li」の下マージン「8px」を「0」に。 また、ボタン自身のマージンは「-75px 0 50px」に調節。 下側の「他記事の画像」の罫線は要らないので消した結果が、以下の状態です。

.taglist {
margin: 50px 0 0 !important; }

.taglist-list-li {
margin: 0 8px 0 !important; }

.sm_icon_mini {
margin: -75px 0 50px; }

.preview_inn {
border-top: none; }

a0349576_11115976.png

ここで、SNSボタンのブロックに背景色を着けて、本文の範囲を明確にすることにしました。 上下padding値で背景の高さを調節、左端からの余裕は「15px」が関係します。

.sm_icon_mini {
padding: 0 15px 4px;
background: #ddd; }

また、「他記事の画像表示」の下マージンを10px→0px に少し詰めました。

.preview_inn {
margin: 30px 0 0 !important; }

a0349576_11130994.png

最後に、SNSボタンの横方向の間隔を調整。 ここに表示されていないボタンに付いては不明です。

.sm_icon_mini .xbg_like, 
.sm_icon_mini .xspf_icon,
.sm_icon_mini a,
.sm_icon_mini iframe,
.topsy_widget_data {
margin: 5px 11px 0 0 !important; }

a0349576_11304624.png



これで完成と思い、SNSボタン非表示のサンプルを作りテストして見ると、予想外に隙間が空きます。

a0349576_12365700.png

この隙間の実体をDOMで調べると、以下の指定が原因でした。

a0349576_12384422.png

下側は想定外で、ボタン表示の場合は「30px」を変えても何も変わらず放置していました。 つまりボタン非表示で「30px」を調節して、ボタン表示の場合と同じ間隔にすれば良く、結局これは「0」が最適でした。

上側の「50px」は、本文にSNSボタンが重ならない様に、予防的に空けたものです。 SNSボタンが非表示となれば、本文の下端が空くのは仕方ないですが、本文末に改行で余裕を作るのが常ですから、SNSボタンを出来るだけ上に寄せる事にしました。 調整の結果、下図の様に「30px」と決めました。

.taglist {
margin: 30px 0 0 !important; }

.preview_inn {
margin: 0 !important; }

a0349576_13355376.png

この設定で、SNSボタンの「表示」と「非表示」の違いを比べた結果が以下です。 両者でボタンの有無が異なるだけで、周辺パーツの配置に変化が無く、当初の目的を達しています。

    〔SNSボタンが表示の場合〕
a0349576_13430419.png

    〔SNSボタンが非表示の場合〕
a0349576_13435366.png



以上の推敲から、ブログスキンに追記するコードを纏めたものが以下です。


/* TAG and SNS */

.taglist {
margin: 30px 0 0 !important; }

.taglist-list-li {
margin: 0 8px 0 !important; }

.taglist-matome {
display: none; }

.sm_icon_mini {
margin: -75px 0 50px;
padding: 0 15px 4px;
background: #ddd; }

.preview_inn {
margin: 0 !important;
border-top: none; }

.sm_icon_mini .xbg_like,
.sm_icon_mini .xspf_icon,
.sm_icon_mini a,
.sm_icon_mini iframe,
.topsy_widget_data {
margin: 5px 11px 0 0 !important; }


公式スキンでは、これらのパーツに使用されるセレクタ名は、おそらく共通と思うのですが、完全に確認したわけではありません。 もし大変に変な表示となる場合は、セレクタと構成をDOMで調べてください。 また、上記のアレンジコード中の上下マージン値は、使用しているスキンに合せて適当に調整をしてください。

なお、公式スキンを使用中で、初めてスキンアレンジをされる場合は、必ず以下の(1)(3)の段を参照してから始める事をお勧めします。



この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。




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

エキサイト編集画面のアレンジ(36) Chrome版 - ブラシュアップ More拡張 ver.2

2017年 07月 15日
「More編集枠」「not moreボタン」「この投稿に関して」「投稿日時」「公開設定」の配置指定に「position: absolute」を使用して、下部ボタン類の配置コードを最適化しました。 これにより、「キャンペーン」「みんなの投稿」等の枠の追加の際に、編集枠下部のボタン類の配置が崩れる事が無くなりました。

またトラックバック枠を常設し、「おすすめブログテーマ」などのトラックバック機能を利用する投稿様式に対応しています。

以下は、More編集時の様子です。

a0349576_09335012.png

「基本の編集枠」と「Moreの編集枠」の切り替えや、特徴の細部に関しては以下のリンクを参照ください。

ver.2は、上記の初期バージョンの特徴を全て受け継ぎつつ、以下の点を更新しています。

●「トラックバック枠」を小型化して常設としました。
●「おすすめブログテーマ」を画面右上隅に配置しました。 オプションで非表示に出来ます。
●「キャンペーン」「みんなの投稿」のオプション枠を追加した場合の、下部ボタン群の配置崩れを解消しました。
● エキサイトのトップページ「ブログテーマ」からの投稿(このテーマで記事を書く)に対応。
●「マイブログ」ボタンのシステム側のデザイン変更に対応しました。

「このテーマで記事を書く」「おすすめブログテーマ」「キャンペーン」「みんなの投稿」等の投稿様式は、トラックバック機能を使用します。 これらの投稿の際に、トラックバック送信先の確認や訂正が可能になりました。



トラックバック枠は、編集枠下のスイッチ群の端に、小型化して配置しています。 小枠内は空白ですが、トラックバックが設定されると、送信先アドレスの最初の文字「h」が見えます。

a0349576_10092209.png

マウスポインタを小枠に乗せると、横幅が拡張してトラックバック枠の内容(通常は1行)が確認出来ます。

a0349576_10122236.png

送信先の内容を編集をする場合は、枠をクリックしてポインターを枠内に入れます。 トラックバック枠は高さが倍に増えて、編集し易い状態になります。

a0349576_10160026.png

トラックバックが実際に送信されるのは、それを設定した記事を公開した時です。 この公開した記事を再編集でもう一度開くと、編集枠の下端に下図の様にトラックバック送信先のアドレスが表示されます。 これはリンクではありませんがコピーは可能です。


a0349576_13173240.png

以上が常設になったトラックバック枠の機能の概要です。



従来は非表示扱いの「おすすめブログテーマ」の表示を、右上隅の画像パレットの背部に設置しました。

a0349576_10224234.png

全体のウインドウを横へ少し拡げれば、そのアイコンが覗きます。 これにマウスポインタを乗せると、案内の内容が全て表示され、リンク文字を押すことができます。

a0349576_10270149.png

後は通常と同様で、リンクを押すと下のダイアログが表示され、青ボタンでトラックバックが自動的に設定されます。(投稿文の「送信」まではトラックバック送信は実行されません)


a0349576_10282057.png

編集枠の中に、応募先の「リンク」もしくは「リンクバナー」が自動的に書き込まれます。

a0349576_10303475.png

同時に、こちらが肝心ですが、トラックバック先のアドレスが、自動的にトラックバック枠に書き込まれます。

a0349576_10385132.png

トラックバックの小型枠の状態でも、トラックバックが設定された事が確認出来ます。(キャンペーン枠からの投稿の場合は、一旦「下書き保存」をすれば確認出来ます。)

以上の様に、ver.2はエキサイトが募集するタイプの投稿様式に、充分に順応できます。



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

Stylistに以下の基本CSSを登録する際、URL指定(上記ページの➁枠の部分)は以下を記入します。
  「prefix」=「 http://userconf.exblog.jp/entry/
〔注意〕エキサイト常時SSL化による切替え後には、上記は「https://」への変更が必要です。

以下は Stylistに登録するユーザースタイルシートです。


Chrome版-ブラッシュアップ More拡張 ver.2  (基本CSS)


/* Chrome版-ブラッシュアップ More拡張 ver.2 2017.07.14 */

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: 1024px;
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; }

#announceList {
display: none; }

header.boxHead {
display: none; }


/* タイトル部 */

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

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

#entryTemplateList select:focus {
left: -400px;
width: 421px; }

/* *** */

.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: 200px;
font-size: medium;
z-index: 2;
transition: 0.5s; }

#entryEditTitle:hover {
width: 792px; }

#entryEditTitle :focus {
position: relative;
width: 792px; }

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

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


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

#entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
top: 5px;
left: 838px;
height: 40px;
width: 150px;
overflow: hidden;
transition: 0.5s;
z-index: 1; }

#entryEditHead-new tr:nth-child(1) td:nth-child(3):hover {
left: 500px;
width: 488px;
background: #fff; }


/* *** */

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

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

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

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

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

#entryEditTags {
position: absolute;
top: 15px;
left: 353px;
width: 480px; }

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

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

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

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

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

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

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


/* 編集部wrap構成 */

#entryEditWrap {
margin: 0; }

#entryEditInner {
margin: 0; }

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

#entryEditContents .entryPreview.btn-s {
display: none; }

.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;
border: none;
background: none;
z-index: 2; }

#new_icon {
display: none !important; }


/* 編集部 */

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

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

#_entryContent:focus , #entryContent:focus {
position: relative;
z-index: 2; }

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


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

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


/* 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;
z-index: 0; }

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

#entryMoreText {
margin: 2px 0 0; }


/* 下部整理 1 */

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

#entryOptions:hover {
width: 100vw; }

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

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

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

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


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

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

#entryTrackbackTextarea {
position: relative;
width: 40px;
margin: 0 0 0 640px;
min-height: 20px;
height: 28px;
padding-top: 5px;
padding-left: 7px;
box-shadow: none;
font-size: medium;
overflow-x: hidden;
transition: 0.5s; }

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

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

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

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

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


/* 画像パレット */

.partsWrap#wrapper {
min-width: 0px; }

#entryEditIframe {
position: absolute;
overflow: hidden;
right: 2px;
width: 215px; /* 画像パレット 右余裕*/
z-index: 2; }

#entryEditIframe iframe {
width: 200px;
height: 760px; }


/* 下部整理2 */

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

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

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

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

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


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

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

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

#entrySubmitBtm {
width: 100%;
border: none;
padding: 0;
margin: 0px 0px 25px -60px; }

#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;
height: 30px;
border: 1px solid #ccc;
margin: 0;
background: linear-gradient(to bottom, #c3ffff 0%,#b0eae0 100%); }

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

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

#exFooterWrapper {
display: none; }


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

#entryEditTags span.tags a {
border-radius: 0 3px 3px 0; } /* タグボタンの枠デザイン */


/* 背景色デザイン */

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


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

.campaign-container {
display: none; }


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

#blog2media {
display: none; }


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





末尾の「背景色デザイン」のカラーコードを書き換えれば、編集ウインドウの背景色をアレンジできます。 また、テクスチャー画像を背景色の代わりに使用出来ます。 手順は(29)Chrome版-More拡張を参照ください。



以下は、ver.2に対応するオプション項目です。

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

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

#_panel:hover {
height: 60px;
top: -28px;
margin: 0px 0px -28px; }

「Chrome版-ブラッシュアップ More拡張」の基本CSSの末尾に、上記のオプションコードを追記すると、2行編集アイコンが使用できます。 下図の様に、編集アイコン列をポイントすると非表示のアイコン行が上側に追加表示され利用可能となります。

a0349576_10570169.png


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

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

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

「おすすめブログテーマ 」の機能は全く不要で、わずらわしいという場合は、常時非表示に出来ます。
基本CSSの末尾に、上記のオプションコードを追記してください。


キャンペーン枠 表示オプション

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

.campaign-container {
margin-right: 215px;
background: #fff;
display: block; }


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

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

.page_entry #blog2media {
margin: 5px 215px 10px 0;
background: #fff;
display: block; }


オプションは必要な機能だけの追加も、複数を追加して併用する事も可能です。 下図は「キャンペーン」「みんなの投稿」の両方を追加した場合です。

a0349576_11072735.png



この「Chrome版-More拡張」を使用すると「テンプレート編集画面」の表示崩れを生じます。 以下の「テンプレート補正」をStylistに登録すれば、テンプレート編集画面を「More拡張」と同じ環境で使えます。
●「テンプレート編集画面」を利用しない場合は、「テンプレート補正」の登録は全く不要です。
●「テンプレート補正」の登録は、別個のスタイルとして Stylistに登録します。 オプションは基本CSSの末尾に追記しますが、これは別スタイルを作るので、Stylistの左側のスタイル項目が増えます。
● Stylistに登録する順番は、「Chrome版-More拡張」の下方に置く必要があります。(下方は後から読み込まれ、指定の優先順位が上がるためです)
● Stylistに「テンプレート補正」を登録する際、URL指定は以下を記入します。
  「prefix」=「 http://userconf.exblog.jp/entry/template/
〔注意〕常時SSL化の切替え後は、上記を「https://」で始まる形に変更する必用があります。

Chrome版 More拡張 テンプレート補正 ver.2用


/* More拡張 テンプレート補正 ver.2 2017.07.14 */

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

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

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

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

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

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

#sidemenu {
display: none; }


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

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






この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。




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

エキサイト編集画面のアレンジ(35) IE11版 - ブラシュアップ More拡張 ver.2

2017年 07月 15日
これまでの(28)IE版 More拡張版を ver.2 に更新しました。 下図は、おおまかな更新内容です。(画面はMore編集の状態です)

a0349576_00391124.png

More拡張版は、More編集時に「基本の編集枠」の上に「Moreの編集枠」が重なって表示され、コンパクト環境で両画面が編集できます。 この More拡張の特徴や切り替え操作については、以下のリンクの説明を参照ください。

この ver.2は、上記の初期バージョンの特徴を全て受け継いでいますが、いくつかの点を改善しています。

●「トラックバック枠」を小型化して常設としました。
●「おすすめブログテーマ」を画面右上隅に配置しました。 オプションで非表示に出来ます。
●「キャンペーン」「みんなの投稿」のオプション枠を追加した場合の、下部ボタン群の配置崩れを解消しました。
● エキサイトのトップページ「ブログテーマ」からの投稿(このテーマで記事を書く)に対応。
● ダイアログ内で、全体ウインドウの背景色の指定となる範囲を減らし、ダイアログを使い易くしました。

「このテーマで記事を書く」「おすすめブログテーマ」「キャンペーン」「みんなの投稿」等の投稿様式は、トラックバック機能を使用します。 これらの投稿の際に、トラックバック送信先の確認や訂正が可能になりました。



最初の画像の様に、画面右隅に「おすすめブログテーマ」の案内を配置しました。 小画像をポイントすると全ての内容が表示されます。 リンク文字をクリックすると更に詳しい案内説明のダイアログがポップアップします。 そこでこのテーマを選択すると、自動的にリンクバナー(またはリンク文字)が本文に書き込まれ、下方のトラックバック枠に送信先アドレスが設定されます。

a0349576_01015918.png

過去バージョンではトラックバック枠はオプション扱いでしたが、ver.2は常設としました。 小型枠はアドレスの最初が見えるので、トラックバック設定の有無が判ります。 枠をポイントすると、枠幅が拡張して設定の内容を読むことが出来ます。

a0349576_01082689.png

トラックバック設定の内容を編集したい場合は、枠内をクリックしてカーソルを入れます。 縦幅がさらに倍になり編集し易くなります。

a0349576_01105559.png

トラックバックが実際に送信されるのは、それを設定した記事を公開した時です。 この公開した記事を再編集でもう一度開くと、編集枠の下端に下図の様にトラックバック送信先のアドレスが表示されます。 これはリンクではありませんがコピーは可能です。

a0349576_09282480.png

以上の様に、ver.2はエキサイトが募集するタイプの投稿様式に、充分に順応できます。

トラックバック枠の設置にあたり、画像パレットの高さを減らし、編集枠の下方を下部ボタン群とトラックバック枠がフルに使うデザインとしました。 サムネイル部の高さを稼ぐため、「画像を選択」「アップロード」のボタンを並べましたが、画像パレットの操作性は充分と思います。



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



IE11版-ブラッシュアップ More拡張 ver.2 テンプレート編集対応


/* IE11版 - ブラッシュアップ More拡張 ver.2 テンプレート編集対応 2017.07.14 */

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

#wrapper {
min-width: 950px !important; /* 全体幅指定 */
min-height: 0 !important;
background: none !important; }

#entry {
min-width: 900px; } /* テンプレ編集枠幅に対応 */

.ad728 {
display: none !important; }

#entry #announceList {
display: none !important; }


/* タイトル部 */

.page_entry #entry > #form {
width: 100% !important;
position: absolute !important;
top: 0;
left: 0;
padding: 0 !important;
background: #fbfbfb;
z-index: 1; }

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

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

.page_entry #entryTemplateList select::-ms-expand {
width: 20px !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
background: aquamarine !important; }

.page_entry #entryTemplateList select:focus {
left: -400px !important;
width: 430px !important;
z-index: 1; }

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

.page_entryTemplate #editTemplateList .fR {
float: left !important;
margin: 8px 0 0 20px !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;
left:15px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
z-index: 2; }

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

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

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

.page_entry #entryEditTitle :focus {
position: relative !important;
width: 792px !important; }

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

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


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

.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3) {
position: absolute;
top: 5px;
left: 962px;
height: 40px !important;
width: 60px !important;
overflow: hidden !important;
transition: 0.5s;
z-index: 1; }

.page_entry #entryEditHead-new tr:nth-child(1) td:nth-child(3):hover {
left: 638px !important;
width: 384px !important;
background: #fff !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_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;
width: 445px !important; }

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

.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 {
overflow: visible !important;
margin: 0 0 0 15px !important; }

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

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

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

.page_entryTemplate #entryEditContents {
margin-right: 170px !important;
overflow: visible !important; }

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

.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;
border: none !important;
background: none !important;
z-index: 2 !important; }

#new_icon {
display: none !important; }


/* 編集部 */

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

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

#_entryContent:focus , #entryContent:focus {
position: relative;
z-index: 2; }

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


#_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: 3; }

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


/* More部 */

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

#more span {
padding: 2px 0 0 !important;
font-size: small !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; }

#notmore>span {
padding: 2px 0 0 !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;
z-index: 0; }

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;
display: block !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;
z-index: 4 !important;
transition: 0.5s !important; }

.page_entry #entryOptions:hover {
width: 105% !important; }

.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;
font-size: medium !important;
overflow-y: auto !important;
transition: 0.5s; }

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

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


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

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

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

.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 {
width: 165px !important; /* 画像パレット右余裕 */
position: absolute !important;
top: 56px;
right: 2px;
z-index: 2; }

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

#entryEditIframe iframe {
width: 155px !important;
height: 612px !important; }

.partsWrap#wrapper {
min-width: 0 !important; }

#partsImage {
padding: 5px 0 0 !important;
position: static !important; }

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

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

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

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

#partsImage .optionGroup {
margin: -5px 5px 5px !important; }

#partsImage .optionGroup span {
display: none !important; }

#partsImage .optionGroup select {
font-size: small !important;
height: 26px !important;
padding: 2px 5px !important; }

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

#partsImage .optionGroup option {
font-size: 1em !important; }

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

#partsImageContainer li {
margin: 0 0 10px !important;
width: 122px !important;
height: 80px !important; }

#partsImageContainer li div input {
position: relative !important;
left: 43px !important; }

#partsImageContainer li a {
background-size: cover !important;
width: 118px !important;
height: 76px !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: 530px !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;
max-width: calc(100vw - 283px) !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPstdate:hover {
width: 100% !important;
z-index: 3 !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: 53px !important; }


.page_entry #entryOptionsPpenflag {
position: absolute !important;
top: 669px !important;
left: 480px !important;
width: 310px !important;
margin: 0 !important;
padding: 14px 0 10px 20px !important;
white-space: nowrap !important;
overflow: hidden !important;
background: #fbfbfb !important;
font-size: 13px !important;
max-width: calc(100vw - 518px) !important;
transition: 0.5s !important; }

.page_entry #entryOptionsPpenflag:hover {
width: 50% !important;
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 {
padding: 0 !important; }


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

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

#exFooterWrapper {
display: none !important; }

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

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


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

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

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

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

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

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

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

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

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

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

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

/*
#exbtn_blockquote {
top: auto !important;
bottom: 32px !important;
left: 457px !important;
background-position: -376px -1px !important; }
*/

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

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

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

/*
#exbtn_ol {
top: auto !important;
bottom: 32px !important;
left: 249px !important;
background-position: -426px -1px !important; }
*/

/*
#exbtn_ul {
top: auto !important;
bottom: 32px !important;
left: 223px !important;
background-position: -401px -1px !important; }
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#exbtn_autoeol.activeBtn {
background-position: -701px -131px !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; }

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

#entryEditTags span.tags a {
border-radius: 0 3px 3px 0 !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 ,
.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; } /* ダイアログ 背景色 */


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

.page_entry .campaign-container {
display: none !important; }


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

.page_entry #blog2media {
display: none !important; }


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








編集画面の配色アレンジについて
編集画面の配色は、最後の「配色」の項の3ヵ所で指定しています。 この部分を書き換えて好みの配色やテクスチャーの指定が可能です。 詳細はこの記事の最後を参考にしてください。



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

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

#_panel:hover {
height: 60px !important;
top: -28px !important;
margin: 0px 0px -28px !important; }

基本CSSの末尾に上記のオプションコードを追記すると、2行編集アイコンが使用できます。 下図の様に、アイコン列上をポイントすると非表示のアイコン行が上側に追加表示され利用可能となります。

a0349576_23434516.png


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

おすすめブログテーマは、必要とする全ウインドウ幅を若干拡げてしまいます。 狭幅の画面での編集で、おすすめブログテーマは不要な場合や、余計な物は要らないという場合は、基本CSSの末尾に以下のオプションコードを追記すると、全く表示されなくなります。

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

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



キャンペーン枠 表示オプション

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

.page_entry .campaign-container {
margin-right: 15px !important;
background-color: #fff;
display: block !important; }

基本CSSの末尾に以下のコードを追記すると、下図の様にキャンペーン期間中のみ「キャンペーン枠」を表示します。 期間後は自動的に本来の編集画面デザインに戻ります。

a0349576_02303278.png


みんなの投稿枠 表示オプション

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

.page_entry #blog2media {
margin: 5px 15px 10px 0 !important;
background-color: #fff;
display: block !important; }

基本CSSの末尾に上記のオプションコードを追記すると、下図の様に「みんなの投稿枠」が表示されます。 みんなの投稿枠が必要な場合は、このオプションを追記してください。

a0349576_02325358.png




〔注意〕
IE版はアレンジの適応範囲が指定出来ないため、ブログの「設定」画面にも一部のアレンジが反映します。 基本操作に支障がない様に配慮していますが、これはIEのユーザースタイリスト機能の制限です。 例えば「設定画面 左メニュー」がスクロール表示となり、機能上の問題はありませんが、こういった問題を避けるには、一時的にIEでの設定をOFFにしてください。


この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。



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

画像のクールなポップアップを演出する / エキサイトブログ

2017年 07月 09日
「右クリック禁止」のブログパーツは2009年に導入されました。 詳細は以下のリンクを参照ください。

この機能は掲載画像のコピー抑止よりも、スマートな画像のポップアップ(等倍拡大表示)を演出できる事に価値があります。 標準のポップアップウインドウは、見る側にとって操作性がいまひとつです。 当ブログでは、画像をクリックすると、このパーツによるポップアップが実行されます。 ポップアップは、ウインドウ内の何処かをクリックすれば、閉じて元に戻ります。 他ページへ飛ばされてイライラする事がなく、とても優れた画像の見せ方だと思います。



このブログパーツをブログに登録する手順を以下に説明します。

●ブログの設定画面に入り、黒メニューの〔設定〕→〔基本設定〕で下図の(1)〔基本設定〕の画面を表示します。

a0349576_02232115.png

ここで「画像の拡大表示」の項を探して(2)「ポップアップ」にマークを入れ、一番下の(3)「適用」を押します。

●次に下図の様に(4)〔メニュー並べ替え〕の画面を表示し、水色のメニュー項目の中で(5)「ブログパーツ」にチェックを入れ、一番下の(6)「適用」を押します。

a0349576_02394467.png

●黒メニューの〔設定〕→〔ブログパーツ〕を選択して「ブログパーツ」の画面を開いておきます。

以下のコードをコピーします。

<script type="text/javascript" src="//md.exblog.jp/scripts/rclick.js"></script>

もし、ブログ画面のメニューに画像の無断使用禁の「文言」を表示したい場合は、下のコードの方をコピーしてください。

<script type="text/javascript" src="//md.exblog.jp/scripts/rclick.js"></script>
<ul>
<li>このブログに掲載されている写真・画像・イラストを無断で使用することを禁じます。</li>
</ul>

「文言」は、このテキスト部分がそのまま表示されるので、任意に書き換える事が可能です。 私は、ブログメニューに何も表示が出ない上側のコードを使っています。

●上記のどちらかのコードをコピーしたら、下図の様に(7)「ブログパーツ追加」の枠にペーストし、(8)「登録」を押します。

a0349576_02564707.png

●開いている「ブログパーツ」の画面の下側の「ブログパーツの設定」は、何もブログパーツを使用していない場合は、下図の様な状態です。

a0349576_03035483.png

ブログパーツを登録すると、この「並べ替え」の枠内に、登録したパーツが大きく表示されます。

a0349576_03083705.png

(9)の枠には、パーツの表示内容が示されます。「文言」なしのコードを登録した場合は空白です。「文言」ありを登録した場合は、ここに文言が表示されます。(パーツ登録の結果が思い通りでない時など、パーツを削除するには、赤の「削除」を押します)

●実際にブログパーツの動作を確認します。 上図の(10)「プレビュー」でブログ誌面を表示して、掲載画像を左クリックでポップアップさせます。 下図はそのサンプルですが、半透過の黒と白の枠で囲まれた等倍の画像が、同じウインドウ内にポップアップします。

a0349576_06055576.jpg

●問題なければ、念のため(11)「適用」を押して、全ての設定画面を閉じます。



以上で、「右クリック禁止」のブログパーツが登録され、実際に機能しはじめます。 ただ、私はポップアップの枠のデザインを更にアレンジしました。 デフォルトでは、枠内に表示される「文言」が気に入らない事や、枠外の周囲が見え過ぎて落ち着かないと思ったからで、これは好みがあると思いますが。

ポップアップ枠に対するアレンジCSSをブログスキンに追記して、下図の様にウインドウ内全体が暗転するデザインとしています。 このポップアップはウインドウ内の何処をクリックしても抜けられます。 従って「CLOSE ×」は実際は不要なのですが、ポップアップの抜け方でとまどうのを防ぐ目的で残しました。「×」を押さないと抜けられないポップアップコードがたまにありますが、大きな画像で抜けられなくて困る事があります。 その点、このブログパーツは良く練られた優れものです。

a0349576_06062505.jpg

以下がスキンに追記した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; } /* 文字の上の細線を消す */
.facebox_overlayBG {
opacity: 0.8 !important; } /* ウインドウ内の黒反転の透過度 */



細かい問題点ですが、このブログパーツを使用すると、IE11とEdgeからの参照で、中央寄せ配置の画像に限り、マウスを乗せた(hover)時に、画像の下辺にリンクテキストの文字背景色が表示される様になります。

▪これはChromeでは生じず、上記以外のブラウザでは未確認です。
▪左右寄せ配置の画像の場合には生じない。
▪本文中のリンクテキストのフォバー(a:hover)の文字背景色の指定が、画像にも出てしまう現象。
▪画像の影の様に、画像下辺に1/3行程度の高さで出る。
▪本文中の「a:hover」の背景色指定が、本文背景色と同色か、指定が無い場合は気付かない。

IE11などで参照した時に、マウスを乗せた画像にhover背景色が表示されて気になる場合は、以下の対策コードを追加します。 このコードは、本文中のリンクテキスト等に影響が出ない様に、セレクタを「中央寄せ配置の画像」を特定する様に工夫したものです。

.POST center[draggable=""] > a:hover,
.post center[draggable=""] > a:hover{
background: none; }
/* 画像のhover時に、リンクを示す影が出ない様にする */



以下のリンク先に、これに至るまでに試した他のアレンジ例があります。 参考にしてください。




使用中のスキンを始めてアレンジする場合は、以下のリンクを最初に読んでマイスキン登録をしてから、アレンジ操作をしてください。



この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。



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

ページナビゲーション画像の縦横比を修正する / エキサイトブログ

2017年 07月 08日
ページ末尾に表示される「ページナビゲーション画像」は、ブログを訪れた人に他のページの興味を誘う、上手い仕掛けだと思います。 しかし、この機能は正方形のサムネイルを生成するので、縦横比が2:3の写真画像などは横幅が圧縮されて、残念な表示になります。

これは、簡単なスキンアレンジによって、元画像の縦横比のサムネイルを生成させる事が可能です。 アレンジ方法は、サムネイルの「高さを一定にする」か「幅を一定にする」かの2種の方法があります。 ただし、幅か高さのどちらかがフリーになるため、この部分のデザイン上の「崩れ」を許容せざるを得ません。 私はそれでも、歪まないサムネイルのデザインを選んでいます。

b0174191_04533576.png



以下は「ピックアップブロガー」のスキンで、これは高さを固定した例です。 上の項はシステム側のデフォルトの指定、下の項はスキンアレンジで追加されています。

.thumnail_next_bbs {
border: solid 1px #cdcdcd !important;
margin: 0 !important;
padding: 4px;
float: left;
display: block;
width: 114px;
height: 114px; }

.thumnail_next_bbs {
margin: 0 3px 0 0 !important;
width: auto !important; }

上項では、サムネイルの枠線「border」と、サムネイルの間隔「margin」、枠線と画像の余白「padding」等が指定されています。 幅「114px」高さ「114px」の値は、本文幅内に5個のサムネイルが納まる様に、システムが指定したものです。

下項はスキンアレンジで上項を修正しています。「margin」はサムネイルの間隔を少し開く指定です。 そして「width:auto」の指定で、サムネイルの幅が「本来の縦横比」になります。 下図は実際のサムネイルの様子です。

a0349576_12223883.png

しかしこのアレンジは、横長の元画像が多い場合に、サムネイルが次行に送られてしまいます。 他ページの最初の挿入画像が無作為に元画像に選ばれるため、この崩れは起こりがちです。

a0349576_12232295.png

この例では、掲載する画像の縦横比がおよそ決まっている場合は、アレンジの項に「height:100px !important;」等の指定を追加すれば、崩れを減らせます。「100px」の値は単なる例で、使用しているスキンの本文幅から適当な値を決める必要があります。

下図は、IEの「要素の検査」機能を使って、「height:100px」に変更した状態です。

a0349576_12243723.png

これでもサムネイルが4個の場合で、横幅のあるサムネイル5個で崩れない様にするには、更に高さを抑えるべきでしょう。



次は当ブログの方式で、サムネイルの幅を固定し、高さをフリーにする方法です。 上の項はシステム側のデフォルトの指定で、下の項はスキンアレンジで追加したものです。

.thumnail_next_bbs {
border: solid 1px #cdcdcd !important;
margin: 0 !important;
padding: 4px;
float: left;
display: block;
width: 108px;
height: 108px; }

.thumnail_next_bbs {
width: 118px !important;
height: auto !important;
padding: 0 !important; }

上項は先の例と同様で、幅「108px」高さ「108px」の値だけが違います。 これは、システム側が本文幅に合わせて指定したものです。

下項は私がスキンアレンジで修正した内容です。 サムネイルの余白を「padding:0」で切り詰め、本文幅に納まるサムネイルの最大幅を探して、「width:118px」の値を決めました。「height:auto」でサムネイルの高さが、元画像の縦横比に即したものになります。 下図は実際のサムネイルの様子です。

a0349576_01420346.png

このアレンジは、サムネイルの配置崩れが生じません。 その代わり上図の様に、高さの不ぞろいが避けられません。 本文に挿入する最初の画像の縦横比が一定なら、不ぞろいがなくなりますが。



以上の例を参考にして、どちらかの下側の項を、スキンのCSSに追記すれば、歪まないサムネイルを実現できます。 後は、崩れを抑える工夫が必要です。 使用している本文幅、サムネイルの余白、枠線、間隔、元画像、などの条件で変わりますが、幅や高さの適当な値を指定する必要があります。

なお、使用中のスキンを始めてアレンジする場合は、以下のリンクを最初に読んでください。




この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。



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

エキサイトブログ編集のツボ 左右寄せ配置の画像と文字列との間隔

2017年 07月 06日
「ピックアップブロガー」という「優良ブロガー掘り起こし」企画は、私にとっては、時として有意義で参考になるコーナーでした。 現在は「プラチナブロガー」のシステムに移行しましたが、これは正直いただけません。 これには言葉が無く、「プラチナ」を選んだ理由も判りません。 選ばれたいと思っての事ではありません。 人は「言葉」を、たとえバイアスがかかった記事でも、読みたいものなのです。



最初から話がズレましたが、「ピックアップブロガー」の誌面に良いサンプルを見つけたからです。 実物は、以下のリンクを辿ってください。


ブログのシステムを利用したこのコーナーでは、左右寄せ配置の画像が多用されています。 下は2013年12月のページですが、画像と文字が着いて変な印象です。

a0349576_10474572.jpg

これはエキサイト編集部の誌面としては恥かしいですね。 さすがに、翌2014年からは工夫をしています。

a0349576_10565441.jpg

左右寄せ配置の画像は、文字列との間隔を確保するために、余白を追加する様になりました。 下は実際に上の記事に埋めこまれた画像です。

a0349576_10572793.jpg

右寄せ配置の場合は、文字の折り返しで自然に間隔が開くので、幅の狭い余白を左側に追加する様になりました。 こういった画像での工夫は悪くはないのですが、以下のマイナス点があります。

◎左右寄せ配置の画像は、毎回画像アプリで余白を作る必要がある。
◎画像クリックで拡大表示等をすると、余白も表示される。
◎スキン変更などで文書背景色が変わった場合に、余白が露出してしまう。
◎スマホで見た場合に、一般に画像が中央寄せ配置に変わり、余白分はアンバランスになる。

など、余り賢い方法ではありません。

一番良いと思われる方法は、ブログスキンで左右寄せ配置の画像に関して、適当な左右のマージンを指定してやることです。 PCブログスキンからの指定は、スマホ表示には影響しないので好都合です。

編集画面から画像を配置すると、Htmlコードに以下のclass名の「img要素」が埋め込まれます。

左寄せ配置  IMAGE_LEFT
右寄せ配置  IMAGE_RIGHT
中央寄せ配置 IMAGE_MID

このクラス名を使った以下のCSSコードは、それぞれの場合の画像のマージンを指定する例です。

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

◎この記述方法は「 margin: 上マージン値 右マージン値 下マージン値 左マージン値 ; 」と時計周りです。
◎マージン値の単位「em」は、周辺の文字の大きさを基準にする単位です。
◎問題の左右の余白分は「1em(1文字分)」としています。
◎上下の余白分は、使用フォント、行間隔、デザイン意図などによって、各自で適当な値を決定します。
◎最後の「IMAGE_MID」の項目は、中央寄せ配置も上下の余白を統一するためのものです。
◎余白部分の色は気にする必要がなく、先の画像で余白を作る場合の問題点を全てクリアー出来ます。

上記の様なコードをブログスキンに追記して指定すれば、ブログ誌面(PC)上で、文字列との間隔を統一して調整出来ます。

〔注意する点〕
◎以前のページにもスキンの指定は影響しますから、画像に意図的な余白追加の加工をしていた場合は、この指定で余白が過剰になります。 過去のページへの影響は、ざっと確認した方が良いでしょう。
◎左右寄せ配置の画像は、スマホ画面では一般的に中央寄せ配置になります。 それを考えた誌面構成がベターです。
◎左右寄せ配置の画像の横に書き込んだ文字列は、流し込み状態になり、構成にある程度要領が要ります。

なお、今お使いのブログスキンでアレンジや追記を一度もした事がない場合は、必ず以下の手順を参考にマイスキンを作成してください。



〔参考〕
以下のリンク先には、このページの内容に関係する情報があります。 余裕のある方は参考にしてください。



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

ロゴ画像はpng形式が良い / エキサイトブログ

2017年 07月 05日
ブログのロゴ画像は、メニューデザインによっては無しでもかまいません。 しかしメニューの上部は、ブログのポリシーを示すのに適当な場所と思え、私はロゴ画像を大事にしています。

この画像の形式は「 .jpg .png .gif 」のいずれでもOKなんですが、私は以前から「.gif」を使ってました。 少しだけファイルサイズが小さく出来たからです。 しかし、こういうエレメンツは「.gif」と決まっていた昔と事情が少し変わった様です。 見落としていた、以下の少し旧いエキサイトの告示に気付きました。


スマホのトップ画面にロゴ画面をアイコン化して登録できるそうです。 ただし、この機能が働くのは「.png」形式のロゴの場合だけとあり、この際、可能性の広い形式に改めておくことに決めました。

ブログの設定画面の〔基本設定〕の一番上にロゴ画像の設定があります。

a0349576_17255228.png

ここで、従来の「.gif」形式のロゴ画像を削除し、「.png」形式に改めたロゴ画像に差し替えて、この画面の一番下にある「適用」ボタンを押すだけです。 私は、メニューの背景色をそのまま利用したいので、ロゴ画像の余白部分を透過色に指定した「.png」画像としています。

ロゴ画像のサイズは、特に横幅は各スキンのメニューの幅とのバランスを考え、適当な幅にする必要があります。 また、実際に生成されるアイコンは、ロゴ画像をトリミングするので、思い通りのアイコンデザインになるかは、試さないと判りません。



ロゴ画像の下の「by xxxxxx」の表示と、その下の「プロフィールを見る」のスイッチは、ブログスキンの「全体」のHtmlの中に <$nick$>という特殊コードでインポーズされます。 スキン編集でこの <$nick$>を消せば、メニューからこれらの表示が削除されますが、片方だけを消す事は出来ません。 私は「by xxxxxx」の表示は余計なので消したくて、少し画策しました。

以下は、実際のブログ画面を構成するメニューのプロフィール部分のHtmlを切り出したもので、エキサイト提供のスキンは似た構造を多く見かけます。

a0349576_12252016.png

「profile」というclass名のdiv(ブロック)がプロフィール部の本体です。 多くの提供スキンではメニューの最上部にこのブロックが置かれています。 その内部の構成は以下です。

①「ブログの説明」に書いたtextがインポーズされています。
➁ <img>要素でロゴ画像を埋めこむものです。
➂ 間隔の調節で、①~④は、一繋がりの文字列の様な構成です。
④「by xxxxxx」は、ユーザーアカウントではなく、「プロフィール設定」の「ニックネーム ※必須」での記入がインポーズ表示されます。
➄ 最後にブロック要素が1つだけ置かれ、その中に「プロフィールを見る」という、プロフィールページへのリンクが置かれています。

ここで、④の表示だけをスキンのCSSで消すのは、簡単ではありません。 そこで、➄のブロックを上方に移動させて、④の上に被せて見えなくする方法を使いました。 ➁の画像を下方に移動させる方法も有りますが、私は透過画像を使用していて、操作が複雑になるので避けたのです。

a0349576_12521175.png

(A) 従来の状態です。
(B) ブラウザの「要素の検査」の機能を使い、ブロック➄の実体を反転させたところです。
(C) ブロック➄を上方に移動させるために、このブロック「.profile div」の上マージンを「-30px」と指定した状態です。 これは、以下のコードを「要素の検査」の画面で書き込んで表示させています。

.profile div {
margin: -30px 0 0; }

しかしこれだけでは、「by xxxxxx」が二重に重なって表示されています。

(D) ブロック➄に背景色を指定してみたが、それだけではダメでした。 そこで「z-index」を使おうと「position: relative」を指定すると、それだけで下の様にマスクが出来ました。

a0349576_13145601.png

.profile div {
position: relative;
background: #b8dcef;
margin: -30px 0 0; }

ブロック背景色の「background: #b8dcef」は、この右メニュー全体に指定している背景色です。

(E) マスクは成立したものの、下にはみ出しがあります。 これはブロックの高さ「height」を調節して、はみだしをマスクしました。「要素の検査」でブロック➄を反転させ実体の大きさを示しています。

.profile div {
position: relative;
background: #b8dcef;
margin: -30px 0 0;
height: 30px; }

(D)と(E)を比べるとブロック➄の高さが増した分、下方の「このブログ内を検索」以降が下へシフトしています。 プロフィール部とそれ以降の部分の間隔は、上記コードの下マージン値で調節可能です。

(F)は最終的な状態です。 余計な表示が整理されて判り易くなりました。



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

インスタグラム・リッチリンク・YouTube の中央寄せ(ブログスキン)/ エキサイトブログ

2017年 06月 18日
インスタグラムの中央寄せ配置をブログスキンで指定すると、いちいち「埋め込みコード」をHtml編集する必要がなくなります。

インスタグラムの「埋め込みコード」は、リッチリンクと同類で、リッチリンクシステムの応用と思われます。 更に、インスタグラム、リッチリンク、Youtubeの実体は、いずれも「iframe要素」です。 現在、エキサイトブログでユーザー選択で利用できるiframeはこれら3種と限られます。(ブログパーツ等は未確認です) エキサイトの「iframe要素」の制限基準が微妙に更新されている事などから、この3種を纏めて扱う事は気が利いていると思います。 以下の内容は、将来に追加されるiframe機能にも応用できるでしょう。

このブログスキンによる修飾手法は、以下のことを考慮する必要があります。
● ブログスキン指定はブログ全体のデザインに影響するので、過去に設置した3種の要素への影響は要チェックです。
● 但し、ブログスキン指定は基本的にデザインの上書きなので、過去の左右に寄せた設置分のみ考慮すれば良いと思われます。
● ブログ全体で中央寄せ配置が統一されるが、個別に左寄せや右寄せをしたい場合は、少しやりにくくなります。
● ブログスキンの修飾はPC表示にのみ有効で、スマホ表示(スマホスキン)には影響しません。

以下は、この3種の「埋め込みコード」の一般的なサンプルです。(改行して判り易くしています)

リッチリンク
<iframe 
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26931974%2F"
style="margin: 10px 0px; border: 0px currentColor; border-image: none; width: 100%; height: 180px; display: inline-block; max-width: 520px;">
</iframe>
インスタグラム
<iframe 
src="//bp.exblog.jp/richlink/instagram/?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBVAErG7jcgL%2F"
scrolling="no"
style="margin: 10px 0px; border: 0px currentColor; border-image: none; width: 100%; height: 400px; display: block; max-width: 400px;">
</iframe>
ユーチューブ
<iframe 
width="480"
height="360"
src="//www.youtube.com/embed/8TpcBDJZsJA?rel=0"
frameborder="0"
allowfullscreen="">
</iframe>

「iframe」はブログ画面の構成要素として色々と使われるので、「iframe」を無差別に修飾するわけには行きません。 これら3種に固有の特徴を指して、他と区別できるセレクタ表記が必要です。 上の「埋め込みコード」を見比べると、各iframeの「src」の太字の部分は、それぞれを区別するのに適当そうです。

セレクタ記述の方法で、《 iframe要素で、その属性の src に「~」の文字列を含むもの 》という、記述方法があります。
  20. E[foo*="bar"] (属性の値が指定した文字を含む場合に適用する)

この記述方法を使って、3種のiframeの中央寄せを指定するCSS修飾を書いてみました。 これらのCSS項目をブログスキンのCSSに追加すると、ブログ文書内での中央寄せが実現します。

/* ● リッチリンクとインスタグラムを中央寄せ */
iframe[src*="richlink"] {
display: block !important;
margin: 0 auto !important; }

/* ● リッチリンクのみ中央寄せ */
iframe[src*="richlink/?url"] {
display: block !important;
margin: 0 auto !important; }

/* ● インスタグラムのみ中央寄せ */
iframe[src*="instagram"] {
display: block !important;
margin: 0 auto !important; }

/* ● ユーチューブのみ中央寄せ */
iframe[src*="youtube"] {
display: block !important;
margin: 0 auto !important; }

(注)
◎「richlink」の文字列は、リッチリンク・インスタグラムの両方に出て来ます。 そこで、リッチリンクのみを区別する文字列を「richlink/?url」としています。 3種のiframeを中央寄せとする場合、上記1項と4項をブログスキンに追加すれば、スマートに指定出来ます。
◎ リッチリンクが「inline-block」指定に仕様変更されたので、他のiframeが同様の仕様変更をされる可能性が考えられます。 その場合、margin値の中央寄せが無効になるので、現在は重複指定になりますが「display: block !important;」を加えています。

下図は、3種とも中央寄せとした例です。

b0174191_14534633.jpg



お使いのブログスキンに、このページで紹介したCSS項目を追加する手順は、以下のリンク先を参照ください。 初回にブログスキンをアレンジする時だけ少しコツがあり、それを説明しています。




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

インスタグラムの中央寄せ(Html編集)/ エキサイトブログ

2017年 06月 17日
エキサイトブログはインスタグラム連携を導入し、次第にこの連携機能を利用するユーザーが増えている様です。 ただ、現在のところ配置されるインスタグラムが左寄せとなります。 ブログ文に埋め込んだインスタグラムを中央寄せの配置にしたい場合は、Html編集の加筆が必要です。 そう難しくはないので、以下の説明を参考にしてトライしてみてください。



この行の下にインスタグラムを埋め込みます。
上は埋めこんだインスタグラムのサンプルです。


❶ 編集画面を「通常編集」から「HTML編集」に切替えて、インスタグラムの「埋め込みコード」の部分を探します。 良く見れば、前後の行の文字や、文章内のおうよその位置から推測できます。
下図は、Html編集画面で表示された、実際の「埋め込みコード」です。「<iframe」で始まり「</iframe>」(赤印)で終わる事に注目してください。 「src=" ~ "」の部分だけ異なるだけでインスタグラムの「埋め込みコード」はみなこの様な形です。

b0174191_22492731.png

❷「埋め込みコード」の中で「display: block;」(緑印)の指定を確認します。 もし「display: inline-block;」等の指定になっていたら block指定に書き改めます。

b0174191_04164500.png

➌ その上で、「margin: 10px 0;」(緑印)を「margin: 10px auto;」に書き換えます。 これは、「iframe要素」の左右のマージン値「0」を「auto」に変えて中央寄せにする方法です。

❹「通常編集」に切替えて、中央寄せが上手く行ったか確認します。 下は実際に中央寄せとした状態です。

〔注意〕
●「埋め込みコード」の前後は、「<div>」「</div>」や「<br>」などと、編集に使用しているブラウザによって異なって来ます。 また、編集の手順の違いで、前後の「<br>」の入り方が異なる場合があります。
● 前後の行とインスタグラムとの間隔は「埋め込みコード」前後の「<br>」をHtml編集で削除/追加して調節します。
● 上の上下のマージン値の「10px」の値を調節して、前後行との間隔を精密に調節することも可能です。



「centerタグ」を使っても、インスタグラムを中央寄せにすることが可能です。 少し複雑な話になりますが、最近のHTMLでは「centerタグ」は非推奨とされています。 しかし実情は、エキサイトのシステムでは日常的にこれが使用されている様で、ここだけ拘っても意味がないと思われます。

① 編集画面を「通常編集」から「HTML編集」に切替えて、インスタグラムの「埋め込みコード」を探して確認します。

b0174191_22492731.png

➁ 「埋め込みコード」の直前と直後を「<center>」「</center>」で囲みます。 下図は、実際にタグ(青印)を書き込んだ様子です。

b0174191_22571117.png

➂「通常編集」に切替えて、中央寄せが上手く行ったか確認します。

〔注意〕
● 後方の「</center>」の書き込みを忘れないこと。 忘れて問題がない場合もあるが、以降の文字等の配置が崩れる場合があります。
●「埋め込みコード」の前後は、「<div>」「</div>」や「<br>」などと、ブラウザによって異なります。
● 前後の行とインスタグラムとの間隔は「埋め込みコード」前後の「<br>」をHtml編集で削除/追加して調節します。
● 「<center>」や「</center>」の書き込みを簡単にするには、これらを「せんた」等の読みで単語登録して、語変換で書き込むと便利です。



このページの手法は、各文書ごとの作成/編集の過程でHtml編集を行うものです。 これは編集した個々のインスタグラムのみに効果します。 以下のブログスキンによる修飾の手法は、ブログ全体(過去や未来の文書)に効果が及びます。 Html編集の手間を減らし、ブログ全体のデザイン統一を得られます。



〔追記〕2017.06.23
記事のレイアウトと内容を一部修正しました。




[PR]
by Ataron | 2017-06-17 23:15 | ブログスキンのアレンジ | Comments(3)

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)/ エキサイトブログ

2017年 06月 16日
エキサイトブログでは、スマホ対応スキンはユーザー側でアレンジできません。 しかし、Html編集でのアレンジはスマホ表示に反映するので、リッチリンクを両環境でアレンジするには、
  ①スマホ表示をHtml編集でアレンジ
  ➁PC表示をブログスキンのCSS編集で修正アレンジ
という手順が鉄則です。

2017年春以降に、リッチリンクの生成コードに仕様変更があり、今後はこの仕様に落ち着くと私は推測しています。 そこで、仕様変更された現状の生成コードを前提として、再度リッチリンクのアレンジ基準をチェックしました。



以下は仕様変更後のスマホ表示の検証です。

b0174191_12114651.png

PC表示は改善された様ですが、スマホ表示はリッチリンク下方が異常にアンバランスです。 生成コードの最後に<br>が入りますが、それを省いても inline-block 要素なので必ず後方にこの隙間が出来ます。

下方の隙間はリッチリンクの height 調節で改善できますが、初期値「180px」を減らして行くと「146px」以下ではリッチリンク自体にスクロールバーが出てしまいます。 そこで、他環境での表示安定を期して「150px」とした場合が以下です。

b0174191_12245273.png

「height: 140px」まで高さを下げると、下図の様に上下間隔をほぼ均一に出来ますが、スマホ操作で上下にズレます。 これを抑止するには「scrolling="no"」を追記する必要が出て来ます。

b0174191_12295508.png

また、上の様にする別の方法があります。 heightは「150px」とし、「inline-block」を「block」に書換えて、生成コードの最後に付いて来る<br>を削除する方法です。(inline のままでは効きません)

どちらが良いか考え、私はHtml作業が簡単そうな後者を選択しました。 以下に書き換えの雛形を整理しておきます。



 ① スマホ表示をコントロールするHtml編集でアレンジ 

デフォルトの生成コード
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: inline-block;
width: 100%;
height: 180px;
max-width: 520px;
margin: 10px 0;">
</iframe>
<br>


スマホ表示の上下行との間隔を調整するアレンジ
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>

(注:margin値の変更は、文書全体の行間隔に合せたもので、必須ではありません)

b0174191_12295508.png

また以下の様に「scrolling="no"」の追加すれば、高さのスリムなリッチリンクが可能です。

スマホ表示の高さをスリム化し、上下行との間隔を調整するアレンジ
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: inline-block;
width: 100%;
height: 108px;
max-width: 520px;
margin: 0;"
scrolling="no">
</iframe>

b0174191_13265545.png



 ➁PC表示をブログスキンのCSS編集で修正アレンジ 

①のアレンジ結果がPC表示に影響し、PC側は不適切な表示になります。「inline-block」の場合に前後の<br>を省くと、リッチリンクは文字列の文字同様に左右位置が定まらず、思わぬ配置になります。 そういう問題を含めて、PCのリッチリンク表示を修正アレンジします。 これはブログスキン上からのアレンジで、スマホ表示には全く無関係です。

アレンジの要領は、「中央配置のブロック内にリンクを配置」「ブロックは角丸の枠線」「ブロックの縦幅を低くしてマスキング」といった手法で、縦幅のスリムなリッチリンクに仕立て、上下行との間隔も調整します。

下準備として、①のアレンジと同時にHtml編集で、生成コード全体を「rlink」のクラス指定した<div>ブロックで囲みます。

<div class="rlink">
<iframe
アレンジした生成コード>
</iframe>
</div>

これを修飾する以下のリッチリンク用の2項目のCSSを、ブログスキンに登録します。

.rlink {
overflow: hidden;
width: 496px;
height: 118px;
margin: 0.72em auto 0.88em;
border: 1px solid #aaa;
border-radius: 6px; }

.rlink iframe {
width: 520px !important;
height: 180px !important;
margin: -10px 0 0 -10px !important; }

.rlink」は、リッチリンクをマスクします。「 width: 496px」「height: 118px」を指定してスリム化。 また、「margin: 0.72em auto 0.88em」は、上下行との間隔を調節した上で中央配置を指定します。 上下マージン値は各ブログスキンに合せて調整します。
.rlink iframe」では、PC表示でリッチリンクが上下スクロールしない様に、iframeに「height: 180px」として、①の指定を修正しています。 こちらの「margin: -10px 0 0 -10px !important」は、マスク範囲を微調整するものです。

<div class="rlink">で囲い、ブログスキンで修復アレンジした結果、PC表示は以下の様になります。

b0174191_14532127.png

上はリッチリンクの下部を省略したスリムタイプですが、マスクの高さを拡げたい時は、生成コードを下の様な複数クラス指定の<div>ブロックで囲みます。

<div class="rlink rlink_ex">
<iframe
アレンジした生成コード>
</iframe>
</div>

この追加クラス「rlink_ex」には、以下の1項目のCSSをブログスキンに登録しておきます。

.rlink_ex {
height: 154px !important; }

複数クラス指定の<div class="rlink rlink_ex">で囲った場合は、下図の様に「.rlink_ex」の「height」指定が優先され、118px → 154px と、高さが拡がって表示されます。

b0174191_15114606.png



以上の ①、➁ の両方をリッチリンク設置ごとに行います。 ブログスキンは一旦CSSを登録しておけば済みます。 設置時のHtml編集は、慣れてしまえば簡単です。 しかし、Htmlが不得意な人の為に、もう少しスリムなリッチリンクが簡単に置ける様にすれば、利用者がもっと増えるのではないかと思います。

下は。このページの方法で設置したリッチリンクの実物です。





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