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

2006年3月の11件の記事

2006/03/21

第23回:サイドバーに掲示板を設置してみよう

ブログは記事ごとにコメント出来るのでWebサイトの掲示板よりも反応が早いし、書き込む側(閲覧者)も気楽だ、というのがブログのいいところだと(私は)思っているのですが、逆に記事に関係ない話題についてはどこに書き込めばいいのか困ることもあります。
そこで、記事に関係のない話題でも気軽に書き込めるミニ掲示板をサイドバーに付けてみました。

今回はこの設置方法についてご説明します。

※掲示板は実際に利用可能ですので、お気軽に書き込みして下さい。
※但し記入内容によっては管理人判断で削除させていただくこともありますのでご了承下さい。
※また、「テスト書き込み」もご遠慮下さい。

※申し訳ありませんが現在はこのブログでは利用していません。

手順

ミニ掲示板


ブログに設置する掲示板にはいろいろ種類があるようですが、私は今回「chobi(ちょび)」を使ってみました。
サイドバーにはこんな↑感じに表示されます。

書き込んだり、過去ログを読んだりする場合は「よむ/かく」ボタンを押すと、コメント入力画面(別ページ)が表示されます。


事前準備1:タグを入手する

「chobi(ちょび)」のサイトにて、掲示板設置用のタグを入手します。
※画面を下にスクロールすると作成ボタンが出てきます。

  1. ダウンリストから好きなデザインを選択し「掲示板を作る」ボタンを押す。
    ※ダウンリストの下の画像をクリックすると、そのデザインを使ったサンプル画面に飛びます。
  2. 別ページが表示されるので、このページの下方に記載してあるタグ(「下記のコードを、 掲示板を表示させたい場所に貼ってください。 」の下に書いてある2行)をコピーする。
    このページには「利用規約」もありますので、必ず読みましょう。
    ※また、同じページに「管理者パスワード」が赤字で記載されていますが、 これは後でデザインの変更や書き込みの削除などをするために 「管理画面」 に入る場合のキーになりますので必ず控えておいて下さい。

サイドバーに設置する

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

基本項目を設定する

タイトルや表示件数など基本的な設定をします。

  1. サイドバーに表示された掲示板の「よむ/かく」ボタンをクリックする。
  2. 最初に選んだデザインの書き込み画面(別画面)が表示されるので、その画面の一番下にある「管理画面」のリンクをクリックする。
  3. 「管理画面ログイン」画面が表示されるので、タグの入手の際に発行された4桁の管理番号を入力してログインする。
  4. 「タイトル」を入力し、「トップページでの表示件数」を設定する。
    ※「タイトル」は全角で10文字まで入力可能です。
    ※「スタイル」を変更する場合も、ここでダウンリストから別なタイプを選択することが出来ます。
  5. 設定が終了したら「変更」ボタンをクリックする。
  6. 「■掲示板に戻る」で管理画面から退出する。
  7. サイドバーを確認して「タイトル」などが設定した通りに表示されているかどうか確認する。

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

応用:CSSでカスタマイズする

「chobi(ちょび)」の既存のデザインのまま利用するなら上記の作業までで終わりですが、別画面で開くコメントの入力画面をCSSを使って自分の好きなようにデザインすることも出来ます。
但し、このシステムのデザイン変更(CSS編集)は難解で、私には手に負えないというのが正直なところです。
実際、自分ではまともな記述が出来なかったため 「ブログパーツをさがせ」様のsatokotoさんが公開して下さっているCSSファイルをダウンロードして、その中を修正しながら使っているというのが現状です。
なので今回、satokotoさんのCSSを参考にさせていただいて私が理解できた範囲のCSSの該当箇所を書いていきますが、 この内容についてのお問い合わせにはお答えできないことをあらかじめご了承下さい。
(自分でも一箇所ずつ直しながら「ここがこれに対応するのか」と確認している状態ですので^^;)
また、「ブログパーツをさがせ」様でも「 (ダウンロードしたCSSの内容については)サポート外」と明記されていますので、その点も充分理解した上でご利用下さい。
※「chobi(ちょび)」のマニュアルページは下記になりますので、詳細の確認やお問い合わせはこちらにお願いします。
chobiマニュアル

  1. CSSファイルを準備する。
    ※「ブログパーツをさがせ」様のCSSファイルはこのページでダウンロード出来ます。
  2. CSSファイルの内容を書き換える。
    ※そのまま利用してもOKです。
  3. CSSファイルをココログにアップロードする。
    ※アップロードの方法は別ページ、
    『基本1:ファイルのアップロード』
    を参照して下さい。
  4. 【基本設定】で書いた手順で管理画面にログインする。
  5. 「スタイル」で『CSSを指定』を選択する。
  6. 「スタイル」の下にある空欄に、 上記でアップロードしたCSSファイルの保存先urlを入力する。
  7. 「変更」ボタンを押す。

