« 2006年4月 | トップページ | 2006年6月 »

2006年5月の7件の記事

2006/05/28

ブログ便利ツール:「Click Track」

昨日「ACR WEB」 さんのカウンター設置方法の記事を書いたので、その流れで今日は同じ 「ACR WEB」さん提供の 「Click Track」 というツールをご紹介します。

このツールはアクセス解析の一種で、閲覧者が訪問ページ内のリンクをクリックして移動した場合どこをクリックしたのかをカウントしてくれるサービスです。
通常のアクセス解析では自分のサイトに「どこから来たか」(リファラー=referrer) は判りますが「どこに出ていったのか」まで教えてくれる解析はあまりないので、このツールは閲覧者の移動の傾向やリンクの有効性を見る上でかなり興味深いデータを提供してくれると思います。

ちなみに、今日の当ブログのトップページの解析結果はこんな感じ↓でした。

click_track


但し、確認できるのは「件数」のみで通常のアクセス解析の「生ログ」のようなデータ(訪問時間、ホスト名、ブラウザ情報など)は取得できませんので念のため。
※例えばある特定の訪問者の足跡を追うようなことは出来ません。

設置方法は以下の通りです。

手順

事前準備1:ACR IDを取得する

利用には事前に「ACR ID」を取得する必要があります。
取得方法は
「第31回:現在の閲覧者数を表示するカウンターを設置してみよう」
にて詳しく説明していますので、こちらの記事を参照して下さい。

事前準備2:アクセス解析用のタグを入手する

  1. 「ACR WEB」トップページ→「ACR ID管理画面」
  2. ログイン画面にて「メールアドレス」と「パスワード」を入力して、「ログイン」ボタンを押す。
  3. 「ACR ID管理画面」のトップページが表示されるので、その中の『Click Track』のリンクをクリックする。
  4. 表示された『Click Track』紹介ページ内の『Click Trackの新規レンタル』をクリックする。
  5. 登録画面が表示されるので
    「希望するユーザーID」(半角英数8文字以内の任意の文字列)
    「カテゴリー」(設置するブログのカテゴリー)
    を入力して『規約に同意して登録する』ボタンをクリックする。
  6. 表示された「登録完了」画面内の『CGIの管理』をクリックする。
    「環境設定(一般)」にて、
    <サイトのPV(表示回数)を 記録する/記録しない>
    のどちらかを選択する。
    どちらを選択するかで、 利用の必須条件であるサイトの広告バナーの大きさが変わってきます
    (バナーについての説明は同じページの画面下方「表示バナーについて」でご確認下さい。)
    ※通常、「記録する」になっていますので、そのままでいいなら何もせずに下の「タグの取得」に進みます。
    「記録しない」に変更した場合は、「送信する」 ボタンを押してから下に進んでください。
  7. 「タグの取得」部分に表示されたタグを全てコピーする。

サイドバーに設置する

マイリストを使って、上記のスクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ、
「基本2: マイリストの作成→サイドバーへの設置」
にて確認して下さい。

設置は以上で完了です。

解析結果については「管理画面」の『解析結果閲覧』のリンクをクリックすると閲覧することが出来ます。

ここがポイント

  • このツールはスクリプトを設置した場所に自動的に上記で説明した「サイトの宣伝用バナー」が表示されますので、 それも考慮に入れて設置場所を考えた方がいいかもしれません。
    ちなみに私は左サイドバーの「素材&ツール」の中に表示しています。(上から4番目)

お世話になりました

「ACR WEB」さん
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (2) | トラックバック (0)

第31回:現在の閲覧者数を表示するカウンターを設置してみよう

「今現在、このブログを何人の方が閲覧してくれているのか」を表示するカウンターを設置してみました。
左サイドバーの「記事一覧」のリンクの下に表示中です。

now_visitor

このカウンターのスクリプトは「ACR WEB」 からお借りしました。
「ACR WEB」はこうしたカウンターや掲示板、アクセス解析などのCGIレンタルサイトです。
有料のものもありますが、無料でレンタル出来る便利なツールもたくさん提供されています。

