Bloggerに付いている、テンプレートのバックアップ機能を使う方法が、簡単です。
手作業でコピーする時は、右上のチェックを付けて、内容を全部表示させてからコピーします。
**** 手順 （2012年5月現在）
o Bloggerにログインします。
o 「テンプレート」画面を開きます。
+ ブログの右上にある「デザイン」リンクを押します。
+ ダッシュボードに居る時は、変更したいブログの「▼」をクリックして、「テンプレート」を選択します。
o 切り替わった画面の右上にある、「バックアップ/復元」ボタンをクリックします。
o 小さな画面が出てきますので、「テンプレートをすべてダウンロード」ボタンを押します。
o 後はファイルのダウンロードと同じです。
**** メモ
o 上記手順の他に、HTMLの編集画面から手動でメモ帳などにバックアップする事も出来ます。
o 自分でバックアップする時は、HTMLの編集画面の上にある「ウィジェットのテンプレートを展開」にチェックを入れてからにします。
+ CSSには関係が無いのですが、テンプレートの内容を全部保存する為に必要です。
o この他に、投稿記事をバックアップした時に、テンプレートの内容も一緒にバックアップされるみたいです。
+ バックアップしたファイルを開くと、テンプレートの内容も書かれていました。
＝＝
関連ページ：
▼Bloggerブログの見栄えを変更する
▼Bloggerブログのバックアップと復元
▼Blogger
▼制作メモ
＞ 全ての記事の最初や最後に、決まり文句や固定リンクを追加する
BloggerをCSSカスタマイズする
＞ Bloggerで、カスタマイズしたCSS（= テンプレート）を復元する
Bloggerの投稿記事をバックアップする（エクスポート）
(2012年5月7日変更。新デザイン対応)
(2010年6月11日変更。Bloggerの仕様変更対応)
2010年5月28日金曜日
要素の背景を半透明にする方法その3。アルファチャンネル付きの画像を表示する - CSSカスタマイズ
この方法は、画像編集が得意な方に向いています。
o 一度作ってしまえば、CSSを余分に追加しなくても済みます。
o 画像の透明度を変える時、画像編集の知識だけで対応出来ます。
但し、この方法には前提条件があります。問題がある場合は、他の方法を使います。
**** 前提条件
o アルファチャンネル付きPNG画像の表示は、Internet Explorer 6が対応していません。
o JavaScriptが使えるサイトの場合は、Internet Explorer 6への対応が可能です。（例えば、Bloggerブログなど）
+ 検索キーワード 「AlphaImageLoader PNG JavaScript」辺りでWeb検索すると、沢山情報が見つかります。
もしくは
o Internet Explorer 6への対応を諦める場合も、この方法を使う事が出来ます。
**** 手順
o 普通に画像を使ったページを作ります。
o 半透明にしたい画像を編集して、アルファチャンネル付きPNG画像で書き出します。
+ アルファチャンネル付きPNG画像を作る事が出来る画像編集ソフトを見つけます。
+ フリーウェアでも対応しているものがあります。自分に合ったソフトを探してみて下さい。
+ 後は、そのソフトを使って、画像を加工するだけです。
o 作ったPNG画像を、アップロードします。
o CSSで指定している画像のアドレスを、アップロードしたPNG画像のアドレスに置き換えます。
+ Internet Explorer 6に対応させる場合は、上の手順で調べた手順も行います。
**** メモ
o 今はまだ、CSSカスタマイズ先によっては、Internet Explorer 6に完全対応出来る「半透明後の画像を用意する方法」の方が重宝します。
o 背景を一部固定化する場合、相性があるかもしれません。詳しくは、「半透明後の画像を用意する方法」のメモをご覧下さい。
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ ▼要素を移動させる
半透明後の画像を表示する
CSSで透明度を指定する。opacity
Fireworks - 画像を半透明にする
o 一度作ってしまえば、CSSを余分に追加しなくても済みます。
o 画像の透明度を変える時、画像編集の知識だけで対応出来ます。
但し、この方法には前提条件があります。問題がある場合は、他の方法を使います。
**** 前提条件
o アルファチャンネル付きPNG画像の表示は、Internet Explorer 6が対応していません。
o JavaScriptが使えるサイトの場合は、Internet Explorer 6への対応が可能です。（例えば、Bloggerブログなど）
+ 検索キーワード 「AlphaImageLoader PNG JavaScript」辺りでWeb検索すると、沢山情報が見つかります。
もしくは
o Internet Explorer 6への対応を諦める場合も、この方法を使う事が出来ます。
**** 手順
o 普通に画像を使ったページを作ります。
o 半透明にしたい画像を編集して、アルファチャンネル付きPNG画像で書き出します。
+ アルファチャンネル付きPNG画像を作る事が出来る画像編集ソフトを見つけます。
+ フリーウェアでも対応しているものがあります。自分に合ったソフトを探してみて下さい。
+ 後は、そのソフトを使って、画像を加工するだけです。
o 作ったPNG画像を、アップロードします。
o CSSで指定している画像のアドレスを、アップロードしたPNG画像のアドレスに置き換えます。
+ Internet Explorer 6に対応させる場合は、上の手順で調べた手順も行います。
**** メモ
o 今はまだ、CSSカスタマイズ先によっては、Internet Explorer 6に完全対応出来る「半透明後の画像を用意する方法」の方が重宝します。
o 背景を一部固定化する場合、相性があるかもしれません。詳しくは、「半透明後の画像を用意する方法」のメモをご覧下さい。
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ ▼要素を移動させる
半透明後の画像を表示する
CSSで透明度を指定する。opacity
Fireworks - 画像を半透明にする
このブログの背景イラストについて - お知らせなど
このブログの背景イラストは、pacoさんの「赫」。ピアプロからお借りしました。
トップページの右上に座っている居眠りミクさんは、猫牧場カンパニーが配布しているブログパーツです。
o pacoさんのアトリエはこちらです。▽http://piapro.jp/paco
+ 「赫」の場所は、▽http://piapro.jp/t/2Hoi。
+ 登場人物は初音ミクです。
+ 上記ページから、pacoさんの個人サイト、そしてmixiに進む事も出来ます。
+ イラストを気に入った方は、pacoさんにメッセージすると、きっと喜んでくれます。
+ イラストをお借りした時には、「ありがとうごさいます」報告をすると喜んでくれます。
o トップページの居眠りミクさんは、猫牧場カンパニーが配布しているブログパーツです。
+ 詳しくは、「Bloggerのサイドバーに、ミク時計（Flashファイル）を置く方法」
＝＝
関連ページ：
▼お知らせなど
▼目次
＞ to_dkのzoome日記ご覧の方へ
トップページの右上に座っている居眠りミクさんは、猫牧場カンパニーが配布しているブログパーツです。
o pacoさんのアトリエはこちらです。▽http://piapro.jp/paco
+ 「赫」の場所は、▽http://piapro.jp/t/2Hoi。
+ 登場人物は初音ミクです。
+ 上記ページから、pacoさんの個人サイト、そしてmixiに進む事も出来ます。
+ イラストを気に入った方は、pacoさんにメッセージすると、きっと喜んでくれます。
+ イラストをお借りした時には、「ありがとうごさいます」報告をすると喜んでくれます。
o トップページの居眠りミクさんは、猫牧場カンパニーが配布しているブログパーツです。
+ 詳しくは、「Bloggerのサイドバーに、ミク時計（Flashファイル）を置く方法」
＝＝
関連ページ：
▼お知らせなど
▼目次
＞ to_dkのzoome日記ご覧の方へ
2010年5月26日水曜日
リンクやボタンにカーソルを乗せた時に、押し易くする方法 - CSSカスタマイズ
リンクやボタンは、カーソルを合わせた時に表示を変化させる事で、「押す事が出来ますよ。」と訪問者に伝える事が出来ます。
以下、リンクの場合についてメモします。
**** 手順
o リンク文字も含めて適用したい時
----------------
a:hover {
/* マウスを乗せた時に、したい事を書きます */
}
----------------
o リンク内の画像だけに適用したい時
----------------
a:hover img {
/* マウスを乗せた時に、したい事を書きます */
}
----------------
o ご参考。他の方の a:hover説明ページ（HTMLクイックリファレンス） ▽http://www.htmq.com/selector/hover.shtml
+ a:linkなどと併用する時の注意事項が載っています。
**** 応用例。zoomeマイページ
** 例1. リンク画像を動かして、凹んだように見せかける
o 実際にto_dkのzoomeマイページで使っている方法です。
+ リンクと特定のボタンに適用しています。
+ zoome上部のリンクには影響を与えない書き方です。
----------------
.contents a:hover, .footer a:hover, .comment_info_btn input:hover, .url_info_str_button input:hover {
color: #911B1B; /* これはリンクの色指定 */
position:relative;
top: 1px;
left: -1px;
}
----------------
o これは動かす例ですが、他にも、「background-colorを使って、背景色を変更する」などの工夫が出来ます。
** 例2. マウスを乗せた時に、CSSで画像の透明度を変化させる
o この例では75%を指定していますが、このページは背景が濃いですので 80% (0.80)を使っています。
--------
a:hover img {
-ms-filter: "alpha(opacity=75)";
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}
--------
o 複数行で指定する事には理由があります。詳しくは、「CSSで透明度を指定する方法。opacity」をご覧下さい。
**** メモ
o 私は試していませんが、工夫次第で、マウスを乗せた時に別の画像を表示させる事も出来そうです。
+ 興味のある方は、Web検索。検索キーワードは「img css ロールオーバー」辺りです。
o この方法は、上手く出来ない場合もあります。同じ場所にリンクを2枚重ねている場合です。
+ zommeマイページでは、「マイクリップ一覧」ページが該当します。
+ このページの場合、上のリンクが下にあるリンクを覆っていますので、下のリンクの a:hoverは反応しません。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
▼CSSを調べる
以下、リンクの場合についてメモします。
**** 手順
o リンク文字も含めて適用したい時
----------------
a:hover {
/* マウスを乗せた時に、したい事を書きます */
}
----------------
o リンク内の画像だけに適用したい時
----------------
a:hover img {
/* マウスを乗せた時に、したい事を書きます */
}
----------------
o ご参考。他の方の a:hover説明ページ（HTMLクイックリファレンス） ▽http://www.htmq.com/selector/hover.shtml
+ a:linkなどと併用する時の注意事項が載っています。
**** 応用例。zoomeマイページ
** 例1. リンク画像を動かして、凹んだように見せかける
o 実際にto_dkのzoomeマイページで使っている方法です。
+ リンクと特定のボタンに適用しています。
+ zoome上部のリンクには影響を与えない書き方です。
----------------
.contents a:hover, .footer a:hover, .comment_info_btn input:hover, .url_info_str_button input:hover {
color: #911B1B; /* これはリンクの色指定 */
position:relative;
top: 1px;
left: -1px;
}
----------------
o これは動かす例ですが、他にも、「background-colorを使って、背景色を変更する」などの工夫が出来ます。
** 例2. マウスを乗せた時に、CSSで画像の透明度を変化させる
o この例では75%を指定していますが、このページは背景が濃いですので 80% (0.80)を使っています。
--------
a:hover img {
-ms-filter: "alpha(opacity=75)";
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}
--------
o 複数行で指定する事には理由があります。詳しくは、「CSSで透明度を指定する方法。opacity」をご覧下さい。
**** メモ
o 私は試していませんが、工夫次第で、マウスを乗せた時に別の画像を表示させる事も出来そうです。
+ 興味のある方は、Web検索。検索キーワードは「img css ロールオーバー」辺りです。
o この方法は、上手く出来ない場合もあります。同じ場所にリンクを2枚重ねている場合です。
+ zommeマイページでは、「マイクリップ一覧」ページが該当します。
+ このページの場合、上のリンクが下にあるリンクを覆っていますので、下のリンクの a:hoverは反応しません。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
▼CSSを調べる
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする方法
マイクリップ一覧の説明文に当たる要素は、Firebugですぐに見つける事は出来ません。
理由は、他の場所に書いている要素を、移動してきて表示しているからです。
全員で同じ調査をするのは、時間が勿体無いですので、私が調べた結果をメモします。
（もちろん、調査に興味がある方は、自分で調べてみて下さい。）
# この小技は、zoomeの仕様が変わり易そうな部分を使っています。
# この方法が使えなくなりましたら、他の方法を探して下さい。
#
**** 手順
div#review_object の中身に対して操作します。
** 説明文に当たる所： div#review_string
o colorや font-sizeなどの一部の指定は、後ろに「!important」を付けないと無効になります。
+ これらの値は、HTMLの中（<div id="review_string"から始まる所）で、直接指定していました。
+ ですから、CSSカスタマイズする時は、!important を付けて指定して、HTMLよりも優先順位を上げます。
o !importantの指定例（= 先頭のdivは、無くてもきっと動きます。）
--------
div#review_string {
color: #911B1B !important;
font-size: 14px !important;
}
--------
** タイトル全体 = div#review_object .myclipreview_head
o .myclipreview_headは、マイクリップ一覧のタイトル「マイクリップ一覧」部分でも使っていました。
o 区別してCSSカスタマイズしたい時は、このページにだけ登場する親要素を、名前の最初に指定します。
+ タイトル全体 = div#review_object .myclipreview_head
+ タイトルの文 = div#review_object .myclipreview_text
+ タイトルの最後 = div#review_object .myclipreview_rss
+ （= 先頭のdivは、無くてもきっと動きます。）
＝＝
関連ページ：
▼CSSカスタマイズ
▼zoome
▼ホームページを作る
▼制作メモ
＞ 多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
CSS。他の方の便利メモ
理由は、他の場所に書いている要素を、移動してきて表示しているからです。
全員で同じ調査をするのは、時間が勿体無いですので、私が調べた結果をメモします。
（もちろん、調査に興味がある方は、自分で調べてみて下さい。）
# この小技は、zoomeの仕様が変わり易そうな部分を使っています。
# この方法が使えなくなりましたら、他の方法を探して下さい。
#
**** 手順
div#review_object の中身に対して操作します。
** 説明文に当たる所： div#review_string
o colorや font-sizeなどの一部の指定は、後ろに「!important」を付けないと無効になります。
+ これらの値は、HTMLの中（<div id="review_string"から始まる所）で、直接指定していました。
+ ですから、CSSカスタマイズする時は、!important を付けて指定して、HTMLよりも優先順位を上げます。
o !importantの指定例（= 先頭のdivは、無くてもきっと動きます。）
--------
div#review_string {
color: #911B1B !important;
font-size: 14px !important;
}
--------
** タイトル全体 = div#review_object .myclipreview_head
o .myclipreview_headは、マイクリップ一覧のタイトル「マイクリップ一覧」部分でも使っていました。
o 区別してCSSカスタマイズしたい時は、このページにだけ登場する親要素を、名前の最初に指定します。
+ タイトル全体 = div#review_object .myclipreview_head
+ タイトルの文 = div#review_object .myclipreview_text
+ タイトルの最後 = div#review_object .myclipreview_rss
+ （= 先頭のdivは、無くてもきっと動きます。）
＝＝
関連ページ：
▼CSSカスタマイズ
▼zoome
▼ホームページを作る
▼制作メモ
＞ 多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
CSS。他の方の便利メモ
こっそりBlogger研究室
Blogger ▲
このブログの改善アイデアを書いて、色々考える、メモ帳ページです。o 更新は不定期です。気が向いた時に進めますから、次は1年後になるかもしれません。
o 完成しましたら、他のページに組み込む予定です。
**** 只今対応中のテーマ（2012年10月31日現在）
o 表示方法調整
左上からの検索結果のみタイトル表示。それ以外ではページ表示
原則として、1ページに表示する本文を3ページ以下に設定
o Windows 8 対応開始
**** 検討中のテーマ
o Music Maker 3対応と、Music Maker MX対応。
既存のメモに、最新バージョンの情報を追加します。
o Google +1 の導入
このブログの母体デザインを、Bloggerの最新版に変更しました。
でも、Google +ボタンの読み込み時間が5秒程度かかっていましたので、一旦非表示にしました。
現在の課題は2つ。
１つは、Google+ ボタンを高速表示する方法
もう一つは、to_dkとしてGoogle+ に参加するかどうか（検討中です）
o トップページ右上の居眠りミクさんの引っ越し先
Flashコンテンツを置いていたサーバーが2回目のダウン。
仕方がありませんので、一度、トップページから居眠りミクさん呼び出し部分を外しました。
とりあえず元に戻しましたが、良いサーバーがありましたらFlashコンテンツを移動する事を考えています。
**** ぼちぼちと検討予定のテーマ
o 制作メモのレイアウト見直し
携帯電話からのアクセスが殆どありませんので、デスクトップからの見易さを重視しようかと思います。
o コメント掲示板のようなものの導入
このブログの各記事は、快適表示を維持する目的で、コメントを禁止しています。
一方、ブログに足りない部分を指摘したくなった時に、気軽に伝える手段がありません。
ですから、各ブログのテーマについて、自由に投稿出来るバグ管理システムが欲しいなあと思いました。
問題は、Googleのサービスで、それっぽい物が見つからない事。
でも、この機能の為に創作時間を大幅に削る訳にはいきませんから、一旦保留にします。
o 書籍など、商品画像の貼り付け
制作メモの場合、製品（= 商品）画像や参考書の紹介はあった方が便利です。
また、紹介する参考書をアフィリエイトして、制作費不足を補う事も検討中。
ただ、ミクさん背景のまま他の商品を薦めるのは気が引けます。実際に貼り付ける時には、専用のデザインを仕立てて、違和感を無くす予定です。
o 広告の追加
将来は、一部のページに大家さん（Google）の広告を入れる事を考えています。
理由は、制作機材の購入費用の捻出と、大家さん支援の為です。
メモを読み進めて物足りないと思った頃に、ふと目に止まるのが理想です。
広告を入れるページでは、背景をミクさん以外に差し替える予定です。
といっても、しばらく先の話になりそうです。まだ、メモ間のリンクを見直している段階です。
o 直帰率、離脱率共に100%近くのメモについて、メモの内容簡潔化
関連メモの見直しが終わってから考える事にしました。
o お役立ち度 = アクセスカウントを、テキストの形で右下に表示
目的：メモの有用度を表示します。メモの書き方を改善したくなった時に、参考になります。
方法：出来る事なら、CGIのカウントではなく、Google Analyticsのデータを流用します。その方が、後でお役立ち度の計算方法を見直したくなった時の手間が少ないです。
o ラベル毎の人気メモ一覧
目的：有意義と思われるメモを、そのラベルの紹介ページで紹介します。
方法：昨日、最近ｎ日間、累計、のうち、どれか1つを採用します。
なるべく、メモが追加された時も、基本的にメンテナンス不要になるようにします。
o サイト全体の人気メモTOP 10, 50
目的：有意義と思われるメモを、辿り易くします。
方法：最近ｎ日間、月間、累計
o これらを、1日1回の自動化 + パスワードを公開場所に置かないような方法。
# 一度に全部考えるのは大変です。他の事の合間に少しずつ検討します。
#
**** 終了したテーマ（そのうち消えます。）
o C++ラベル検索不能対応
大文字の＋＋に変更しました。
o 検索結果大量表示の最適化
表示高速化の為、次の2点を対策しました。
パソコンからの次の2つの検索結果について、本文表示を止め、タイトルだけにしました。
ブログアーカイブの年別表示、月別表示
画面左上からの検索結果
また、ラベルの新着記事表示を1ページ5件までにしました。
これらの操作では、大量の記事が一度に表示され、表示に5秒以上かかる場合がありました。
o 「Blogger」関連記事の、新デザイン対応
操作手順が変わっていましたので対応しました。
o Bloggerのドメイン変更対応
Bloggerの仕様変更で、参照者の国ドメインにリダイレクトされるようになりました。
問題は、ブラウザー側でセキュリティー強化のアドイン（例えば RequestPolicy ）を使っている場合。
この時、ページを遷移する度に、リダイレクトの途中で画面が止まります。
根本的な対策として、全てのページにある「自サイトへの .comリンク」を相対アドレスに置き換えました。
o 作品紹介や雑談を別サイトに移動する案は、一旦凍結しました。
制作メモに比べると量が1割未満です。今の段階で移動するメリットが少ないと判断しました。
将来、制作メモ全体に広告を導入するような事になりましたら、改めて移動を考えます。
o コメント機能については OFFを継続中。
理由は、（今のレイアウトで一番遅くなる）年末に、快適表示を維持したいからです。
コメント専用ページを作る、という方法もありますが、便利かどうかは疑問です。
それなら匿名掲示板を開設した方が、便利なような気もします。
o ブログの表示速度低下の主原因判明
Bloggerのブログアーカイブガジェットの論理が改善されていましたので、様子見中です。
投稿タイトルの初期読み込みが、過去1ヶ月から2週間程度に改善していました。
今の所、1日当たり3件程度の投稿では、問題ありません。
o なお、トップページ右上のミクさん（500KB）は、相変わらず居眠り中です。
その他の改善点は、「このブログの主な改善点」
＝＝
関連ページ：
▼Blogger
▼制作メモ
▼目次
2010年5月25日火曜日
CSS。他の方の便利メモ - CSSカスタマイズ
気が向いた時に、ふーん、という感じで目次を眺めるだけでも、CSSカスタマイズの役に立ちます。
CSSでは、覚えるよりも、見つける技術の方が重要です。
o HTML リファレンス ▽http://www.htmq.com/
+ 調べもの専用。おすすめは、スタイルシートリファレンス（ABC順）（目的別）
+ 細かい部分については、知りたくなった時にWeb検索します。
o WEB工房きくちゃん ▽http://www.stylish-style.com/
+ CSSで何が出来るのか、雰囲気を掴む時に便利です。
+ おすすめは、「CSSテクニック」。興味のある項目を 3つほど確認すると、CSSを実際に書く時の雰囲気が分かります。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
▼CSSを調べる
▼要素の背景を半透明にする
▼要素を移動させる
CSSでは、覚えるよりも、見つける技術の方が重要です。
o HTML リファレンス ▽http://www.htmq.com/
+ 調べもの専用。おすすめは、スタイルシートリファレンス（ABC順）（目的別）
+ 細かい部分については、知りたくなった時にWeb検索します。
o WEB工房きくちゃん ▽http://www.stylish-style.com/
+ CSSで何が出来るのか、雰囲気を掴む時に便利です。
+ おすすめは、「CSSテクニック」。興味のある項目を 3つほど確認すると、CSSを実際に書く時の雰囲気が分かります。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
▼CSSを調べる
▼要素の背景を半透明にする
▼要素を移動させる
2010年5月24日月曜日
サイト別。CSSカスタマイズ画面の開き方
設定メニューの中から、CSSカスタマイズの設定画面を開きます。
Bloggerのように、記事の中にHTMLタグとCSSを埋める事が出来る場合もあります。
以下は、to_dkのページを作った時の、CSSカスタマイズ手順です。
**** 手順
o Blogger
▼Blogger - ブログの見栄えを変更する
+ Bloggerでは、選択したテンプレート（= スキン）に含まれている CSSを、変更する形になります。
+ Bloggerの制御文を併用する事で、「あるページだけ、特別のCSSを使う」事も出来ます。CSSの他に、HTMLソースを追加したり、ブログの骨組みを変更する事も出来ます。（XHTML形式で書きます）
o @wiki
▼@wikiをカスタマイズする
+ 選択した基本デザイン（= スキン）の差分を入力する形になります。
+ 「基本デザインのCSSを無効化する」事も出来ます。（右上の欄にチェックを入れます。）
**** メモ
** 終了したサービスのCSSカスタマイズ手順
o zoomeのマイページ（サービス終了）
▼zoome（サービス終了）
+ CSSカスタマイズを選ぶと、選択したスキンは無効になり、雛形を1つ提供されます。
+ でも、スキンのCSSを取り出して「雛形を置き換える」事は、比較的簡単に出来ます。
** CSS以外のカスタマイズ手順
o MySpace
+ MySpace のプロフィールをカスタマイズする
+ バージョンアップで、CSSは使えなくなりました。HTMLを追加する事が出来ます。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ ▼要素の背景を半透明にする
▼要素を移動させる
背景画像固定のポイント
▼CSSを調べる
Bloggerのように、記事の中にHTMLタグとCSSを埋める事が出来る場合もあります。
以下は、to_dkのページを作った時の、CSSカスタマイズ手順です。
**** 手順
o Blogger
▼Blogger - ブログの見栄えを変更する
+ Bloggerでは、選択したテンプレート（= スキン）に含まれている CSSを、変更する形になります。
+ Bloggerの制御文を併用する事で、「あるページだけ、特別のCSSを使う」事も出来ます。CSSの他に、HTMLソースを追加したり、ブログの骨組みを変更する事も出来ます。（XHTML形式で書きます）
o @wiki
▼@wikiをカスタマイズする
+ 選択した基本デザイン（= スキン）の差分を入力する形になります。
+ 「基本デザインのCSSを無効化する」事も出来ます。（右上の欄にチェックを入れます。）
**** メモ
** 終了したサービスのCSSカスタマイズ手順
o zoomeのマイページ（サービス終了）
▼zoome（サービス終了）
+ CSSカスタマイズを選ぶと、選択したスキンは無効になり、雛形を1つ提供されます。
+ でも、スキンのCSSを取り出して「雛形を置き換える」事は、比較的簡単に出来ます。
** CSS以外のカスタマイズ手順
o MySpace
+ MySpace のプロフィールをカスタマイズする
+ バージョンアップで、CSSは使えなくなりました。HTMLを追加する事が出来ます。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ ▼要素の背景を半透明にする
▼要素を移動させる
背景画像固定のポイント
▼CSSを調べる
CSS。背景画像固定のポイント - CSSカスタマイズ
ブラウザーをスクロールさせた時、ページの背景画像も動いて「いやだなあ」と思った事はありませんか。
CSSを使うと、ブラウザーをスクロールさせた時にも、背景画像を動かさないようにする事が出来ます。
**** 手順
** 1. 基本的な書き方
o 次の行のうち、必要なものを追加します。
---- ここから -----
background-image : url(http://から始まるアドレス);
background-attachment : fixed; /* 背景画像を固定にする時は、必ずこれを追加 */
background-position : center top; /* 状況に応じて、位置指定を追加。center top は一例 */
/* その他、お好み。ワンポイント表示なら background-repeat : no-repeat; */
---- ここまで、というよりも必要な所だけ -----
o 例えば .bodyに追加する場合、次のような感じになります。
---- ここから -----
.body {
background-image : url(http://から始まるアドレス); /* 必須。背景画像を指定します */
background-attachment : fixed; /* 必須。これで固定化されます */
background-position : center top;/* これは一例。必要に応じて追加します */
}
---- ここまで -----
# ご参考：CSS用語辞典は、Web検索すると、沢山見つかります。
# 意味を簡単に知りたい方は、スタイルシートリファレンス（ABC順）（HTMLクイックリファレンス）
# ▽http://www.htmq.com/style/indexa.shtml
** 2. 背景画像を指定する場所（= zoomeのマイページの場合）
(a) 左右に隙間を入れたい時は、.page (= div.page)や .contents(= div.contents) あたり
# 私の場合は、.pageと body に画像1、.bodyに画像2（ページ左右）を指定しています。
# 理由は、bodyに画像1を指定しないと、高解像度のディスプレイで画像が切れる事が分かったからです。
# （フッターの下まで表示するような、高解像度のディスプレイです。）
# また、bodyにだけ画像1を指定すると、2008年当時の一部のブラウザーで、ページ読み込み中の表示が変になった事がありました。
# ですので、サンドイッチで挟む感じで、同じ画像を2回指定しました。（最近のブラウザーでは不要かもしれません。）
#
(b) 横幅一杯に入れたい時は、.body (= div.body)や body あたり。もしかすると、細工が必要かもしれません。
(c) 名詞カードの場合は、.name_body (= div.name_body) あたり
** 3. 背景固定のポイント
o 背景画像が、全く固定されない場合 ＝ 誤字の可能性が高いです
(a) よく間違えやすいのが、コロンとセミコロン。並び順は「名前、コロン、値、セミコロン」
(b) 空白を入れる時は、全角空白「 」ではなく半角空白「 」。全角空白を空白と解釈しないブラウザーもあります。
o ブラウザーの横幅を変更すると、背景画像の表示もずれる場合
(c) 画像の指定場所に、background-position : center top; も追加してみます。
o 原因不明の時は、「zoome マイページ。プレビューでの失敗例と対策」もどうぞ。
** 4. 背景画像の完全固定について
o zoomeの「ページの左右に空きのある」レイアウトの場合、ブラウザーの横幅で背景画像の見え方が変わります。
o これは、background-attachment : fixed; を指定すると、背景画像を置く基準がページに変わるからです。（特に指定しない場合、ページの左上から、繰り返し表示します。）
対策方法は、2通りあります。
(1) 見え方が変わっても気にならないような絵柄を選ぶ方法
(2) ページ全体のデザインと、背景の置く方法を合わせる方法
(例1) ピクセル単位で配置したい時は、ページの左右の空きを無くします。
+ 左上から要素までの距離を動かさない方法です。
(例2) zoome既定のcenter基準のデザインの場合、背景もcenter指定で配置します。
+ このページや、to_dkのzoomeマイページのページ背景は、background- position : center top; を使用しました。
+ 背景の置き場所によっては、画像が途中から始まる事があります。詳しくは、下のメモをご覧下さい。
o 「この方法を採用しても、一部のブラウザーでのみ背景画像の位置がずれた時」は、「多くのブラウザーで見栄えを合わせる」が、お役に立つかもしれません。
**** メモ
o ページの壁紙を固定化する事は、場所を見つける事が出来ましたら、後は、比較的難しくはありません。
o 難易度がぐんと上がるのは、例えば、左上に寄せないレイアウトで、名刺カードだけの背景を完全固定化したい場合です。
+ 背景の置き場所によっては、画像が途中から始まる事があります。その場合は、例えばcenter top配置の場合は、画像の左上が合うように画像を加工すると、綺麗な配置になります。
# ちなみに、to_dkのzoomeマイページの名刺カードは、完全固定化ではありません。（= 2010年5月現在）
# 画像を適当に大きく取って、ブラウザーの幅が多少変わっても「それなりに」見えるようにしました。
# CSSの設定は、background-attachment : right top;
# 横の基準点の指定は、center / left / right などありますので、ブラウザーを普通に開いた時に、変に見えない値を設定しました。
#
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
多くのブラウザーで見栄えを合わせる
▼要素の背景を半透明にする
CSSを使うと、ブラウザーをスクロールさせた時にも、背景画像を動かさないようにする事が出来ます。
**** 手順
** 1. 基本的な書き方
o 次の行のうち、必要なものを追加します。
---- ここから -----
background-image : url(http://から始まるアドレス);
background-attachment : fixed; /* 背景画像を固定にする時は、必ずこれを追加 */
background-position : center top; /* 状況に応じて、位置指定を追加。center top は一例 */
/* その他、お好み。ワンポイント表示なら background-repeat : no-repeat; */
---- ここまで、というよりも必要な所だけ -----
o 例えば .bodyに追加する場合、次のような感じになります。
---- ここから -----
.body {
background-image : url(http://から始まるアドレス); /* 必須。背景画像を指定します */
background-attachment : fixed; /* 必須。これで固定化されます */
background-position : center top;/* これは一例。必要に応じて追加します */
}
---- ここまで -----
# ご参考：CSS用語辞典は、Web検索すると、沢山見つかります。
# 意味を簡単に知りたい方は、スタイルシートリファレンス（ABC順）（HTMLクイックリファレンス）
# ▽http://www.htmq.com/style/indexa.shtml
** 2. 背景画像を指定する場所（= zoomeのマイページの場合）
(a) 左右に隙間を入れたい時は、.page (= div.page)や .contents(= div.contents) あたり
# 私の場合は、.pageと body に画像1、.bodyに画像2（ページ左右）を指定しています。
# 理由は、bodyに画像1を指定しないと、高解像度のディスプレイで画像が切れる事が分かったからです。
# （フッターの下まで表示するような、高解像度のディスプレイです。）
# また、bodyにだけ画像1を指定すると、2008年当時の一部のブラウザーで、ページ読み込み中の表示が変になった事がありました。
# ですので、サンドイッチで挟む感じで、同じ画像を2回指定しました。（最近のブラウザーでは不要かもしれません。）
#
(b) 横幅一杯に入れたい時は、.body (= div.body)や body あたり。もしかすると、細工が必要かもしれません。
(c) 名詞カードの場合は、.name_body (= div.name_body) あたり
** 3. 背景固定のポイント
o 背景画像が、全く固定されない場合 ＝ 誤字の可能性が高いです
(a) よく間違えやすいのが、コロンとセミコロン。並び順は「名前、コロン、値、セミコロン」
(b) 空白を入れる時は、全角空白「 」ではなく半角空白「 」。全角空白を空白と解釈しないブラウザーもあります。
o ブラウザーの横幅を変更すると、背景画像の表示もずれる場合
(c) 画像の指定場所に、background-position : center top; も追加してみます。
o 原因不明の時は、「zoome マイページ。プレビューでの失敗例と対策」もどうぞ。
** 4. 背景画像の完全固定について
o zoomeの「ページの左右に空きのある」レイアウトの場合、ブラウザーの横幅で背景画像の見え方が変わります。
o これは、background-attachment : fixed; を指定すると、背景画像を置く基準がページに変わるからです。（特に指定しない場合、ページの左上から、繰り返し表示します。）
対策方法は、2通りあります。
(1) 見え方が変わっても気にならないような絵柄を選ぶ方法
(2) ページ全体のデザインと、背景の置く方法を合わせる方法
(例1) ピクセル単位で配置したい時は、ページの左右の空きを無くします。
+ 左上から要素までの距離を動かさない方法です。
(例2) zoome既定のcenter基準のデザインの場合、背景もcenter指定で配置します。
+ このページや、to_dkのzoomeマイページのページ背景は、background- position : center top; を使用しました。
+ 背景の置き場所によっては、画像が途中から始まる事があります。詳しくは、下のメモをご覧下さい。
o 「この方法を採用しても、一部のブラウザーでのみ背景画像の位置がずれた時」は、「多くのブラウザーで見栄えを合わせる」が、お役に立つかもしれません。
**** メモ
o ページの壁紙を固定化する事は、場所を見つける事が出来ましたら、後は、比較的難しくはありません。
o 難易度がぐんと上がるのは、例えば、左上に寄せないレイアウトで、名刺カードだけの背景を完全固定化したい場合です。
+ 背景の置き場所によっては、画像が途中から始まる事があります。その場合は、例えばcenter top配置の場合は、画像の左上が合うように画像を加工すると、綺麗な配置になります。
# ちなみに、to_dkのzoomeマイページの名刺カードは、完全固定化ではありません。（= 2010年5月現在）
# 画像を適当に大きく取って、ブラウザーの幅が多少変わっても「それなりに」見えるようにしました。
# CSSの設定は、background-attachment : right top;
# 横の基準点の指定は、center / left / right などありますので、ブラウザーを普通に開いた時に、変に見えない値を設定しました。
#
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
多くのブラウザーで見栄えを合わせる
▼要素の背景を半透明にする
CSSを調べる方法 - CSSカスタマイズ
zoomeのマイページを簡単に解析する
WebページからCSSの要素名を簡単に見つける - Firebug
CSS用語の意味を簡単に調べる
「ソースの表示」から CSSを見つける
設定画面中にある CSS入力欄を簡単に辿る
--------
o 「Webページに書かれているCSSやHTMLを調べる」時間を、短くする小技です。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ ▼CSSカスタマイズ画面の開き方
▼要素の背景を半透明にする
▼要素を移動させる
背景画像固定のポイント
WebページからCSSの要素名を簡単に見つける - Firebug
CSS用語の意味を簡単に調べる
「ソースの表示」から CSSを見つける
設定画面中にある CSS入力欄を簡単に辿る
--------
o 「Webページに書かれているCSSやHTMLを調べる」時間を、短くする小技です。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ ▼CSSカスタマイズ画面の開き方
▼要素の背景を半透明にする
▼要素を移動させる
背景画像固定のポイント
多くのブラウザーで見栄えを合わせる方法 - CSSカスタマイズ
Webブラウザーは、Internet Explorer だけではありません。
CSSカスタマイズして出来るのは、世界に多分 1つしかない、自分だけのマイページ。出来るだけ多くの方に、自慢したいですよね。
そこで、「多くのブラウザーで見栄えを合わせる為の」CSSの書き方について、私が使っている方法を纏めてみました。
**** 手順
o 多くのブラウザーで見栄えを合わせるには、「各ブラウザーの表示方法の違いを、CSSで上書き」する方法が簡単です。
o 出来るだけ、上書きと、標準の書き方で済ませます。そして、特別に個別対応したい所だけ「CSSハック」を使います。
** 1. 「各ブラウザーの表示方法の違いを、CSSで上書き」します
o 高さや幅の計算方法を、Internet Exploerに「強制的に」合わせます。
o この記述を書くだけで、ブラウザー間での見栄えの大きな違いは無くなりました。派手にカスタマイズする時に、おすすめです。
---- ここから ---------------------------
* {
box-sizing: border-box; /* Opera。CSS標準になる予定 */
-moz-box-sizing: border-box; /* Firefox */
-khtml-box-sizing: border-box; /* Apple系みたいです。念の為の、おまじない */
-webkit-box-sizing: border-box; /* Safari 3。Windows版で確認 */
margin: 0px; padding: 0px;
}
---- ここまで ---------------------------
o *だけ書くと、全要素に対して適用します。
o 変更手順は、* の場所を探して（なければ追加）、指定を追加する形になります。
o border: 0px;は、推奨から外しました。理由は、<hr>タグを使う時に手間がかかったからです。
** 2. 「ブラウザー間で、見栄えの違いが気になる所」を見つけたら、CSSで微調整します
o なるべく、1種類のCSSで全てのブラウザーに対応できるよう、頑張ってみます。
o といっても、見栄えを完全に同じにするのは無理です。こだわり部分以外は割り切る事も大切です。
** 3. 特定のブラウザーだけCSSを変更したい時は、「CSSハック」を使います
o 標準の書き方で、見栄えが違うブラウザーがある場合、見栄えを無理やり合わせる事が出来ます。
o ブラウザーの特性や不具合を利用する「無保証な」方法です。
o CSSハックの方法は、必要になった時に Web検索します。間違った情報も混じっていますので、可能でしたら、実際に動作確認すると安心できます。
+ この他に、新ブラウザーの登場やバージョンアップがあると、CSSハックの書き方が変わる事もあります。
例： Safariと Google Chrome ブラウザーに対応する場合
---- ここから ---------------------------
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* ここに、Safariと Google Chrome ブラウザーだけで有効にしたい設定を記述します */
}
---- ここまで ---------------------------
o Safari 3で確認しました。他のバージョンでも使用出来るかどうかは、未確認です。
** 4. 横幅を縮める場合は、少し余裕を持たせます
o 文字の形は、Windowsと Mac OSで、少し違います。別のフォントを使っているからです。
o そこで、少々文字の形が変わっても見栄えが変にならないように、（特に横幅は）少し余裕を見る事をおすすめします。
** 5. フォントの見栄えを合わせたい時は、font-family
o ある程度合わせたい時は、font-familyに、使用して欲しいフォントの名前を並べます。
o Windowsの他に、Mac OSなどもありますから、それぞれで利用出来そうなフォント名を並べます。
o 書き方の例（この場合、bodyの場所に追加する形になります。）
---- ここから ---------------------------
body {
font-family:"Osaka", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Times New Roman", sans-serif;
}
---- ここまで ---------------------------
o 使って欲しいフォントから順に書きます。
o 「Osaka」は、Mac OSのフォントです。最近では、ヒラギノ系のフォントを指定する方が、評判が良いみたいです。
o 「メイリオ」は、Windows Vistaで新しく追加されたフォントです。
o 最後に、cssの仕様で決められているフォント名を書きます。例の場合は「sans-serif」。
ご参考。font-familyの説明（HTMLスタイルシートリファレンス） ▽http://www.htmq.com/style/font-family.shtml
# 文字の見栄えを完全に合わせる為には、画像などにするしかありません。
# でも、画像などで表現してしまうと、文字の検索やコピーが出来ませんから、使う側が不便です。
#
** 6. たまには後回しもおすすめです
o 操作性に関係が無いような部分は、後回しにするのもおすすめです。CSSカスタマイズの楽しみを、将来の自分の為に残す感覚です。
o 動画制作に飽きてきた時の気分転換など、気が向いた時に、また楽しみます。
o to_dkのzoomeマイページは Safariブラウザーで見栄えが異なります。原因もほぼ把握しているのですが、修正は保留しています。
** 7. ご参考：主要ブラウザーについて（＝携帯電話の特殊ブラウザーは除きます）
▽Internet Explorer : 一番多く使われています。今の所、バージョン 7、 6 の順で多いみたいです。最新版は 8。
▽Firefox : Webプログラマーに好評です。
▽Safari : iPhoneなどの Apple製品で人気です。
▽Opera : PHSで人気があるみたいです。Wii（ゲーム機）バージョンがあります。
他にも、▽Google Chromeなどがあります。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoome マイページ。プレビューでの失敗例と対策
CSS。他の方の便利メモ
(2010年5月27日変更。*で指定する箇所から、border: 0px;を外しました。理由は、hrタグの横線が消えるからです。)
CSSカスタマイズして出来るのは、世界に多分 1つしかない、自分だけのマイページ。出来るだけ多くの方に、自慢したいですよね。
そこで、「多くのブラウザーで見栄えを合わせる為の」CSSの書き方について、私が使っている方法を纏めてみました。
**** 手順
o 多くのブラウザーで見栄えを合わせるには、「各ブラウザーの表示方法の違いを、CSSで上書き」する方法が簡単です。
o 出来るだけ、上書きと、標準の書き方で済ませます。そして、特別に個別対応したい所だけ「CSSハック」を使います。
** 1. 「各ブラウザーの表示方法の違いを、CSSで上書き」します
o 高さや幅の計算方法を、Internet Exploerに「強制的に」合わせます。
o この記述を書くだけで、ブラウザー間での見栄えの大きな違いは無くなりました。派手にカスタマイズする時に、おすすめです。
---- ここから ---------------------------
* {
box-sizing: border-box; /* Opera。CSS標準になる予定 */
-moz-box-sizing: border-box; /* Firefox */
-khtml-box-sizing: border-box; /* Apple系みたいです。念の為の、おまじない */
-webkit-box-sizing: border-box; /* Safari 3。Windows版で確認 */
margin: 0px; padding: 0px;
}
---- ここまで ---------------------------
o *だけ書くと、全要素に対して適用します。
o 変更手順は、* の場所を探して（なければ追加）、指定を追加する形になります。
o border: 0px;は、推奨から外しました。理由は、<hr>タグを使う時に手間がかかったからです。
** 2. 「ブラウザー間で、見栄えの違いが気になる所」を見つけたら、CSSで微調整します
o なるべく、1種類のCSSで全てのブラウザーに対応できるよう、頑張ってみます。
o といっても、見栄えを完全に同じにするのは無理です。こだわり部分以外は割り切る事も大切です。
** 3. 特定のブラウザーだけCSSを変更したい時は、「CSSハック」を使います
o 標準の書き方で、見栄えが違うブラウザーがある場合、見栄えを無理やり合わせる事が出来ます。
o ブラウザーの特性や不具合を利用する「無保証な」方法です。
o CSSハックの方法は、必要になった時に Web検索します。間違った情報も混じっていますので、可能でしたら、実際に動作確認すると安心できます。
+ この他に、新ブラウザーの登場やバージョンアップがあると、CSSハックの書き方が変わる事もあります。
例： Safariと Google Chrome ブラウザーに対応する場合
---- ここから ---------------------------
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* ここに、Safariと Google Chrome ブラウザーだけで有効にしたい設定を記述します */
}
---- ここまで ---------------------------
o Safari 3で確認しました。他のバージョンでも使用出来るかどうかは、未確認です。
** 4. 横幅を縮める場合は、少し余裕を持たせます
o 文字の形は、Windowsと Mac OSで、少し違います。別のフォントを使っているからです。
o そこで、少々文字の形が変わっても見栄えが変にならないように、（特に横幅は）少し余裕を見る事をおすすめします。
** 5. フォントの見栄えを合わせたい時は、font-family
o ある程度合わせたい時は、font-familyに、使用して欲しいフォントの名前を並べます。
o Windowsの他に、Mac OSなどもありますから、それぞれで利用出来そうなフォント名を並べます。
o 書き方の例（この場合、bodyの場所に追加する形になります。）
---- ここから ---------------------------
body {
font-family:"Osaka", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Times New Roman", sans-serif;
}
---- ここまで ---------------------------
o 使って欲しいフォントから順に書きます。
o 「Osaka」は、Mac OSのフォントです。最近では、ヒラギノ系のフォントを指定する方が、評判が良いみたいです。
o 「メイリオ」は、Windows Vistaで新しく追加されたフォントです。
o 最後に、cssの仕様で決められているフォント名を書きます。例の場合は「sans-serif」。
ご参考。font-familyの説明（HTMLスタイルシートリファレンス） ▽http://www.htmq.com/style/font-family.shtml
# 文字の見栄えを完全に合わせる為には、画像などにするしかありません。
# でも、画像などで表現してしまうと、文字の検索やコピーが出来ませんから、使う側が不便です。
#
** 6. たまには後回しもおすすめです
o 操作性に関係が無いような部分は、後回しにするのもおすすめです。CSSカスタマイズの楽しみを、将来の自分の為に残す感覚です。
o 動画制作に飽きてきた時の気分転換など、気が向いた時に、また楽しみます。
o to_dkのzoomeマイページは Safariブラウザーで見栄えが異なります。原因もほぼ把握しているのですが、修正は保留しています。
** 7. ご参考：主要ブラウザーについて（＝携帯電話の特殊ブラウザーは除きます）
▽Internet Explorer : 一番多く使われています。今の所、バージョン 7、 6 の順で多いみたいです。最新版は 8。
▽Firefox : Webプログラマーに好評です。
▽Safari : iPhoneなどの Apple製品で人気です。
▽Opera : PHSで人気があるみたいです。Wii（ゲーム機）バージョンがあります。
他にも、▽Google Chromeなどがあります。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoome マイページ。プレビューでの失敗例と対策
CSS。他の方の便利メモ
(2010年5月27日変更。*で指定する箇所から、border: 0px;を外しました。理由は、hrタグの横線が消えるからです。)
2010年5月22日土曜日
コンピューター・プログラムを作る
▼AWK
▼コマンドプロンプト画面(bat,cmd)
▼Visual C#
▼Visual C++
▼UNIXサーバー
--------
o 作品などを作る時、手間がかかる作業は、ぼちぼちと半自動化を試みています。
o 表現したい事は沢山あるにも関わらず、創作に費やす事の出来る時間は、限られていますから。
＝＝
関連ページ：
▼制作メモ
▼目次
＞ ▼家事と健康管理
+
▼曲や動画を作る
▼ホームページを作る
コンピューター・プログラミングを扱ったアニメ
▼コマンドプロンプト画面(bat,cmd)
▼Visual C#
▼Visual C++
▼UNIXサーバー
--------
o 作品などを作る時、手間がかかる作業は、ぼちぼちと半自動化を試みています。
o 表現したい事は沢山あるにも関わらず、創作に費やす事の出来る時間は、限られていますから。
＝＝
関連ページ：
▼制作メモ
▼目次
＞ ▼家事と健康管理
+
▼曲や動画を作る
▼ホームページを作る
コンピューター・プログラミングを扱ったアニメ
曲や動画を作る
** 作曲する
o 初音ミクに歌ってもらう
▼初音ミク
o 伴奏やMIDI入力ツール
▼Music Maker
▼FL STUDIO
▼Domino
▼Cadencii
o 音色を増やす
▼EZdrummer
+ EZplayer pro
+ Toontrack solo
o プラグイン（エフェクトや音源）を自作する
▼SynthMaker
o 入力機器を増やす
▼CASIO WK-210 （電子キーボード）
** 動画を作る
▼初音ミク動画を作る
▼Music Makerで動画を作る
▼Flashで映像部品を作る
▼Fireworksで画像を加工する
▼GIMPで画像を加工する
** 初音ミクなどに囲まれる
+ ▼ブラウザーを初音ミク
+ ねんどろいど初音ミクの首関節が折れた時の治療手順
+ ▼jamバンド素材などを探す
+ FL Chan公式画像素材の配布場所
# 初音ミクイラストを沢山眺めたい方は、▽ピアプロやpixivなど
#
o 購入を考える
+ ▼初音ミクの購入とインストール
+ ▼Music Makerの購入とインストール
o サポートを受ける
+ ▼初音ミクのサポートを受ける
+ ▼Music Makerのサポートを受ける
--------
o 作品を作る時に使った小技について、まとめました。
o 完成した作品は、▽YouTubeのto_dkチャンネルなどでご覧になれます。
＝＝
関連ページ：
▼制作メモ
▼目次
＞ ▼ホームページを作る
▼コンピューター・プログラムを作る
▼家事と健康管理
o 初音ミクに歌ってもらう
▼初音ミク
o 伴奏やMIDI入力ツール
▼Music Maker
▼FL STUDIO
▼Domino
▼Cadencii
o 音色を増やす
▼EZdrummer
+ EZplayer pro
+ Toontrack solo
o プラグイン（エフェクトや音源）を自作する
▼SynthMaker
o 入力機器を増やす
▼CASIO WK-210 （電子キーボード）
** 動画を作る
▼初音ミク動画を作る
▼Music Makerで動画を作る
▼Flashで映像部品を作る
▼Fireworksで画像を加工する
▼GIMPで画像を加工する
** 初音ミクなどに囲まれる
+ ▼ブラウザーを初音ミク
+ ねんどろいど初音ミクの首関節が折れた時の治療手順
+ ▼jamバンド素材などを探す
+ FL Chan公式画像素材の配布場所
# 初音ミクイラストを沢山眺めたい方は、▽ピアプロやpixivなど
#
o 購入を考える
+ ▼初音ミクの購入とインストール
+ ▼Music Makerの購入とインストール
o サポートを受ける
+ ▼初音ミクのサポートを受ける
+ ▼Music Makerのサポートを受ける
--------
o 作品を作る時に使った小技について、まとめました。
o 完成した作品は、▽YouTubeのto_dkチャンネルなどでご覧になれます。
＝＝
関連ページ：
▼制作メモ
▼目次
＞ ▼ホームページを作る
▼コンピューター・プログラムを作る
▼家事と健康管理
ホームページを作る
o 情報を発信する
▼Bloggerブログ
▼YouTube
▼@wiki
▼zoome
o 関連知識
▼CSSカスタマイズ
▼Windows
▼Google ドキュメント
▼ブラウザーを初音ミク
o セキュリティ
▼ルーターとアクセス制限
--------
o 作品などをインターネットで発表する時に使った小技をまとめました。
o ホームページやブログは、無料のサービスも多いです。
o 制作者が一番注意しないといけないのは利用規約。
+ 「投稿内容の著作権は運営者に移動」「他人名義で出版してもOK」みたいな規約も、よく見かけます。
+ 特に作品の発表場所については、制作者の名前で自由に投稿出来る場所を選びましょう。
＝＝
関連ページ：
▼制作メモ
▼目次
＞ ▼コンピューター・プログラムを作る
▼家事と健康管理
+
▼曲や動画を作る
▼Bloggerブログ
▼YouTube
▼@wiki
▼zoome
o 関連知識
▼CSSカスタマイズ
▼Windows
▼Google ドキュメント
▼ブラウザーを初音ミク
o セキュリティ
▼ルーターとアクセス制限
--------
o 作品などをインターネットで発表する時に使った小技をまとめました。
o ホームページやブログは、無料のサービスも多いです。
o 制作者が一番注意しないといけないのは利用規約。
+ 「投稿内容の著作権は運営者に移動」「他人名義で出版してもOK」みたいな規約も、よく見かけます。
+ 特に作品の発表場所については、制作者の名前で自由に投稿出来る場所を選びましょう。
＝＝
関連ページ：
▼制作メモ
▼目次
＞ ▼コンピューター・プログラムを作る
▼家事と健康管理
+
▼曲や動画を作る
マイページで、zoomeのスキンからCSSカスタマイズする方法
作曲や動画制作に慣れてきたら、作品の置き場所（マイページ）の雰囲気にも拘ってみたいですよね。
ということで、zoomeマイページの、特殊なカスタマイズ方法をご紹介します。
**** はじめに
o zoome の設定変更で選択できる「スキン変更」。
見栄えは良いのですが、スキンによっては赤文字だったりして、記事を読むのが辛かったりします。
o zoome の設定変更で選択できる「CSS カスタマイズ」。何が出来るのかというと、
文字や背景の色を変えて、読みやすくしたり、
背景画像に、お気に入りのイラストを使ったり、
私のマイページの名刺カードのように、初音ミクを登場させたりできます。
ホラー好きなら、どろんどろんなマイページも作成可能です。私は作りませんが。
でも、「CSS カスタマイズ」のアルファベット呪文の組み立ては、慣れた方でないと大変です。
そこで、私が現在使っている、zoomeのスキンに少し手を加える方法をご紹介します。
以下、例によって自己責任でどうぞ。
**** 1. マイページのカスタマイズ手順について
(1) スキン変更 （1番お手軽。これで満足した方は、下を読む必要はありません。）
o ログインしたら上に出てくるメニューで、「設定変更」。
o 設定変更画面の、左に出てくるメニューで、「スキン変更」。
(2) CSSカスタマイズ （とても難しい）
o 設定変更画面の、左に出てくるメニューで、「CSS カスタマイズ」。
+ zoomeサポート外の手順ですので、zoomeの仕様が変わると、やり直しになるかもしれません。
+ 年に1度あるかないかですので、表示が変になったら、もう一度この手順をやり直します。
(3) 私が使っている方法。スキン変更 + CSSカスタマイズ （やや難しい）
o 「スキン変更」を行います。
+ この手順でお気に入りのマイページが出来た時は、この下を読む必要はありません。
o プラウザーで、出来たマイページを保存します。
o カスタマイズ可能なcssファイルを見つけて「CSSカスタマイズ」の手順で貼り付けます。
o 後は、気が向いた時に改造（＝CSSカスタマイズ）します。
+ zoomeサポート外の手順ですので、zoomeの仕様が変わると、やり直しになるかもしれません。
+ 年に1度あるかないかですので、表示が変になったら、もう一度この手順をやり直します。
**** 2. 私が使っている方法の、詳細手順
(1) まず、「スキン変更」の手順で、スキン変更します。私の場合は Photoフルーツ。
(2) 次に、マイページを開いて、ブラウザーで「名前を付けて保存」もしくは「名前を付けてページを保存」
o htmlファイルの他に、名前の後ろに「_files」が付いたフォルダーも出来ます。
(3) 「_files」が付いたフォルダーの中に、CSSカスタマイズ画面で利用可能な css ファイルがあります。
o 私が見つけたのは、member.css
(4) そのままコピーして貼り付ける事も可能なのですが、そのファイルで合っているかどうか不安です。
o ですので、念の為、以下の手順を使うなどして、文字化け部分を日本語コメントに直します。
(a) Firefox ブラウザーの場合、cssファイルをブラウザーにドロップ。
o すると、文字化け部分が直ります。先頭に、このような記述のあるファイルを見つけます。
----------------
@charset "EUC-JP";
/* ユーザーがカスタマイズ可能なCSS*/
----------------
o 見つかったら、ブラウザー上で「全て選択」「コピー」します。
o CSSカスタマイズ画面に移動して、中身を空にして「貼り付け」ます。
(b) Internet Explorerの場合、cssファイルの拡張子を、cssからtxtに変更します。
o あとは、Firefox ブラウザーと同様の手順です。
o エクスプローラーで「ファイルの拡張子」を変更可能にする方法については、「ファイルの拡張子を変更可能にする」をどうぞ。
(5) 貼り付け終わったら、右上の「プレビュー」で確認。問題がなければ「適用」。
o 後は、満足するまで「CSSカスタマイズ」します。
o 慣れない内は、1箇所ずつ書き換えながら、「プレビュー」「適用」を繰り返します。
o プレビューで間違いに気付いた時は、一度他のページに移動してから戻ってくると、直っています。
**** 3.（背景）画像のアップロードで困ったら
o 背景画像などを使いたい時は、ブラウザーで見ることの出来る場所（インターネット）に置く必要があります。
o 画像を置く場所に困ったら、私は試していませんが、zoome日記に「使いたい画像」を付けて投稿する、という方法が使えそうです。画像のアドレスは、右クリックのプロパティで確認できます。
+ zoome日記に投稿できる最大画像サイズは、縦横640ピクセルでした。それよりも大きな画像は 640ピクセルに縮小されます。
+ この他、プロバイダーと契約する時に、ファイルを置く場所が無料で付いてくる事があります。
**** おまけ. CSSの勉強方法
o CSSは本も出ているくらい有名な技術です。「CSSカスタマイズ」の詳細テクニックについては、検索エンジンなどを駆使して勉強する事も出来ます。
**** メモ
o CSSカスタマイズする時は、最初にバックアップを取るのがおすすめです。
+ 手順は、CSSの入力欄で、右クリックから「すべて選択」「コピー」。
+ メモ帳を開いて、貼り付け、名前を付けて保存。
o プレビューで確認できるのはトップページだけです。
+ 他のページのレイアウトを変更する場合は、「適用」してから確認します。
＝＝
関連ページ：
▼zoome
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeのマイページを簡単に解析する
zoomeマイページをCSSカスタマイズする
▼CSSカスタマイズ - 要素の背景を半透明にする
▼CSSカスタマイズ - 要素を移動させる
(2010年8月5日変更。カタカナ用語の長音追加)
ということで、zoomeマイページの、特殊なカスタマイズ方法をご紹介します。
**** はじめに
o zoome の設定変更で選択できる「スキン変更」。
見栄えは良いのですが、スキンによっては赤文字だったりして、記事を読むのが辛かったりします。
o zoome の設定変更で選択できる「CSS カスタマイズ」。何が出来るのかというと、
文字や背景の色を変えて、読みやすくしたり、
背景画像に、お気に入りのイラストを使ったり、
私のマイページの名刺カードのように、初音ミクを登場させたりできます。
ホラー好きなら、どろんどろんなマイページも作成可能です。私は作りませんが。
でも、「CSS カスタマイズ」のアルファベット呪文の組み立ては、慣れた方でないと大変です。
そこで、私が現在使っている、zoomeのスキンに少し手を加える方法をご紹介します。
以下、例によって自己責任でどうぞ。
**** 1. マイページのカスタマイズ手順について
(1) スキン変更 （1番お手軽。これで満足した方は、下を読む必要はありません。）
o ログインしたら上に出てくるメニューで、「設定変更」。
o 設定変更画面の、左に出てくるメニューで、「スキン変更」。
(2) CSSカスタマイズ （とても難しい）
o 設定変更画面の、左に出てくるメニューで、「CSS カスタマイズ」。
+ zoomeサポート外の手順ですので、zoomeの仕様が変わると、やり直しになるかもしれません。
+ 年に1度あるかないかですので、表示が変になったら、もう一度この手順をやり直します。
(3) 私が使っている方法。スキン変更 + CSSカスタマイズ （やや難しい）
o 「スキン変更」を行います。
+ この手順でお気に入りのマイページが出来た時は、この下を読む必要はありません。
o プラウザーで、出来たマイページを保存します。
o カスタマイズ可能なcssファイルを見つけて「CSSカスタマイズ」の手順で貼り付けます。
o 後は、気が向いた時に改造（＝CSSカスタマイズ）します。
+ zoomeサポート外の手順ですので、zoomeの仕様が変わると、やり直しになるかもしれません。
+ 年に1度あるかないかですので、表示が変になったら、もう一度この手順をやり直します。
**** 2. 私が使っている方法の、詳細手順
(1) まず、「スキン変更」の手順で、スキン変更します。私の場合は Photoフルーツ。
(2) 次に、マイページを開いて、ブラウザーで「名前を付けて保存」もしくは「名前を付けてページを保存」
o htmlファイルの他に、名前の後ろに「_files」が付いたフォルダーも出来ます。
(3) 「_files」が付いたフォルダーの中に、CSSカスタマイズ画面で利用可能な css ファイルがあります。
o 私が見つけたのは、member.css
(4) そのままコピーして貼り付ける事も可能なのですが、そのファイルで合っているかどうか不安です。
o ですので、念の為、以下の手順を使うなどして、文字化け部分を日本語コメントに直します。
(a) Firefox ブラウザーの場合、cssファイルをブラウザーにドロップ。
o すると、文字化け部分が直ります。先頭に、このような記述のあるファイルを見つけます。
----------------
@charset "EUC-JP";
/* ユーザーがカスタマイズ可能なCSS*/
----------------
o 見つかったら、ブラウザー上で「全て選択」「コピー」します。
o CSSカスタマイズ画面に移動して、中身を空にして「貼り付け」ます。
(b) Internet Explorerの場合、cssファイルの拡張子を、cssからtxtに変更します。
o あとは、Firefox ブラウザーと同様の手順です。
o エクスプローラーで「ファイルの拡張子」を変更可能にする方法については、「ファイルの拡張子を変更可能にする」をどうぞ。
(5) 貼り付け終わったら、右上の「プレビュー」で確認。問題がなければ「適用」。
o 後は、満足するまで「CSSカスタマイズ」します。
o 慣れない内は、1箇所ずつ書き換えながら、「プレビュー」「適用」を繰り返します。
o プレビューで間違いに気付いた時は、一度他のページに移動してから戻ってくると、直っています。
**** 3.（背景）画像のアップロードで困ったら
o 背景画像などを使いたい時は、ブラウザーで見ることの出来る場所（インターネット）に置く必要があります。
o 画像を置く場所に困ったら、私は試していませんが、zoome日記に「使いたい画像」を付けて投稿する、という方法が使えそうです。画像のアドレスは、右クリックのプロパティで確認できます。
+ zoome日記に投稿できる最大画像サイズは、縦横640ピクセルでした。それよりも大きな画像は 640ピクセルに縮小されます。
+ この他、プロバイダーと契約する時に、ファイルを置く場所が無料で付いてくる事があります。
**** おまけ. CSSの勉強方法
o CSSは本も出ているくらい有名な技術です。「CSSカスタマイズ」の詳細テクニックについては、検索エンジンなどを駆使して勉強する事も出来ます。
**** メモ
o CSSカスタマイズする時は、最初にバックアップを取るのがおすすめです。
+ 手順は、CSSの入力欄で、右クリックから「すべて選択」「コピー」。
+ メモ帳を開いて、貼り付け、名前を付けて保存。
o プレビューで確認できるのはトップページだけです。
+ 他のページのレイアウトを変更する場合は、「適用」してから確認します。
＝＝
関連ページ：
▼zoome
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeのマイページを簡単に解析する
zoomeマイページをCSSカスタマイズする
▼CSSカスタマイズ - 要素の背景を半透明にする
▼CSSカスタマイズ - 要素を移動させる
(2010年8月5日変更。カタカナ用語の長音追加)
zoomeマイページ。プレビューでの失敗例と対策 - CSSカスタマイズ
zoomeでCSSカスタマイズに挑戦する方向けの情報です。
プレビューで上手く表示されなかった時の対策ポイントを、私なりに纏めてみました。
後日、新しい発見がありましたら、この日記を修正する予定です。暫定情報としてご覧下さい。
**** 予備知識
(1) プレビュー出来る範囲について
o プレビューで確認出来るのは、トップページだけです。
o それ以外のページを確認する時は、適用してから確認します。
(2) プレビューで解決できない場合は、人気の少ない時間帯に、こっそり適用して調査してみると、早く解決する事があります。
(3) CSSのバックアップ手順
o 適用すると元に戻せなくなりますので、修正前にCSSをバックアップします。
o CSSの入力欄を右クリックして、「すべて選択」「コピー」、メモ帳などに「貼り付け」ます。
**** プレビューに失敗する例と対策
** マイページのトップページ以外
o 今の所、トップページ以外のプレビューは未サポートです。適用してから、確認します。
** ブラウザーの内容が以前と変わらない場合
(1) 操作手順の確認
o zoomeのプレビュー画面は、CSSカスタマイズのプレビューボタンを押さないと反映されません。
(2) プレビュー画面の数が多すぎる場合
o プレビューボタンを沢山押すと、画面がどんどん増えます。
o プレビュー画面を増やし過ぎると、古い内容が表示されたり、ブラウザーの動きが変になる事がありました。
o この場合は一度、必要な画面以外を閉じます。それでも駄目なら、この下の手順です。
(3) ブラウザーのキャッシュが悪さしている場合
o ブラウザーにキャッシュは、以前表示したページを記憶して、画面表示を高速にする機能です。
o キャッシュが溜まってくると、たまに判定ミスして、昔の状態で表示する事があります。
o 対応方法：
+ (その1) プレビュー画面を、再読み込みしてみます。
+ (その2) プレビューではなく、適用してみます。それで駄目なら再読み込み。
+ (その3) ブラウザーのキャッシュを削除してから、再確認します。
+ 代表的なブラウザーでの削除方法は「ブラウザーのキャッシュを削除する」
# zoomeでは、プレビュー画面よりもマイページの方が、ブラウザーのキャッシュ不具合に強いです。
# o マイページ： CSSカスタマイズ内容を、HTMLページに直接記載しています。
# o プレビュー画面： CSSカスタマイズ内容を、外部ファイルとして保存します。
(4) CSSのコピーミス
o CSSを全部入れ替える時や、バックアップCSSに戻す時は、CSSの入力欄を空にしてから貼り付けます。
+ CSSの入力欄を右クリックして、「すべて選択」「切り取り（もしくは削除）」、その後にメモ帳などから貼り付け。
(5) 誤字や文法誤り
o CSSを間違えても、エラーメッセージは滅多に出ません。成功した所までCSSを戻してから、修正し直します。
o 良くあるのは誤字。コロン、セミコロン、カンマあたりも要注意です。
o また、cssに日本語が混じっている場合は、「'」（= 一重の引用符）や「"」（= 二重引用符）で括った方が安全です。括り方の例："メイリオ"
(6) 優先順位が高い、他の指定がある
o CSSには少し変わった優先順位があります。変更を加えていく時に要注意です。
o CSSの優先順位は、次のような感じです。
+ 特別なキーワードがあると、最優先します。 !important
+ おおまかな指定よりも、局所的な指定を優先します。例えば、div よりも div.class1 を優先します。
+ 同じ優先順位なら、後から読み込んだものを優先します。
＝＝
関連ページ：
▼CSSカスタマイズ
▼zoome
▼ホームページを作る
▼制作メモ
＞ CSS。他の方の便利メモ
▼CSSを調べる
プレビューで上手く表示されなかった時の対策ポイントを、私なりに纏めてみました。
後日、新しい発見がありましたら、この日記を修正する予定です。暫定情報としてご覧下さい。
**** 予備知識
(1) プレビュー出来る範囲について
o プレビューで確認出来るのは、トップページだけです。
o それ以外のページを確認する時は、適用してから確認します。
(2) プレビューで解決できない場合は、人気の少ない時間帯に、こっそり適用して調査してみると、早く解決する事があります。
(3) CSSのバックアップ手順
o 適用すると元に戻せなくなりますので、修正前にCSSをバックアップします。
o CSSの入力欄を右クリックして、「すべて選択」「コピー」、メモ帳などに「貼り付け」ます。
**** プレビューに失敗する例と対策
** マイページのトップページ以外
o 今の所、トップページ以外のプレビューは未サポートです。適用してから、確認します。
** ブラウザーの内容が以前と変わらない場合
(1) 操作手順の確認
o zoomeのプレビュー画面は、CSSカスタマイズのプレビューボタンを押さないと反映されません。
(2) プレビュー画面の数が多すぎる場合
o プレビューボタンを沢山押すと、画面がどんどん増えます。
o プレビュー画面を増やし過ぎると、古い内容が表示されたり、ブラウザーの動きが変になる事がありました。
o この場合は一度、必要な画面以外を閉じます。それでも駄目なら、この下の手順です。
(3) ブラウザーのキャッシュが悪さしている場合
o ブラウザーにキャッシュは、以前表示したページを記憶して、画面表示を高速にする機能です。
o キャッシュが溜まってくると、たまに判定ミスして、昔の状態で表示する事があります。
o 対応方法：
+ (その1) プレビュー画面を、再読み込みしてみます。
+ (その2) プレビューではなく、適用してみます。それで駄目なら再読み込み。
+ (その3) ブラウザーのキャッシュを削除してから、再確認します。
+ 代表的なブラウザーでの削除方法は「ブラウザーのキャッシュを削除する」
# zoomeでは、プレビュー画面よりもマイページの方が、ブラウザーのキャッシュ不具合に強いです。
# o マイページ： CSSカスタマイズ内容を、HTMLページに直接記載しています。
# o プレビュー画面： CSSカスタマイズ内容を、外部ファイルとして保存します。
(4) CSSのコピーミス
o CSSを全部入れ替える時や、バックアップCSSに戻す時は、CSSの入力欄を空にしてから貼り付けます。
+ CSSの入力欄を右クリックして、「すべて選択」「切り取り（もしくは削除）」、その後にメモ帳などから貼り付け。
(5) 誤字や文法誤り
o CSSを間違えても、エラーメッセージは滅多に出ません。成功した所までCSSを戻してから、修正し直します。
o 良くあるのは誤字。コロン、セミコロン、カンマあたりも要注意です。
o また、cssに日本語が混じっている場合は、「'」（= 一重の引用符）や「"」（= 二重引用符）で括った方が安全です。括り方の例："メイリオ"
(6) 優先順位が高い、他の指定がある
o CSSには少し変わった優先順位があります。変更を加えていく時に要注意です。
o CSSの優先順位は、次のような感じです。
+ 特別なキーワードがあると、最優先します。 !important
+ おおまかな指定よりも、局所的な指定を優先します。例えば、div よりも div.class1 を優先します。
+ 同じ優先順位なら、後から読み込んだものを優先します。
＝＝
関連ページ：
▼CSSカスタマイズ
▼zoome
▼ホームページを作る
▼制作メモ
＞ CSS。他の方の便利メモ
▼CSSを調べる
zoomeマイページをCSSカスタマイズする方法
zoomeの醍醐味の一つ、CSSカスタマイズをする方法です。
難しいのですが、これを覚えると、zoomeのマイページの見栄えを大きく変える事が出来ます。
# CSSカスタマイズは、世界的な技術です。インターネットの他に、書籍を通して勉強する事も出来ます。
#
**** 手順
o zoomeにログインします。
o 上に出てくるメニューから「設定変更」を選びます。
o 設定変更画面になりますので、左に出てくるメニューで「CSS カスタマイズ」。
o CSSカスタマイズの小技については、「▼CSSカスタマイズする方法」
o 修正したら、右上の「プレビュー」を押して確認します。問題がなければ、下にある「適用」ボタン。
+ プレビューで確認出来るのは、トップページだけです。
+ 元に戻したい時は、一度別のページに移動してから、もう一度このページに戻ります。
+ 戻った時には、変更内容も元に戻っています。
o CSSカスタマイズする時は、最初にバックアップを取るのがおすすめです。
+ 手順は、CSSの入力欄で、右クリックから「すべて選択」「コピー」。
+ メモ帳を開いて、「貼り付け」「名前を付けて保存」。
**** メモ
o zoomeサポート外の手順ですので、zoomeの仕様が変わると、やり直しになるかもしれません。
+ 年に1度あるかないかですので、表示が変になったら、もう一度この手順をやり直します。
o CSSカスタマイズの前に、「zoomeマイページの基本デザイン（スキン）を変更する方法」から始めるのがおすすめです。
＝＝
関連ページ：
▼zoome
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ マイページで、zoomeのスキンからCSSカスタマイズする
zoomeマイページの基本デザイン（スキン）を変更する
お目当てのzoomeサークルを簡単に探す
難しいのですが、これを覚えると、zoomeのマイページの見栄えを大きく変える事が出来ます。
# CSSカスタマイズは、世界的な技術です。インターネットの他に、書籍を通して勉強する事も出来ます。
#
**** 手順
o zoomeにログインします。
o 上に出てくるメニューから「設定変更」を選びます。
o 設定変更画面になりますので、左に出てくるメニューで「CSS カスタマイズ」。
o CSSカスタマイズの小技については、「▼CSSカスタマイズする方法」
o 修正したら、右上の「プレビュー」を押して確認します。問題がなければ、下にある「適用」ボタン。
+ プレビューで確認出来るのは、トップページだけです。
+ 元に戻したい時は、一度別のページに移動してから、もう一度このページに戻ります。
+ 戻った時には、変更内容も元に戻っています。
o CSSカスタマイズする時は、最初にバックアップを取るのがおすすめです。
+ 手順は、CSSの入力欄で、右クリックから「すべて選択」「コピー」。
+ メモ帳を開いて、「貼り付け」「名前を付けて保存」。
**** メモ
o zoomeサポート外の手順ですので、zoomeの仕様が変わると、やり直しになるかもしれません。
+ 年に1度あるかないかですので、表示が変になったら、もう一度この手順をやり直します。
o CSSカスタマイズの前に、「zoomeマイページの基本デザイン（スキン）を変更する方法」から始めるのがおすすめです。
＝＝
関連ページ：
▼zoome
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ マイページで、zoomeのスキンからCSSカスタマイズする
zoomeマイページの基本デザイン（スキン）を変更する
お目当てのzoomeサークルを簡単に探す
2010年5月20日木曜日
要素の背景を半透明にする方法その2。半透明後の画像を表示する - CSSカスタマイズ
普通に画像を配置するCSSを作り、ファイル名を半透明後の画像に置き換える方法です。
半透明後の画像を用意する手間がかかる反面、「どのブラウザーを使っても、文字が半透明にならない」利点があります。
CSSのopacityで対応できない時に、おすすめです。
# 次のような場合は、アルファチャンネル付きのPNGファイルを作る方法の方が、簡単です。
# o Internet Exploer 7以上を、表示の前提にしてしまう場合
# o もしくは、Bloggerのように、自分でJavaScriptを追加出来るサイトの場合
# + JavaScriptを使って、今もアクセスがある Internet Explorer 6に対応させる事が出来ます。
**** 半透明後の画像の作り方
(1) 背景に使う画像を用意します。
+ 通常は、ページの背景と要素の背景の2枚です。
(2) 半透明に対応している画像編集ツールを使って、まず、ページの背景を置きます。
+ 私は Adobe Flashで作りましたが、対応しているフリーウェアも色々あるみたいです。
+ Music Makerでも作る事が出来ます。でも、綺麗に作るとなると手間がかかりますので、画像編集ツールを使う方法をおすすめします。
(3) ページの背景を、表示したい透明度で重ねます。
(4) お好みの応じて、透明度を微調整したり、エフェクトなどを加えます。
(5) ファイルに書き出します。
+ 私は、JPEG形式で書き出しました。
+ ページを固定化（background-attachment: fixed;）する場合は、作る画像の縦横の長さを、ページの背景画像と同じにすると、綺麗に画像がつながります。
(6) 後は、普通の画像と同じように指定するだけです。
+ インターネットから見える場所にアップロードして、CSSで、そのファイルを指定します。
**** 使用例
o この文章の背景には、この方法を使いました。
+ 文字が薄くなりませんから、CSSの opacityを使う方法よりも、文章が読み易くなります。
**** メモ
o この方法は、次の場合に相性が良いです。そうでない場合は、他の方法を検討します。
+ ボックスの背景を固定化 ＋ その下の背景も固定化(background-attachment : fixed;)
+ もしくは、ボックスの背景を固定化しない ＋ その下の背景も固定化しない
# 背景の固定化について知りたい方は、「CSS。背景画像固定のポイント」
#
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ アルファチャンネル付きのPNG画像を表示する方法
CSSで透明度を指定する方法。opacity
Flash - 画像を半透明にする
半透明後の画像を用意する手間がかかる反面、「どのブラウザーを使っても、文字が半透明にならない」利点があります。
CSSのopacityで対応できない時に、おすすめです。
# 次のような場合は、アルファチャンネル付きのPNGファイルを作る方法の方が、簡単です。
# o Internet Exploer 7以上を、表示の前提にしてしまう場合
# o もしくは、Bloggerのように、自分でJavaScriptを追加出来るサイトの場合
# + JavaScriptを使って、今もアクセスがある Internet Explorer 6に対応させる事が出来ます。
**** 半透明後の画像の作り方
(1) 背景に使う画像を用意します。
+ 通常は、ページの背景と要素の背景の2枚です。
(2) 半透明に対応している画像編集ツールを使って、まず、ページの背景を置きます。
+ 私は Adobe Flashで作りましたが、対応しているフリーウェアも色々あるみたいです。
+ Music Makerでも作る事が出来ます。でも、綺麗に作るとなると手間がかかりますので、画像編集ツールを使う方法をおすすめします。
(3) ページの背景を、表示したい透明度で重ねます。
(4) お好みの応じて、透明度を微調整したり、エフェクトなどを加えます。
(5) ファイルに書き出します。
+ 私は、JPEG形式で書き出しました。
+ ページを固定化（background-attachment: fixed;）する場合は、作る画像の縦横の長さを、ページの背景画像と同じにすると、綺麗に画像がつながります。
(6) 後は、普通の画像と同じように指定するだけです。
+ インターネットから見える場所にアップロードして、CSSで、そのファイルを指定します。
**** 使用例
o この文章の背景には、この方法を使いました。
+ 文字が薄くなりませんから、CSSの opacityを使う方法よりも、文章が読み易くなります。
**** メモ
o この方法は、次の場合に相性が良いです。そうでない場合は、他の方法を検討します。
+ ボックスの背景を固定化 ＋ その下の背景も固定化(background-attachment : fixed;)
+ もしくは、ボックスの背景を固定化しない ＋ その下の背景も固定化しない
# 背景の固定化について知りたい方は、「CSS。背景画像固定のポイント」
#
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ アルファチャンネル付きのPNG画像を表示する方法
CSSで透明度を指定する方法。opacity
Flash - 画像を半透明にする
CSSで透明度を指定する方法 opacity - CSSカスタマイズ
opacityは、要素の背景を半透明にする、一番簡単な方法です。
o ブラウザーによっては、文字も半透明になります（むしろ、CSS仕様です）ので、指定する透明度によっては、工夫が必要になります。
**** 手順
o 0が透明です。1行目と2行目の単位にご注意下さい。
o 4行ありますが、これは有名どころの複数のブラウザーに対応する為です。
----------------
-ms-filter: "alpha(opacity=70)"; /* 範囲は0-100。Internet Explorer 8 */
filter : alpha(opacity=70); /* 範囲は0-100。Internet Explorer 6, 7 */
-moz-opacity : 0.7; /* 範囲は0-1。古いFirefox/Netscape */
opacity : 0.7; /* 範囲は0-1。Safari3/Opera 9.5/Firefox 3.5/CSS3新標準の予定 */
----------------
o 指定しても半透明にならない場合は、後ろに !importantを付けてみて下さい。優先順位が上がります。
----------------
-ms-filter: "alpha(opacity=70)" !important; /* このような感じで */
----------------
**** メモ
** opacity方式の欠点について
o CSSで透明度を指定した時の欠点は、一部のブラウザー(Firefoxなど）で、文字まで半透明になる事です。
o 私がzoomeマイページをカスタマイズした時は、平行して、日記のタイトルの文字の色を濃くしました。
o それでも文字の薄さを解決できない所には、「半透明後の画像を表示する」「アルファチャンネル付きのPNG画像を表示する」を使う方法があります。
** 1行目の記述について
o Internet Explorer 8の為に、最初の行が必要になりました。
o この行が必要になるのは、最近の規格で厳密に作ったページを表示する時です。
o なお、1行目-ms-filterの値は「"」で囲みます。2行目filterの値は「"」で囲みません。
** -khtml-opacityを載せなかった理由
o Safariブラウザのバージョン1.1 に対応させる為に、-khtml-opacity: 0.7; という書き方があるみたいです。でも、次の理由で、上には載せませんでした。
(1) 現在、この古いバージョンを使っている方は、ほとんど居ないみたいです。
(2) また、このバージョンで-khtml-opacityを指定すると、見栄えが変になる不具合に出会うらしいという情報を、Web検索で見つけました。
(3) そして、to_dkでは、このバージョンでは動作確認していません。
** 参考資料
o ▽Microsoft CSS ベンダー拡張（MSDN）
o ▽Safari の CSS 独自拡張あるいは先行実装など（娘娘飯店しるきぃうぇぶ）
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ 半透明後の画像を表示する
アルファチャンネル付きのPNG画像を表示する
o ブラウザーによっては、文字も半透明になります（むしろ、CSS仕様です）ので、指定する透明度によっては、工夫が必要になります。
**** 手順
o 0が透明です。1行目と2行目の単位にご注意下さい。
o 4行ありますが、これは有名どころの複数のブラウザーに対応する為です。
----------------
-ms-filter: "alpha(opacity=70)"; /* 範囲は0-100。Internet Explorer 8 */
filter : alpha(opacity=70); /* 範囲は0-100。Internet Explorer 6, 7 */
-moz-opacity : 0.7; /* 範囲は0-1。古いFirefox/Netscape */
opacity : 0.7; /* 範囲は0-1。Safari3/Opera 9.5/Firefox 3.5/CSS3新標準の予定 */
----------------
o 指定しても半透明にならない場合は、後ろに !importantを付けてみて下さい。優先順位が上がります。
----------------
-ms-filter: "alpha(opacity=70)" !important; /* このような感じで */
----------------
**** メモ
** opacity方式の欠点について
o CSSで透明度を指定した時の欠点は、一部のブラウザー(Firefoxなど）で、文字まで半透明になる事です。
o 私がzoomeマイページをカスタマイズした時は、平行して、日記のタイトルの文字の色を濃くしました。
o それでも文字の薄さを解決できない所には、「半透明後の画像を表示する」「アルファチャンネル付きのPNG画像を表示する」を使う方法があります。
** 1行目の記述について
o Internet Explorer 8の為に、最初の行が必要になりました。
o この行が必要になるのは、最近の規格で厳密に作ったページを表示する時です。
o なお、1行目-ms-filterの値は「"」で囲みます。2行目filterの値は「"」で囲みません。
** -khtml-opacityを載せなかった理由
o Safariブラウザのバージョン1.1 に対応させる為に、-khtml-opacity: 0.7; という書き方があるみたいです。でも、次の理由で、上には載せませんでした。
(1) 現在、この古いバージョンを使っている方は、ほとんど居ないみたいです。
(2) また、このバージョンで-khtml-opacityを指定すると、見栄えが変になる不具合に出会うらしいという情報を、Web検索で見つけました。
(3) そして、to_dkでは、このバージョンでは動作確認していません。
** 参考資料
o ▽Microsoft CSS ベンダー拡張（MSDN）
o ▽Safari の CSS 独自拡張あるいは先行実装など（娘娘飯店しるきぃうぇぶ）
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ 半透明後の画像を表示する
アルファチャンネル付きのPNG画像を表示する
要素の背景を半透明にする方法 - CSSカスタマイズ
CSSで透明度を指定する方法。opacity
半透明後の画像を表示する方法
アルファチャンネル付きのPNG画像を表示する方法
--------
o 要素の背景を半透明にする方法は、大きく分けて3通りあります。
o それぞれ、長所と短所がありますので、使う場所に適した方法を使います。
**** 考察
o opacityを指定する方法は、
+ 一番簡単です。
+ 但し、要素の中に文字が入っている場合、「半透明にしつつ、文字をくっきり見せる」のは苦手です。
+ ブラウザーによっては、要素の中の文字も一緒に薄くなる事があるからです。（= むしろCSS仕様）
o 半透明後の画像を用意する方法は、
+ 背景画像を透明に近づけても、要素の中の文字が薄くならない長所があります。
+ Internet Explorer 6以前の、古いブラウザーでも同じ表示をさせる事が出来ます。
+ 但し、背景の固定化をページの一部だけで使っている場合、使えない事があります。
+ また、半透明後の画像を用意する分だけ、上の2つの方法よりも手間がかかります。
o アルファチャンネル付きPNG画像の方法は、
+ Internet Explorer 7以降なら、同じ表示をさせる事が出来るみたいです。
+ 時間と共に、半透明後の画像を用意する方法よりも、こちらの方がおすすめになりつつあります。
+ また、JavaScriptが使えるサイトの場合は、Internet Explorer 5.5くらい以降に対応させる事が出来そうです。（AlphaImageLoaderを使います）
o この他に、CSSハックなどを使って、ブラウザー毎に方式を切り替える事も出来ます。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ ▼要素を移動させる
背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
Fireworks - 画像の背景を透明化する
(2010年5月28日追加。半透明後の画像を用意する方法の長所)
半透明後の画像を表示する方法
アルファチャンネル付きのPNG画像を表示する方法
--------
o 要素の背景を半透明にする方法は、大きく分けて3通りあります。
o それぞれ、長所と短所がありますので、使う場所に適した方法を使います。
**** 考察
o opacityを指定する方法は、
+ 一番簡単です。
+ 但し、要素の中に文字が入っている場合、「半透明にしつつ、文字をくっきり見せる」のは苦手です。
+ ブラウザーによっては、要素の中の文字も一緒に薄くなる事があるからです。（= むしろCSS仕様）
o 半透明後の画像を用意する方法は、
+ 背景画像を透明に近づけても、要素の中の文字が薄くならない長所があります。
+ Internet Explorer 6以前の、古いブラウザーでも同じ表示をさせる事が出来ます。
+ 但し、背景の固定化をページの一部だけで使っている場合、使えない事があります。
+ また、半透明後の画像を用意する分だけ、上の2つの方法よりも手間がかかります。
o アルファチャンネル付きPNG画像の方法は、
+ Internet Explorer 7以降なら、同じ表示をさせる事が出来るみたいです。
+ 時間と共に、半透明後の画像を用意する方法よりも、こちらの方がおすすめになりつつあります。
+ また、JavaScriptが使えるサイトの場合は、Internet Explorer 5.5くらい以降に対応させる事が出来そうです。（AlphaImageLoaderを使います）
o この他に、CSSハックなどを使って、ブラウザー毎に方式を切り替える事も出来ます。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ ▼要素を移動させる
背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
Fireworks - 画像の背景を透明化する
(2010年5月28日追加。半透明後の画像を用意する方法の長所)
2010年5月19日水曜日
動画を仕上げる - Music Maker
▼エクスポート（= ファイル書き出し）（= 高画質投稿、HD、H.264エンコード）
--------
今は、「エクスポート」に記事を詰め込んでいます。ブログの引っ越しが落ち着いたら整理するかもしれません。
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ Music Maker 3で追加、削除された動画作成機能
▼映像を加工する
▼Music Makerの動画作成の手引き
▼曲に仕上げる
--------
今は、「エクスポート」に記事を詰め込んでいます。ブログの引っ越しが落ち着いたら整理するかもしれません。
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ Music Maker 3で追加、削除された動画作成機能
▼映像を加工する
▼Music Makerの動画作成の手引き
▼曲に仕上げる
映像を加工する - Music Maker
▼ビデオコントローラー（= 静的エフェクト）
▼オートメーション（= 時間変化可能な、動的エフェクト）
▼テンプレート（= 文字入れ、ビジュアルと、頻出エフェクト設定）
--------
o 最初は、テンプレートで大雑把に設定して、他の2つで微調整する方法がおすすめです。
o 操作に慣れてきたら、ビデオコントローラーやオートメーションを使う時間が、自然に長くなってきます。
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ ▼動画の演出方法について考える
▼動画を仕上げる
▼Music Makerの動画作成の手引き
▼音を加工する
▼オートメーション（= 時間変化可能な、動的エフェクト）
▼テンプレート（= 文字入れ、ビジュアルと、頻出エフェクト設定）
--------
o 最初は、テンプレートで大雑把に設定して、他の2つで微調整する方法がおすすめです。
o 操作に慣れてきたら、ビデオコントローラーやオートメーションを使う時間が、自然に長くなってきます。
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ ▼動画の演出方法について考える
▼動画を仕上げる
▼Music Makerの動画作成の手引き
▼音を加工する
映像素材を並べる - Music Maker
▼アレンジャー（= アレンジメント画面）（= 配置、画面の拡大縮小）
▼テンプレート（= 文字入れ、ビジュアルと、頻出エフェクト設定）
▼ビデオコントローラー - Music Maker 1, 2専用（= 表示位置の調整、重ね合わせ、透明色、アルファ合成）
--------
o 高度な機能も入っているのですが、少し癖があります。
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ ▼映像を加工する
▼Music Makerの動画作成の手引き
▼音素材を並べる
▼テンプレート（= 文字入れ、ビジュアルと、頻出エフェクト設定）
▼ビデオコントローラー - Music Maker 1, 2専用（= 表示位置の調整、重ね合わせ、透明色、アルファ合成）
--------
o 高度な機能も入っているのですが、少し癖があります。
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ ▼映像を加工する
▼Music Makerの動画作成の手引き
▼音素材を並べる
動画作成の手引き - Music Maker
動画作成で戸惑いやすいポイント
イージーモードと詳細モードを切り替える(= Music Maker 2+)
動画の演出について無料で勉強する
古くなった情報
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ ▼映像素材を並べる
▼初音ミク動画を作る
▼Music Makerの作曲の手引き
イージーモードと詳細モードを切り替える(= Music Maker 2+)
動画の演出について無料で勉強する
古くなった情報
＝＝
関連ページ：
▼Music Makerで動画を作る
▼Music Maker
▼制作メモ
＞ ▼映像素材を並べる
▼初音ミク動画を作る
▼Music Makerの作曲の手引き
曲に仕上げる - Music Maker
マスタリングスイート（= 全体の雰囲気を整える）
▼ミキサー（= トラック間のバランス調整）
▼エクスポート（= 音楽ファイルの書き出し）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼他の作曲ツールと連携する
Music Maker 3で追加、削除された作曲機能
▼音を加工する
▼動画を仕上げる
▼ミキサー（= トラック間のバランス調整）
▼エクスポート（= 音楽ファイルの書き出し）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼他の作曲ツールと連携する
Music Maker 3で追加、削除された作曲機能
▼音を加工する
▼動画を仕上げる
音を加工する - Music Maker
▼オーディオエフェクト（= VSTプラグインもこちら）
+ ▼エラスティック・ピッチ = 音程、声質補正とコーラス追加のエフェクト（= ケロ声もこちら）
▼オートメーション（= 時間変化可能な、動的エフェクト）
▼タイムストレッチ・ピッチシフト（= 再生速度や音声の高さの変更）
▼テンプレート（= 頻出エフェクト設定）
音素材の一部分だけを、簡単に使う
大人しい音素材の個性を上げる
インスペクターの使い方（Music Maker 3+）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼曲に仕上げる
▼他の作曲ツールと連携する
▼音素材を作る
▼映像を加工する
+ ▼エラスティック・ピッチ = 音程、声質補正とコーラス追加のエフェクト（= ケロ声もこちら）
▼オートメーション（= 時間変化可能な、動的エフェクト）
▼タイムストレッチ・ピッチシフト（= 再生速度や音声の高さの変更）
▼テンプレート（= 頻出エフェクト設定）
音素材の一部分だけを、簡単に使う
大人しい音素材の個性を上げる
インスペクターの使い方（Music Maker 3+）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼曲に仕上げる
▼他の作曲ツールと連携する
▼音素材を作る
▼映像を加工する
音素材を作る - Music Maker
▼シンセサイザー（= 音やフレーズを作る）
▼MIDI Editor（= 作った音を使う。ドラムマップもこちら）
テキストトゥスピーチ（= 話し声を作る。主にロボ声）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼音を加工する
▼曲に仕上げる
▼音素材を並べる
▼Music Makerの作曲の手引き
▼MIDI Editor（= 作った音を使う。ドラムマップもこちら）
テキストトゥスピーチ（= 話し声を作る。主にロボ声）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼音を加工する
▼曲に仕上げる
▼音素材を並べる
▼Music Makerの作曲の手引き
音素材を並べる - Music Maker
▼アレンジャー（= 音素材を並べる所）
▼サウンドプール（= 音素材の部品棚）
▼ソングメーカー（= 自動作曲）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼音素材を作る
▼音を加工する
▼Music Makerの作曲の手引き
▼映像素材を並べる
▼サウンドプール（= 音素材の部品棚）
▼ソングメーカー（= 自動作曲）
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼音素材を作る
▼音を加工する
▼Music Makerの作曲の手引き
▼映像素材を並べる
デザインの邪魔になる要素への対応方法 - CSSカスタマイズ
CSSカスタマイズをする中で、自由に動かす事の出来ない要素が見つかる事があります。
そのような要素がレイアウトの邪魔をする時は、「表示しない」など、レイアウト以外の所で頑張ります。
例えば、zoomeマイページの場合、次の2つはCSSでは区別できません（= Internet Explorer 6の場合）。
o トップページの「動画のサムネイル（newclip 系の要素）」
o 「投稿の過去ログ（サムネイル表示）」ページ（サムネイルの右下の「すべてを見る」を押した先）
片方を動かすと、もう片方も同じ動きをします。ですので、目指すレイアウトによっては、ごまかす必要が出てきます。
to_dkのzoomeマイページの場合は、とりあえず、レイアウトに困った要素を背景の後ろに配置しました。
div.rightside_w div.newclip_head { position:absolute; z-index:-1; のように。
# この方法よりも、display: none;を使う方法や、text-indent: -9999px; を使う方法の方が有名です。
#
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ 背景画像固定のポイント
CSSで表示の並びを入れ替える。positionと margin
表示を他の要素に重ね合わせる。marginのマイナス指定
周囲に影響を与えずに表示場所を移動させる。position
そのような要素がレイアウトの邪魔をする時は、「表示しない」など、レイアウト以外の所で頑張ります。
例えば、zoomeマイページの場合、次の2つはCSSでは区別できません（= Internet Explorer 6の場合）。
o トップページの「動画のサムネイル（newclip 系の要素）」
o 「投稿の過去ログ（サムネイル表示）」ページ（サムネイルの右下の「すべてを見る」を押した先）
片方を動かすと、もう片方も同じ動きをします。ですので、目指すレイアウトによっては、ごまかす必要が出てきます。
to_dkのzoomeマイページの場合は、とりあえず、レイアウトに困った要素を背景の後ろに配置しました。
div.rightside_w div.newclip_head { position:absolute; z-index:-1; のように。
# この方法よりも、display: none;を使う方法や、text-indent: -9999px; を使う方法の方が有名です。
#
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ 背景画像固定のポイント
CSSで表示の並びを入れ替える。positionと margin
表示を他の要素に重ね合わせる。marginのマイナス指定
周囲に影響を与えずに表示場所を移動させる。position
作曲の手引き - Music Maker
o Music Makerを始める
作曲手順で戸惑いやすいポイント
イージーモードと詳細モードを切り替える(= Music Maker 2+)
メニューから選択出来る「使い方説明」動画
o 作曲について
主な作曲方法
楽譜と実際の音の高さの違いについて
楽譜の全音符と全休符の長さ。その意味が違う時
o VOCALOID連携
初音ミクの歌をMusic Makerに取り込む
初音ミクの声を大きくする。とりあえず編
o その他
性能が低いパソコンで、なるべく快適に動かす
古くなった情報
--------
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼音素材を並べる
▼音素材を作る
▼Music Makerの動画作成の手引き
▼初音ミクの作曲の手引き
作曲手順で戸惑いやすいポイント
イージーモードと詳細モードを切り替える(= Music Maker 2+)
メニューから選択出来る「使い方説明」動画
o 作曲について
主な作曲方法
楽譜と実際の音の高さの違いについて
楽譜の全音符と全休符の長さ。その意味が違う時
o VOCALOID連携
初音ミクの歌をMusic Makerに取り込む
初音ミクの声を大きくする。とりあえず編
o その他
性能が低いパソコンで、なるべく快適に動かす
古くなった情報
--------
＝＝
関連ページ：
▼Music Makerで作曲する
▼Music Maker
▼制作メモ
＞ ▼音素材を並べる
▼音素材を作る
▼Music Makerの動画作成の手引き
▼初音ミクの作曲の手引き
CSSで表示の並びを入れ替える方法。positionと margin - CSSカスタマイズ
position と margin を併用すると、表示の並びを入れ替える事が出来ます。
**** 綺麗に動かす為のポイント
o 上下に移動させたい時は、「高さが決まっている」要素を移動させるのが、ポイントです。
o 左右に移動させたい時は、「幅が決まっている」要素を移動させるのが、ポイントです。
**** 手順
(1) 移動したい要素に、position を指定します。top や leftで位置を決めます。
(2) それだけだと、他の要素が移動しません。margin を使って、後続の要素をずらします。
例：高さ 100px の要素を上に動かす時
+ 移動先を空けます。移動先にある要素に margin-top : 100px; を加算します。
+ 移動元は、穴埋めをします。2通りの方法があります。
(a) 移動する要素の次の要素に margin-top : -100px; を加算します。（上に持ち上げる方法です）
(b) 移動する要素に margin-bottom : -100px; を加算します。（移動する要素の、実質高さを 0にする方法です）
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ デザインの邪魔になる要素への対応方法
周囲に影響を与えずに表示場所を移動させる。position
表示を他の要素に重ね合わせる。marginのマイナス指定
**** 綺麗に動かす為のポイント
o 上下に移動させたい時は、「高さが決まっている」要素を移動させるのが、ポイントです。
o 左右に移動させたい時は、「幅が決まっている」要素を移動させるのが、ポイントです。
**** 手順
(1) 移動したい要素に、position を指定します。top や leftで位置を決めます。
(2) それだけだと、他の要素が移動しません。margin を使って、後続の要素をずらします。
例：高さ 100px の要素を上に動かす時
+ 移動先を空けます。移動先にある要素に margin-top : 100px; を加算します。
+ 移動元は、穴埋めをします。2通りの方法があります。
(a) 移動する要素の次の要素に margin-top : -100px; を加算します。（上に持ち上げる方法です）
(b) 移動する要素に margin-bottom : -100px; を加算します。（移動する要素の、実質高さを 0にする方法です）
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ デザインの邪魔になる要素への対応方法
周囲に影響を与えずに表示場所を移動させる。position
表示を他の要素に重ね合わせる。marginのマイナス指定
周囲に影響を与えずに表示場所を移動させる方法。position - CSSカスタマイズ
移動したい要素に、position を指定します。 top や leftで位置を決めます。
例：マイページの左上にある「ページの名前」だけを移動させる場合
--------
div.contents h2.title_name {
position : relative;
top : 40px;
left : -70px;
}
--------
o レイアウト固定で無い場合、position : relative; と position : absolute; のどちらかを使います。
o しかしながら、どちらも「HTML上の並び方との組み合わせ」によっては予想外の動きをするブラウザーがありました。出来る事なら、複数のブラウザーで表示結果を確認する事をおすすめします。
# ご参考：HTMLクイックリファレンスの「posision」 ▽http://www.htmq.com/style/position.shtml
#
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ CSSで表示の並びを入れ替える。positionと margin
表示を他の要素に重ね合わせる。marginのマイナス指定
デザインの邪魔になる要素への対応方法
例：マイページの左上にある「ページの名前」だけを移動させる場合
--------
div.contents h2.title_name {
position : relative;
top : 40px;
left : -70px;
}
--------
o レイアウト固定で無い場合、position : relative; と position : absolute; のどちらかを使います。
o しかしながら、どちらも「HTML上の並び方との組み合わせ」によっては予想外の動きをするブラウザーがありました。出来る事なら、複数のブラウザーで表示結果を確認する事をおすすめします。
# ご参考：HTMLクイックリファレンスの「posision」 ▽http://www.htmq.com/style/position.shtml
#
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ CSSで表示の並びを入れ替える。positionと margin
表示を他の要素に重ね合わせる。marginのマイナス指定
デザインの邪魔になる要素への対応方法
表示を他の要素に重ね合わせる方法。marginのマイナス指定 - CSSカスタマイズ
表示を他の要素に重ね合わせたい時は、margin のマイナス指定が便利です。
margin-top : -30px; など。
o 必要に応じて、重ね合わせ順を調整します。 z-index を使います。
# z-index を使う場合、 position も指定する必要がありますので、ご注意下さい。
# ご参考：▽HTMLクイックリファレンスの「z-index」
#
**** メモ
o marginのマイナス指定で上に移動すると、後続要素も一緒に移動します。
o その要素だけを移動させたい時は、position を使います。
+ position : relative; top : -30px; など
o 詳しくは
+ 「周囲に影響を与えずに表示場所を移動させる。position」
+ 「表示の並びを入れ替える。positionと marginの併用」
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ 周囲に影響を与えずに表示場所を移動させる。position
CSSで表示の並びを入れ替える。positionと margin
デザインの邪魔になる要素への対応方法
margin-top : -30px; など。
o 必要に応じて、重ね合わせ順を調整します。 z-index を使います。
# z-index を使う場合、 position も指定する必要がありますので、ご注意下さい。
# ご参考：▽HTMLクイックリファレンスの「z-index」
#
**** メモ
o marginのマイナス指定で上に移動すると、後続要素も一緒に移動します。
o その要素だけを移動させたい時は、position を使います。
+ position : relative; top : -30px; など
o 詳しくは
+ 「周囲に影響を与えずに表示場所を移動させる。position」
+ 「表示の並びを入れ替える。positionと marginの併用」
＝＝
関連ページ：
▼要素を移動させる
▼CSSカスタマイズ
▼制作メモ
＞ 周囲に影響を与えずに表示場所を移動させる。position
CSSで表示の並びを入れ替える。positionと margin
デザインの邪魔になる要素への対応方法
zoomeマイページの右と左を区別する方法 - CSSカスタマイズ
同じ名前（idやクラス名）の要素を他のページでも使っていても、そのページの要素だけレイアウト変更出来る場合があります。
zoomeマイページなら、右と左。「右にある名刺カード」と「左にある名刺カード」は、名前が同じでも別のスタイル指定が可能です。
**** 原理
o zoomeマイページの場合、要素の親を辿っていくと、マイページの右にあるか左にあるか、クラス名で指定している要素があります。そのクラス名を利用します。
**** 書き方
o 要素が左側にある場合、幅が広い時は、 div.leftside_w。 幅が狭い時は、div.leftside が必ずあります。
+ 「<div class="leftside_w"」のような書き方をしている所です。
o 要素が右側にある場合、幅が広い時は、 div.rightside_w。 幅が狭い時は、div.rightside が必ずあります。
# 幅が広い方は _w 付き。幅が狭い方は、 _w 無しです。（ 先頭の divは無くても、多分大丈夫です。）
#
**** 具体的な指定例
o トップページ右にあるコメントリスト内容は div.rightside_w .commentlist_body
o 日記ページ左にあるコメントリスト内容は div.leftside_w .commentlist_body
o トップページ左にある名刺カードの内容は div.leftside .name_body
o 日記ページ右にある名刺カードの内容は div.rightside .name_body
**** メモ
o CSSの最新仕様を使うと、更に区別する事が出来ますが、サポートしていないブラウザーがありますので、注意が必要です。
o 例えば、Internet Explorer 6は、今でも良く使われているブラウザーです。（= 2010年5月現在）
o でも、子供セレクター（A > B）は、Internet Explorer 6ではサポートされていません。
o ですから、なるべく多くの人達にみて欲しいサイトでは、Internet Explorer 6でも動くような書き方に改めます。
＝＝
関連ページ：
▼要素を移動させる
▼zoome
▼CSSカスタマイズ
▼制作メモ
＞ 表示を他の要素に重ね合わせる。marginのマイナス指定
＞ zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
周囲に影響を与えずに表示場所を移動させる。position
CSSで表示の並びを入れ替える。positionと margin
デザインの邪魔になる要素への対応方法
（2010年5月25日追加。CSSの最新仕様とブラウザーのサポートについて）
zoomeマイページなら、右と左。「右にある名刺カード」と「左にある名刺カード」は、名前が同じでも別のスタイル指定が可能です。
**** 原理
o zoomeマイページの場合、要素の親を辿っていくと、マイページの右にあるか左にあるか、クラス名で指定している要素があります。そのクラス名を利用します。
**** 書き方
o 要素が左側にある場合、幅が広い時は、 div.leftside_w。 幅が狭い時は、div.leftside が必ずあります。
+ 「<div class="leftside_w"」のような書き方をしている所です。
o 要素が右側にある場合、幅が広い時は、 div.rightside_w。 幅が狭い時は、div.rightside が必ずあります。
# 幅が広い方は _w 付き。幅が狭い方は、 _w 無しです。（ 先頭の divは無くても、多分大丈夫です。）
#
**** 具体的な指定例
o トップページ右にあるコメントリスト内容は div.rightside_w .commentlist_body
o 日記ページ左にあるコメントリスト内容は div.leftside_w .commentlist_body
o トップページ左にある名刺カードの内容は div.leftside .name_body
o 日記ページ右にある名刺カードの内容は div.rightside .name_body
**** メモ
o CSSの最新仕様を使うと、更に区別する事が出来ますが、サポートしていないブラウザーがありますので、注意が必要です。
o 例えば、Internet Explorer 6は、今でも良く使われているブラウザーです。（= 2010年5月現在）
o でも、子供セレクター（A > B）は、Internet Explorer 6ではサポートされていません。
o ですから、なるべく多くの人達にみて欲しいサイトでは、Internet Explorer 6でも動くような書き方に改めます。
＝＝
関連ページ：
▼要素を移動させる
▼zoome
▼CSSカスタマイズ
▼制作メモ
＞ 表示を他の要素に重ね合わせる。marginのマイナス指定
＞ zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
周囲に影響を与えずに表示場所を移動させる。position
CSSで表示の並びを入れ替える。positionと margin
デザインの邪魔になる要素への対応方法
（2010年5月25日追加。CSSの最新仕様とブラウザーのサポートについて）
要素を移動させる - CSSカスタマイズ
zoomeマイページの右と左を区別する
表示を他の要素に重ね合わせる。marginのマイナス指定
周囲に影響を与えずに表示場所を移動させる。position
CSSで表示の並びを入れ替える。positionと margin
デザインの邪魔になる要素への対応方法
--------
o CSSだけで表示の並びを入れ替えたりする方法について、私が使用しているものを纏めました。
o HTMLの並びに縛られない、自由なレイアウトに挑戦したい方は、ご参考にどうぞ。
**** メモ
o この方法が使えないのは携帯電話。今の所、CSSが使えない携帯電話も多いみたいです。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ 背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
▼要素の背景を半透明にする
表示を他の要素に重ね合わせる。marginのマイナス指定
周囲に影響を与えずに表示場所を移動させる。position
CSSで表示の並びを入れ替える。positionと margin
デザインの邪魔になる要素への対応方法
--------
o CSSだけで表示の並びを入れ替えたりする方法について、私が使用しているものを纏めました。
o HTMLの並びに縛られない、自由なレイアウトに挑戦したい方は、ご参考にどうぞ。
**** メモ
o この方法が使えないのは携帯電話。今の所、CSSが使えない携帯電話も多いみたいです。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ 背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
▼要素の背景を半透明にする
2010年5月18日火曜日
Google検索に、日本向けのサイトである事を教える方法 - Blogger
ウェブマスターツールを使うと、Google検索に「私のBloggerブログは日本向けだよ。jpドメインと同じだよ」と教える事が出来ます。
Google検索は、自動的に地域と言語を判定してくれるのですが、このツールで地域を訂正する事が出来ます。
ブログを改善したのに、アクセス数などの手応えがいまいちな方は、このツールを使ってみると、良い事があるかもしれません。
# 言語ではなくて、地域（国）の指定である事に注意して下さい。
# このツールで「日本」と設定すると、海外居住の日本人からは、見つかり難くなるみたいです。
#
**** 手順 （2012年6月版）
o ウェブマスターツールにログインします。
+ Bloggerなどにログインしている場合は、自動認証されます。
+ 詳しくは、「ウェブマスターツールにログインする方法」
o 必要があれば、下記の手順で自分のサイトを登録します。
o そして、下記の手順で地域設定します。
** 自分のサイトを登録します。
o 画面の右側にある、「サイトを追加」ボタンをクリックします。
o 自分のドメイン名を入力します。
+ 「http://」は不要。後ろの「/」以降も不要です。
+ 自分のブログを開いて、コピーして貼り付ける方法が確実です。
** 地域設定します。
o 登録したサイト名をクリックします。
o 左側のメニューから、「設定」-「設定」
o 地域ターゲット欄の、選択肢「ターゲット ユーザーの地域」を「日本」にして、「保存」します。
+ 最初は、地域設定が無くて全世界に開放されています。
o 次に同じ画面を開いた時に、地域ターゲット欄の左横のチェックが付いて、右の選択肢が「日本」の状態になっていましたら、成功です。
＝＝
関連ページ：
▼ウェブマスターツール
▼Bloggerブログの分析とWebサービス連携
▼Blogger
▼制作メモ
＞ ウェブマスターツールの「サイトマップ」画面 = Google検索にページの存在を直接伝える方法
ウェブマスターツールで、Bloggerブログのサイトマップ送信が失敗する時の対応手順
検索エンジンに登録されている自分のページを調べる方法
（2012年6月1日変更。仕様変更対応）
（2010年9月11日変更。事前にBloggerにログインする理由）
（2010年6月11日変更。Bloggerの仕様変更対応）
Google検索は、自動的に地域と言語を判定してくれるのですが、このツールで地域を訂正する事が出来ます。
ブログを改善したのに、アクセス数などの手応えがいまいちな方は、このツールを使ってみると、良い事があるかもしれません。
# 言語ではなくて、地域（国）の指定である事に注意して下さい。
# このツールで「日本」と設定すると、海外居住の日本人からは、見つかり難くなるみたいです。
#
**** 手順 （2012年6月版）
o ウェブマスターツールにログインします。
+ Bloggerなどにログインしている場合は、自動認証されます。
+ 詳しくは、「ウェブマスターツールにログインする方法」
o 必要があれば、下記の手順で自分のサイトを登録します。
o そして、下記の手順で地域設定します。
** 自分のサイトを登録します。
o 画面の右側にある、「サイトを追加」ボタンをクリックします。
o 自分のドメイン名を入力します。
+ 「http://」は不要。後ろの「/」以降も不要です。
+ 自分のブログを開いて、コピーして貼り付ける方法が確実です。
** 地域設定します。
o 登録したサイト名をクリックします。
o 左側のメニューから、「設定」-「設定」
o 地域ターゲット欄の、選択肢「ターゲット ユーザーの地域」を「日本」にして、「保存」します。
+ 最初は、地域設定が無くて全世界に開放されています。
o 次に同じ画面を開いた時に、地域ターゲット欄の左横のチェックが付いて、右の選択肢が「日本」の状態になっていましたら、成功です。
＝＝
関連ページ：
▼ウェブマスターツール
▼Bloggerブログの分析とWebサービス連携
▼Blogger
▼制作メモ
＞ ウェブマスターツールの「サイトマップ」画面 = Google検索にページの存在を直接伝える方法
ウェブマスターツールで、Bloggerブログのサイトマップ送信が失敗する時の対応手順
検索エンジンに登録されている自分のページを調べる方法
（2012年6月1日変更。仕様変更対応）
（2010年9月11日変更。事前にBloggerにログインする理由）
（2010年6月11日変更。Bloggerの仕様変更対応）
Bloggerのサイドバーに、ミク時計（Flashファイル）を置く方法
ミク時計のような Flashファイルを置きたい時は、「HTML/JavaScript」ガジェットを使います。
o Flashファイルの置き場所を、別途用意する必要があります。
o ミク時計は、▽猫牧場カンパニーが配布しているブログパーツです。
**** 手順
o ▽ミク時計の配布ページを開きます。
o ミク時計をダウンロードして、インターネット上のどこかに置きます。
+ 「設置方法」欄の記載通りです。
+ ダウンロードは、「設置方法」欄の右横にある初音ミク画像を右クリックして、「名前を付けてリンク先を保存」します。
+ 念の為、ダウンロードしたファイルやアップロードするファイルは、ウイルスチェックをします。
o Bloggerにログインします。
o 「レイアウト」画面を開きます。
+ ブログの右上にあるリンク「デザイン」を押します。
+ そして、切り替わった画面の左側のメニューから「レイアウト」。
+ ダッシュボードの時は、変更したいブログの「▼」をクリックして、「レイアウト」
o レイアウト画面に切り替わりますので、画面右。サイドバーの位置にある「ガジェットを追加」をクリックします。
o 「HTML/JavaScript」を探して、右上にある「＋」をクリックします。
o 入力画面が出てきますので、入力して「保存」ボタンを押します。
+ タイトルは好きなものを選びます。例えば「ミクさん」など。
+ 下の入力欄は、設置方法の説明に合わせて入力します。書き方はお好みで。
**** メモ
o ブログのソースを見た所、Bloggerは「XHTML 1.0 Strict規格に従っています。」と宣言していました。
o そこで、XHTML規格に合わせた書き方について調べてみました。
** ご参考その１。XHTML規格としては正しい書き方（+ 最近のブラウザなら動くでしょう的な書き方です。）
o 複数ブラウザに対応させる為には、ファイルのアドレス指定を 2箇所に入れる必要があるみたいです。
----------------
<object data="http://(置いた場所を入れます)/mikuclock.swf" width="150" height="180" type="application/x-shockwave-flash">
<param name="movie" value="http://(置いた場所を入れます)/mikuclock.swf" />
<param name="quality" value="high" />
</object>
----------------
** ご参考その２。古いブラウザーでも正しく動く書き方（= XHTML規格としては間違っています。）
o pluginspageを書くと、ブラウザーに Flashが入っていない時に誘導してくれるみたいです。
----------------
<embed src="http://(置いた場所を入れます)/mikuclock.swf" width="150" height="180" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
----------------
** 参考にした資料
o ▽「FlashをXHTMLで表示させるには（embedタグを使わずに表示させるには）」（cyano）
o ▽「マルチメディアファイルを XHTML 文書に埋め込む」（ぽかぽかWeb研究室）
o ▽「<EMBED>」（HTMLタグリファレンス）
＝＝
関連ページ：
▼Bloggerブログのガジェットとサイドバー
▼ブラウザーを初音ミク
▼Blogger
▼制作メモ
＞ HTML/JavaScriptガジェットで、手書きのリンクが上手く貼れない時の確認点
＞ ねんどろいど初音ミクの首関節が折れた時の治療手順
HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
ツール。MikuTime = 誕生日からの経過日数と経過秒数を調べます
(2012年5月7日変更。新デザイン対応、念の為ウイルスチェック推奨)
(2010年6月11日変更。Bloggerの仕様変更対応)
o Flashファイルの置き場所を、別途用意する必要があります。
o ミク時計は、▽猫牧場カンパニーが配布しているブログパーツです。
**** 手順
o ▽ミク時計の配布ページを開きます。
o ミク時計をダウンロードして、インターネット上のどこかに置きます。
+ 「設置方法」欄の記載通りです。
+ ダウンロードは、「設置方法」欄の右横にある初音ミク画像を右クリックして、「名前を付けてリンク先を保存」します。
+ 念の為、ダウンロードしたファイルやアップロードするファイルは、ウイルスチェックをします。
o Bloggerにログインします。
o 「レイアウト」画面を開きます。
+ ブログの右上にあるリンク「デザイン」を押します。
+ そして、切り替わった画面の左側のメニューから「レイアウト」。
+ ダッシュボードの時は、変更したいブログの「▼」をクリックして、「レイアウト」
o レイアウト画面に切り替わりますので、画面右。サイドバーの位置にある「ガジェットを追加」をクリックします。
o 「HTML/JavaScript」を探して、右上にある「＋」をクリックします。
o 入力画面が出てきますので、入力して「保存」ボタンを押します。
+ タイトルは好きなものを選びます。例えば「ミクさん」など。
+ 下の入力欄は、設置方法の説明に合わせて入力します。書き方はお好みで。
**** メモ
o ブログのソースを見た所、Bloggerは「XHTML 1.0 Strict規格に従っています。」と宣言していました。
o そこで、XHTML規格に合わせた書き方について調べてみました。
** ご参考その１。XHTML規格としては正しい書き方（+ 最近のブラウザなら動くでしょう的な書き方です。）
o 複数ブラウザに対応させる為には、ファイルのアドレス指定を 2箇所に入れる必要があるみたいです。
----------------
<object data="http://(置いた場所を入れます)/mikuclock.swf" width="150" height="180" type="application/x-shockwave-flash">
<param name="movie" value="http://(置いた場所を入れます)/mikuclock.swf" />
<param name="quality" value="high" />
</object>
----------------
** ご参考その２。古いブラウザーでも正しく動く書き方（= XHTML規格としては間違っています。）
o pluginspageを書くと、ブラウザーに Flashが入っていない時に誘導してくれるみたいです。
----------------
<embed src="http://(置いた場所を入れます)/mikuclock.swf" width="150" height="180" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
----------------
** 参考にした資料
o ▽「FlashをXHTMLで表示させるには（embedタグを使わずに表示させるには）」（cyano）
o ▽「マルチメディアファイルを XHTML 文書に埋め込む」（ぽかぽかWeb研究室）
o ▽「<EMBED>」（HTMLタグリファレンス）
＝＝
関連ページ：
▼Bloggerブログのガジェットとサイドバー
▼ブラウザーを初音ミク
▼Blogger
▼制作メモ
＞ HTML/JavaScriptガジェットで、手書きのリンクが上手く貼れない時の確認点
＞ ねんどろいど初音ミクの首関節が折れた時の治療手順
HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
ツール。MikuTime = 誕生日からの経過日数と経過秒数を調べます
(2012年5月7日変更。新デザイン対応、念の為ウイルスチェック推奨)
(2010年6月11日変更。Bloggerの仕様変更対応)
初音ミクの、作曲の手引き - 初音ミク
o 初音ミクを始める
初音ミクの使い方で戸惑いやすいポイント
先頭の無音時間を短くする
o テンポと拍子
初音ミクが歌う速さ（= テンポ）を（先頭や途中で）変更する方法
初音ミクが歌う時の拍子を（先頭や途中で）変更する方法
o 音符の操作
Ctrl+ドラッグ = 選択した音符を簡単にコピー移動する
o ハーモニー
初音ミクに和音で歌ってもらう
ミキサーの使い方
レンダリング。性能の低いパソコンで、なるべく快適に再生する
----
o 初音ミクの作曲で、最初に悩んだ事、悩みそうな事をまとめました。
＝＝
関連ページ：
▼初音ミクで作曲する
▼初音ミク
▼制作メモ
＞ ▼初音ミクのトラックと和音
▼初音ミクの発音
▼初音ミクの音程
＋
▼初音ミクの声作り (Music Maker連携)
▼初音ミクの書き出しと作曲ツール連携
▼はちゅねのないしょの使い方特集
▼初音ミクの精神衛生。ねんどろいど初音ミクなど
▼Music Makerの作曲の手引き
初音ミクの使い方で戸惑いやすいポイント
先頭の無音時間を短くする
o テンポと拍子
初音ミクが歌う速さ（= テンポ）を（先頭や途中で）変更する方法
初音ミクが歌う時の拍子を（先頭や途中で）変更する方法
o 音符の操作
Ctrl+ドラッグ = 選択した音符を簡単にコピー移動する
o ハーモニー
初音ミクに和音で歌ってもらう
ミキサーの使い方
レンダリング。性能の低いパソコンで、なるべく快適に再生する
----
o 初音ミクの作曲で、最初に悩んだ事、悩みそうな事をまとめました。
＝＝
関連ページ：
▼初音ミクで作曲する
▼初音ミク
▼制作メモ
＞ ▼初音ミクのトラックと和音
▼初音ミクの発音
▼初音ミクの音程
＋
▼初音ミクの声作り (Music Maker連携)
▼初音ミクの書き出しと作曲ツール連携
▼はちゅねのないしょの使い方特集
▼初音ミクの精神衛生。ねんどろいど初音ミクなど
▼Music Makerの作曲の手引き
初音ミクの精神衛生 - 初音ミク。ねんどろいど初音ミクなど
VOCALOID2 Editorの背景に初音ミクを登場させる
初音ミクの頭を撫でる方法
複数の初音ミクを明確に区別する方法
パソコンの電源を気軽に切れなくなった時の対応方法
ねんどろいど初音ミクの首関節が折れた時の治療手順
--------
o 毎日、声の調整に没頭していると、初音ミクの存在感が膨れ上がる事があります。
o そのような時の、解決策などを纏めました。
＝＝
関連ページ：
▼初音ミクで作曲する
▼家事と健康管理
▼初音ミク
▼制作メモ
＞ ▼初音ミク動画を作る
+
▼初音ミクの作曲の手引き
▼ブラウザーを初音ミク
初音ミク公式画像素材の入手方法と使い方
初音ミクの頭を撫でる方法
複数の初音ミクを明確に区別する方法
パソコンの電源を気軽に切れなくなった時の対応方法
ねんどろいど初音ミクの首関節が折れた時の治療手順
--------
o 毎日、声の調整に没頭していると、初音ミクの存在感が膨れ上がる事があります。
o そのような時の、解決策などを纏めました。
＝＝
関連ページ：
▼初音ミクで作曲する
▼家事と健康管理
▼初音ミク
▼制作メモ
＞ ▼初音ミク動画を作る
+
▼初音ミクの作曲の手引き
▼ブラウザーを初音ミク
初音ミク公式画像素材の入手方法と使い方
初音ミクの声作り - 初音ミク。Music Maker連携
o 豆知識
初音ミクの声を大きくする方法。調整時
ボーカル向け機能について
初音ミクの声の特性
初音ミクのエフェクト特性
初音ミクの声作りの参考になったテンプレート
o 便利な小技
初音ミクの声を滑らかにする
REVERBで、お風呂上りの声を直す
ディエッサーの在り処
初音ミクでリアルなロボット声を作る
初音ミクの声から電子的なコーラスを作る（Music Maker 3+）
初音ミクの声から天使声のコーラスを作る（Music Maker 3+）
フィルター（Filter）プラグインで、初音ミクを少し酔わせる方法。「にゃー」「みゃー」
--------
o 初音ミクの声は、お化粧する事も出来ます。
o お化粧道具には、作曲ツールに付属しているエフェクトや、プラグインを使います。
+ フリーウェアもありますし、道具を自分で作る方も居ます。
＝＝
関連ページ：
▼初音ミクで作曲する
▼Music Makerのオーディオエフェクト
▼初音ミク
▼Music Maker
▼制作メモ
＞ ▼初音ミクの精神衛生。ねんどろいど初音ミクなど
＞ ▼オーディオエフェクト･ラック = 良く使われるエフェクトを積み重ねた画面
▼エッセンシャル・エフェクト = 明るく軽い感じのエフェクト群（Music Maker 3+）
+
▼初音ミクの作曲の手引き
Music Makerのエラスティック・ピッチ = 音程、声質補正とコーラス追加のエフェクト
▼Music Makerのオーディオエフェクト（= VSTプラグインもこちら）
初音ミクの声を大きくする方法。調整時
ボーカル向け機能について
初音ミクの声の特性
初音ミクのエフェクト特性
初音ミクの声作りの参考になったテンプレート
o 便利な小技
初音ミクの声を滑らかにする
REVERBで、お風呂上りの声を直す
ディエッサーの在り処
初音ミクでリアルなロボット声を作る
初音ミクの声から電子的なコーラスを作る（Music Maker 3+）
初音ミクの声から天使声のコーラスを作る（Music Maker 3+）
フィルター（Filter）プラグインで、初音ミクを少し酔わせる方法。「にゃー」「みゃー」
--------
o 初音ミクの声は、お化粧する事も出来ます。
o お化粧道具には、作曲ツールに付属しているエフェクトや、プラグインを使います。
+ フリーウェアもありますし、道具を自分で作る方も居ます。
＝＝
関連ページ：
▼初音ミクで作曲する
▼Music Makerのオーディオエフェクト
▼初音ミク
▼Music Maker
▼制作メモ
＞ ▼初音ミクの精神衛生。ねんどろいど初音ミクなど
＞ ▼オーディオエフェクト･ラック = 良く使われるエフェクトを積み重ねた画面
▼エッセンシャル・エフェクト = 明るく軽い感じのエフェクト群（Music Maker 3+）
+
▼初音ミクの作曲の手引き
Music Makerのエラスティック・ピッチ = 音程、声質補正とコーラス追加のエフェクト
▼Music Makerのオーディオエフェクト（= VSTプラグインもこちら）
初音ミクの音程 - 初音ミク
声の高さを変える
音痴にする
--------
o 初音ミクの歌は、音程が正確だとは限りません。 しかも、音程が不正確な方が、可愛く聞こえる場合があります。
o 声の高さは、手動で微調整する事も出来ます。
＝＝
関連ページ：
▼初音ミクで作曲する
▼初音ミク
▼制作メモ
＞ ▼初音ミクの声作り (Music Maker連携)
▼初音ミクの精神衛生。ねんどろいど初音ミクなど
＋
▼初音ミクの作曲の手引き
音痴にする
--------
o 初音ミクの歌は、音程が正確だとは限りません。 しかも、音程が不正確な方が、可愛く聞こえる場合があります。
o 声の高さは、手動で微調整する事も出来ます。
＝＝
関連ページ：
▼初音ミクで作曲する
▼初音ミク
▼制作メモ
＞ ▼初音ミクの声作り (Music Maker連携)
▼初音ミクの精神衛生。ねんどろいど初音ミクなど
＋
▼初音ミクの作曲の手引き
初音ミクの発音 - 初音ミク
音量を整える
小さな「っ」
「し」などの摩擦音を小さくする
発音のつながりを切る
歌詞に発音記号を入れる
子音を綺麗に発音してもらう
声を時間変化させる
左下。3文字単語の意味と用途
クロスフェード = 2つのトラックの音声を滑らかに切り替える方法
--------
o 初音ミクの発音を訂正する小技です。
o 小技とは別に、どこまで彼女の個性を尊重するのか悩んだりする事もあります。
＝＝
関連ページ：
▼初音ミクで作曲する
▼初音ミク
▼制作メモ
＞ ▼初音ミクの音程
▼初音ミクの声作り (Music Maker連携)
▼初音ミクの精神衛生。ねんどろいど初音ミクなど
＋
▼初音ミクの作曲の手引き
小さな「っ」
「し」などの摩擦音を小さくする
発音のつながりを切る
歌詞に発音記号を入れる
子音を綺麗に発音してもらう
声を時間変化させる
左下。3文字単語の意味と用途
クロスフェード = 2つのトラックの音声を滑らかに切り替える方法
--------
o 初音ミクの発音を訂正する小技です。
o 小技とは別に、どこまで彼女の個性を尊重するのか悩んだりする事もあります。
＝＝
関連ページ：
▼初音ミクで作曲する
▼初音ミク
▼制作メモ
＞ ▼初音ミクの音程
▼初音ミクの声作り (Music Maker連携)
▼初音ミクの精神衛生。ねんどろいど初音ミクなど
＋
▼初音ミクの作曲の手引き
2010年5月17日月曜日
zoomeマイページの基本デザイン（スキン）を変更する方法
投稿サイト「zoome」のマイページを飾り付ける、一番お手軽な方法です。
**** 手順
o zoomeにログインします。
o 上に出てくるメニューから「設定変更」を選びます。
o 設定変更画面になりますので、左に出てくるメニューで「スキン変更」。
o 好きなスキンを選択して、下の「決定」ボタンを押します。
**** メモ
o この手順は、zoomeの推奨手順です。
o zoomeの仕様が変わっても、zoome側で対応してくれると思います。
＝＝
関連ページ：
▼zoome
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeマイページをCSSカスタマイズする
お目当てのzoomeサークルを簡単に探す
マイページで、zoomeのスキンからCSSカスタマイズする
（2011年9月4日変更。zoomeサービス停止対応。不到達リンクの削除など）
**** 手順
o zoomeにログインします。
o 上に出てくるメニューから「設定変更」を選びます。
o 設定変更画面になりますので、左に出てくるメニューで「スキン変更」。
o 好きなスキンを選択して、下の「決定」ボタンを押します。
**** メモ
o この手順は、zoomeの推奨手順です。
o zoomeの仕様が変わっても、zoome側で対応してくれると思います。
＝＝
関連ページ：
▼zoome
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeマイページをCSSカスタマイズする
お目当てのzoomeサークルを簡単に探す
マイページで、zoomeのスキンからCSSカスタマイズする
（2011年9月4日変更。zoomeサービス停止対応。不到達リンクの削除など）
設定画面中にあるCSS入力欄を簡単に辿る方法 - CSSカスタマイズ
CSSカスタマイズ画面のテキスト欄は、行が沢山あって、調べるのが大変です。
そのような時は、ブラウザの検索機能を使います。
o Firebugなどを使って見つけたキーワードを入れて、ぴょんぴょん検索すると快適です。
o 検索欄に貼り付けるだけで、ぴょんぴょん出来ます。
**** ブラウザの検索機能の場所
o Internet Explorerと Firefoxの場合
+ 上部メニューの「編集」。出てくる選択肢の一番下にあります。
o Google Chromeと Safariの場合
+ 右上にある紙のアイコンをクリックします。出てくる選択肢から「ページ内検索」もしくは「検索」。
o Operaの場合
+ 左上にあるOperaマークをクリックして、「ページ」-「ページ内検索」。
**** メモ
o 一望したい時には、入力欄の内容をコピーして、メモ帳に貼り付ける方法もあります。
o 「すべてを選択」「コピー」して、メモ帳などに貼り付けます。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
「ソースの表示」から CSSを見つける
CSS用語の意味を簡単に調べる
WebページからCSSの要素名を簡単に見つける - Firebug
そのような時は、ブラウザの検索機能を使います。
o Firebugなどを使って見つけたキーワードを入れて、ぴょんぴょん検索すると快適です。
o 検索欄に貼り付けるだけで、ぴょんぴょん出来ます。
**** ブラウザの検索機能の場所
o Internet Explorerと Firefoxの場合
+ 上部メニューの「編集」。出てくる選択肢の一番下にあります。
o Google Chromeと Safariの場合
+ 右上にある紙のアイコンをクリックします。出てくる選択肢から「ページ内検索」もしくは「検索」。
o Operaの場合
+ 左上にあるOperaマークをクリックして、「ページ」-「ページ内検索」。
**** メモ
o 一望したい時には、入力欄の内容をコピーして、メモ帳に貼り付ける方法もあります。
o 「すべてを選択」「コピー」して、メモ帳などに貼り付けます。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
「ソースの表示」から CSSを見つける
CSS用語の意味を簡単に調べる
WebページからCSSの要素名を簡単に見つける - Firebug
「ソースの表示」からCSSを見つける方法 - CSSカスタマイズ
CSSカスタマイズをする時に、一通りCSSを眺めたくなった事はありませんか。
CSSをざっと眺めたい時は、ブラウザーに付いている「ソースの表示」を使います。
**** おおまかな手順（例： zoomeマイページ）
o ブラウザーの右クリックで「ソースの表示」もしくは「ページのソースを表示」を選びます。
o zoomeの場合、最初の <style type="text/css">
から
</style> までが、CSSカスタマイズ結果です。その他の例は、下のメモをご覧下さい。
o zoomeマイページのソースを Internet Explorer 7で見ると、日本語部分が文字化けします。Firefoxなど他のブラウザーを試してみる事をおすすめします。
Internet Explorer 8 で見ると正常に見えました。但し、/******* てすと */ のようなコメントは、コメントの途中で改行されました。読む時には少し慣れが必要みたいです。
**** CSSの見つけ方。完全版。
o 2種類の書き方があります。
o 複数回使ったり、併用している事もあります。ソースを眺める時は一通り確認します。
** Webページ（= HTML）の中に直接書く方法
----------------
<style type="text/css">
.body { font-size : 12px; }
h3 { background-color : skyblue; }
</style>
----------------
o この場合は、「<style type="text/css">」から「</style>」までがCSSです。
** CSSを別のファイル（= 外部ファイル）に書いている場合
----------------
<link href="test1.css" rel="stylesheet" type="text/css">
----------------
o この場合は、一旦Webページを保存して、保存した時に出来たフォルダーの中からCSSファイルを見つける方法が、多分一番簡単です。
**** おまけ。Webページをファイルとして保存する方法
# 日本の著作権法が改正されて、インターネット上のファイルを保存する事(= ダウンロード)が違法行為になるケースが生まれました。
# 法律は今後も変わるかもしれません。以下の手順を使う時は、使う時点での法律にもご注意下さい。
** Internet Explorerの場合
o ブラウザー上部のメニューから、「名前を付けて保存」。
+ 出てくる画面で、ファイルの種類を「Webページ、完全」に変更します。
+ ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。
** Firefoxの場合
o ブラウザー上部のメニューから、「名前を付けてページを保存」。
o もしくは、表示されているページの右クリックからも選択出来ます。
+ 出てくる画面で、ファイルの種類を「Webページ、完全」に変更します。
+ ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。
** Google Chromeの場合
o 表示されているページを右クリックして「名前を付けて保存」。
+ 出てくる画面で、ファイルの種類を「ウェブページ、完全」に変更します。
+ ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。
** その他
o Safariと Operaは、ファイルを個別保存する方法が見つかりませんでした。
o CSSのアドレス（URL）を直接指定すると、内容表示出来るかもしれません。（= 試していません）
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ 設定画面中にある CSS入力欄を簡単に辿る
CSS用語の意味を簡単に調べる
WebページからCSSの要素名を簡単に見つける - Firebug
(2010年8月5日変更。カタカナ用語の長音追加)
CSSをざっと眺めたい時は、ブラウザーに付いている「ソースの表示」を使います。
**** おおまかな手順（例： zoomeマイページ）
o ブラウザーの右クリックで「ソースの表示」もしくは「ページのソースを表示」を選びます。
o zoomeの場合、最初の <style type="text/css">
から
</style> までが、CSSカスタマイズ結果です。その他の例は、下のメモをご覧下さい。
o zoomeマイページのソースを Internet Explorer 7で見ると、日本語部分が文字化けします。Firefoxなど他のブラウザーを試してみる事をおすすめします。
Internet Explorer 8 で見ると正常に見えました。但し、/******* てすと */ のようなコメントは、コメントの途中で改行されました。読む時には少し慣れが必要みたいです。
**** CSSの見つけ方。完全版。
o 2種類の書き方があります。
o 複数回使ったり、併用している事もあります。ソースを眺める時は一通り確認します。
** Webページ（= HTML）の中に直接書く方法
----------------
<style type="text/css">
.body { font-size : 12px; }
h3 { background-color : skyblue; }
</style>
----------------
o この場合は、「<style type="text/css">」から「</style>」までがCSSです。
** CSSを別のファイル（= 外部ファイル）に書いている場合
----------------
<link href="test1.css" rel="stylesheet" type="text/css">
----------------
o この場合は、一旦Webページを保存して、保存した時に出来たフォルダーの中からCSSファイルを見つける方法が、多分一番簡単です。
**** おまけ。Webページをファイルとして保存する方法
# 日本の著作権法が改正されて、インターネット上のファイルを保存する事(= ダウンロード)が違法行為になるケースが生まれました。
# 法律は今後も変わるかもしれません。以下の手順を使う時は、使う時点での法律にもご注意下さい。
** Internet Explorerの場合
o ブラウザー上部のメニューから、「名前を付けて保存」。
+ 出てくる画面で、ファイルの種類を「Webページ、完全」に変更します。
+ ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。
** Firefoxの場合
o ブラウザー上部のメニューから、「名前を付けてページを保存」。
o もしくは、表示されているページの右クリックからも選択出来ます。
+ 出てくる画面で、ファイルの種類を「Webページ、完全」に変更します。
+ ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。
** Google Chromeの場合
o 表示されているページを右クリックして「名前を付けて保存」。
+ 出てくる画面で、ファイルの種類を「ウェブページ、完全」に変更します。
+ ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。
** その他
o Safariと Operaは、ファイルを個別保存する方法が見つかりませんでした。
o CSSのアドレス（URL）を直接指定すると、内容表示出来るかもしれません。（= 試していません）
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ 設定画面中にある CSS入力欄を簡単に辿る
CSS用語の意味を簡単に調べる
WebページからCSSの要素名を簡単に見つける - Firebug
(2010年8月5日変更。カタカナ用語の長音追加)
2010年5月16日日曜日
Firebug = WebページからCSSの要素名を簡単に見つける方法 - CSSカスタマイズ
要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です。
o Firefoxブラウザー ▽http://mozilla.jp/firefox/
o Firebug アドオン ▽https://addons.mozilla.org/ja/firefox/addon/1843
**** Webページのデータ構造の調べ方 = Firebug バージョン1.5.3の場合
(1) 最初に、Firefoxブラウザーで、調べたいマイページを表示します。
(2) ブラウザー右下にある「虫のアイコン」をクリックします。
(3) 下からメニューなどが出てきますので、左から2番目。矢印の付いたアイコンをクリックします。
+ このアイコンにマウスカーソルを合わせると、「ページ内の調べたい要素をクリックしてください」と表示されます。
(4) 調べたいマイページの調べたい所に、マウスカーソルを合わせます。
(5) 確定したい時は、クリック、もしくは右クリックします。
+ 左下の画面は「対応するHTML」、右下の画面に「対応するCSS」が表示されています。
(6) 入れ子が細かい時は、左下のタグを辿って微調整します。
+ 選択範囲の切り替えは、「<の少し右側をクリック」が簡単です。
(7) 右下の画面に、現在有効な CSSが表示されています。
+ レイアウトタブで、隙間の確認。DOMタブで、HTMLの細かい設定値の確認が出来ます。
(8) 要素の名前をコピーしたい時は、例えば
<div id="aaa" class="bbb">
なら aaa や bbb をクリックします。すると、右クリックからコピーできるようになります。
+ CSSでの書き方は、 div#aaa もしくは div.bbb
+ div以外のタグで使用していない名前の場合、 div は省略可能です。
(9) Firebug画面を閉じたい時は、一番右のボタンを押します。
+ 赤いボタンが3つ並んでいますが、一番右端のボタンです。
+ マウスカーソルを合わせると説明が現れます。
(10) 間違えて操作してしまった場合でも、大丈夫です。
+ Firebugを使ってCSSを修正しても、ブラウザー上の表示が変わるだけです。
+ もう一度表示すると、画面は元に戻っています。
**** メモ
o 取り出した名前を実際に使う時は、適用対象となるページにも注目します。
+ 例えば、zoomeの場合、マイページ全体で1つのCSSを使います。
+ コメントリストは、トップページと日記ページで登場します。それらを区別したい時は名前の指定を工夫します。
+ 他のサイトも概ね同じですが、Bloggerのように、投稿記事内にCSSを書く小技が使える所もあります。
o 名前の特殊な指定方法については「zoomeマイページの右と左を区別する」。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ CSS用語の意味を簡単に調べる
zoomeのマイページを簡単に解析する
「ソースの表示」から CSSを見つける
設定画面中にある CSS入力欄を簡単に辿る
o Firefoxブラウザー ▽http://mozilla.jp/firefox/
o Firebug アドオン ▽https://addons.mozilla.org/ja/firefox/addon/1843
**** Webページのデータ構造の調べ方 = Firebug バージョン1.5.3の場合
(1) 最初に、Firefoxブラウザーで、調べたいマイページを表示します。
(2) ブラウザー右下にある「虫のアイコン」をクリックします。
(3) 下からメニューなどが出てきますので、左から2番目。矢印の付いたアイコンをクリックします。
+ このアイコンにマウスカーソルを合わせると、「ページ内の調べたい要素をクリックしてください」と表示されます。
(4) 調べたいマイページの調べたい所に、マウスカーソルを合わせます。
(5) 確定したい時は、クリック、もしくは右クリックします。
+ 左下の画面は「対応するHTML」、右下の画面に「対応するCSS」が表示されています。
(6) 入れ子が細かい時は、左下のタグを辿って微調整します。
+ 選択範囲の切り替えは、「<の少し右側をクリック」が簡単です。
(7) 右下の画面に、現在有効な CSSが表示されています。
+ レイアウトタブで、隙間の確認。DOMタブで、HTMLの細かい設定値の確認が出来ます。
(8) 要素の名前をコピーしたい時は、例えば
<div id="aaa" class="bbb">
なら aaa や bbb をクリックします。すると、右クリックからコピーできるようになります。
+ CSSでの書き方は、 div#aaa もしくは div.bbb
+ div以外のタグで使用していない名前の場合、 div は省略可能です。
(9) Firebug画面を閉じたい時は、一番右のボタンを押します。
+ 赤いボタンが3つ並んでいますが、一番右端のボタンです。
+ マウスカーソルを合わせると説明が現れます。
(10) 間違えて操作してしまった場合でも、大丈夫です。
+ Firebugを使ってCSSを修正しても、ブラウザー上の表示が変わるだけです。
+ もう一度表示すると、画面は元に戻っています。
**** メモ
o 取り出した名前を実際に使う時は、適用対象となるページにも注目します。
+ 例えば、zoomeの場合、マイページ全体で1つのCSSを使います。
+ コメントリストは、トップページと日記ページで登場します。それらを区別したい時は名前の指定を工夫します。
+ 他のサイトも概ね同じですが、Bloggerのように、投稿記事内にCSSを書く小技が使える所もあります。
o 名前の特殊な指定方法については「zoomeマイページの右と左を区別する」。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ CSS用語の意味を簡単に調べる
zoomeのマイページを簡単に解析する
「ソースの表示」から CSSを見つける
設定画面中にある CSS入力欄を簡単に辿る
zoomeのマイページを簡単に解析する方法 - CSSカスタマイズ
zoomeのマイページをCSSカスタマイズをする時は、マイページの解析が必要になります。
o CSSカスタマイズしたい要素の名前を特定する
o 今、利用しているスタイルの意味を調べる
そこで、私が使用しているCSS解析方法を纏めてみました。CSSカスタマイズにかける時間を短縮したい方は、ご参考にどうぞ。
要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です。
HTMLや CSSをざっと眺めたい時は、「ソースの表示」です。
CSS用語の意味を調べる時は、「css」付きのWeb検索が便利です。
CSSカスタマイズ画面での単語探しは、ブラウザーの検索機能が便利です。
＝＝
関連ページ：
▼CSSを調べる
▼zoome
▼CSSカスタマイズ
▼制作メモ
＞ WebページからCSSの要素名を簡単に見つける - Firebug
＞ zoomeマイページの右と左を区別する
マイページで、zoomeのスキンからCSSカスタマイズする
o CSSカスタマイズしたい要素の名前を特定する
o 今、利用しているスタイルの意味を調べる
そこで、私が使用しているCSS解析方法を纏めてみました。CSSカスタマイズにかける時間を短縮したい方は、ご参考にどうぞ。
要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です。
HTMLや CSSをざっと眺めたい時は、「ソースの表示」です。
CSS用語の意味を調べる時は、「css」付きのWeb検索が便利です。
CSSカスタマイズ画面での単語探しは、ブラウザーの検索機能が便利です。
＝＝
関連ページ：
▼CSSを調べる
▼zoome
▼CSSカスタマイズ
▼制作メモ
＞ WebページからCSSの要素名を簡単に見つける - Firebug
＞ zoomeマイページの右と左を区別する
マイページで、zoomeのスキンからCSSカスタマイズする
CSS用語の意味を簡単に調べる方法 - CSSカスタマイズ
CSS用語の意味を調べる時は、「css」付きのWeb検索が便利です。
ブラウザーの右上の入力欄にキーワードを入れて、検索します。
**** 手順
----------------
.body {
font-size : 12px;
background-color : skyblue;
}
----------------
o この場合の検索キーワードは
+ 「css font-size」
+ 「css background-color」
o コロンの左側にある単語で検索します。
**** メモ
o Web検索すると、CSS辞典に載っていない情報も、見つける事が出来ます。
+ 例えば、ブラウザーの対応状況や不具合など。
+ 気に入ったホームページを見つけたらブックマークしましょう。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ 「ソースの表示」から CSSを見つける
WebページからCSSの要素名を簡単に見つける - Firebug
設定画面中にある CSS入力欄を簡単に辿る
ブラウザーの右上の入力欄にキーワードを入れて、検索します。
**** 手順
----------------
.body {
font-size : 12px;
background-color : skyblue;
}
----------------
o この場合の検索キーワードは
+ 「css font-size」
+ 「css background-color」
o コロンの左側にある単語で検索します。
**** メモ
o Web検索すると、CSS辞典に載っていない情報も、見つける事が出来ます。
+ 例えば、ブラウザーの対応状況や不具合など。
+ 気に入ったホームページを見つけたらブックマークしましょう。
＝＝
関連ページ：
▼CSSを調べる
▼CSSカスタマイズ
▼制作メモ
＞ 「ソースの表示」から CSSを見つける
WebページからCSSの要素名を簡単に見つける - Firebug
設定画面中にある CSS入力欄を簡単に辿る
CSSカスタマイズする方法
「世界で最も自分色」。ページデザインを改造して、世界に向けて自慢してみませんか。
o 基本操作
▼CSSを調べる
CSSカスタマイズ画面の開き方 ( Blogger / @wiki )
o CSSを書く
▼要素の背景を半透明にする
▼要素を移動させる（表示の並びを入れ替える）
背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
o CSSを仕上げる
多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
o 便利リンク
CSS。他の方の便利メモ
**** 便利な道具
o メモ帳 （＝テキストエディタなら、何でもOKです）
+ CSSをバックアップする時は、メモ帳にCSSを貼り付けて、名前を付けて保存。
+ （例外もあります。Bloggerの場合、「テンプレートをすべてダウンロード」を使います。）
+ 本格的にCSSカスタマイズしたい方には、メモ帳よりも CSSの用語を色付き表示してくれるものをおすすめしたいです。でも、私はメモ帳で済ませていますので、紹介できませんでした。
o Firefox ブラウザーのアドイン「Firebug」
+ 私がマイページを解析する時は、ほとんどこれに頼っています。
o ブラウザーの検索機能
+ 修正の度に、上から調べるのは大変です。
+ Firebugで見つけた場所（＝要素）の名前を検索して、ちょこっと修正。
**** 新着
o 2010年6月20日日曜日 Bloggerのスキン（デザイン）を変更する方法
＝＝
関連ページ：
▼ホームページを作る
▼制作メモ
▼目次
＞ ▼Windows
▼Bloggerブログ
▼@wiki
▼zoome
o 基本操作
▼CSSを調べる
CSSカスタマイズ画面の開き方 ( Blogger / @wiki )
o CSSを書く
▼要素の背景を半透明にする
▼要素を移動させる（表示の並びを入れ替える）
背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
o CSSを仕上げる
多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
o 便利リンク
CSS。他の方の便利メモ
**** 便利な道具
o メモ帳 （＝テキストエディタなら、何でもOKです）
+ CSSをバックアップする時は、メモ帳にCSSを貼り付けて、名前を付けて保存。
+ （例外もあります。Bloggerの場合、「テンプレートをすべてダウンロード」を使います。）
+ 本格的にCSSカスタマイズしたい方には、メモ帳よりも CSSの用語を色付き表示してくれるものをおすすめしたいです。でも、私はメモ帳で済ませていますので、紹介できませんでした。
o Firefox ブラウザーのアドイン「Firebug」
+ 私がマイページを解析する時は、ほとんどこれに頼っています。
o ブラウザーの検索機能
+ 修正の度に、上から調べるのは大変です。
+ Firebugで見つけた場所（＝要素）の名前を検索して、ちょこっと修正。
**** 新着
o 2010年6月20日日曜日 Bloggerのスキン（デザイン）を変更する方法
＝＝
関連ページ：
▼ホームページを作る
▼制作メモ
▼目次
＞ ▼Windows
▼Bloggerブログ
▼@wiki
▼zoome
MySpace。プロフィール画面をカスタマイズする方法
CSSカスタマイズ画面の開き方 ▲
2010年のアップデートで、MySpaceの特徴だった CSSカスタマイズ機能は使えなくなりました。（<style>タグが禁止になりました。）
その代わり、表示要素を部品として再配置する機能が加わりました。
o 確認したのはアーティストプロフィールです。多分、他のプロフィールも同じだと思います。
**** プロフィール画面のカスタマイズ手順
o MySpaceにログインします。
o プロフィール画面を開きます。
+ 上のメニューから「プロフィール」
o プロフィール欄の名前の右にある「カスタマイズ」ボタンを押します。
o 小さな縦長画面が出てきますので、下のように操作します。
o 操作が終わったら、小さな縦長画面の右下にある「プロフィールに反映」ボタンをクリックします。
+ 操作途中の場合は、一旦保存する事も出来ます。
+ 上にあるｘ印をクリックします。質問してきますので、「保存する（後で公開）」を選びます。
** 壁紙を変更したい時
o 小さな縦長画面から、左側にある「テーマを選択」という文字をクリックします。
o そして、好きなデザインを選びます。
o 自作の壁紙を使用したい時は、「自分でテーマを作成」という文字をクリックします。
** ページの上に画像などを追加したい時
o 小さな縦長画面から、左側にある「レイアウト変更」という文字をクリックします。
o レイアウトが変わります。小さな画面をそのままにして、カーソルを、追加された部品の上に乗せます。
o アイコンなどが浮かびます。
+ 歯車のような「設定」アイコンをクリック。
+ 内容を編集します。HTMLで記述します。
** 部品を追加したい時
o 小さな縦長画面から「パーツ」という文字をクリックします。
o 使用出来るパーツの一覧が表示されますので、「追加」もしくは「さらに追加」をクリック。
+ YouTube動画を貼り付けたい時は、「HTMLボックス」を選びます。
o 小さな縦長画面をそのままにして、追加された部品を探して、カーソルをその部品の上に乗せます。
o アイコンなどが浮かびます。
+ 編集が必要な時は、歯車のような「設定」アイコンをクリックします。
+ 出てくる画面で編集します。
+ 移動したい時は、部品の上にある横バーをドラッグします。
+ ドラッグ = クリックしたまま移動します。
+ 横バーでなくても、掴む事が出来たら移動出来ます。
** 部品を削除したい時
o 小さな縦長画面をそのままにして、カーソルを、削除したい部品の上に乗せます。
o アイコンなどが浮かびますので、歯車アイコンの右隣にある、ｘ印をクリックします。
o 「パーツを削除してもよろしいですか」のような質問が出てきますので、「はい」を選択します。
＝＝
関連ページ：
▼CSSカスタマイズ画面の開き方
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
（2011年1月16日変更。MySpaceの仕様変更対応。タイトルからCSSの字を削除）
2010年5月15日土曜日
perlのバージョンを確認する方法
2通りあります。
**** 目視確認に向いている方法
o コマンドプロンプト画面を開いて（Windowsの場合）、下のように打ってEnterキーを押します。
----------------
perl -v
----------------
o 著作権情報などが一緒に表示されますので、目視確認に向いています。
o perlは見つかりません、のようなメッセージが出る場合は、perlプログラムのある場所に移動してみます。
o 例えば、 d:\perl にインストールした時は
----------------
D:
CD perl
CD bin
perl -v
----------------
o (間の2行は CD d:\perl\bin としてもOKです)
**** perlの変数「$]」を使う方法
----------------
perl -e "print $]"
----------------
o 「perl -v」の時とは、表示形式が異なります。
o 他の情報が表示されませんので、バージョン情報だけ取り出したい時に便利です。
**** メモ
レンタルサーバーに入っているperlは、最新版とは限りません。
perlプログラムを作る時は、最初にperlのバージョンを確認して、そのバージョンで動くようにプログラムを書きます。
＝＝
関連ページ：
▼UNIX
▼コンピューター・プログラムを作る
▼制作メモ
＞ ▼AWK
(2010年6月22日変更。用語の訂正。実行キー -> Enterキー)
**** 目視確認に向いている方法
o コマンドプロンプト画面を開いて（Windowsの場合）、下のように打ってEnterキーを押します。
----------------
perl -v
----------------
o 著作権情報などが一緒に表示されますので、目視確認に向いています。
o perlは見つかりません、のようなメッセージが出る場合は、perlプログラムのある場所に移動してみます。
o 例えば、 d:\perl にインストールした時は
----------------
D:
CD perl
CD bin
perl -v
----------------
o (間の2行は CD d:\perl\bin としてもOKです)
**** perlの変数「$]」を使う方法
----------------
perl -e "print $]"
----------------
o 「perl -v」の時とは、表示形式が異なります。
o 他の情報が表示されませんので、バージョン情報だけ取り出したい時に便利です。
**** メモ
レンタルサーバーに入っているperlは、最新版とは限りません。
perlプログラムを作る時は、最初にperlのバージョンを確認して、そのバージョンで動くようにプログラムを書きます。
＝＝
関連ページ：
▼UNIX
▼コンピューター・プログラムを作る
▼制作メモ
＞ ▼AWK
(2010年6月22日変更。用語の訂正。実行キー -> Enterキー)
迷惑電話をかけてくる相手を調べる方法 - Windows
私が使っているのは、2種類の方法です。
o 迷惑電話に関する情報交換サイトを使って探してみる方法
+ 「迷惑電話番号サーチズ」が便利でした。 ▽http://www.meiwaku.com/
o かけてきた電話番号でWeb検索する方法
+ ハイフン有りとハイフン無しの、2パターンで検索します。
+ ヒットしない時は、個人ブログに強い▽Google検索がおすすめです。
間違いや古くなった情報も混じっているかもしれませんが、ご参考情報として役立ちます。
**** メモ
o 迷惑電話は、夜中にかかって来る事もあります。
o ですから、電話機を購入する時は、迷惑電話対策機能が付いている機種がおすすめです。
+ 例えば、留守番電話のおやすみ（= 消音）機能、電話番号要求、着信拒否リスト。
o 何度もかかってくる迷惑電話は、着信拒否リストに入れましょう。家に居る時間帯、居ない時間帯を、相手に教える必要はありません。
o 迷惑電話は、作品制作を阻害する要因の一つです。気になる事は早く片付けて、作品制作出来る時間を増やしましょう。
＝＝
関連ページ：
▼Windows
▼ホームページを作る
▼制作メモ
＞ 架空請求メールについて調べる
▼UNIX
o 迷惑電話に関する情報交換サイトを使って探してみる方法
+ 「迷惑電話番号サーチズ」が便利でした。 ▽http://www.meiwaku.com/
o かけてきた電話番号でWeb検索する方法
+ ハイフン有りとハイフン無しの、2パターンで検索します。
+ ヒットしない時は、個人ブログに強い▽Google検索がおすすめです。
間違いや古くなった情報も混じっているかもしれませんが、ご参考情報として役立ちます。
**** メモ
o 迷惑電話は、夜中にかかって来る事もあります。
o ですから、電話機を購入する時は、迷惑電話対策機能が付いている機種がおすすめです。
+ 例えば、留守番電話のおやすみ（= 消音）機能、電話番号要求、着信拒否リスト。
o 何度もかかってくる迷惑電話は、着信拒否リストに入れましょう。家に居る時間帯、居ない時間帯を、相手に教える必要はありません。
o 迷惑電話は、作品制作を阻害する要因の一つです。気になる事は早く片付けて、作品制作出来る時間を増やしましょう。
＝＝
関連ページ：
▼Windows
▼ホームページを作る
▼制作メモ
＞ 架空請求メールについて調べる
▼UNIX