CSSが正しく記述されていればこれで反映するはずです。
思った通りの結果にならない場合は、上記の2.以降を繰り返して下さい。

■各セレクタに対応している部分は次の通りです
※私がはっきり判る部分のみ書いてあります。
※これ以外は各自でご確認下さい。

  • html : スクロールバー
  • body : 全体の背景
  • a : リンク部分
  • h1,h2,h3 : 見出し
  • #advertise : 広告
  • #form : コメント記入欄の背景
  • .commentBody : 投稿されたコメント欄

■ヒント

  • このブログの入力画面では3箇所画像を設定していますが、それぞれ「body」、「#form」、「.commentBody 」 の部分です。
  • カラーコードが入力されている部分は何らかの形で色の指定がされているので(当たり前ですね(笑))、 そこを少しずつ変えていくと 「どこがどこに対応しているか」判ってくると思います。

ここがポイント

  • 「ブログパーツをさがせ」 様ではその他にもいろいろな掲示板が紹介されていますので、お好みに合わせて選んでみて下さい。
    ※カテゴリで「掲示板・チャット」に分類されています。
    ※設定方法は確認していませんが、タグが提供されるタイプのものならマイリストへの入力で大抵はOKだと思います。
  • 特に内容をサイドバーへ表示することにこだわらないのであれば、通常のレンタル掲示板を借りてそのアドレスへのリンクのみサイドバーに表示しておく、 という方法もあります。
  • また、自分のブログの中に掲示板用の記事を一つ作って、 そのコメント欄を利用して書き込んでもらうという方法も手軽ですね。
    ※この方法だとココログの「コメント通知」が使えますので管理しやすいと思います。

お世話になりました

■素材サイト 「PRISM」様<記事内のボタン素材>
「chobi(ちょび)」
「ブログパーツをさがせ」


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


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

2006/03/19

ブログ便利ツール:「RSSリーダー」利用のススメ

カスタマイズネタが底をついてきたので(笑)、ちょっと新しいシリーズを始めてみました。
ブログを活用するための便利なツールをご紹介したいと思います。

今回は「RSSリーダー」をご紹介。

お気に入りのブログを読むとき、何を使っていますか?
ブラウザの「お気に入り(ブックマーク)」に入れておいてチェックするという手もありますが、これでは更新状況が判らないため同じところへ何度も足を運んでしまったりします。
1~2箇所ならいいですが、登録数が増えてくると確認に行くだけでも大変です。

そこでRSSリーダーの登場です。

■「RSSリーダー」とは

Webサイトを巡回してRSS形式の更新情報を受信し、リンク一覧の形で表示するソフトウェア。
RSS(Rich Site Summary)はXMLベースの書式の一種で、Webサイトの更新情報を記述するのに用いられる。 ウェブログやニュースサイトなどニュース性の高いサイトでは、RSSによる更新情報の提供を行なっているものが多い。
指定したサイトのRSS情報を一定時間ごとに自動的にダウンロードし、 更新があると記事へのリンクを表示してユーザに知らせるソフトがRSSリーダである。 リンクをクリックするとWebブラウザのウィンドウが開いて目的の記事が表示される。
「IT用語辞典e-Words」より引用

つまりRSSリーダーとは「自分の代わりにお気に入りブログの更新チェックをしてくれるソフト」と言うことです。
これを使えば、相手先の更新状況が一目で判るため、更新されたかどうか確認に行く手間が省けます。
※但し、コメントが追加されたかどうかの確認は出来ません。

現在、RSSリーダーには大きく分けて自分のPCにインストールして使う「インストールタイプ」と、インターネット上のサービスを利用する「オンラインタイプ」があります。
それぞれの特徴やメリット・デメリットについては下記サイトの記事を参照してみて下さい。

