« 2006年3月 | トップページ | 2006年5月 »

2006年4月の8件の記事

2006/04/23

よくある質問集

当ブログを開設以来メールやコメントで頂いた質問の中から、よくあるもの、記事の中でフォローできなかったものを集めてみました。
カスタマイズ中に「あれ?」と思ったら、まずこちらを覗いてみて下さい。

今後も随時追加していきます。


 

記述したCSSが反映しない
スクリプトが正常に作動しない
「折り畳みスクリプト」のボタン(+、-)をカスタマイズしたい
サイト内検索の「検索」ボタンの形が違う
タイトルバナーの画像を使用すると、タイトル(文字)の位置が上がって切れてしまう
タイトルバナーに画像を使用する場合、「確認」を押しても画像が表示されない
画像の周りに(紫の)線が表示されてしまう
画像を保存しようとすると、全て拡張子が「.bmp」になってしまう
素材屋さんにある自分の好きな画像でカウンターを設置したい
サイドバーの「バックナンバー」だけ文字色が違ってしまう
アフィリエイトを貼り付けたいがどうしたらいいか
コメント欄に画像を設定したいがセレクタ「.comment-body」がCSSに存在しない
リスト名をスペース入力で非表示にしても装飾(ワンポイントなど)を設定している場合、それだけが表示されてしまう
記述したCSSがIE(Internet Explorer)では適用されるが、他のブラウザでは適用されない部分がある('06/05/21 追加)


 

記述したCSSが反映しない

タグの記述ミスはありませんか?
全て半角英数で書かれていますか?
コロン、セミコロンなどを忘れていませんか?
タグの閉じ忘れはないですか?
正しいセレクタに対して設定を行っていますか?

CSSは一箇所でも記述が間違っているとその部分は無視されてしまいます。
自分が思ったように反映しない場合はまず記述ミス・モレを疑ってみて下さい。

topへ戻る

スクリプトが正常に作動しない

スクリプト関連は記事に書いてある手順通りに設置して頂ければ基本的に正常作動するはずです。
誤作動になってしまう場合はまず下記の点を確認して下さい。

1.スクリプトを「メモ帳」に貼り付ける際に「右端で折り返し」の解除はしましたか?
これが入ったままだと不要な改行が追加されてしまうため誤作動を起こすとのことです。
解除方法はエントリーの中に書いてありますので、もう一度よく読んで設定し直してみて下さい。

2.(修正・追記が必要なスクリプトの場合)正しく修正(または追記)されていますか?
あなたの環境に合わせて正しく修正(または追記)しないと、正しく動作しません。
修正・追記部分にミスがないかどうか確認してみて下さい。

3.貼り付けたスクリプトにモレはありませんか?
コピー&ペーストでスクリプトを貼り付ける際に、ヌケ・モレが発生していることはありませんか?
記号1つ足りなくても正しく作動しませんので、もう一度内容をよく見直してみて下さい。

上記を確認してもエラーが見つからない、または見つかったけれど直しても作動しないという場合は(私では原因が分かりませんので)、ご面倒ですが各記事に記載されているスクリプトの作者様まで直接お問い合わせ下さい。
その場合、実際に作者様にソースを見てもらうのが一番確実だと思いますので、(正常に作動しない)スクリプトもそのままにした状態でご連絡することをオススメします。

topへ戻る

「折り畳みスクリプト」のボタン(+、-)をカスタマイズしたい

「KOROPPYの本棚」 様でカスタマイズ方法が記事になっていますので、そちらを参照して下さい。

『折りたたみボタンの色を開閉で変える』

topへ戻る

サイト内検索の「検索」ボタンの形が違う

基本のスクリプトにはボタンの形に対するデザイン的な要素は設定されていないので、もしここと違って表示されているとすればそれは利用中のテンプレートのデザイン側の仕様です。
リッチテンプレートの場合、ボタンの形もデザインで指定されていることがあります。

topへ戻る

タイトルバナーの画像を使用すると、タイトル(文字)の位置が上がって切れてしまう

「カスタムCSS」に

#banner{padding-top:●px;}

を追加して保存して下さい。
●pxの分だけ下に下がります。
数値(●の部分)はご自分で調整してください。

topへ戻る

タイトルバナーに画像を使用する場合、「確認」を押しても画像が表示されない

この設定の場合、何故か「確認」画面では表示できないようです。
一度(どこか一部のページに)実際に反映してそのページで確認して下さい。
(理由は私には判りませんので、ココログサポートにお問い合わせ下さい)

topへ戻る

画像の周りに(紫の)線が表示されてしまう

画像表示用のタグの中に

border="0"

を追加入力してみて下さい。

topへ戻る

画像を保存しようとすると、全て拡張子が「.bmp」になってしまう

キャッシュファイルが破損しているのが原因です。
下記のページを参考にして修復してみてください。

□「All About」内 『画像素材をダウンロードする際のありがちなトラブル 画像がBMPでしか保存できない』

topへ戻る

素材屋さんにある自分の好きな画像でカウンターを設置したい

自分の好きな画像をカウンターとして作動させるには「CGI」というプログラムが別途必要になります。
しかし、ココログのサーバーにはCGIファイルをアップロードすることは出来ません。
またCGIの設定はある程度の知識も必要になります。

当ブログではレンタルカウンターの設置方法についてのアドバイスは出来ますが、それ以上は私自身知識がありませんのでご質問にはお答えできません。
ご自分で勉強して設置して下さい。

【'06/12/22追記】
「はっさくノート」様にて、CGIを使ってアクセスカウンターを設置する方法が記事になっています。
詳しく丁寧に書かれた記事ですので、参考になさって下さい。

「はっさくノート」様内『CGIを使ってアクセスカウンターを設置する』
第1話(準備・修正編) / 第2話(転送編) / 第3話(リンク編)

topへ戻る

サイドバーの「バックナンバー」だけ文字色が違ってしまう

これは「バックナンバー」だけその文字自体がリンクになっているためです。
この文字(リンク)色を他のタイトルと合わせる場合は、
「デザイン」→「テーマの編集」→「ページ全般の設定」→「リンクのスタイル」

で変更して下さい。
または、サイドバーのリンク色だけなら

「サイドバー項目」→「サイドバー内のリンクのスタイル」
(「全般の設定と同じ~」にチェックが入っている場合は外す)
でも設定できます。

topへ戻る

アフィリエイトを貼り付けたいがどうしたらいいか

アフィリエイトについては私自身実施していないため、規約なども判らずどうするのが正しい方法なのか判断出来ません。
お答えしたことが結果的に規約に抵触することであってはまずいので、アフィリエイトについての質問にはお答えできません。
悪しからずご了承下さい。

尚、一般的なブログパーツなどのサイドバーへの貼り付けについては
「基本2:マイリストの作成→サイドバーへの設置」
で解説しています。
殆どのタグはこの方法で設置可能かと思いますので、参照してみて下さい。

topへ戻る

コメント欄に画像を設定したいが「.comment-body」がCSSに存在しない

「.comment-content」でも代用できるようです。
お試し下さい。

topへ戻る

リスト名をスペース入力で非表示にしても装飾(ワンポイントなど)を設定している場合、それだけが表示されてしまう

リストタイトルの装飾は全てについて「付けるか」「付かないか」どちらかの指定しか出来ないため、そこだけを非表示にすることは出来ません。
なので「付ける」指定にしている場合は、サイドバーの一番最後など目立たない位置に設置するか、現在名前なしになっているリストの項目を他の名前が付いているリストの中に一緒に入れる、など目立たない方法をそれぞれ工夫して下さい。

topへ戻る

記述したCSSがIE(Internet Explorer)では適用されるが、 他のブラウザでは適用されない部分がある

記述したCSSの中に入れたスペースが「全角」の場合、 IE以外のブラウザでは正しく表示されない場合があります。
スペースが「全角スペース」になっていないかどうか確認してみて下さい。
※タグの中にスペースを入れる場合は、必ず「半角スペース」で入れて下さい。

また、 CSSの種類によっては正しく記述してあってもブラウザごとの解釈に違いにより、表示が異なる場合もあります。

topへ戻る


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


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

2006/04/22

第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう

記事表示列全体ではなく、個々の記事(エントリー)表示欄にそれぞれ背景画像を設定する方法です。
こんな(↓)感じで各エントリーの同じ場所に同じ画像が繰り返し表示されます。(クリックで拡大)

entry1



手順

事前準備:背景用の画像を準備する

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

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
※この部分は背景の上に文字が載りますので、文字の読みやすさを考えて背景画像を選択しましょう。
※また、記事表示欄よりも小さめで周囲に余白があるものを選択した方がいいと思います。(理由は「point」にて説明しています)

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

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

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

CSSを編集する

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

    .entry-body{
    background-image:url(●●●); /*背景画像の指定*/
    background-attachment:fixed; /*背景画像の固定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲; /*背景画像の位置指定*/
    }

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

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

ここがポイント

  • .entry部分は文字と表示スペースの間に余白が殆どない状態で設定されているので、 使用する画像は記事表示欄の幅よりも小さめなものを選択し上下左右に余裕がある状態で位置指定するときれいに表示できると思います。
  • どうしてもどこかの辺に接した状態で表示したい、または敷き詰めで表示したい、 という場合は下記のような記述で文章の周囲に余白を作ると見やすさ、読みやすさが向上すると思います。

    .entry-body{
    background-image:url(●●●);
    padding:10px 20px 0px 20px;
    margin:-10px -20px ;
    }

    上記は敷き詰めにした例です。一つの画像を固定にする場合は、「padding」と 「margin」の部分を前述のタグに追加してください。
    marginはマイナス指定にしてください。
    ※それぞれの数値はご自分のブログに合わせて調整して下さい。
    ※ちなみに上記の数値で適用すると、下記(↓)のような状態になります。(クリックで拡大)
    ※下記の画像は余白の状態が分かり易いように少々濃い色の背景素材を使用しています。

entry3


お世話になりました

■写真素材サイト 「ミントblue」 様<記事内に表示した写真をお借りしました>
■素材サイト 「web*citron」 様<参考画像内に使用した背景素材をお借りしました>
■素材サイト 「PRISM」様<記事内のボタン素材>


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


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

2006/04/17

カスタマイズ・サンプル<No.1:sugar cube>

新企画です(笑)
デザインを変更したら、その内容と素材の入手元をザックリと説明しておくことにしました。
但し、デザインの変更自体が不定期ですから、あまり更新頻度は高くないと思いますので念のため。

まずNo.1は先日変更した現在のデザイン。
自分で付けた名前は「sugar cube」です。
(そのまんま、何のひねりもない名前ですね^^;スミマセン)

私はいつもデザインを変えるとき、メインになるものを一つ決めてそこから色や素材を決定していきます。
今回はリンク文字に「ちょっとダークな感じの赤」と「青みがかったグレー」を使いたいというのがまず最初にあったので (こういうパターンは珍しい)、それに合わせて背景画像や細かい部分の色を決めていきました。
↓クリックで拡大

suger


背景

背景に置いたチェックの画像は「web*citron」さんからお借りしました。
表示用のCSSは 「第6回:背景に画像を表示してみよう」で確認して下さい。

container部分の画像

container部分には「A.SLASH」さんでお借りした「Afternoon Tea」の角砂糖(シュガーキューブ)の写真を使いました。
全体的な色遣いはこの写真の包み紙のグリーンを基調にしています。
表示用のCSSは 「第21回:本文やサイドバーの下に背景が透けるようにしてみよう〈1〉」で確認して下さい。

マイリストとカレンダーのタイトル装飾

タイトルの前だけに太い枠線を付けてみました。
表示用のCSSは 「第10回:サイドバーのタイトルにワンポイント画像を付けてみよう」の応用で画像の代わりに枠線を使い、

.sidebar h2,#calendar caption
{padding: 5px;
border-left: 10px solid #96ada9;
width: 140px;position: relative;
}

としています。
実はこれだと、マイリストとカレンダーの行頭が何故か微妙にずれるため間に折り畳めない項目(「マイニフティで読む」「RSSの表示」)をわざと挟んで目立たないようにしています(笑)
どこか調整すれば同じ位置に出来ると思うのですが、ちょっとやってみても上手く行かなかったので「面倒だからいいやっ!」とそのままにしてしまいました^^;
これを試そうと思ったかたはその辺りご自分で調整お願いします。
(出来たら教えてください(笑))

記事タイトルの装飾

サイドバーの装飾と同じようにしました。
表示用のCSSは

.content h3{
padding: 5px;
border-left: 10px solid #96ada9;}

としています。

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

この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;
}

となります。

引用の装飾

引用部分は細い実線で囲んで右下に背景画像 (container部分に入れたもののミニサイズ)を表示しました。
画像は色を若干飛ばしてあります。

blockquote
{
border:1px solid #73928c;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:bottom right;
}

リンクの装飾

リンクは色を指定したあとにリンク自体の装飾は外して、代わりに文字の下側の罫線(border-bottom)だけを点線で指定しています。
こんな感じですね。

a:link {
color:#990000;
text-decoration:none;
border-bottom:1px #cc6600 dotted;
}

※この他にも「既訪問」や「接続中」「オンマウス」の場合など、それぞれ別の設定になってます。
※リンクの装飾については下記の記事を参照してみて下さい。
「第28回:リンクの装飾を設定してみよう」

他にもあちこち色を付けたり画像を置いたりしていますが、大体こんな感じです。
もし使える部分がありましたらご自由に使ってください。
カラーコードや線の太さ、種類、余白の数値などの変更はご自分で調整してくださいね。

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


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


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

2006/04/15

基本3:記事欄への画像の挿入

「IMG(イメージ)ボタン」を使った記事欄への画像挿入方法を説明します。

  1. 「記事の作成」画面「本文」中の任意の場所にカーソルを置いて、「IMG(イメージ)ボタン」(画像の挿入) をクリックする
  2. 「画像の挿入」ウィンドウが別に表示される。
  3. <1.画像の選択>で挿入する画像を選択する。
  4. <2.画像オプション>で【カスタム設定】を選択する。
  5. 設定項目が表示されるので、自分が表示したいように各項目を設定する。
    ※設定の詳細については下記を参照して下さい。
  6. 画像の挿入ボタンを押す

5.の各設定項目の詳細は下記のようになります。

  • 《テキストの回り込み》
    画像の後に書いたテキスト(文字列)がどの位置に来るかを制御します。

    ■「画像を左に」
    →左端に画像、その右余白にテキストが表示されます。
    ■「画像を右に」
    →左側がテキスト、右端に画像が表示されます。
    ■「回り込み指定なし」(チェックを外す)
    →画像の横の余白にはテキストは表示されません。
  • 《サムネイルの作成》
    画像を縮小表示します。
    幅をピクセル、またはパーセントで指定すると元画像と同じ縦横比で縦も縮小された画像が記事上には表示されます。
    これを選択すると自動的に元画像へのリンクが張られ、記事上ではこの縮小画像をクリックすることで元画像が開く設定となります。
  • 《ポップアップウィンドウ》
    画像、または文字列をクリックすると元画像をポップアップ画面で表示します。

元画像の大きさと《サムネイルの作成》、《ポップアップウィンドウ》のON(チェックあり)、 OFF(チェックなし)の組み合わせによって投稿記事への画像表示状態が変わってきます。
それぞれの組み合わせ時の表示状態について表にまとめましたので参考にして下さい。

【A.元画像の大きさ(幅)が記事表示欄よりも小さい場合】

No

サムネイルの作成

ポップアップウィンドウ 画像の表示状態
1

ON

ON

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
2

OFF

ON

画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる
→リンクをクリックすると原寸の写真がポップアップで表示される
3

ON

OFF

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
4

OFF

OFF

画像が記事中にのみ原寸で表示される
※ リンクはなし

【B.元画像の大きさ(幅)が記事表示欄よりも大きい場合】

No

サムネイルの作成

ポップアップウィンドウ 画像の表示状態
1

ON

ON

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
2

OFF

ON

画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる
→リンクをクリックすると原寸の写真がポップアップで表示される
3

ON

OFF

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
4

OFF

OFF

自動的に記事欄の幅に合うように縮小された画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される

上記より、「IMG(イメージ)ボタン」(画像の挿入)を使った場合、ポップアップなしで画像を挿入出来るのは

  • 画像が記事欄の幅よりも小さい
  • 「サムネイルの作成」、「ポップアップウィンドウ」 の設定がどちらもOFFになっている

の条件のときのみとなります。
※ HTMLタグを自分で成形すれば可能ですがここでは説明しません。
※ご自分で下記のページなどを参考にご確認下さい。
「TAG index」 様内 『HTMLタグリスト/イメージタグ』

ココログ公式ヘルプ「使い方ガイド」内の下記のページも参照して下さい。
3: ブログへの画像/ファイルのアップロード


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

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

第26回:サイドバーに「アクセス解析ツール」を設置してみよう

サイドバーに貼り付けるブログパーツは多種多様にありますが、今回は 「自分のブログがどこからアクセスされたか/どの記事がよく読まれているか」などのアクセス状況が表示できるパーツを付けてみましょう。
私も現在「ACR WEB」さんの『ページランキング』を設置しているのですが、ちょっとこれは設定が面倒(ページをタイトル表示にするには手動で設定しなければならない)なので、今回はタイトルも自動で読みとってくれる「Sideber.jp (サイドバー.jp)」さんのランキングパーツをご紹介したいと思います。
【'07/04/14修正】
現在は「ACR WEB」さんのサービスでも自動で記事タイトルを読みとってくれます。

手順

事前準備1:ユーザー登録をする

「Sidebar.jp」のユーザー登録をします。

  1. トップページの「どうやるの?」の下にある空欄にメールアドレスを入力し、「新規登録/ログイン」ボタンを押す。
  2. 画面が切り替わり「新規ユーザー登録しますか?」と聞いてくるので、「新規登録」ボタンを押す。
    ※ボタンを押すと「確認メールを送信しました」画面に切り替わる
  3. しばらくすると登録したメールアドレスに確認用のメールが来るので、そこに記載されているURLをクリックする。

このあと、ブラウザに「基本設定」画面が表示されれば登録完了です。

事前準備2:基本設定

自分のブログの情報を設定します。

  1. 表示されたページの空欄に自分のブログのURLを正しく入力して「更新」ボタンを押す。
  2. 下に表示された「はじめかた」から『アクセス統計を使いたい』をクリックする。
  3. 「リンク元/アクセス統計に関する設定」に切り替わるので、それぞれの項目について任意で設定する。
    基本的に最初の3項目だけ設定すればOKです。
    ※後ろの2項目は内容が判らなければそのままブランクにしておいて下さい。
  4. 設定が完了したら「更新」ボタンを押す
  5. その下の「アクセス集計を行う HTML」に上記で設定した条件のスクリプトが表示されるので、これを全文コピーする。

サイドバーに設置する

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

sidebarjp こんな感じに表示されればOKです。
解析結果がブログ上に反映するまでには、しばらく(約1時間程度)かかります
※一度表示されればあとは勝手にデータを拾ってくれますので、何もしなくて大丈夫です。
※( )内の数字がアクセス件数です。

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

 

ここがポイント

  • 上に掲載した画像は何も成形していない状態ですが、CSSでカスタマイズして表示することも可能です。
    詳細については下記のページを参照して下さい。
    リンク元/アクセスランキングだけを利用する方法
    「アクセスの多いページ」のタイトルを調整する
    このCSSカスタマイズについては、 当ブログではご質問をお受けできませんのでご了承下さい
  • このサービスは便利ですが、ときどきサーバーがかなり重くなりアクセスし難くなる場合があります
    そうした場合、ブログ全体の表示速度にも影響が出ますので、設置する場合は出来るだけ (表示順の遅い) 右サイドバーの下の方に置くことをお奨めします
    ※表示設定の手軽さよりもサーバーの軽快さを重視する場合は、 「ACR WEB」さんのほうがオススメです。
    ※「ACR WEB」さんのページランキングは右サイドバーの「人気ページTop10」に表示してありますので参考にして下さい。
  • 基本的にスクリプトを使ったブログパーツはどれも表示が重くなりがちです。
    ときどき自分でもブログ画面を表示して所要時間を確認し、時間が掛かるようなら設置場所を変更するなど工夫しましょう。

お世話になりました

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


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


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

2006/04/09

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

便利ツールご紹介企画 第2弾。今回は「Track Word」をご紹介します。

「Track Word」は自分のブログ内のどのページがどんな言葉(キーワード)で検索されたかを通知、表示してくれるツール (サービス)です。
提供元はサイドフィード株式会社さんです。

「トラックワード」では、ブロガーの方が「どのようなキーワードで検索されるべきか」 について考え、また検索する方が「どのようなキーワードで検索したら最適な結果を得られるか」 について知ることができるようにしたいと考えています。
(中略)
どんなブログがどんなキーワードで検索されていて、このキーワードに続けるべきキーワードは何か、 という情報をまとめて表示することができれば、きっと「検索する人」の役にも立つと思うのです。
「Track Word」『サービス概要』ページより引用)