「ACR WEB」 のツールを利用するには利用者登録が必要です。
今回はその利用者登録方法も含めて、上記のカウンターの設置方法についてご説明します。


手順

事前準備1:ACR IDを取得する

  1. トップページの画面右上にある『ACR ID管理画面へ』のリンクをクリックする。
  2. 「ACR IDに新規登録する」をクリックする。
  3. 『ACR IDの新規登録』の文字の下にあるスペースにメールアドレスを入力し、「ACR IDに新規登録する」 ボタンをクリックする。
  4. しばらくすると登録したメールアドレスに「[ACR ID]メールアドレス確認」というタイトルのメールが届くので、 このメールに記載されているURLにアクセスする。
  5. 登録した「メールアドレス」と到着したメールに記載されていた「チェックコード」 が入力された画面が表示されるので問題なければ「作業登録を続ける」ボタンを押す。
  6. 「ACR ID 新規登録完了」画面が表示される。
  7. しばらくすると「[ACR ID]登録完了メール」が到着する。

以上で新規登録処理は完了です。

事前準備2:表示用のタグを入手する

  1. 上記で届いた「[ACR ID]登録完了メール」に記載されているログインページにアクセスする。
  2. 登録したときのメールアドレスと、登録完了メールに記載されているパスワードを入力し、「ログイン」ボタンを押す。
  3. 「ACR ID」の管理ページが表示されるので、そのページ中から『Now Visitor』のリンクをクリックする。
  4. 表示された「カウンター紹介」ページの『Now Vistorの新規レンタル』をクリックする。
  5. 登録画面が表示されるので
    「希望するユーザーID」(半角英数8文字以内の任意の文字列)
    「利用するURL」(設置するブログのURL)
    を入力して『規約に同意して登録する』ボタンをクリックする。
  6. 表示された「登録完了」画面内の『CGIの管理』をクリックする。
  7. 画面上にで設定したIDが表示されているので、その中の「環境設定」をクリックする。
  8. 「カウンター設定」で、表示したときの
    <背景色>
    <文字色>
    <文字サイズ>
    <カウンターの表示形式>
    をそれぞれ設定する。
    ※変更する必要がなければそのままでもOKです。
  9. 設定が終わったら「送信する」ボタンをクリックする。
  10. 「カウンタータグ取得」画面が開くので、表示されたタグを全てコピーする。

サイドバーに設置する

マイリストを使って、上記のスクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ、
「基本2: マイリストの作成→サイドバーへの設置」
にて確認して下さい。

以上です。
上手くできましたか?

ここがポイント

  • 登録手順は文章で書くと画面の遷移が多く少々煩雑ですが、実際の操作は画面がシンプルなのでもっと簡単に出来ると思います。
  • 一度利用登録すれば全ての無料スクリプトが利用可能です。
    また一つのIDで同じスクリプトを複数レンタル利用することも出来ます。

お世話になりました

「ACR WEB」さん
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (3) | トラックバック (1)

2006/05/20

第30回:文字(フォント)の設定を変えてみよう

ココログ内で使用されている文字の種類を変更してみましょう。
ココログではカスタムテーマのテンプレートを使用している場合、「デザインの編集」→「テーマを変更」部分である程度のフォント指定が出来ますが選択できるフォントがそんなに多くありません。
CSSでフォントの種類を設定すればその他の自分好みのフォントを利用できますし、「テーマの変更」ではまとめて設定されてしまう部分も別々のフォントにすることが可能です。

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に、適用したいセレクタに対するCSSを記述する。

    <記述例>:ブログタイトル(メイン)部分に適用する場合

    #banner h1 a
    {
    font-family : Verdana,"MS UI Gothic" ,"MS Pゴシック",sans-serif; /*文字の種類*/
    font-size : 20pt; /*文字の大きさを指定*/
    font-weight : bold; /*文字の太さを指定*/
    font-style : italic; /*斜体*/
    color : #6699cc; /*文字の色を指定*/
    }
     
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

上記のCSSを実際に適用するとこんな↓感じになります。

初めてのココログ・カスタマイズ

あんまり格好良くはないですね^^;