All About『「RSSリーダー」で情報収集の効率アップ!』

私は今までに

などを使ってきましたが、現在は

  • インストールタイプ
    「Sleipnir」 (ブラウザへのプラグイン)
  • オンラインタイプ
    「My nifty」
    ※「My nifty」はnifty会員専用サービスです。

の併用に落ち着いています。

インストールタイプには気になるブログをカテゴリー別にどんどん登録して、その中で特にお気に入りで外出先(と言うか「会社」(笑)) でも更新をチェックしたいというものだけオンラインタイプにも登録している、という使い方をしています。

いろいろなサービスがありますし、それぞれ使い勝手やインターフェイスも違います。
殆どの場合、簡単な利用登録をすれば無料で使えますのでいくつか試してみてはいかがでしょうか。

<参考サイト>
「RSSナビ」


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


HOT ARTICLE Ranking

株式会社スイム

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

2006/03/18

第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉

前回に引き続き「背景画像が透けるように表示してみよう」シリーズの第2弾です。
今回は一番下の「body」部分に入れた背景が全体に透けるように設定してみましょう。
…と言っても基本的には前回の考え方と同じですが(笑)
下記の画像は以前、別ブログ(ココログ)で使っていたデザインです。 
※バナーの部分は別に作成しています。

本文、サイドバーの下に透ける背景


この方法だと大きな画像をそのまま利用できて、サイドバーやバナーの区切りが全くなくなるので背景画像を変えるだけでブログの見た目が一気に変えられます。

手順

事前準備:画像を準備する

背景用の画像を準備します。

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

準備した画像はPC内の判りやすい場所に保存しておきます。

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

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

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
    ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は 『第3回:カスタムテンプレートを作ってみよう』を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*バナー、本文、サイドバーの透明化*/

    #banner,#container,.content,#right,#left
    {
    background-color:transparent; /*指定エリアの透明化*/
    }


    /*背景画像の設定*/

    body
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-attachment:fixed; /*背景画像のスクロール:なし*/
    background-position:■ ●; /*背景画像の表示位置*/
    }


    を全て半角英数で記述する。
    ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • background-color:transparent;
    の 「transparent」は背景色を透明にする値です。
    カラーコードではないので「#」は不要です。
  • background-repeat:no-repeat;
    は、 画像を繰り返さない(=一つだけ)表示する、ことを指定しています。
    その他の表示方法(繰り返し、敷き詰めなど)については下記のページを参照して下さい。
    「TAGindex」様内 『背景画像の並び方を指定する』
  • background-attachment:fixed;
    は、背景画像を固定する(=スクロールで動かさない)ことを指定しています。
    スクロールさせる場合はこの行を削除して下さい。
  • 今回の指定箇所は必ず文字が上に載ります。
    それを考慮して背景画像は文字の邪魔にならないものを選びましょう。
    私はお借りした素材をソフトを使って少し薄くなるように加工しています。
    ※素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

お世話になりました

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


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


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

第21回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉

今回はエントリー部分やサイドバーの下に画像が透けて見えるように背景を設定する方法です。
※クリックで拡大

透明化して背景を表示


具体的な設定方法の前に、まずココログのレイアウト構造を簡単に説明します。
ココログのレイアウト構造を簡単に図にすると、下記のようになります。
※クリックで拡大

ココログのレイアウト構造


一番外側の黒枠内が「body」
その内側の赤枠内が「#container」
タイトルが表示されている部分(オレンジ)が「#banner」
左サイドバー(青)が「#left」
右サイドバー(緑)が「#right」
エントリー部分(紫)が「#center」
という要素でスタイルが決定されています。
(実際には、このほかにもたくさんの要素がそれぞれの部分に設定されています)

そして、重なり順は下から上に
【A】「body」
【B】「#container」
【C】「#banner」「#left」「#right」「#center」
となっています。

つまり、【C】の色(背景)を消すことでそこに【B】の背景を表示出来、
【C】+【B】の色(背景)を消すことでそこに【A】の背景を表示することが出来る、ということです。
※但し「#center」部分の色は、その下の「.content」で指定されているためここの色(背景)を消すことになります。

今回は【B】に置いた画像を表示するためにその上にある【C】の部分を透明化する、ということになります。