どんなことが出来るかは上記の『サービス概要』ページを読んでいただければ判るかと思いますが、簡単に言ってしまうと 「アクセス解析から<検索ワード><検索フレーズ>情報のみを抽出して分かり易く表示してくれるサービス」 といったところでしょうか。
自分のブログのどのページがどんなキーワードで検索されたのかが視覚的に分かり易く表示される仕組みになっているので、その結果を見ながら内容を書き換えたりキーワードを追加することによって更なるアクセスアップを図ることが出来るかと思います。

…なんて、偉そうに言ってますが、私の場合単に結果を眺めて楽しんでるだけですが^^;
ただ、「サービス概要」ページにも書いてあるように、この「Track Word」に参加しているブログのみを対象にして、キーワード (フレーズ)ごとに参照数のランキングが表示されていたりするので、そこからのアクセスもかなり期待できますし、検索機能もついていますので自分で検索する場合もどのブログが多く参照されているかすぐに判って目的の情報を見つけやすいシステムだと思います。

以下、簡単に登録、設置方法の説明を書いておきます。

手順

登録方法

  1. トップページから「新規登録する」をクリック。
  2. 「新規登録」画面が開くので、必要事項を入力し「以上の内容で新規登録する」ボタンを押す。
  3. 登録が承認されると「新規登録の完了」画面が表示される。
    ※同時に登録の連絡メールも送信されて来ます。