ここがポイント

  • ココログ内でフォントが指定できる主なセレクタ(上記の例でいうと「#banner h1 a」の部分) は下記のようになっています。
    参考にして下さい。

セレクタ

適用部分
#banner a ブログタイトル全体
#banner h1 a ブログタイトル(メイン)
#banner h2 サブタイトル部分
#comment-text textarea, #comment-text-field textarea コメント入力欄
.content 本文表示欄全体
.content p 記事の本文
.content h2 記事の日付
.content h3 記事のタイトル
.content p.posted 記事のフッター
#calendar カレンダーの日付
#calendar caption カレンダーのタイトル
.sidebar h2 サイドバーのリストタイトル
.sidebar li サイドバーのリスト内項目
.link-note 「ココログからのお知らせ」 などの文字
#powered 「ココログロゴ」の前後の文字
a リンク文字
.sidebar a サイドバーのリンク文字
blockquote 引用
  • 文字の種類(特に書体)の表示は閲覧者側の環境に依存します。
    つまり、管理者側でフォント(書体)を設定しても閲覧者のPCにそのフォント(書体) が入っていなければ、設定したようには見えないということです。
    ですのでフォントを設定する場合は、

    □自分でダウンロードしたオリジナルフォントは使わない
    □基本的に「全てのPCで100%自分が設定したように表示されるとは限らない」
    (これは全ての表示についていえることですが)

    ことを頭に置いておくといいと思います。
  • 「どうしてもこの書体が使いたい。これで見て欲しい」という場合は、 その書体で作った文字を画像にして貼り付けるのが一番確実です。
    記事本文に適用するのは現実的ではありませんが、ブログタイトルや、サイドバーのタイトルなどでしたら効果があると思います。

    以下、各プロパティの簡単な説明です。
  • 文字の種類(書体)
    文字の種類は間にカンマ( , )を入れることで複数同時に指定することが出来ます。
    指定したフォントが閲覧者側のPCにインストールされていないことも考えて、いくつか同時に指定したほうが安全です。
    先に書いたフォントが優先的に表示されるようになっています。
    フォント名にスペースが含まれる場合はフォント名の前後を二重引用符( " ) または一重引用符( ' )で囲ってください
    また、全角・半角・大文字・ 小文字などの違いも全て正しく書かないと適用されませんので注意しましょう。
    指定の最後に「一般分類名」(serif = 明朝体系、sans-serif = ゴシック体系、cursive = 筆記体系、 fantasy = 装飾系、monospace = 等幅系)を指定しておくと、その前で指定したフォントが全て使用できない場合、 最終的な代替フォントとなります。
    詳細については下記サイトを参考にして下さい。
    「TAG index」様内 『フォントを指定する』
  • 文字のサイズ
    例で使用した「数値」+「単位」 の他にいろいろな設定方法があります。
    詳細については下記サイトを参考にして下さい。
    「TAG index」様内 『文字のサイズを指定する』
  • 文字の太さ
    通常は「bold」で太字、「normal」で通常の太さを表します。
    その他、数値で9段階に設定する方法などがあります。
    詳細については下記サイトを参考にして下さい。
    「TAG index」様内 『文字の太さを指定する』
  • 斜体文字
    「italic」と「oblique」が設定可能です。
    「italic」は通常の書体を斜体にした上で、少し筆記体のように表示した文字です。
    一方「oblique」は単純に斜体表示になります。
    但し筆記体が適用されるのは英文だけですので、日本語表記の場合は2つとも同じ表示になります。

お世話になりました

「TAG index」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (12) | トラックバック (0)

2006/05/14

第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう

1つ前の記事 「カスタマイズ・サンプルNo.2」の.entry部分に使っているワザです。
「カスタマイズ・サンプルNo.2」の記事にも書いたように、写真の上にそのまま文字を載せると読みにくくなる可能性が高かったので使ってみました。
■サンプルはこちらでご確認下さい。→画像を使った半透明フィルターサンプル

元々「filter: alpha(***);」という画像を半透明にするCSSが存在するのは知っていたのでこれを使ってみようかと思ったのですが、調べてみたところ

  • IE(Internet Exploror)にしか使えない
  • 画像を半透明にするだけでなくその上に載せた文字も半透明化されてしまう
  • 使用する画像全体に対して指定しなければならず、私が希望している「エントリー部分だけ」 といった部分的な使い方が出来ない

といった事実が判明したため希望通りにはならないと判断し別の方法を取ることにしました。
(確かに「IE問題」(?)以外は、「そりゃそうだよね~」な内容ではあるのですが^^;)

で、辿りついたのが「半透明に見える画像を作って、エントリー部分の背景画像として敷き詰める」という方法です。
簡単にいうと「白と透過色」の細かいチェック柄の壁紙画像を作成して、それを使って見える部分と見えない部分を作っているわけです。
ヒントをいただいたのは「FC2」でテンプレートの制作、配布をされている「e-moon's blog」様です。
ありがとうございました。

前置きが長くなりましたがいよいよ処理方法です。
今回はなんと画像を作るところから始めるので、更に長くなると思います(笑)
では、どうぞ。

【'06/09/13追記】
同様の画像をダウンロード出来るサイトを発見しました。
「Free Wall Paper」
「トップページ」→「素材」→「使い方」→「半透明の背景」
ご利用の際は提供サイトの規約を遵守して下さいね。

<お詫び>
Macで参照して下さっている方には申し訳ないのですが、私のPC環境はWindowsなので以下の方法(使用するソフトなど)は全てWindowsで作業する場合を前提にしています。
私にMacについての知識がないので悪しからずご了承下さい。
※ただ、(多少手間は掛かりますが)簡単な作業ですので「ペイントソフト」と「画像レタッチソフト」があればMacでも再現可能なはずです。

手順

事前準備1:画像ソフトで2色のチェック柄画像を作成する

  1. 「ペイント」を起動する。
    ※通常「スタート」→「すべてのプログラム」→「アクセサリ」の中に入っています。
  2. 「変形」→「キャンバスの色とサイズ」を選択し、 表示された画面で「幅」と 「高さ」をそれぞれ「100」に変更し「OK」 ボタンを押す。
    ※単位は「ピクセル」です。
  3. 「表示」→「拡大」→「拡大率の指定」を選択し、 表示された画面で「拡大率」を 「600%」または「800%」を選択し「OK」 ボタンを押す。
    ※自分が作業しやすい大きさになれば拡大率はいくつでもOKです。
  4. 「表示」→「拡大」→「グリッドの表示」 を選択する。
    ※キャンバス上にグレーの縦横罫線が引かれていればOK。
  5. 「カラーボックス」で「黒」を選択する。
  6. 「ツールボックス」で「鉛筆ツール」を選択する。
  7. キャンバス上にカーソルを持っていくと鉛筆の形状になっているので、 その鉛筆の先で表示されているマス目を一つおきにクリックし 「市松模様」 を作っていく。

    touka1

    ※場所を打ち間違えた場合は「編集」→「元に戻す」 で間違える前の状態に戻れます
  8. ある程度の範囲が打てたらその範囲をコピー→貼り付けして模様の範囲を拡大していく。

    touka2

    「選択ツール」を使って、範囲選択→その範囲の上で右クリックして 「コピー」 を選択→同様に右クリックで「貼り付け」を選択
    画像がグレーの線で囲まれた状態になっていると思うので、 それをそのままドラッグ (左クリックしたまま引っ張る)して模様を合わせる
    ※この際に上下左右の端に模様がない部分が出来るのは問題ありませんが、 格子模様の途中 (内部)で模様がずれることがないように注意してください
  9. ほぼ全面に模様が描けたら、利用する部分を範囲選択する。
    ※「選択」ツールを使って白く残っている部分が入らないように画像を選択する。
    画像の大きさは50×50(px)~70×70(px) くらいあれば大丈夫なので、 全面を埋める必要はありません。
    ※大きさは縦横が偶数の正方形にして下さい。
    画像の大きさは、画面下のステータスバー(下図の赤枠で囲んだ部分です) に表示されるのでカーソルを少しずつ動かして確認して下さい

    touka3
  10. 選択した画像をコピーする。
    ※範囲選択した部分の上にカーソルを置いて右クリック→「コピー」する。
  11. 「ファイル」→「新規」を選択。
    ※「無題への変更を保存しますか」(無題=現在表示されている元の画像です)とメッセージが出るので、不安だったら「はい」 をクリックして、名前を付けて保存して置いてください。
    特に問題がなければ「いいえ」でもOKです。
  12. 一番最初の状態に戻るので、「編集」→「貼り付け」でコピーした画像を貼り付ける。
    ※一見灰色に見える小さい四角が貼り付けばOKです。
  13. 周囲の余白を削除する。
    ※もう一度「変形」→「キャンバスの色とサイズ」を選択し、「幅」と 「高さ」 をそれぞれ今度は9.でコピーした画像と同じ大きさに変更し 「OK」ボタンを押す。

    touka4
  14. 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
    ファイル名は半角英数で付けてください
    「ファイルの種類」は「24 ビット ビットマップ (*.bmp;*.dip)」 でOKです

事前準備2:画像を透過する

  1. 「Microsoft Photo Editor」を起動する。
    ※通常は「スタート」→「すべてのプログラム」→「Microsoft Office ツール」あたりに入っています。
    ※Office2003以降のバージョンをお使いの場合、「Microsoft Photo Editor」は付属していないようです。
    その場合の対応を「Point」に記載しましたので読んでみて下さい。
  2. 「ファイル」→「開く」で上記(14.)で保存した画像を開く。
  3. 「ズームボックス」を「800%」に変更する。

    touka5
  4. 「透明色に変更」ボタン(または「ツール」→「透明色に変更」)をクリックする。

    touka6
  5. カーソルの形が変わるので、そのカーソルの先に付いている黒い▼の先の部分で、「黒」の四角(どこでもOK) を一つクリックする。
  6. 「透過色に変更」画面が出てくるので、画面の窓に表示されている色が「黒」になっていて、「透過性」が100% であることを確認して「OK」ボタンを押す。

    touka7

    ※「OK」を押したあと、画面全体が白とグレーの模様になればOK。

    touka8
  7. 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
    ※ファイル名は半角英数で付けてください。
    「ファイルの種類」は「GIF形式(*.gif)」 を選択してください

以上で画像の作成は完了です。

ファイルをココログにアップロードする

上記で作成した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

【CSSを編集する】

基本的に、通常の背景用画像と同様の取り扱いでOKです。
例えば「エントリー部分」へ適用する場合は、「body」に背景画像を設定した上で
第27回: 個々の記事(エントリー)表示欄に背景画像を設定してみよう
の「敷き詰め」を説明した方法で「エントリー部分」だけに半透明(透過)画像を背景として設定します。

他にもいろいろな部分で利用できると思いますので、工夫してみて下さい。

ここがポイント

  • Office2003以降では「Microsoft Photo Editor」ではなく、 「Picture Manager」 というソフトが付属しているようですが、残念ながらこのソフトでは透過処理は出来ないようです
    ■参考:Microsoft Office アシスタント「画像を透過するには」
    Office2003以降のバージョンをお使いの方は各自透過の出来るソフトが別途必要になります。
    その個々のソフトでの取り扱いについてはここでは説明出来ませんので悪しからずご了承下さい。
    ※フリーソフトを使うのに抵抗がないということでしたら、個人的には「JTrim」という画像処理ソフトが使いやすくてオススメです。 (但し、導入は自己責任でお願いいたします)
    「WoodyBells」 様内「JTrim」
  • 「市松模様」がずれないように注意してください。
    細かい作業ですが途中からコピー&ペーストを駆使すればそんなに時間も掛からず出来上がると思うので、 時間に余裕があるときにでも試してみて下さい。
  • また、今回はWindows付属の「ペイント」と「Microsoft Photo Editor」を使用しましたが、 これ以外でも基本的なペイントソフトや画像レタッチソフトなら同様のものが容易に作れると思いますので使い慣れているものを使って下さい。
  • 今回は「白×透過」の画像にしましたが、白の部分を薄目のピンクや黄色、ブルーなどにしてもきれいかもしれません。
    デザインに合わせて工夫してみて下さい。
  • 黒の背景画像に対して透過画像を作る場合は、上記とは逆に「白の部分を透過」した画像を作成してください。  

お世話になりました

「e-moon's blog」
「超初心者の手取り足取りホームページ教室」
「Free Wall Paper」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (9) | トラックバック (2)

カスタマイズ・サンプル<No.2:Fly Away…>

2回目は、こちらではなくメインブログ(「*second message*」)のデザインです。

このデザインのポイントは何といっても背景に使った大きな写真素材。
これをどう生かすかを考えてデザインしてみました。
こうした大きな素材を全面に使う場合は、その他の素材はあまり併用しないほうがスッキリとまとまる気がします。

↓クリックで拡大

Fly_away_1


■背景

背景に使った草原と空を撮した大きな写真素材は「NOION」さんからお借りしました。
(現在は配布されていません)
表示用のCSSは
「第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉」
で確認して下さい。

■entry(記事)部分の処理

背景全体に色の付いた画像を置いたので、記事部分を読みやすくするために半透明に透けたように見える背景画像を作って設定してみました。
半透明画像の作り方は、
「第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう」
entry部分への適用は、
「第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう」
で確認して下さい。

■リンクの装飾

リンク文字の下に下線が出るように設定しています。
設定方法は
「第28回:リンクの装飾を設定してみよう」
(『3.リンクの下に点線を引く』)
で確認して下さい。

■「バックナンバー」「最近のエントリー」「カテゴリー」のリストマーク

この3つの項目のみリストの行頭に画像のリストマークを付けました。
画像は「IMAGE」 さんからお借りしました。
表示用のCSSは

/*「最近のエントリー」「バックナンバー」欄のリストマーク*/
.module-archives .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

/*「カテゴリー」欄のリストマーク*/
.module-categories .module-list-item {
  margin-left: 5px;
  padding-left: 15px;
  background-image: url(画像のurl) ;
  background-repeat: no-repeat;
}

となります。

■引用の装飾

シンプルに細い実線で囲むだけにしました。
CSSについては
「第19回:引用部分の装飾を設定してみよう」
で確認して下さい。

■サイドバータイトルの装飾

タイトルの前にワンポイント画像を設置し、同時にタイトルの下に罫線(細い点線) が入るように設定してあります。
CSSは以下のようになっています。

.sidebar h2
{
margin-left: 5px;
margin-top:5px;
  padding-left: 15px;
  background-image: url(http://~) ;
  background-repeat: no-repeat;
border-bottom:1px dashed #96ada9;
width: 140px;position: relative;
}

関連記事:第10回: サイドバーのタイトルにワンポイント画像を付けてみよう

主な設定部分は以上です。

もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

上記以外で「この部分はどうなってるの?」というご質問がありましたら、コメント欄にでも書き込んでください。


<過去の「カスタマイズ・サンプル」は下記でご確認下さい>
カスタマイズ・ サンプル タイトル一覧


*この記事にコメントを書く*


| | コメント (3) | トラックバック (0)

2006/05/13

基本4:自分のブログのCSSファイルを確認する

デザイン(テンプレート)のどの部分にどんなCSSが使われているのかがあらかじめ判っていると、「カスタムCSS」を設定する場合にも便利です。
自分が使っているテンプレート(カスタムテンプレート)のCSS(全文)を確認する方法です。

手順

  1. 自分のブログをブラウザで表示する。
  2. ブラウザの「表示」→「ソースの表示」を選択する。
  3. 自動的に『blog[*]』([*]は数字)という名前の「メモ帳」が起動するので、この中から
    <link rel="stylesheet" href="http://~" type="text/css" />
    という一文を探す。
    ※テキストの上の方、ブログタイトル(<title>~</title>)のすぐ下です。
  4. この中の「href」のあとのurlをコピーして、ブラウザのアドレスバーに貼り付けて「Enter」キーを押す。

    Css_file


    ※上記画像の赤枠内、下線を引いた部分です。
    (画像は当ブログのものです。ブログによってurlは変わります)
    ※もし、上の説明では「どの部分か判らない」という場合は、ブラウザに直接
    「自分のブログurl/styles.css」
    というアドレスを入力してもOKです。

  5. 自動的に『styles[*]』という「メモ帳」が起動するので、必要に応じてファイルを「ファイル」→「名前を付けて保存」 で自分が分かり易い名前を付けて保存する。
    ※このファイルが現在利用中のテンプレートのCSSファイルになります。「カスタムCSS」を記述するときの参考にして下さい。

上記のままでも内容としては問題ありませんが、CSSタグが改行されておらず全文繋がって表示されてしまい非常に見難い状態です。
ちょっと手間ですが、下記の手順で処理すると改行されて見易いファイルになります。

  1. 上記で表示されたCSSファイルの内容を全文コピー(編集」→「全て選択」で全文が反転表示されたら、 ファイル上で右クリック→「コピー」)する。
  2. 「ワードパッド」(または「MS Word(ワード)」)を起動する。
    ※どちらでも大丈夫ですが起動が早いので「ワードパッド」がオススメです。
    ※通常は「全てのプログラム」→「アクセサリ」の中に入ってます。
  3. 起動した「ワードパッド」(または「ワード」)に1.でコピーした全文を貼り付ける。
    ※プロパティごとに自動的に改行された状態で表示されます。
  4. 新しく「メモ帳」を起動する。
  5. 3.で表示された改行されたCSSファイルを全文コピー(編集」→「全て選択」で全文が反転表示されたら、 ファイル上で右クリック→「コピー」)する。
  6. 4.で起動しておいた新しい「メモ帳」にコピーした内容を全文貼り付ける。
  7. 「メモ帳」に名前を付けて保存する。

以上です。
上記の処理をすると下図(左が処理前、右が処理後)のように表示が変わり、内容が確認しやすくなると思います。

Css4_1


 

 

 

ここがポイント

  • このCSSは保存したその時点でのCSSですので、その後テンプレートを変更したり、 カスタムCSSを編集したりすると変わります。
    保存する際にはいつ作成したものか判るような名前を付けて管理するといいかも知れません。
  • このファイルはCSSを確認するためのもので、これを変更してもテンプレートの変更(カスタムCSSの適用)は出来ません。
    CSSの変更はいつもの手順で実施して下さい。
  • この方法で自分のブログでなく他の人のブログでも同様にファイルを取り出すことが出来ます。
    ブログを閲覧していて「どうやってるのかな?」と興味を持ったデザインがあったら、 CSSファイルを見て参考にさせて頂くのも上達のコツです。

*この記事にコメントを書く*


| | コメント (0) | トラックバック (0)

2006/05/12

第28回:リンクの装飾を設定してみよう

リンクを設定した文字列は色を変えたり、下線を付けたりして他の文字列とハッキリ区別したほうが読者にも分かり易く親切ですし、クリックして貰いやすくなります。
ココログでは管理画面の「デザイン」→「テーマの変更」からもリンク文字の色や下線の有無、文字の太さなどの簡単な設定が出来ますが、 CSSを利用すればもっと細かく多彩な設定が出来るようになります。

今回は下記で例に挙げた設定のCSSをそれぞれご紹介します。
※リンク先はよく使うブログ検索サイトにしてみました(笑)クリックすると別窓で開くようにしてあります。

 

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄にリンク装飾用のCSSを記述する。

    1. カーソルを乗せると文字が太文字になる

    /*通常の状態*/
    a:link{
    font-weight:normal; /*文字の太さ:通常*/
    color:#cc3399;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    font-weight:normal;
    color:#000099;
    text-decoration : none;}
    /*カーソルでポイントした時*/
    a:hover{
    font-weight: bold; /*文字の太さ: 太字*/
    color:#cc3399;
    text-decoration : none;

    2. カーソルを乗せると背景に色が付く

    /*通常の状態*/
    a:link{
    color:#333366;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#999999;
    text-decoration : none;
    }
    /*カーソルでポイントしたとき*/
    a:hover{
    color:#333366;
    text-decoration : none;
    background-color:#9999ff; /*背景色*/
    }

    3. リンクの下線を点線にする

    /*通常の状態*/
    a:link{
    color:#ff3300;
    border-bottom:1px dotted #009900;/*罫線(下側) に点線*/
    text-decoration : none;/*テキスト装飾:なし (←これを付けないと通常の下線が付いてしまう)*/
    }
    /*訪問済み*/
    a:visited{
    color:#999900;
    border-bottom:1px dotted #cccccc;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#99cc00;
    border-bottom:1px dotted #666600;
    text-decoration : none;
    }

    4. カーソルを乗せると文字の位置が移動する

    /*通常の状態*/
    a:link{
    color:#660099;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#ff66ff;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#9900ff;
    text-decoration : none;
    position:relative; top:3;left:3;/*文字が動く方向と範囲*/
    }

    5. カーソルを乗せると背景画像が表示される

    /*通常の状態*/
    a:link{
    color:#ff9933;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#009900;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#000000;
    text-decoration : none;
    background-image:url(http://~);/*背景画像の指定*/}

    6. 枠線を付けてボタン風に表示

    /*通常の状態*/
    a:link{
    text-decoration : none;
    color : navy;
    border-top : 1px solid #cccccc;
    border-right: 3px solid #999999;
    border-left : 1px solid #cccccc;
    border-bottom: 3px solid #999999;
    padding:3px;
    }
    /*訪問済み*/
    a:visited{
    text-decoration : none;
    color : navy;
    border-top : 1px solid #cccccc;
    border-right: 3px solid #999999;
    border-left : 1px solid #cccccc;
    border-bottom: 3px solid #999999;
    background-color:#e3e3e3;
    padding:3px;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    text-decoration : none;
    color : navy;
    border-top: 3px solid #999999;
    border-left: 3px solid #999999;
    border-right : 1px solid #cccccc;
    border-bottom : 1px solid #cccccc;
    padding:3px;
    }

    ※通常時(マウスポイントしていないとき)は罫線の下と右を太くて濃い線、マウスでポイントしたときはその逆(上と左を濃く太く) にすることで擬似的な立体感と動きが表現できます。
    ※但し、これはボタンらしく見せるために文字の周囲に余白を設定してしまっているので、通常の文章の中では使いにくいかも… ^^;

    ※上記を参考にしてリンク設定用CSSを全て半角英数で記述して下さい。
    ※色や線の種類、太さなどはご自分で自由に変更して下さい。 
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

ここがポイント

  • リンクはその状態によって4つの定義済みクラスを持っています。
    a:link : 通常のリンク(未訪問状態)
    a:visited : 訪問済みのリンク
    a:hover : マウスでポイントした状態
    a:active :  クリックして該当サイトに繋がるまでの間の状態
    上記で書いたCSSのようにそれぞれの状態に別々の要素を適用することが可能です。
    但し、複数の状態を同時に指定する場合は、上記の並び順を間違えないようにしましょう。
    (順番が前後すると、指定した装飾が上手く反映しなくなることがあります。省略するのは大丈夫です)
  • サイドバーと本文(記事部分) のリンク装飾を別々に指定することも出来ます。
    その場合、サイドバーのリンクプロパティに「.sidebar」を付けて
    .sidebar a:link{~}
    .sidebar a:visited{~}
    といった感じで指定して下さい。
  • 上記の例ではリンク文字の色もCSSの中で指定していますが、ココログの場合「デザインの編集」→「テーマの変更」 部分で指定した方が管理しやすいと思います。
  • この他にも、色や線の種類、太さなどをデザインに合わせたリンク表示を工夫してみて下さい。
    尚、「通常の状態(未訪問)」と「訪問済みリンク」は、ハッキリと区別出来るように変化を付ける、 また文章として読む場合にも読みにくくならないような色をそれぞれ選択しましょう。

お世話になりました

■素材サイト「IMAGE」 様<No.5のリンクの背景画像>
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (6) | トラックバック (1)

« 2006年4月 | トップページ | 2006年6月 »