※【A】に画像を置いて、【B】【C】を透明化する方法については次の記事
第22回: 本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉
にて説明しています。

さて、ここまで判った上で設定方法の説明です。

手順

事前準備:画像を準備する

背景用の画像を準備します。

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

準備した画像はPC内の判りやすい場所に保存しておきます。

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

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

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
    ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
    ※カスタムテンプレートの作り方は 『第3回: カスタムテンプレートを作ってみよう』を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*バナー、本文、サイドバーの透明化*/

    #banner,.content,#right,#left
    {
    background-color:transparent; /*指定範囲の透明化*/
    }


    /*背景画像の設定*/

    #container
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ●; /*背景画像の位置*/
    }


    を記述する。
    ※漢字、かなで書いてある部分以外は全て半角英数で書いて下さい。
    ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • background-color:transparent;
    の「transparent」は背景色を透明にする値です。
    カラーコードではないので「#」は不要です。
  • background-repeat:no-repeat;
    は、 画像を繰り返さない (=一つだけ)表示する、ことを指定しています。
    その他の表示方法(繰り返し、敷き詰めなど)については下記のページを参照して下さい。
    「TAGindex」様内 『背景画像の並び方を指定する』
    画像を敷き詰める場合は、「background-position」 の指定は不要です。
  • 今回の指定箇所は文字が上に載る可能性があります。
    背景画像は文字とのバランスを考えて文字の邪魔にならないものを選びましょう。
    私はお借りした素材をソフトを使って少し薄くなるように加工しています。
    素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

お世話になりました

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


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


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

2006/03/12

第20回:「Blog People」でリンク先の更新管理をしてみよう

ココログにもリンクリストはありますが、これは先方のサイト名とリンクが表示されるだけで更新情報を拾ってくれたりはしません。
【'06/09/02:修正】
※ココログでも「人リスト」を利用すれば、更新管理が可能でした。誤った情報を記載してしまい申し訳ありませんでした。
※「人リスト」の使い方については、下記のページを参照して下さい。
「6.マイリスト>3.人リスト」(「ココログ使い方ガイド」より)

更新情報を取得できるサービスを利用してリンク集を作成し、相手先ブログの更新管理も出来るようにしてみましょう。
このリンク集はサイドバーに設置するので、訪問してくれた人もチェックできます。

Blogpeople_1


※更新されると、上図のように任意の更新マークが付き、サイト名にマウスを乗せると「更新日時」が表示されるようになります。

手順

今回は「Blog People」 を使った方法を説明します。

事前準備1:Blog Peopleに登録する

Blog Peopleのサービスを利用するには会員登録(無料)が必要です。

  1. トップページの「今すぐ会員登録!」 をクリック。
  2. 「ブログ保有者登録」欄に必要事項を入力し、「送信」ボタン→「会員登録終了」の画面が表示されればOK。
  3. 1~2分後に上記で登録したメールアドレスに「会員登録のご確認」メールが届くので、 そのメールに記載してあるアドレスをクリックして正式登録画面にアクセスする。
  4. 以上で登録作業は終了です。
    続けてリンク集を作成する場合は、そのページ(「無料会員登録」)の[会員ログイン]の文字をクリックしてログインして下さい。

事前準備2:サイト情報を登録する

上記の説明で直接ログインしている場合は2.から始めて下さい。

  1. トップページの「会員ログイン」 をクリック。
  2. 「ログイン」画面が表示されるので、『ユーザーID』、『パスワード』を入力して「ログイン」ボタンを押す。
  3. 「会員トップページ」が開く。
  4. 左サイドバーの「サイト情報の設定/変更」をクリックする。
  5. 自分のサイト(ブログ)のURL、サイト名などの情報を登録し、「変更」ボタンを押す。

