2010年5月22日土曜日

マイページで、zoomeのスキンからCSSカスタマイズする方法

zoome
作曲や動画制作に慣れてきたら、作品の置き場所(マイページ)の雰囲気にも拘ってみたいですよね。
ということで、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日変更。カタカナ用語の長音追加)