以上で登録は完了です。

ブログに表示する

情報収集には収集用のスクリプトの設置とともに、ブログへのバナーの貼り付けが必須となります。
また、このバナーの下に検索されたキーワードが表示されるようになります。

  1. 「新規登録の完了」画面にある「ログインする」リンクをクリックする。
  2. 登録の際に申請した「ログインID」「パスワード」でログインする。
  3. 「設置方法」に表示してある、「HTMLコード」(縦表示と横表示がありますのでどちらか)を全文コピーして、「マイリスト」 (メモリストのメモ欄など)に貼り付ける。
  4. ブログに表示されるように設定する。
    ※ココログでの表示設定については
    「基本2: マイリストの作成→サイドバーへの設置」
    を参照してください。

RSSリーダーに登録する

RSSリーダーにRSSを登録しておくと、検索サイトを通じてアクセスがある度にRSSリーダーに通知が来るようになります。

  1. 「ログイン」画面の「お知らせ」にある『RSS2.0』のバナーの上で右クリックし、「ショートカットのコピー」を選択する。
  2. コピーされたRSSを自分で使っている「RSSリーダー」に追加する。

track_word

RSSリーダーには左記のように通知されます。
(表示はRSSリーダーの種類によって異なります)


以上です。
全て無料で利用できますので、ブログのアクセスアップにデータを活用してみては如何でしょうか。


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


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