事前準備3:リンク集を作成する

  1. 左サイドバーの「リンクリストの作成」をクリック。
  2. 「リンクリストの作成/編集」画面が開くので、一番上の「新リンクリスト名」に任意の文字列(例:「お気に入りリンク集」など) を入力し「作成」ボタンを押す。
  3. 左サイドバーの「リンクの追加/編集」をクリック。
  4. 編集(追加)するリンクリストを選択してクリック。
  5. 「リンクの追加」にリンク集に載せるサイトの情報を追加していく。
    ■リンクリスト:登録するリンクリストをプルダウンの中から選択する。
    ■サイトURL:登録するブログのURLを入力する
    ■サイト名:登録するブログの名前を入力する。
    ※この他の項目は任意で登録して下さい。
    ※追加した情報は画面の上方に一覧になって表示されます。
  6. 左サイドバーの「表示形式の設定」をクリック。
  7. 「基本設定」を設定していく。
    ■1.表示するリンクリストの選択→ブログに表示するものにチェックを入れる
    ■2.リンクの表示順→好きなものにチェック。
    ※「最新」を選択すると、登録ブログが更新される毎に自動的に並び替え出来ます。
    ■3.リンクリストのタイトル表示と区切り
    ※「する」にチェックを入れるとリンク集の一番上にリストのタイトルが表示されます。
    ■4.更新マーク表示時間→設定すると、その時間以内に更新されたブログには任意のマーク(「NEW」など)が付きます。
    ※サイト名の前または後ろにグラフィックを表示する場合は「一覧選択」をクリックし、 表示されたアイコンの中から気に入ったものの上でクリックすると自動的に設定できます。
  8. 設定が終了したら「コードの作成/更新」ボタンを押す。
    ※「詳細設定」は必要に応じて各自設定して下さい。
  9. 上記の表示形式に応じたスクリプトが生成されて表示されるので、一番上の「コード生成」欄にあるスクリプトをコピーする。
    ※「クリップボードにコピー」ボタンを押せば、全文がコピーできます。

ここまでのさらに詳しい解説は「会員ページ」内の「利用ガイド」を参照して下さい。

サイドバーに設置する

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

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

これで自分のブログのサイドバーに設置したリンク集をみれば誰のブログが更新されているかすぐに判るようになります。

ここがポイント

  • 「BlogPeople」はココログフリーでも更新通知先に設定されている
    www.weblogs.com
    ping.blogger.jp
    の2つのpingサーバーの情報を読みとって更新管理をしていますので、 この2つのサーバーにpingを送っているブログサービスであれば更新情報が取得できるはずです。
  • 登録ブログを増やす場合は、上記の【事前準備3】 の5.の処理を繰り返して下さい。
    ※追加した後は、一覧の下にある「更新」ボタンを押してください。
  • 「BlogPeople」を使っている他のブログの管理人さんが自分のブログを登録してくれると、「BlogPeople」 から 「登録されました」メールが届きますので誰が自分のブログを登録してくれているか判って便利です。
    ※他の登録ツールを使っての登録では通知は来ません。
  • 「BlogPeople」にはこの他にもブログを楽しむための様々なサービスがありますのでいろいろ試してみて下さい。
    ※但しこちらでは上記に書いた内容以上のご質問にはお答えしかねますので、あらかじめご了承下さい。
  • 他にも同様のサービスに「ドリコムRSS」 などがあります。
    ※こちらの登録方法についてはご自分で確認して下さい。

お世話になりました

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


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


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

2006/03/11

第19回:引用部分の装飾を設定してみよう

書籍や雑誌、他のWebページ、ブログに記載されている内容を借りてきて自分のブログに掲載する際は、自分の文章と借りてきた文章を分ける意味で「<blockquote>~</blockquote>」というタグで囲みます。
引用ボタンココログでも記事作成画面に標準で「引用文」 ボタン(左図参照) があり範囲を選択したあとこれを押すことでタグを自動的に挿入出来ますが、 デフォルトのままのスタイルだと単に文章がインデント(文字下げ)されるだけであまり目立ちません。

デフォルトだとこんな感じです。↓

これは引用文です。

そこで、引用タグに装飾をして、他の文章とハッキリ区別できるようにしてみましょう。

著作物の引用ルールは「著作権法」において定められています。
他人の著作物を引用する場合は、そのルールの範囲内で正しく利用して下さい。

■参考:「はてなダイアリー」『引用とは』
■参考: 「Wikipedia」『引用』

手順

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

    blockquote {
    border:■px solid #●●●●●●; /*枠線の太さ、種類、色*/
    margin: ■px ; /*枠線の外側の余白*/
    padding: ■px ; /*枠線の内側の余白*/
    }


    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
    ※■にはそれぞれ任意の数字を入力して下さい。
    ※各プロパティの詳しい説明は「point」にて後述。
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。
    ※↓のようになっていればOKです。

