マイページで、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日変更。カタカナ用語の長音追加)