nn的BLOG

S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
最新のトラックバック
venuscozy.com
from venuscozy.com
whilelimitle..
from whilelimitless..
http://while..
from http://whileli..
CPA試験: 無料の模試..
from USCPA試験を独学で勉強中
内藤大助vs亀田興毅
from 新聞を読んでもわからない人の..
亀田興毅 今
from 今、知りたいニュース集めました
[ blog ] 青年b..
from chow-chow diar..
Special thanks
from The Red Tree
一人で見る夢は、それは夢..
from 名言ブログ
配当金 源泉 法人情報
from 株ネット
Counteroffer
from The Red Tree
REG-simulation
from The Red Tree
Cash Method ..
from The Red Tree
Bond発行と購入の違い
from The Red Tree
公会計-期中の仕訳
from The Red Tree
チッコイ手帳
from 5_18-webで外国語
沖縄 就職 天国!
from 沖縄 就職 天国!
税効果/税効果
from なるほどキーワード
第9回CPA定例会のお知らせ
from 「元」CPA受験勉強・現上海..
ポストイット/ポストイット
from なるほどキーワード
検索

カテゴリ:Web Design( 10 )

ブログデザイン変更

ブログデザインを変えました。

多くのブログがそうであるように、エキサイトブログも定型のスキンのメニューがあってそれを選ぶことになっていますが、自分でカスタマイズすることもできます。

今回は、先日エキサイトブログ内でリリースされた、「フォトアルバム」の「モンタージュ」というスキンを選び、これを少しカスタマイズしました。

いろいろと変えたのですが、主要な部分のみ、メモを残しておきます。

1.記事タイトル部分の変更
◆BEFORE

a0050593_16271924.jpg

◆AFTER
a0050593_16273139.jpg


=変更前=
●HTML
<h2><img src="http://md.exblog.jp/skn/img/a/01/10/6/icon.gif" alt="トランスメディア提供アイコン01" width="28" height="21" /><$postsubject$><span><$postadmin type=1$></span></h2>

=変更後=
●HTML
<h2><img src="http://pds.exblog.jp/pds/1/200805/03/93/bankoo.jpg"
width="28" height="21" /><$postsubject$><div align=right><$postdate$></div><p align=right> <span><$postadmin type=1$></p></span></h2>

一番大きな違いは、変更前は$postdate$がhtmlに書き込まれていなかったこと。cssには$postdate$に関する記述があったので、html側への書き込み漏れかもしれませんね。あと、ついでにタイトル部分の画像も差し替えをしました。


2.記事下部

=変更前=
●HTML
<p class="posttail"><$posttail$></p>

=変更後=
●HTML
<p class="posttail">    by <i>nn</i>       |<$posttail$></p>
●CSS
(↓ posttailの部分に追加)
p.posttail span.TIME{display: none; /*by・日付時間非表示*/}
.AUTHOR{FONT : BOLD 8PT TAHOMA; display: none;/*ID名非表示*/}

私はエキサイトブログ開始時、nnが既に他のユーザーに使われていたので、nn_77で登録
しています。(なので、コメント返信は今もnn_77になってしまいます)
せめて毎回の記事の末尾だけでも「nn」にしようと思い、上記のように修正しました。


3.検索バーの長さ調整

◆ BEFORE
a0050593_16281084.jpg


◆ AFTER
a0050593_1628263.jpg


=変更前=
●CSS
div.guide input.TXTFLD {width:70px;}

=変更後=
●CSS
div.guide input.TXTFLD {width:100px;}

久しぶりにエキサイトブログ検索バーをつけてみたら、機能が随分ましになって使えるレベルになっていたので(以前は全然検索結果が出てこず、使い物になりませんでした)、復活させました。が、なぜかデフォルトは検索バーの横幅が中途半端に短かったので、長くしました。


4.コメント蘭の高さ調整

=変更前=
div.COMMENT_INPUT {padding:10px;}

=変更後=
div.COMMENT_INPUT {padding:10px;}
TEXTAREA { height:10em;} ←追加