これは引用文です。

以上です。
うまく出来ましたか?

ここがポイント

この他にも線の色や背景色を変えることでいろいろな表現が出来ます。
例えば

  • 線の種類を変えて背景に色を付ける

これは引用文です。

blockquote{
border:2px dashed #8b0000; /*枠線の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-color: #FFE4E1; /*枠線の中の背景色*/
}

  • 線無しで背景色のみ指定

これは引用文です。

blockquote{
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-color: #E6E6FA; /*枠線の中の背景色*/
}

  • 線の種類を変えて背景に画像を指定

これは引用文です。

blockquote{
border:5px inset #6B8E23; /*枠線の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-image:url(画像のurl); /*枠線の内側の背景画像*/
}

  • 付箋紙風

これは引用文です。

blockquote{
border-left:10px solid #292c5a; /*枠線の左側の太さ、種類、色*/
border-bottom:1px solid #cccccc; /*枠線の下側の太さ、種類、色*/
border-right:1px solid #cccccc; /*枠線の右側の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
}

※borderの左、下、右それぞれの太さ、色を変えて立体的に見えるようにするのがポイントです。(上は指定なしにしています)

などなど。
ブログの雰囲気に合わせて色々と工夫してみて下さい。

お世話になりました

「TAG index」
「色のみじん切り」
■素材サイト 「PRISM」


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


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

2006/03/09

第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう

コメント(表示欄)とコメント入力欄の背景に画像を表示してみましょう。
こんな↓感じになります。

コメント表示欄 コメント入力欄
コメント表示欄 コメント入力欄


手順

事前準備:画像を入手する

表示する画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう

私は「フリー素材<ivory>」 様でお借りした素材を使いました。
※「フリー素材<ivory>」様は'07年2月までで写真素材の配布を中止されました。

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

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

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックして画像が保存されているページを開く。
    ※「リンク」ボタンではなく、画像(ファイル)の名前のリンクをクリックして下さい。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は 『第3回:カスタムテンプレートを作ってみよう』を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*コメント入力欄*/
    #comment-text textarea, #comment-text-field textarea
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲ ; /*背景画像の位置*/
    }


    /*コメント表示欄*/
    .comment-body
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲ ; /*背景画像の位置*/
    }


    を記述する。
    ※/*~*/で囲まれた部分以外は全て半角英数で記述して下さい。
    ●●●には上記で保存した画像のURL、 ■、 ▲には画像を表示する位置を入力して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
    ※私の場合は「bottom right」(一番下の一番右)に指定してあります。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • 「コメント入力欄」も「コメント表示欄」も全く同じ内容を指定する場合は、セレクタをまとめて
    #comment-text textarea, #comment-text-field textarea ,.comment-body
    と一行で記述して一度に指定してもOKです。
  • background-repeat:no-repeat;
    は、 画像を繰り返さない(=一つだけ)表示する、 ことを指定しています。
    その他の表示方法(繰り返し、敷き詰めなど)については下記のページを参照して下さい。
    「TAGindex」様内 『背景画像の並び方を指定する』
  • 今回の指定箇所はどちらも文字が上に載る部分です。
    背景画像や表示方法は文字とのバランスを考えて文字の邪魔にならないものを選びましょう
    私はお借りした素材をペイントソフトを使って少し白くなるように加工しています。
    素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

お世話になりました

「PRISM」様<記事中のボタン素材>
「フリー素材<ivory>」
「TAG index」


<関連記事>

第12回: コメント欄の幅を調整してみよう
第15回: コメント欄のスクロールバーの色を変えてみよう
第16回: コメント欄の背景色を変えてみよう


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


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

2006/03/08

第17回:ページ全体のスクロールバーの色を変えてみよう

今回はページ全体のスクロールバーの色を変えてみましょう。