2006/04/07

第25回:記事に挿入した画像をポラロイド写真風に表示してみよう

0121lunch 前回( 「第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう」) の記事をちょっと応用してポラロイド風に表示出来るようにしてみました。
影の画像やタグは前回と殆ど同じCSSを利用するので、前回のものを既に適用している場合は【事前準備】は不要です。
今回用に書き換えたCSSのみ追加入力して保存して下さい。

今回のカスタマイズは下記ブログの記事を参考にさせて頂いています。

「小粋空間」様 内 『CSSで画像に影を付ける(ドロップシャドウ)』
「Dear Days別冊」様 内 『ポラロイド背景に画像を(茶系)』

ありがとうございました。

手順

事前準備1:影用の画像を準備する

「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』の記事からリンクしてある影用の画像をダウンロードします。
該当ページの真ん中辺りで「画像はこちら。」と書いてある部分の「こちら」に貼ってあるリンクをクリックし、表示されたページの画像を自分のPC内に保存して下さい。

事前準備2:影用の画像をココログにアップロードする

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

CSSを編集する

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

    .pola {
        background: url(●●●) right bottom;
        float: left; /* 回り込み制御 */
    }

    .pola img {
        position: relative;
        left: -5px; /* 画像を左へ移動 */
        top: -5px; /* 画像を上へ移動 */
        padding:
    10px 10px 50px 10px; /* 画像枠 */
        background: #ffffe0; /* paddingを設定した場合の背景色 */
        border: 1px solid #999999; /* 画像の枠線 */
    }

    を全て半角英数で記述する。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    前回のCSSとは赤文字の部分だけが異なります。
    ※ 上記のCSSは「小粋空間」様 内 『CSSで画像に影を付ける(ドロップシャドウ)』「Dear Days別冊」 様 内 『ポラロイド背景に画像を(茶系) 』を参考にさせて頂きました。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります。