エキサイトブログのコメントランは、デフォルトではいつも高さが2行くらいしかなくて入力しにくいので、いつも修正しています。

ついでに、設定を変更して、半角英数のみのコメントも受け付けるようにしました。
以前この設定だったのですが、スパムコメントがやたら多いので、やむを得ず、半角英数のみのコメントを受け付けない設定にしました。こうすることでスパムコメントはブロックできましたが、その代わりに、皆様から英語のみのコメントをいただくことができない状態が続きました。
嬉しかったのは、ざーっと英文でコメントし、最後に一言、日本語や中国語を入力する、というかたちで英語コメントを残してくださる人がいたことです。そこまで仕様を読み込んで、ご対応いただけたことが大変嬉しかったです。

今回、また半角英数のみのコメントも受け付けるようにしてみました。スパムコメントも沢山はいるかと思いますが、適宜削除いたします。

ブログの編集も長い間していないと、やり方を忘れてしまいますね。
そう思って、今日はメモを残すことにしました。気分転換になりました ^_^
[PR]
by nn_77 | 2008-05-02 16:06 | Web Design

For a change

Since I had a bad day yesterday, today I changed the design of the blog for a change.
What I really have to change is what I am, though. I know...
[PR]
by nn_77 | 2008-05-01 16:31 | Web Design

blog...

My working environment is gonna change very much by the beginning of the next month, and I'm just wondering if I can keep updating this blog thereafter...

Anyway I don’t have to make up my mind yet, because I still have some more days before I make a decision.

In the meantime, I gave a modification to the design of my blog.


                      Previous one
a0050593_23261470.jpg


                       New one
a0050593_23271726.jpg


Although I liked the silent color tone of the previous one, I’ve decided to make it simpler.

I’ve tried various types of designs with color variations, but, after all, I came to a conclusion that a white background is the best choice: words on white background are easy to read.
[PR]
by nn_77 | 2007-09-26 23:37 | Web Design

ブログデザイン変更しました

2、3日前に、また、デザインを変更してみました。
Exciteブログのテンプレートギャラリーで、下記の青い色調のテンプレートをみつけて、「あ、いいな」と思ったからです。

          ・template その 1
a0050593_13235025.jpg


でも、この機会に、記事の左右にメニューを配置できる3列型にしたいな、とも思いました。これまた、テンプレートギャラリーにあるのですが、こんなヤツです↓

          ・template その2
a0050593_1324497.jpg


USCPA試験に関するトピックの「タグ」が随分増えたので、右のメニュー欄にズラーッとならべられたらいいな、と思いました。で、コメント欄なんかは左側に配置。


でも、色の感じや、写真の雰囲気は、さっきの青いヤツのほうが好きだしな・・・

ということで、2つをくっつけることにしました。

新しいテンプレをゼロから作って、そこに上記の2つのデザインを取り入れる新設合併(Consolidation!)にしようかとも思いましたが、これは手間がかかります。

そこで、今回は、template2をベースとして残し、これにtemplate1の要素を移してくることにしました(吸収合併:Merger!)。というのも、色調はtemplate 1、構成はtemplate 2、という風に、それぞれに求める要素ががはっきりしていたからです。


そうしてできたのが、今のこのデザインです。
a0050593_1340107.jpg


その他、いろいろマイナー修正をしています。
デザインの修正は、テンプレートのHTMLおよびCSSのソースコードの記述を加筆修正することで出来ます。例えば、このデザインの右の列にはCPA試験に関するタグをずらっと並べていますが、件数が多く、縦に長すぎるので、スクロールバー仕様にしてみました。
こんなとき、
まず、HTMLコードを追加します。
「右のメニュー欄の部分(= $mbody)に<mbody_R>っていうルールを追加しますよぉ」って感じです。
a0050593_13403870.jpg


次に、それ(= mbody_R)がどんなルールなのかを決めてやらなければなりません。
それを書くのがCSSコードです。こんな感じです。
a0050593_13404959.jpg


