2007年 02月 20日 ( Tue)
せっかくカスタマイズできたのでアクセス解析のタグも貼ってみましょう♪ アクセス解析はいろいろあります。fc2さんでも提供されていますし、『アクセス解析』でウェブ検索すると無料サービスがいろいろ出てくると思いますよd(^^*)
『初めてのココログ・カスタマイズ』さんでも『アクセス解析を設置してみよう』で説明されていますので参考にして下さいm(__o)m
利用するアクセス解析が決まったら、タグを発行していただいてコピーします。そして通常ならばプラグインの追加機能を利用してフリーエリアにタグを貼るのですが、この方法だとカートの清算に入った段階で警告メッセージが出ちゃいます。ふさはこれが嫌いでずっと設置していませんでした。（「許可されない〜」とかメッセージが出ると、ショッピングする方は不安になりますよねぇ。特にパソコン初心者は怖くなっちゃいます(^^;)）
で、カスタマイズしながら突然ひらめいたのですが(笑) 私の場合『お知らせ』を表示している部分は、トップページでのみ現れて、後は出てきません。なので、かなり強引ですがこの部分にタグを入れてみました。本来はHTMLのなるべく先頭部分に指定して下さいとあるので、こんな場所に貼るものではないのですが、とりあえずちゃんと解析されています。ただし、トップページのみですが(笑)
他のページについては、fc2さんでカート用に提供されている『アクセス解析』で、どの商品にどの程度アクセスがあったかは判るのでヨシとしています(^^*ゞ
ちゃんとした結果を受け取りたい方は、fc2さんで推奨されている方法でタグを貼ってください。その場合は簡単でフリーエリアのタグ部分に、コピーしてきたアクセス解析のタグをペーストするだけでOKです。もちろん、プラグインの追加をお忘れなくd(^^*)
『初めてのココログ・カスタマイズ』さんでも『アクセス解析を設置してみよう』で説明されていますので参考にして下さいm(__o)m
利用するアクセス解析が決まったら、タグを発行していただいてコピーします。そして通常ならばプラグインの追加機能を利用してフリーエリアにタグを貼るのですが、この方法だとカートの清算に入った段階で警告メッセージが出ちゃいます。ふさはこれが嫌いでずっと設置していませんでした。（「許可されない〜」とかメッセージが出ると、ショッピングする方は不安になりますよねぇ。特にパソコン初心者は怖くなっちゃいます(^^;)）
で、カスタマイズしながら突然ひらめいたのですが(笑) 私の場合『お知らせ』を表示している部分は、トップページでのみ現れて、後は出てきません。なので、かなり強引ですがこの部分にタグを入れてみました。本来はHTMLのなるべく先頭部分に指定して下さいとあるので、こんな場所に貼るものではないのですが、とりあえずちゃんと解析されています。ただし、トップページのみですが(笑)
他のページについては、fc2さんでカート用に提供されている『アクセス解析』で、どの商品にどの程度アクセスがあったかは判るのでヨシとしています(^^*ゞ
ちゃんとした結果を受け取りたい方は、fc2さんで推奨されている方法でタグを貼ってください。その場合は簡単でフリーエリアのタグ部分に、コピーしてきたアクセス解析のタグをペーストするだけでOKです。もちろん、プラグインの追加をお忘れなくd(^^*)
2007年 02月 20日 ( Tue)
最後は、プラグインのタイトル部分をカスタマイズします。左や右にあるメニュー部分のことです。それぞれ『メニュー』とか『お知らせ』とかタイトルがついていますが、その背景にある画像を全体のイメージと合わせて入れ替えます。
画像を入れ替える場合に簡単に出来る方法を今回は書こうと思います。これは、私が「HTMLわからなくて頭痛い(^^;)」なりになんとかカスタマイズするために自己流でやっている方法です。その点をご理解の上で参考にして下さいね。
『テンプレート設定』画面で編集したいテンプレートの『編集』をクリックして、HTMLを表示させます。HTMLとスタイルシート両方をそれぞれ『秀丸』というソフトを起動しておいて、そちらの白紙ページにコピー・ペーストしてうつします。秀丸を使う利点はいろいろありますが、今回はどの画像がどこにあるのかを探すのに使います。多分『スタイルシート』の方に画像を指定してあると思うので、上からずっと見ていってurlをダブルクリックして表示していきます。秀丸では、ファイル名部分はアンダーラインが入ってクリックするとファイルを表示してくれます。こうして画像を確認すれば、どのタグでどの画像を指定しているのかが簡単にわかります。
後は、前回の『背景画像を入れ替えよう』で行ったのと同じようにbackgroundに書かれているurlに、自分で登録した画像のurlを指定します。これを繰り返して各部の入れ替えをしていきます。
サイズを変更したり、フォントを変えたり、色を指定したりもできます。みんな『ショップ名の表示とサブタイトル』でやった方法と同じで、それぞれ対応している場所があるので、探してみて変更・登録してプレビューを繰り返して様子を見ながら行うといいと思います。
スタイルシートで指定されている画像、全てをチェックして入れ替えたらおしまいです。トップページだけでなく、他のページだけで使っている部分もあるので、最初から最後までずっとチェックして下さい。仕上がったら一通り動かしてみて確認しましょう♪
最後に、画像は必ず登録作業をしてそのファイルを指定しましょう。web上にあっても、登録せずに直接使用すると認証画面へ行った時に『許可されない〜』のうっとうしいメッセージが出ちゃいます。
画像を入れ替える場合に簡単に出来る方法を今回は書こうと思います。これは、私が「HTMLわからなくて頭痛い(^^;)」なりになんとかカスタマイズするために自己流でやっている方法です。その点をご理解の上で参考にして下さいね。
『テンプレート設定』画面で編集したいテンプレートの『編集』をクリックして、HTMLを表示させます。HTMLとスタイルシート両方をそれぞれ『秀丸』というソフトを起動しておいて、そちらの白紙ページにコピー・ペーストしてうつします。秀丸を使う利点はいろいろありますが、今回はどの画像がどこにあるのかを探すのに使います。多分『スタイルシート』の方に画像を指定してあると思うので、上からずっと見ていってurlをダブルクリックして表示していきます。秀丸では、ファイル名部分はアンダーラインが入ってクリックするとファイルを表示してくれます。こうして画像を確認すれば、どのタグでどの画像を指定しているのかが簡単にわかります。
後は、前回の『背景画像を入れ替えよう』で行ったのと同じようにbackgroundに書かれているurlに、自分で登録した画像のurlを指定します。これを繰り返して各部の入れ替えをしていきます。
サイズを変更したり、フォントを変えたり、色を指定したりもできます。みんな『ショップ名の表示とサブタイトル』でやった方法と同じで、それぞれ対応している場所があるので、探してみて変更・登録してプレビューを繰り返して様子を見ながら行うといいと思います。
スタイルシートで指定されている画像、全てをチェックして入れ替えたらおしまいです。トップページだけでなく、他のページだけで使っている部分もあるので、最初から最後までずっとチェックして下さい。仕上がったら一通り動かしてみて確認しましょう♪
最後に、画像は必ず登録作業をしてそのファイルを指定しましょう。web上にあっても、登録せずに直接使用すると認証画面へ行った時に『許可されない〜』のうっとうしいメッセージが出ちゃいます。
2007年 02月 20日 ( Tue)
ページの背景画像を入れ替えましょう♪
こちらは【スタイルシートの編集】にある
の部分をカスタマイズします。背景画像を入れ替える時は『タイトル表示部分の画像の入れ替え』時と同じように、使用したい画像をまずアップロードしておきます。
それから
色を指定したい場合は、ＵＲＬは指定せずにカラーコードを入れておけばＯＫ
スクロールバーの色を変えたければ、ここで一緒に変えてみましょう。細かい指定方法については『初めてのココログ・カスタマイズ』さまの『ページ全体のスクロールバーの色を変えてみよう』に詳しい記事がありますので、参考にしてみて下さい♪ それぞれのタグの詳しい説明をしてくれているサイトさま、色コードのサイトさまなどへのリンクもありますd(^^*)
こちらは【スタイルシートの編集】にある
HTML{
scrollbar-face-color: #CEE8E4;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #CEE8E4;
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #CEE8E4;
background:url(https://cart1.fc2.com/upfile/m/myhands/tree_k4.gif)
}
の部分をカスタマイズします。背景画像を入れ替える時は『タイトル表示部分の画像の入れ替え』時と同じように、使用したい画像をまずアップロードしておきます。
それから
background:url(ここにアップロードしたファイルのＵＲＬを書く)
色を指定したい場合は、ＵＲＬは指定せずにカラーコードを入れておけばＯＫ
スクロールバーの色を変えたければ、ここで一緒に変えてみましょう。細かい指定方法については『初めてのココログ・カスタマイズ』さまの『ページ全体のスクロールバーの色を変えてみよう』に詳しい記事がありますので、参考にしてみて下さい♪ それぞれのタグの詳しい説明をしてくれているサイトさま、色コードのサイトさまなどへのリンクもありますd(^^*)
2007年 02月 19日 ( Mon)
文字の変更ができたらもう１歩。文字が表示されている場所に好みの背景画像を入れましょう♪
まず『テンプレート設定』の『画像アップロード』で、使用する背景画像を登録しておきます。その後、ファイルＵＲＬにカーソルをのせ、右クリックして「ショートカットのコピー」をしておきます。
次に『パソコンマークのテンプレート設定』で編集するテンプレートを選択し、先程の【スタイルシートの編集】の『．ｈｅａｄｅｒ｛』のｂａｃｋｇｒｏｕｎｄで指定されいるＵＲＬに貼り付けます。
たいていのテンプレートは、背景に１枚の画像を使っている場合が多いです。自分が使うのが同じタイプでしたらそのままで、もし小さい画像を繰り返し表示させたいのであれば「ｎｏ−ｒｅｐｅａｔ」と書かれた部分を削除しておけばＯＫです。
白い背景に画像を入れたい場合は、ｕｒｌ指定の前に色コード（白なら＃ｆｆｆｆｆｆとか）を書きます。
画像の入れ替えが済んだら、大きさをあわせておきます。ｗｉｄｔｈで横幅 ｈｅｉｇｈｔで高さを指定します。数値をいろいろ変えて登録し、プレビューで確認するを繰り返して、好みの大きさにしてみて下さい。テンプレートによっては、タイトル部分に何枚もの画像を組み合わせているものもあると思います。不必要な部分は削除してみてください。
ただし…
便利な『戻る』ボタンはありませんので、削除する時は「秀丸」などにバックアップしておくか、もうひとつ別のテンプレートにコピー・ペーストしておくなど、これまでの作業が無駄にならないようにしておくことをお勧めします。
まず『テンプレート設定』の『画像アップロード』で、使用する背景画像を登録しておきます。その後、ファイルＵＲＬにカーソルをのせ、右クリックして「ショートカットのコピー」をしておきます。
次に『パソコンマークのテンプレート設定』で編集するテンプレートを選択し、先程の【スタイルシートの編集】の『．ｈｅａｄｅｒ｛』のｂａｃｋｇｒｏｕｎｄで指定されいるＵＲＬに貼り付けます。
たいていのテンプレートは、背景に１枚の画像を使っている場合が多いです。自分が使うのが同じタイプでしたらそのままで、もし小さい画像を繰り返し表示させたいのであれば「ｎｏ−ｒｅｐｅａｔ」と書かれた部分を削除しておけばＯＫです。
白い背景に画像を入れたい場合は、ｕｒｌ指定の前に色コード（白なら＃ｆｆｆｆｆｆとか）を書きます。
画像の入れ替えが済んだら、大きさをあわせておきます。ｗｉｄｔｈで横幅 ｈｅｉｇｈｔで高さを指定します。数値をいろいろ変えて登録し、プレビューで確認するを繰り返して、好みの大きさにしてみて下さい。テンプレートによっては、タイトル部分に何枚もの画像を組み合わせているものもあると思います。不必要な部分は削除してみてください。
ただし…
便利な『戻る』ボタンはありませんので、削除する時は「秀丸」などにバックアップしておくか、もうひとつ別のテンプレートにコピー・ペーストしておくなど、これまでの作業が無駄にならないようにしておくことをお勧めします。
2007年 02月 18日 ( Sun)
まずはじめに『カート設定』で「テンプレート利用」のテンプレートを利用する ラジオボックススをクリックして●を出します。
次に、『テンプレート設定』で【公式テンプレートからダウンロードする】をクリックして好みのテンプレートを選びます。この時、絵や柄は後から変更するので、選ぶ基準は配置を見ます。
次に、落としたテンプレートの名前を変更しておきます。自分のショップの名前などすぐわかるように。
ではいよいよ本編です。
テンプレートの【編集】をクリックして、HTMLを表示させます。まずは、【HTMLの編集】で＜ｈ２ ｃｌａｓｓ＝”ｉｎｔｒｏｄｕｃｔｉｏｎ”＞と書かれた場所を見つけて下さい。＜ＢＯＤＹ＞とあるちょっと下あたりです。ｈ１は、ショップ名を表示させるためのもの、ｈ２はサブタイトルを表示させるためのものと考えてください。ショップ名だけ表示させたい人はｈ２に文字を入れずそのままに。何か紹介文などを書きたい場合は＜／ｈ２＞との間に好きな文章を入れます。もし改行したいなら＜ｂｒ＞を改行したい場所に書いておけばＯＫです。
次は表示されている文字の大きさや色・フォントなどを変更します。
こちらは【スタイルシートの編集】にある『．ｓｉｔｅ＿ｔｉｔｌｅ｛』を見つけて下さい。ここではシートタイトル、つまりショップ名をどんな文字で表示するのかを指定します。
『ｆｏｎｔ−ｆａｍｉｌｙ』にはフォント名を（スペースが含まれる場合は”ダブルクォーテーションで囲って）指定します。先に指定されているフォントから優先されるので、自分のイメージに近いフォントから，カンマで区切って指定します。
『ｃｏｌｏｒ』には色のコードを
『ｐａｄｄｉｎｇ』のｌｅｆｔ，ｒｉｇｈｔ，ｔｏｐそれぞれに、余白をとりたい数値を指定します。ここの数字を変更することで、タイトルの表示される位置を変更できます。
『ｆｏｎｔ−ｓｉｚｅ』では文字の大きさを指定します。
サブタイトルについても同じ事をします。こちらは『．ｉｎｔｒｏｄｕｃｔｉｏｎ｛』を探し、変更方法はショップ名表示と同じです。
次に、『テンプレート設定』で【公式テンプレートからダウンロードする】をクリックして好みのテンプレートを選びます。この時、絵や柄は後から変更するので、選ぶ基準は配置を見ます。
次に、落としたテンプレートの名前を変更しておきます。自分のショップの名前などすぐわかるように。
ではいよいよ本編です。
テンプレートの【編集】をクリックして、HTMLを表示させます。まずは、【HTMLの編集】で＜ｈ２ ｃｌａｓｓ＝”ｉｎｔｒｏｄｕｃｔｉｏｎ”＞と書かれた場所を見つけて下さい。＜ＢＯＤＹ＞とあるちょっと下あたりです。ｈ１は、ショップ名を表示させるためのもの、ｈ２はサブタイトルを表示させるためのものと考えてください。ショップ名だけ表示させたい人はｈ２に文字を入れずそのままに。何か紹介文などを書きたい場合は＜／ｈ２＞との間に好きな文章を入れます。もし改行したいなら＜ｂｒ＞を改行したい場所に書いておけばＯＫです。
次は表示されている文字の大きさや色・フォントなどを変更します。
こちらは【スタイルシートの編集】にある『．ｓｉｔｅ＿ｔｉｔｌｅ｛』を見つけて下さい。ここではシートタイトル、つまりショップ名をどんな文字で表示するのかを指定します。
『ｆｏｎｔ−ｆａｍｉｌｙ』にはフォント名を（スペースが含まれる場合は”ダブルクォーテーションで囲って）指定します。先に指定されているフォントから優先されるので、自分のイメージに近いフォントから，カンマで区切って指定します。
『ｃｏｌｏｒ』には色のコードを
『ｐａｄｄｉｎｇ』のｌｅｆｔ，ｒｉｇｈｔ，ｔｏｐそれぞれに、余白をとりたい数値を指定します。ここの数字を変更することで、タイトルの表示される位置を変更できます。
『ｆｏｎｔ−ｓｉｚｅ』では文字の大きさを指定します。
サブタイトルについても同じ事をします。こちらは『．ｉｎｔｒｏｄｕｃｔｉｏｎ｛』を探し、変更方法はショップ名表示と同じです。
2007年 02月 18日 ( Sun)
FC2さんからお借りしている無料ショッピングカート。*MyHands*のショップは、こちらを利用しています。これまで１年チョット、提供されているテンプレートをそのまま使っていましたが、今回初めてカスタマイズしてオリジナルデザインへ変更しました。
同じようにレンタルカートを自分でカスタマイズしたい人は多いと思います。ふさは自分のＨＰを作る際、無料で配布されているテンプレートを使い自分で適当にカスタマイズしました。その時にHTMLのリファレンスマニュアルを１冊購入。後はネット上でHTMLについて説明して下さっているサイトさまをあちこち回って、調べながら作業しました。それで知識が少しあり、まるきりの初心者でもないのですが…
たいていの方は、カート部分や表示される場所などはそのままでも、画像や背景などを入れ替えたい、後ちょっと色を変えたり、文字フォントを変えたいという程度のカスタマイズだと思います。後はアクセス解析とかかな。
今回ふさがやった方法で参考になるかな〜と、『カスタマイズ』カテゴリーを作ってみました。詳しい記事のエントリーはこの後として、まずはご報告まで。
記事のエントリーは待てないという方へ(笑) こちらのサイトは、カートではなくブログを対象とされていますが、初心者にもわかりやすい内容だと思いますので、一度見てみると良いと思います。
『初めてのココログ・カスタマイズ』
同じようにレンタルカートを自分でカスタマイズしたい人は多いと思います。ふさは自分のＨＰを作る際、無料で配布されているテンプレートを使い自分で適当にカスタマイズしました。その時にHTMLのリファレンスマニュアルを１冊購入。後はネット上でHTMLについて説明して下さっているサイトさまをあちこち回って、調べながら作業しました。それで知識が少しあり、まるきりの初心者でもないのですが…
たいていの方は、カート部分や表示される場所などはそのままでも、画像や背景などを入れ替えたい、後ちょっと色を変えたり、文字フォントを変えたいという程度のカスタマイズだと思います。後はアクセス解析とかかな。
今回ふさがやった方法で参考になるかな〜と、『カスタマイズ』カテゴリーを作ってみました。詳しい記事のエントリーはこの後として、まずはご報告まで。
記事のエントリーは待てないという方へ(笑) こちらのサイトは、カートではなくブログを対象とされていますが、初心者にもわかりやすい内容だと思いますので、一度見てみると良いと思います。
『初めてのココログ・カスタマイズ』
| ホーム |