※画像の挿入については前回の記事
『第24回: 記事に挿入した画像に写真風の枠線と影を付けてみよう』
またはココログの公式ヘルプ
「使い方ヘルプ」『3:ブログへの画像/ファイルのアップロード』
を参照してください。

画像タグにCSSを呼び出す記述を追加する

  1. (「リッチテキストモード」の場合)「HTMLの編集」画面に切り替える。
    ※「プレーンテキストモード」の場合はそのままでOKです。
  2. 画面に

    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" />

    というようなタグが入力されていると思うので、そこから
    MARGIN: 0px 5px 5px 0px
    を削除する。
    ※「カスタム設定」を設定した場合はもっと複雑なタグが記入されますが、そこからも同様に「MARGIN: 0px 5px 5px 0px」の部分を探して削除して下さい。
    ※この部分が残っていると影の表示がずれてしまいます。
  3. 上記のタグを

    <span class="pola">~</span>

    で囲む。
    ※つまり、上の画像タグの場合だったら、

    <span class="pola"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>

    になります。
  4. 記事が書き終わったら「保存」ボタンを押す。
  5. ブログを表示してイメージ通りに出来ているかどうか確認する。

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

ここがポイント

  • このCSSを適用する場合、使用する画像は縦長のものよりも少し横長か正方形に近い方がそれっぽく見えます
  • 画像の下部分の大きな余白にサイン(文字)を入れたい場合は、 好きな文字を入れた画像を別に作成しそれをココログにアップロードした上で

    background-image:url(●●●); /*文字入り画像の指定*/
    background-repeat:no-repeat; /*画像繰り返し:なし*/
    background-position:▲ ■; /*画像の位置*/

    の記述を「.pora img」タグ内に追加してください。