widthやheightで縦横の幅を指定して、四角いエリアを決めて、エリアに納める情報が縦(y軸)の長さを超えてあふれ出た場合は、自動的に適宜スクロールするようにしています。それが、「overflow-y:auto」の意味ですね。因みに、同じ箇所で、widthで指定した横幅を超える場合については、現在「overflow-x:hidden」としているので、横幅がエリアからはみ出ると、はみ出した部分は表示されないようになっています。ここについても「auto」にしておくと、水平方向のスクロールバーも出現して、横にもスクロール出来るようになります。

CSSの下のほうの「*** color: ~~」のあたりは、スクロールバーのいろいろな部分の色合いを設定しています。今回の青い色調に合うように調整しました。

あとは、日記風に、各記事の右上に投稿日の日付が自動的に表示されるようにしたり、今の時期であれば、定例会告知のための「流れるお知らせテロップ」を走らせたり、マイナー修正ですね。全て、上記と同様、HTMLとCSSのコードの追記で対応しています。
a0050593_13412335.jpg


エキサイトブログは、LivedoorブログのようにJapascriptを埋め込むことができませんので、編集はHTMLとCSSの記述変更でしか対応できません。Javascriptを禁止している分だけシステム全体の安定感は比較的あるような気がします。

基本的にはタダの日記でしかないblogですが、多少なりともツールとしての使い勝手の良さを実現できたらいいな、と思います。
[PR]
by nn_77 | 2007-09-07 13:21 | Web Design

ブログデザインからキャリアデザインを考える

先日、少しblogのレイアウトデザインを変えました。

いろいろ変えましたが、いまひとつだったのがメニュー上部のボタン。

先日の段階では、下記までたどり着くことができました。
a0050593_2092183.jpg

ボタンの上にカーソルが載ると、そのボタンだけ色が薄くなって、更に、ボタンを押すと、ボタンが押し下がる、というものでした。

ソースは、
【HTML】
 <DIV class=”topbutton”
 <a href="#hobby"><img src="http://pds.exblog.jp/pds/1/200705/16/93/hobby.gif" border=0></a>
 </DIV>
   注: imgのsrc先は、ボタンの画像をアップロードしている先のURLです。

【CSS】
 DIV.topbutton A:HOVER img{filter: Alpha(style=0, opacity=60);}

ただ、この段階で不満だったのは、カーソルが乗った時のボタンの色が、変わることは変わるけれど、光っているようには見えないことでした。Exciteブログに諸々の制約があることもあり、filterというCSSタグで、カーソルがのっかったときに、画像が透けてみえるようにしただけだからです。このblgoの背景がグレーなので、ボタンが透けて、裏のグレーが透けてみえているだけなんですね。。。ボタンの文字の黒色だけ透けてボヤッとした感じになります。 背景が白かったら、上手く光ったようにみえるのに・・・

そうか! カーソルがのかったときに、この「部分の背景の色」が真っ白になるようにすればいいんだ!

普段はグレーのままで、カーソルが乗るときだけ、背景が白色になって、かつ、ボタンの画像が透けて見えれば、ちょっと光った感じになるのでは?

