Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(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.28 */

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

header.boxHead {
display: none; }


/* タイトル部 */

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

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

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

/* *** */

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


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

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

#trb_themeTtl:hover {
left: 500px;
width: 415px;
padding: 5px 20px;
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; }

#entryMoreArea:hover {
z-index: 1; }

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

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

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


/* 画像パレット */

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

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

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

#exFooterWrapper {
display: none; }


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



/* お知らせリスト 非表示 */

#announceList {
display: none; }

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

.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の末尾に、上記のオプションコードを追記してください。


キャンペーン枠 表示オプション
(注:新デザインのオプションがあります。下の〔追記〕2017.07.28 を参照ください)

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

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


みんなの投稿 表示オプション
(注:新デザインのオプションがあります。下の〔追記〕2017.07.28 を参照ください)

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

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





〔追記〕2017.07.23
トラックバック送信した記事の再編集時、編集画面下端に送信先のアドレスが表示されますが、末尾行の編集の邪魔になる場合があるので、基本の編集枠にカーソルを入れた場合(:focus)、Moreの編集部上にポインタを持って行った時(:hover)に、非表示となる様に改善。 上記の基本CSSは修正済です。



〔追記〕2017.07.24
「テンプレートスイッチ」「おすすめブログテーマ」部のコードを更新しました。 更新編集時に「おすすめ」の白背景のみが表示されるのを改善。 また、画像左余白にポインタが反応するのを改善しました。 上記の基本CSSは修正済です。



〔追記〕2017.07.28
「キャンペーン枠・みんなの投稿枠・お知らせリスト」を表示する新しいオプションをデサインしました。

各枠を表示した時は編集枠下部に重なって表示され、編集ウインドウ全体のコンパクトさを維持します。 常設で邪魔にならならない新デザインです。 この実装のために、上記の基本CSSの「マイブログ」ボタン部を更新しました。



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



[PR]
by Ataron | 2017-07-15 16:09 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/26990260
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。