お世話になりました

「小粋空間」
「Dear Days別冊」
■素材サイト 「PRISM」様<記事内のボタン素材>


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


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

2006/04/02

第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう

shidarezakura 記事部分に挿入した画像に写真風の枠線と影を付けてみましょう。
携帯のカメラで撮った写真でも立体感のある、ちょっとスタイリッシュ(?)な雰囲気で表示させることが出来ます。


このカスタマイズは、下記ブログの記事を全面的に参考にさせて頂いています。

「小粋空間」様 内 『CSSで画像に影をつける(ドロップシャドウ)』(CSSタグ)
「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』(影用画像入手)

ありがとうございました。

手順

事前準備1:影用の画像を準備する

「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』の記事からリンクしてある影用の画像をダウンロードします。
該当ページの真ん中辺りで「画像はこちら。」と書いてある部分の「こちら」に貼ってあるリンクをクリックし、表示されたページの画像を自分のPC内に保存して下さい。

事前準備2:影用の画像をココログにアップロードする

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

CSSを編集する

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

    .shadow {
        background: url(●●●) right bottom;
        float: left; /* 回り込み制御 */
    }

    .shadow img {
        position: relative;
        left: -5px; /* 画像を左へ移動 */
        top: -5px; /* 画像を上へ移動 */
        padding: 5px; /* 画像枠 */
        background: #ffffe0; /* paddingを設定した場合の背景色 */
        border: 1px solid #999999; /* 画像の枠線 */
    }


    を全て半角英数で記述する。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    上記のCSSは全て 「小粋空間」 様に記載してあるタグのコピーです。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります
今回は画像の挿入方法も合わせて説明します。

画像の挿入

  1. 記事作成画面の任意の位置で「IMG(画像の挿入)」ボタンを押す。
  2. 「画像の挿入」ウィンドウが開くので、「1.画像の選択」の「参照」ボタンを押し挿入したい画像を選択、「開く」ボタンを押す。
  3. 元の画面に戻るので「画像の挿入」ボタンを押す。
    ※「カスタム設定」は必要に応じて設定して下さい。
    ※詳細については下記の記事を参考にして下さい。
    基本3: 記事欄への画像の挿入
  4. 記事作成画面に画像が表示されれば完了。
    ※「プレーンテキストモード」の場合は、画像は表示されず画像表示用のタグが自動入力されます。

画像タグに影を付けるための記述を追加する

  1. (「リッチテキストモード」の場合)「HTMLの編集」画面に切り替える。
    ※「プレーンテキストモード」の場合はそのままでOKです。
  2. 画面に

    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" />

    というようなタグが入力されていると思うので、そこから

    MARGIN: 0px 5px 5px 0px

    を削除する。

    ※「カスタム設定」を設定した場合はもっと複雑なタグが記入されますが、 そこからも同様に「MARGIN: 0px 5px 5px 0px」の部分を探して削除して下さい。
    ※この部分が残っていると影の表示がずれてしまいます。
  3. 上記のタグを

    <span class="shadow">~</span>

    で囲む。
    ※つまり、上の画像タグの場合だったら、

    <span class="shadow"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>

    になります。
  4. 記事が書き終わったら「保存」ボタンを押す。
  5. ブログを表示してイメージ通りに出来ているかどうか確認する。

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

ここがポイント

  • 今回のカスタマイズは、画像タグに「shadow」というセレクタを指定することによって、 影を付ける場合と付けない場合を選択できるようになっています。
    影を付ける場合は、必ず画像タグに<span class="shadow">~</span>を追加入力して下さい。
  • 画像を挿入するときに生成されるタグの「margin」指定が残っていると影がずれて表示されてしまいます。
    必ず「margin」指定を削除して下さい。
  • 既に入力されている画像にもCSSを設定した上で<span class="shadow">~</span>を追加すれば影を付けることが可能です。
  • 上記以外の詳細な設定についても「小粋空間」様の該当記事で解説されていますので、ご参照下さい。

お世話になりました

「小粋空間」
「POCHIKING」
■素材サイト 「PRISM」様<記事内のボタン素材>


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


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

« 2006年3月 | トップページ | 2006年5月 »