手順

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

    /*スクロールバー*/
    html
    {
    scrollbar-base-color:#●●●●●●;
    }


    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • スクロールバーは上記の 「scrollbar-base-color」 以外にもパーツごとにプロパティを持っており、 それを細かく指定することで自由にイメージを変えられます。
    下記のページではそれぞれのプロパティが図入りで細かく説明されています。
    「TAG index」 様内 『TEXTAREAのスクロールバーの色を変える』
    また、下記のページでは各プロパティの色の組み合わせをチェックすることが出来ます。
    「TAG index」 様内 『カラーチャート』
    参照してみて下さい。
    ※それぞれ単体でも指定可能です。
    ※私はbase-color、face-color、 scrollbar-arrow-colorの3箇所を全て同系色で指定してみました。
    ページ全体のスクロールバー
  • スクロールバーの色の変更は自由ですが、背景の色との差が少ないと閲覧する場合スクロールバーが見えにくくなることがあります。
    色を組み合わせる場合はスクロールバーのパーツだけでなく、背景色との関係も考慮に入れて設定しましょう。
  • この指定はIE5.5以上のブラウザに有効です。

お世話になりました

「TAG index」
「色のみじん切り」
■素材サイト 「PRISM」 様<記事内のボタン素材>


<関連記事>
第15回: コメント欄のスクロールバーの色を変えてみよう


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


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

2006/03/05

第16回:コメント入力欄の背景色を変えてみよう

コメント入力欄の背景色を変えてみましょう。
一緒に「名前」「メールアドレス」「URL」欄も変更してみます。

手順

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

    #author, #email, #url, #comment-text textarea, #comment-text-field textarea
    {
      background-color:#●●●●●●;
    }


    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • 各要素はそれぞれ
    #author → 名前
    #email → メールアドレス
    #url → URL
    #comment-text textarea, #comment-text-field textarea  → 内容
    に対応します。
  • 各要素に別の色をそれぞれ指定することも出来ます。
    その場合は、
    #author {background-color:#~;}
    #email{background-color:#~;}
    のように要素ごとに記述して下さい。
  • 各要素は文字を入力する欄ですので、入力する際に文字がハッキリ見えるような色に設定しましょう。

コメント欄の色



お世話になりました

「色のみじん切り」
■素材サイト 「PRISM」 様<記事内のボタン素材>


<関連記事>
第12回: コメント欄の幅を調整してみよう
第15回: コメント欄のスクロールバーの色を変えてみよう


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


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

第15回:コメント欄のスクロールバーの色を変えてみよう

コメントエリアのスクロールバーの色を変えてみましょう。

手順

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

    #comment-text textarea, #comment-text-field textarea
    {
    scrollbar-base-color:#●●●●●●;
    }

    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • スクロールバーは上記の「scrollbar-base-color」以外にもパーツごとにプロパティを持っており、 それを細かく指定することで自由にイメージを変えられます。
    下記のページではそれぞれのプロパティが図入りで細かく説明されています。
    「TAG index」 様内 『TEXTAREAのスクロールバーの色を変える』
    また、下記のページでは各プロパティの色の組み合わせをチェックすることが出来ます。
    「TAG index」 様内 『カラーチャート』
    参照してみて下さい。
    ※それぞれ単体でも指定可能です。
    ※私はbase-color、face-color、 scrollbar-arrow-colorの3箇所を全て同系色で指定してみました。

コメント欄のスクロールバー色変更

  • スクロールバーの色の変更は自由ですが、背景の色との差が少ないと閲覧する場合スクロールバーが見えにくくなることがあります。
    色を組み合わせる場合はスクロールバーのパーツだけでなく、背景色との関係も考慮に入れて設定しましょう。
  • この指定はIE5.5以上のブラウザに有効です。

お世話になりました

「TAG index」
「色のみじん切り」
■素材サイト 「PRISM」様<記事内のボタン素材>


<関連記事>
第12回: コメント欄の幅を調整してみよう
第16回: コメント欄の背景色を変えてみよう


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


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

2006/03/01

第14回:カレンダーの投稿した日付に色を付けてみよう

記事を投稿した日付のカレンダーにはリンクが張られますが、CSSでもう一工夫してその日付に色が付くようにしてみましょう。

手順

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

    #calendar a {
      background-color:#●●●●●●;
    width: 20px; line-height: 20px;
      display: block; margin: 0 auto;
    }

    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては こちらを参照して下さい。
  3. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

Calendar

←こんな感じになればOKです。

 

 

 


ここがポイント

  • カレンダーの数字が見えるように、指定する色は「薄すぎるかな?」くらいに薄い色を選択したほうがキレイに出来ると思います。

お世話になりました

■素材サイト 「PRISM」


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


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

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