そう思って、早速、上記のCSSの下に一行追加。
DIV.topbutton A:HOVER img{filter: Alpha(style=0, opacity=60);}
DIV.topbutton A:HOVER {background-color:#ffffff;}

HOVER(カーソルがリンクの上に乗っかった状態)に関する設定。
 一行目は画像を透明化するもの(インターネットエクスプローラーのみ対応)
 二行目は当該部分の背景を真っ白にするためのもの。

これらが組み合わさると、
a0050593_1713483.jpg


変更前よりはマシになった気がします。

今の会社の仕事では、ウェブサイトの制作・管理も仕事のひとつになっています。
とはいえ、基本的にIT関係は素人のnnなので、時々こうしてウェブデザインをいじったりしてあれこれ学ぶことが、SEさんと話をするときにも、(ちょっとは)役に立っています。

CPAのコト、IT関係のコト、英語のコト、など、専門家には及ばないまでも、こうして少し勉強してかじっていれば、ふとしたときに仕事で役にたったりします。

キャリアのことなどいろいろ考える今日この頃ですが、やっぱり目指す方向は、「専門家そのもの」になるのではなくて、「専門家との窓口になれる人」かもしれません。




---------【nn’s ワンポイント英語】---------------------

今日の記事のタイトルで「デザイン」という言葉を使いました。
日本語で、カタカナで「デザイン」というと、なんだかイラストとかファッションとか、そういうイメージがありませんか?
しかし、英語のdesignのメインの意味は、日本語で言うところの「設計」といった感じの語感です。

私の好きな英辞郎で調べると、
------【Quote from 英辞郎 by alc】--------------
design
【名-1】 〔製造物{せいぞう ぶつ}や建造物{けんぞうぶつ}の〕下絵{したえ}、略図{りゃくず}、見取り図{みとりず}、設計図{せっけいず}
・ Look at the design of a 101-story building on the wall. 壁に貼ってある101階建ての建物の見取り図を見てください。

【名-2】 〔部品{ぶひん}などの〕配置{はいち}、構造{こうぞう}
・ The mechanical design of the memory module is defined by the organization. メモリ・モジュールの機械的な構造はその組織により定められている。

【名-3】 設計{せっけい}[デザイン]技法{ぎほう}[すること]
・ I learned interior design at home. インテリア・デザインを自宅で学習した。

(以下、省略)
--------------------------------------------【UNQUOTE】------------

キャリアデザインのデザインは、日本語で「人生設計」とかいうときの「設計」に近い語感だと思います。ブログデザインというのも、単に表面のレイアウトだけのことではなく、そのレイアウトを作るために、どういったソースコードを組むか、とかそういう部分も含むと思われます。
[PR]
by nn_77 | 2007-05-19 16:58 | Web Design

ブログレイアウト修正

ブログのレイアウトを少し修正することにしました。
いかにもUSCPA関連ブログっぽいのに、どうしても、そうした記事が減りつつあるのが現状。整理整頓は大事、ということで、受験関連情報の配置を見直すことにしました。

気がついたら両脇のメニューのUSCPA関連や会計関連のコーナーで賑やかになりすぎてきたので、これらの場所を少し引越しするのが今回の目的。

また、せっかく続けてきたexciteのブログをこのまま使いたかったので、この既製システムの枠組みの範囲内でカスタマイズすることにしました。

大枠としては、

a0050593_20669.jpg


ステップ1:
トップページの本文記事の下の方のスペースに、USCPA関連や会計関連のコーナーを移動

ステップ2:
トップページの一番上のほうに、ボタンを設置。このボタンを押すと、画面がトップページ下の方へジャンプするようにリンクを設定する。

という2つの作業です。


ステップ1はわりと簡単でした。
もともと、USCPA関連のコーナーを画面右側のメニュー欄に置いたときは、HTMLとCSSを記述して、リンクが並ぶプルダウンメニューの形式にしていました。

今回は、トップページの本文記事用のエリアの下に要素を追加で設けて、ここに、上記のソースを移してくるだけで原則OK. 後は、コーナーらしくコーナーの題字を少し目立つようにして、あと、トップページに戻るためのリンクを端っこに設置します。
a0050593_207587.jpg


最後に、リンク先としての目印を付けます。他のページへのリンクであれば、移動先のページのURLをリンク先に指定すればいいのですが、同じページ内でリンクジャンプするためには、ジャンプ先に印をつけておく必要があります。
具体的には、こんな感じでname とidで目印をしました。
<h3><a name="uscpa" id="uscpa">USCPA related Info</a></h3>

これで終わり。少し殺風景だし、こうして引越ししたからにはプルダウンで折りたたまなくてもいいかもしれないと思うので、また、後日、時間があればもう少し見栄えを考えたいと思います。


次のステップ2の作業(ページ下部の各コンテンツへジャンプするためのリンクをページ上部に設置)は、少し苦労しました。
リンクだけなら簡単なのですが、せっかくなのでボタン型リンクにしようとしたので苦労しました。ボタンを複数ならべて、マウスが乗るとボタンの色が変わって、押すとボタンが下がる、という感じを再現したかったのです。
ところが、excite blogはjava scriptは使えませんし、一般の(?)タグでも、onmouse overなどは使用不可。使えるタグにいろいろ制限があります。
いろいろ模索して、結果的に、今、ページトップに配置しているようなボタンで落ち着きました。

まず、ボタンを押したら、実際に少し押し下がるようにするには、当該リンクに関するcss部分のACTIVEについて、positionを指定して、少しずれるようにしました。
今回は、ボタンのリンクに関するクラスを”topbutton”としたので、

DIV.topbutton A:ACTIVE { position: relative; top: 2px; left: 1px;}

と、しました。これで、ボタンを押すと、上に2ピクセルの余白が、左に1ピクセルの余白ができて、結果的に右下に少し下がったように見えます。

次はボタンの画像。はじめは、無地のボタンだけ画像を作って、リンクテキストのbackgroundにしたのですが、これだと、ボタンをクリックした際に、背景のボタンの画像は全く反応しないで、ボタン上の文字だけ右下にずれるようになってしまいました。

これに対応するべく、ボタン上の文字とボタンを一つの画像にして、それにリンクを設定しました。
<a href="#hobby"><img src="http://pds.exblog.jp/pds/1/200705/16/93/hobby.gif" border=0></a>

これで、ボタンを押すと、ボタンがボタン上の文字と一緒に押し下がりました。

あとはボタンの上にマウスが乗っかったときに、少し色が変わるようにしたかったのですが、java scriptも使えず、また、on mouse overをはじめとする諸々のタグに使用制限があるため、一般的なやり方は使えませんでした。

そこで、インターネットで調べた結果、今回使うことにしたのがfilterというcssコード。インターネットエクスプローラーしか対応しないそうですが、画像に透明化などの効果を与えることのできるものです。
(参考:TAG インデックスより:
http://www.tagindex.com/stylesheet/filter/alpha.html 

上記文献を参考にやってみましたがうまくいきません。

DIV.topbutton A:HOVER {filter: Alpha(style=0, opacity=60);}

これで、マウスがリンクボタンの上に乗ったら(hoverしたら)、ボタンが半透明になるはずなのに~。

さらにいろいろ試行錯誤した結果、下記だとうまくいきました。

DIV.topbutton A:HOVER img{filter: Alpha(style=0, opacity=60);}

ほら!
a0050593_2092183.jpg


何が違うかわかりますか? imgを{}の前においたんです。今回はhoverの対象となるリンクが文字ではなくて画像なので、imgを入れてやらねばならないようです。またひとつ勉強になりました。

私のような素人でもインターネットであれこれ検索して調べて、こうしたウェブデザインの知識が得られるのですから、ネット情報の効果は大きいですね。講習とか受けたら1万円くらいはとられそうですね。少し得した気分です(^_^)/
[PR]
by nn_77 | 2007-05-15 20:05 | Web Design

改造中・・・

ここに書くこと全体の中に占めるCPA受験関連の話の比率がどうしても低下してしまう今日この頃。だからといってblogやめることも(今のところは)無いですし、こちらで公開中の過去の記録を消すつもりもありません。
しかし、あまりに、日記本文の内容と、周りのフレームのメニューに乖離があるので、少し調整をしてみようと試みています。

画面トップに、いろいろな情報ソースページへのリンクボタンを設置するようにして、本文の両脇はもっとスッキリさせようと思います。それでいて、画面トップのボタンを押せば、「USCPA関連」とか「英語関連」とか、必要なリンク集ページにサッと画面が展開するようにしたいな・・・と考え、チョコチョコいじり中です。

これも、blogを見てくださった方からemailで頂いたアドバイスのひとつ。
ありがたいです。 (^_^)


今日は、左のメニューの内容を、別ページに移植するところまで。

後日、それらページへ遷移させるためのボタンをデザインします。。。
[PR]
by nn_77 | 2007-05-14 21:42 | Web Design

Access Counter

Since I wrote something like that yesterday, I started checking out more foreign websites than before when I make a research on something.
And I happened to find an interesting tool on the foreign website, titled “GoStats.com.”
I made a free account on Gostats and got an access counter system installed on my blog.

Until yesterday, I used to use an access counter that I got from a Japanese website called “XREA.COM.”
XREA’s access counter system was also good to me because it was provided for free and it was easy to embed the system to the blog.
But I found the access counter system of Gostats more interesting because with this access counter I can check out from which country the visitors came to my blog: many of them are from Japan, but some of them are from the States, Guam, Thailand, Germany, and so on.

Click the number on the upper-left,
a0050593_821145.jpg

… then, you can check the data of visitors: time, country, browser, frequency, etc…
a0050593_8211988.jpg

And here on Gostas, they are having discussions about various things in English.
http://board.gostats.com/
Maybe I’ll try jumping in there someday.

p.s.
Those websites I used to design this blog are introduced in the menu list on the lower-right of this blog.
a0050593_8221872.jpg

[PR]
by nn_77 | 2007-05-11 08:19 | Web Design

What to do with my blog?

Today I happened to watch a TV program that reported the current movement of blog activities in Japan. According to the program, the number of bloggers in Japan is about 8 million. The number is huge, considering the fact that the population of this country is 126 million.
Watching the program, I learned the word “α(alpha) blogger,” which refers to those whose blogs have an impact on many people on the internet. Then, I consulted the search engine for the word. It seems that the word “α(alpha) blogger” is originally from US but the word “A-list blogger” is more popular and common for that meaning.
In the course of internet surfing, I found a blog article, titled “How To Become An "A" List Blogger.”
In the above article, the author says,
---【QUOTE】------------------------------------------------------
Think about what you want from your blog.
Why are you doing this?
Who do you want to attract?
What kind of an impression do you want to make on them?
How do you engage that objective in what you post?
--------------------------------【UNQUOTE】---------------
Obviously, we don’t have to be an A list blogger nor an α-blogger at all.
But the article above might give you some insight about how to keep and develop our blog.

As for this blog, I started this to record everyday’s progress on my USCPA exam prep, and also to practice English (and sometimes Chinese) composition.

After getting through USCPA exam, I’ve been trying to make my blog as informative as possible. But, almost a year has passed since I finished the exam and I can no longer provide up-to-date info here. The rules and regulations regarding accounting & auditing environment is changing day by day. So I sometimes refer to those social phenomena to make myself catch up with such trends. Yet, this blog is losing such consistency as was observed in the early period. Maybe it’s the right timing to think about what to do with this blog.
[PR]
by nn_77 | 2007-05-08 03:20 | Web Design

Newly equipped tools

Two tools are installed on my website.

One is the black plaque on the lower right of the blog.
a0050593_12581024.jpg

There’s nothing on the plaque at first.
But if the cursor was moved over the white circles on the plaque, then,
a0050593_12582749.jpg

the words gradually appears. These words are the most popular keywords used by the visitors to get to my blog when they used search engines.

The other is the pull down menu regarding “note taking technique.”

a0050593_1257313.jpg


I’m always trying to take notes as effectively as possible, searching for the best method for that.

Those tools equipped on my blog are for my own convenience, actually. (^_^)
[PR]
by nn_77 | 2007-05-06 12:52 | Web Design


USCPA受験記録
カテゴリ
タグ
(74)
(18)
(16)
(14)
(12)
(11)
(9)
(9)
(9)
(9)
(7)
(7)
(6)
(6)
(5)
(5)
(5)
(5)
(5)
(4)
(4)
(4)
(4)
(4)
(4)
(4)
(3)
(3)
(3)
(3)
(3)
(3)
(3)
(3)
(3)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
(1)
以前の記事
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