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

2006年2月の20件の記事

2006/02/26

第13回:サイドバーをリストごとに折り畳んでみよう

ブログを続けているとサイドバーにいろいろな項目が増えてきてどんどん長くなってきます。
これをスクリプトを使って項目ごとに折り畳めるようにしてみましょう。
このカスタマイズは「facet-divers」 様の 『サイドバー折り畳み2:状態保持機能付き』 の記事を全面的に参考にさせて頂いています。
「facet-divers」様、ありがとうございます(^^) (いつもお世話になってます)

手順

事前準備:スクリプトを準備する

下記のウィンドウ内のスクリプトを全文コピーして「メモ帳」などに貼り付けて下さい。
※facetさんのご好意により転載させて頂きました。ありがとうございました。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
</script>
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
foldTitle = "close";
unfoldMark = "+";
unfoldTitle = "open";
switchStyle = "float:right;margin:0;width:1.4em;padding:0;height:1.4em;line-height:1em;text-align:center;text-indent:0;";
labelStyle = "letter-spacing:0.1em;";
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";
foldBroadly = true;
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
makeSwitchesBy(pattern);
//
pattern = "最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
foldContentsBy(pattern); 
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新";
countItemsBy(pattern);
//-->
</script>

※スクリプトをメモ帳に貼り付ける際、メモ帳の設定が「右端で折り返す」 になっていると不要な改行が入ってしまいスクリプトが誤作動する場合があります
処理の前にメモ帳の「書式」をクリックしてこの中の「右端で折り返す」にチェックが入ってる場合は、これを外してから貼り付け作業を実施して下さい。

スクリプトを書き換える

上記で準備したスクリプト中の3箇所の「pattern="...";」を必要に応じて書き換えます。

  1. 「makeSwitchesBy(pattern);」の上にある 「pattern="...";」
    折り畳みボタンを付けたいリスト名を指定する。
    ※ここでタイトルを指定したリストだけが折り畳みボタンが付きます。
  2. 「foldContentsBy(pattern); 」の上にある 「pattern="...";」
    ページを読み込んだ時に折り畳んでおきたいリスト名を指定する。
    ※ここでタイトルを指定したリストはブログにアクセスした時に折り畳まれた状態で表示されます。
    ※例えば「最初は全て閉じた状態にしたい」ときはA.と同じリスト名を全て指定、
    「『最近の記事』だけは開いた状態で表示したい」ときはA.のリスト名から『最近の記事』を抜いて指定します。
    (デフォルトでは後者の状態になっています)
  3. 「countItemsBy(pattern); 」の上にある 「pattern-"..."; 」
    リスト内の項目数をカウントして表示したいリスト名を指定する。
    ※指定するとタイトル横に(10)のような感じで、内容の項目数が表示されます。

※基本的にこの3箇所を自分のブログに合わせて変更するだけでOKです。
※リスト名の書き換え、追加については元のスクリプトに書いてあるものを参考にして記述して下さい。
リスト名の間を半角の縦線( | )で区切るのを忘れずに
※更に詳しいカスタマイズについては、「facet-divers」様の元記事を参照して下さい。

サイドバーに設置する

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

※このスクリプトは、上記の書き換え時に指定した全てのリストよりも下になるように設置して下さい。

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

ここがポイント

  • このスクリプトは設置場所よりも上にあるリストにのみ有効です。
    設置場所(リストを置く場所)に注意しましょう。
    例えば右サイドバーの一番下の項目まで折り畳みたいのであれば、その項目の下にスクリプト入りのリストを設置する必要がある、 ということです。
  • 両サイドバータイプのスタイルの場合も、右サイドバーの一番下に入れれば左サイドバーの項目まで折り畳めます。
    ※読み込むまで多少タイムラグがありますので、気になるようなら左右別々に設置するという手もありますが、 その場合スクリプトの内容を更に若干書き換える必要があります。
    ※詳しくは 「facet-divers」様の 『サイドバー折り畳み2:動作遅延対策』を参照して下さい。
  • 設置するためのリストを作成する場合、既に何らかのスクリプトを一番下に置いているなら、 新しくリストを作成せずに既にあるリストに項目を追加する形で置いた方がサイドバーの表示がスッキリすると思います。
    ※使い勝手の問題もありますので、その辺はお好みで。
  • 折り畳みボタンのカスタマイズについては「KOROPPYの本棚」 様内の記事 『折りたたみボタンの色を開閉で変える』に詳しく書かれています。
    参考にして下さい。

このスクリプトは使用しているテンプレートによってはブラウザ毎に挙動が違ったり、デザインが崩れたりする場合があるそうです。
その場合はfacetさんが対応して下さるとのお言葉を頂いておりますので、上記の設定をしても上手く動かない場合はfacetさんまで直接ご連絡して下さい
『サイドバー折り畳み2:状態保持機能付き』の記事のコメント欄に状況を書き込んで下さい)
その際、facetさんがブログの設定内容を確認して下さいますので、設置したスクリプトはそのままの状態でご連絡下さい
宜しくお願いいたします。

お世話になりました

「facet-divers」
「KOROPPYの本棚」
■素材サイト 「PRISM」


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


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

2006/02/25

第12回:コメント欄の幅を調整してみよう

今回は今までのカスタマイズよりちょっと地味です(笑)
コメント欄の大きさ(幅)を調整するカスタマイズ。
殆ど自分の覚え書き用です。

先日からここのコメント欄がサイドバーに食い込んでしまってきれいに表示されないのが非常に気になっていました。
そこで調整しようとあちこち触っていたのですがなかなか直らず。
う~む…と悩みながらまたGoogleで検索してみたところ、 発見しました!
同じココログ内の 「FUKIIKUNI_BLOG」様で昨年8月にエントリーされた 「ココログカスタマイズ(2) コメントツリー化&コメント欄を広く」のエントリー。
こちらに記述してあったCSSを参考に編集したところ、無事サイドバーによる表示切れが解消されました。
ありがとうございます(^^)

以下、「FUKIIKUNI_BLOG」様の該当記事を読めば判ることですが念のため。

手順

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

    #comment-text textarea, #comment-text-field textarea
    {
    width: ■■■px;
    }

    を全て半角英数で記述する。
    ■■■には記事表示列の幅に合わせて数値を入力して下さい。
    ※ここの場合、記事表示列が400pxなので、コメント欄は350pxに設定しました。
  3. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。

ここがポイント

  • 高さも調整したい場合は、上記のCSSに

    height: ■■■px;

    を追加すればOKです。

 

お世話になりました

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


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


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


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

第11回:記事とフッターの間に区切り線(画像)を入れてみよう

エントリー欄とフッター(投稿者名やカテゴリ、固定リンクなどが書いてある部分)の間に区切り線になる画像を入れてみましょう。
こんな感じ↓になります。(クリックで拡大)

Line_1

手順

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

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

私は「Simple Life」 様でお借りした素材 (300px * 28px)を使いました。

※長めのライン画像を使用する場合、自分で設定したエントリー部分の幅よりも短い画像でないと途中で切れてしまうので注意しましょう。

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

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

CSSを編集する

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

    .content p.posted
    {
    background-image:url(●●●);/*区切り用画像アドレスの指定*/
    background-repeat:no-repeat;/*画像の繰り返し(なし) */
    padding-top:■px;/*画像挿入スペースの作成(上余白の設定) */
    background-position:top center;/*画像の位置*/
    }


    の赤文字部分を全て半角英数で記述する。
    ●●●には上記で保存した画像のURL、 ■には画像の高さに合わせて数値を入力して下さい。
    (/*~*/で囲まれた部分は表示には影響しません。設定の内容を書いておくメモなどに活用できます。 この中は半角英数以外でもOKです)
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

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

ここがポイント

  • 「background-repeat」は画像の繰り返しを指定するプロパティです。
    上記のCSSでは長めのラインを一つだけ表示するため、
    「background-repeat:no-repeat;」
    を記述して、画像の繰り返しは「なし」
    に設定しました。
    ここを
    「background-repeat:repeat-x;」
    と記述すれば、 横方向へ繰り返し表示されるので小さな画像を連続して表示することで繋がったラインのように表示することが出来ます。
    例えば、前回サイドバーのタイトルに付けたアイコンを 「repeat-x」で並べてライン状にするとこんな感じ↓になります。

 

  • 書いているときは気付きませんでしたがこの部分(.contrnt p posted)に画像を入れると、 記事だけでなくコメントのフッターにも同じ画像が付くようです。
    コメントの区切り線としても使えますね。

お世話になりました

【今回お世話になったサイト様、ブログ様です。 ありがとうございました。】

「PRISM」様<記事中のボタン素材>
「Simple Smile」 様<ライン素材>


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


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

2006/02/22

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

サイドバータイトルの行頭にワンポイントになる画像を設置してみましょう。

Onepoint_3

←こんな感じになります。

【'07/01/28】
【応用編】として「記事のタイトルへワンポイントを付けてみよう」を追記しました。

手順

画像を入手する

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

大きさは縦横とも20px以内くらいのものがちょうどいいと思います。

私は「Simple Life」 さんでお借りした素材(18px * 18px)を使いました。

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

  1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く 
  2. 「新規ファイルのアップロード」の「参照」ボタンを押す 
  3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル(画像)を選択し「開く」ボタンを押す 
  4. 「アップロード」ボタンを押す 
  5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
    ※ここまででファイルのアップロードは完了です。

CSSを編集する

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

    .sidebar h2
    {
    background-image:url(●●●);
    background-repeat:no-repeat;
    height:■px;
    padding-left:▲px;
    }

    を全て半角英数で記述する。
    ●●●には上記で保存した画像のURL、■、 ▲には画像の大きさに合わせて数値を入力して下さい。(■は高さ、▲は幅) 
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。 
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。 
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。 
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。 
  9. イメージ通りに出来ているかどうか確認する。

と、ここまででもいいのですが、カレンダーを表示している人はもうひと手間頑張ってみましょう。
上記で指定した「.sidebar h2」は「サイドバーのタイトル」を指定する要素なのですが、カレンダーのタイトルはこれとは別の要素を持っているためこれだけではカレンダーだけワンポイントが付きません。
そこでカレンダーのタイトルを指定する「#calendar caption」 にも上記と同じプロパティと値を記述します

#calendar caption
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}

これを「CSS記述欄」に同じように入力して、保存すればカレンダータイトルにも同じワンポイントが表示されます。
※保存については上記の5.以降と同様に処理してください。

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

【'06/10/01追記】
ココログのユーザー助け合い掲示板『みんなで解決!広場』にて、サイドバーのタイトルに別々の画像を表示する方法が回答として投稿されました。
更にカズタマイズしたい!という場合は下記を参考にチャレンジしてみて下さい。
1789. サイドバーの項目に別々の画像をつけたい
私もそのうちやってみるかも。(未定ですが^^;)
【'07/02/19追記】
フリープランの場合、「マイリスト」タイトルにHTMLタグを入力してもタグとして認識されないため上記のカスタマイズは出来ないようです。
確認もせずに掲載してしまい申し訳ありませんでした。
(ベーシック以上の有料プランなら設定可能です)

応用編:記事のタイトルにワンポイントを付けてみよう

記事のタイトル欄にワンポイントを付けたい場合は、上記の【CSSを編集する】の4.で記述したCSSのセレクタを変更して

.content h3
{
background-image:url(●●●);
background-repeat:no-repeat;
height:■px;
padding-left:▲px;
}

としてみて下さい。

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

■ワンポイント画像は素材サイト「Simple Life」 様からいただきました。
■記事中のボタン素材は素材サイト 「PRISM」様 から頂きました。


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


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

2006/02/20

第9回:アクセス解析を設置してみよう

自分のブログをどのくらいの人が読んでくれているのか、どの記事が人気があるのか気になりませんか?
そうしたデータを集計・解析してくれるのが「アクセス解析」です。

ココログフリーには標準でアクセス解析が付いていますが、時間ごとの件数は何とか把握できるもののページごとやリンク元のランキングはパーセント表示で詳しい件数が判りませんし、訪問者ごとの個別の情報も取得できません。
ネット上には無料で高機能なアクセス解析をレンタルして下さっているサービスサイトがたくさんありますので、そこからタグをお借りして設置してみましょう。

【'06/09/02:追記】
「ベーシック/プラス/プロ」の有料プランについては、8/2よりココログ標準の「アクセス解析」機能が大幅にバージョンアップされました。
下記で紹介した解析サービスとも遜色のない高機能解析が出来るようになっています。
機能や使い方の詳細については下記の記事を参照して下さい。
アクセス解析をバージョンアップしました (「お知らせココログ」より)
【'06/11/05追記】
「フリー」プランでも11月1日より有料プランと同等の解析機能にバージョンアップしました。
使い方の詳細についてはココログ内の下記の記事を参照して下さい。
■ココログ通信:新アクセス解析活用術

上の【追記】に書いたように現在ではココログのアクセス解析もかなり高機能になりましたので、他のサービスをわざわざレンタルする必要はなくなりました。
ただ、下記の方法を使えばココログ標準のアクセス解析と他社サービスを併用することも可能ですので、この記事はこのまま残しておくことにします。

手順

タグを入手する

アクセス解析のレンタルサイトに登録して、アクセス解析用のタグを入手します。
※登録方法はサイトによって異なりますので、サイトの説明に従って手続きして下さい。

タグの設置

アクセス解析用のタグは「サブタイトル」部分に入力します。

  1. ココログの管理画面にログインし、「ブログ」タブ→(便利メニューから)「設定の変更」 
  2. 「ブログの基本情報」が表示されるので、その中の 『ブログのサブタイトル (キャッチフレーズ)』が記入してある部分に、上記で入手したタグを全てコピー&ペーストする
    ※ご自分で入力したサブタイトルよりも前に貼り付けて下さい。 
  3. 画面下の「変更を保存」ボタンを押す。 
  4. 画面が切り替わった後に表示される「サイトに反映」ボタンを押す。

このまましばらく待ってアクセス解析サイトの管理画面を確認すれば解析が始まっているはずです。

以上です。

ここがポイント

私の現在のオススメは 「Access Analyzer.com(アクセスアナライザードットコム)」です。(現在使用中です)
サンプル画面はこちら。画面左側の項目をクリックすると画面が変わります。
オススメの理由は

  • ページごとのアクセス解析が可能 
  • 複数のサイト(ブログ)を同一アカウントでまとめて管理できる 
  • ログ保存期限が1年間である

などです。
特にページごとのアクセス解析はブログの場合には、タグを追加しなくても自動で更新されますし、 URLだけでなくタイトルも取得してくれるのでかなり便利だと思います。
※サンプル画面の「人気ページタイトル」をクリックしてみて下さい。
但し、(そんなに長時間ではないですが)「メンテナンス」で接続できない頻度がちょっと高いことと、アクセスの数値がリアルタイムではなく10分程度タイムラグがあるのが欠点と言えば欠点かも…。
私はあまり気になりませんが。

他にも「忍.jp」「FC2アクセス解析」など多くのサービスがありますので、自分の使い勝手に合わせて選んでみて下さい。
参考:「無料サイト集KOOSS」『無料アクセス解析』

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

■記事中のボタン素材は素材サイト「PRISM」様から頂きました。


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


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

2006/02/19

第8回:サイト内検索を設置してみよう

自分のサイト(ブログ)内を検索出来るツールを設置してみましょう。
いろいろな検索エンジンの検索ツールが利用できますが、ここでは「Google」を利用したものと、ココログのユーザーさんが作成したスクリプトを利用したものを紹介します。

■「Google」の検索エンジンを利用する方法はこちら
■ココログユーザーさん作成のスクリプトを利用する場合はこちら  (←オススメ!

手順

「Google」の検索エンジンを利用する

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

「Google」検索用のタグを入手します。

本当はGoogleで配布されているタグをそのまま利用しようと思ったのですが、 Webサイト用の仕様であるためブログのサイドバーに貼り付けるためにはかなり面倒な書き換えが必要であることに気付きました。
ここでそれを説明する能力が私にはないので^^;、あっさり断念。
代わりに何かないかと検索した結果、 「いかんともしがたい」様でココログ用にちゃんと成形して下さっているタグを発見。
お借りすることにしました。
こちらのページで入手できます。
『Google 検索窓を設置する その 5 完成形』
「いかんともしがたい」様、ありがとうございました。
※こんな風に、ブログ内では自分が「困ったな~」と思っていることは検索してみれば誰かが解決策を書いて下さっていることが多いです。
※困ったことがあったらまず検索してみましょう!

タグを書き換える

  1. 「いかんともしがたい」 様の 『Google 検索窓を設置する その 5 完成形』ページ内にあるタグを全てコピーして、メモ帳に貼り付ける。
  2. 赤字で書いてある「yoursite.co.jp」 (小文字のほうです) を自分のブログのアドレスに書き換える
    ※例えばこのブログを例に取ると
    ※ブログurl:http: //tea-for-me.cocolog-nifty.com/
    ※のうちの、tea-for-me.cocolog-nifty.com の部分のみを入力します。
  3. 同じく「YOURSITE.CO.JP」 を自分のブログ名に書き換える
    ※ここはブログに表示される部分なのでどんな文字列でもOKです。
    ※例えばブログ名でなく「このブログ内を」とかにしても。
  4. 上記2箇所の修正が終わったら、改行をなくして一行の続いたタグにする

タグをブログに貼り付ける

  1. 管理画面→「マイリスト」タブ→「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。
    ※名前の欄は入力した文字がサイドバーにタイトルとして表示されますので自分で相応しい文字列を入力してください(例:「サイト内検索」 など)
    ※文字列を出したくない時は、スペースを入れても大丈夫です。
  2. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。
  3. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースに上記のタグを全て入力する。
  4. 「追加」ボタンをクリックする。
  5. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。
  6. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」
  7. 「ブログ」タブ→(便利メニューから)「デザインの編集」→「表示項目を変更」をクリック。
  8. 「マイリスト」の一覧の中から、作成したサイト内検索用のリストを選択しチェックボックスにチェックを入れ「変更を保存」。
  9. 「デザインの編集」に戻って「並べ方を変更」をクリック。
  10. 「表示項目の並べ方」画面が表示されるので、作成したカウンターを好きな場所に移動して「変更を保存」。

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

ここがポイント

  • 「yoursite.co.jp」 の部分を自分のアドレスに書き換える場合、 その前に書いてある 「site:」 を消さないように注意しましょう。
  • この検索は「Google」の検索情報に該当記事が登録されていることが前提になります。
    公開した記事がGoogleに登録されるには少なくとも数日はかかるようです

ココログユーザーさん作成のスクリプトを利用する

上記にも書いたように、Googleの検索は記事を公開してから検索対象に登録されるまでに数日かかるため、公開直後にすべての記事を検索することは困難です。
そこで、公開間もないブログの記事でも検索出来る「サイト内」検索を付けてみます。
この検索は「暴想」 様の 「自分のココログを全文検索するJavaScript」内のスクリプトを使わせて頂きました。
「暴想」様、ありがとうございました。
以下に簡単に手順を書いておきます。

※実はこちらの検索のほうがお薦めです。
※但し、利用者のブラウザの設定が「JavaScriptを無効」になっている場合は動作しませんのでご注意下さい。

手順

  1. 「暴想」様の「自分のココログを全文検索するJavaScript」内のスクリプトを全文コピーして、「メモ帳」に貼り付ける。
  2. 「暴想」様の注意に従ってスクリプトの内容を書き換える。
    スクリプト中の2箇所の「/blog/archives.html」 部分の/***/の内容を自分のブログアドレスに合わせて書き換えます
    ※例えばここの場合urlが「http: //tea-for-me.cocolog-nifty.com/blog/」ですので、
    ※スクリプトに書いてある通り「/blog/archives.html」 のままでOKですが、
    ※もう一つのブログの場合urlが「http: //tacop.cocolog-nifty.com/second_message/」になりますので、
    ※書き換えると「/second_message/archives.html」 となります。

    【'06/11/10修正】
    「暴想」様のスクリプトバージョンアップにより、上記の書き換えは不要になりました。
    スクリプトをコピーしたらそのまま3.に進んで下さい。
    ※既に修正して設置してあるスクリプトもそのまま使用できるとのことです。
    ※詳しくは「暴想」様: 「cocolog_ajax_search.jsをバージョンアップした。」をご覧下さい。
  3. この後は、上記の【タグをブログに貼り付ける】と手順は同じです。

【'07/04/14】
上記のスクリプトの設置が更に簡単になりました!
作者なおゆきさんがスクリプトを「ココログ・ブログパーツ」に登録されたため、簡単な設定後、登録ボタンを押すだけで自分のココログに設置することが出来るようになりました。
設置方法の詳細は暴想様の該当記事
自分のココログを全文検索するブログパーツ
にて確認して下さい。ホントに簡単です。

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

「いかんともしがたい」
「暴想」
■記事中のボタン素材は素材サイト「PRISM」様から頂きました。


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


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

【ブログ・カスタマイズ お役立ちリンク集】

HTMLやCSSタグ、Web用素材など、私がいつもブログカスタマイズする際に利用させて頂いているサイト(ブログ)様をリンク集にしてみました。

※リンク切れ、リンクミスなどありましたら、コメント欄にてお知らせ頂ければ助かります。


 

ココログヘルプ関連 / ■HTML / CSS関連 / カラーチャート / 配色関連
インターネット、ブログのマナー&セキュリティ
Web素材(写真) /Web素材(グラフィック)
ツール  / 書籍


 

ココログヘルプ関連

HTML/CSS関連

カラーチャート / 配色関連

インターネット、 ブログのマナー& セキュリティ

Web素材(写真)

Web素材(グラフィック)

ツール

書籍

ポータル、プロバイダ別
blogデザインカスタマイズ事典

外間 かおり

4839915717
WEB CREATORS’ MANUAL
そのまま使えるスタイルシートサンプル集
大藤 幹
4883373045
超図解 HTML & CSSリファレンス
エクスメディア

4872835875
 

 

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


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

2006/02/18

第7回:コメントをツリー表示にしてみよう

デフォルトだと投稿された順にどんどん重なってくるコメントの表示を、対象のエントリーに最新のコメントがぶら下がるタイプのツリー表示にしてみましょう。

このカスタマイズは、 「のっぺログ」 様の 「ブログ人でコメントをツリー化」 の記事を全面的に参考にさせて頂いています。
ありがとうございます。
※ 「のっぺログ」様の記事はとても簡潔に判りやすくまとめられています。
※ココログでのアップロード方法や、サイドバーの設置についてはもう問題ないという方は「のっぺログ」様の記事を参照されたほうが却って判りやすいかもしれません。

手順

事前準備:スクリプトと画像を準備する

「のっぺログ」 様の 「ブログ人でコメントをツリー化」 の記事中にある 「comtree.js」、「simpleboxes1.gif」、「simpleboxes2.gif」の3つのファイルを自分のPCに保存する。
ファイルのリンク上で右クリック→「対象をファイルに保存」を選択→PC内の判りやすい場所に保存
ファイル名は既に付いていますので変更せずにそのまま保存して下さい。

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

  1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
  2. 「新規ファイルのアップロード」の「参照」ボタンを押す
  3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル(画像)を選択し「開く」ボタンを押す
  4. 「アップロード」ボタンを押す
  5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
    上記で保存したファイルを3つとも同じようにアップロードして下さい
    ※ここまででファイルのアップロードは完了です。

タグを書き換える

  1. 「のっぺログ」様に記載されているタグ(<script type="text/javascript"~</style>まで)を全てコピーして、テキストエディター(「メモ帳」 など) に貼り付ける
  2. 上記の5.で表示されている2つの画像(「simpleboxes1.gif」、「simpleboxes2.gif」) の 「ファイル名」をクリックしてリンクを開く。
    ※クリックするのは「リンクボタンではなく、「ファイルの名前」の方です。
  3. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  4. 「のっぺログ」様で指定されている赤文字の部分(A、B、 Cの3箇所) を指示通りに自分でアップロードしたurlに変更する
    A:「comtree.js」については、 そのまま開くとエラーになってしまうのでリンク上で右クリック→ 「ショートカットのコピー」 でurlをコピーして該当部分に貼り付けて下さい。(貼り付けたurlの最後が 「comtree.js」 になっていればOKです)
    ※B:「simpleboxes1.gif」、C:「simpleboxes2.gif」 については上記で開いたページのurlに差し替えて下さい。
    BとCの画像urlを入力する順番を間違えないようにして下さい。
    【】で囲まれた部分は削除して下さい(【】も含めて)

サイドバーに設置する

  1. ココログの管理画面にログインし、「マイリスト」タブをクリック。
  2. 「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。
    ※名前の欄は文字列が表示されないように、スペースで処理することも可能です。
    ※名前を付けてしまっても動作上問題はありません。
  3. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。
  4. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースに書き換えたスクリプトを全文コピー&ペーストする。
  5. 「追加」ボタンをクリックする。
  6. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。
  7. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」
  8. 「ブログ」タブ→(便利メニューから)「デザインの編集」→「表示項目を変更」をクリック。
  9. 「マイリスト」の一覧の中から、作成したスクリプトのリストを選択しチェックボックスにチェックを入れ「変更を保存」。
    ※2.で名前欄をスペースで処理した場合は、ここでも名前が表示されませんので注意してください。
    ※例えば「カウンター」と名前を付けたリストは[□カウンター(メモ)]と表示されますが、スペースだけのものは[□ (メモ)] となっているはずです。
  10. 「デザインの編集」に戻って「並べ方を変更」をクリック。
  11. 「表示項目の並べ方」画面が表示されるので、作成したメモリストを 「最近のコメント」よりも下に設置して「変更を保存」。

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

ここがポイント

  • 作成したリストは必ず「最近のコメント」 よりも下に置いて下さい。
    上に置いてあると作動しません。
  • 手順は多いですが、一つ一つ処理していけば必ず出来ますので頑張りましょう。
    注意点は「3箇所のurlの置き換え」 「不要部分の削除」です。
    もしうまく表示されない場合は、上記2箇所と 「タグが全文入っているかどうか」 をもう一度確認してみましょう。

お世話になりました

【今回お世話になったサイト様、ブログ様です。ありがとうございました。】

「のっぺログ」
■素材サイト 「PRISM」様(記事中のボタン素材を頂きました)


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


| | コメント (58) | トラックバック (10)

2006/02/17

第6回:背景に画像を表示してみよう

前回は背景(body)に色を付けましたが、今回はここにお好みの画像を表示してみましょう。

bg-image

手順

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

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

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

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

画像をココログにアップロードする

  1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
  2. 「新規ファイルのアップロード」の「参照」ボタンを押す
  3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル(画像)を選択し「開く」ボタンを押す
  4. 「アップロード」ボタンを押す
    ※ファイル名が半角英数でない場合、ここで「不正なファイル名です。 半角英数字のみのファイル名に修正したうえでアップロードしなおしてください。」と表示が出てアップロード出来ません。 ファイル名を半角英数に修正してやり直して下さい。
  5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
    ※ここまでで画像のアップロードは完了です。

CSSを編集する

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

    body{background-image : url(●●●)  }

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

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

私は素材サイト 「Simple Life」さんでお借りしたグリーンのタイル柄にしてみました。

ここがポイント

  • background-imageは背景画像を指定するプロパティです。
    ここに画像の保存先urlを値として指定することで背景画像を表示します。
    urlは半角のカッコ( )で挟んで下さい。

お世話になりました

【今回お世話になったサイト様です。ありがとうございました】

「SimpleLife」 様 背景用の画像を頂きました。
「PRISM」 様 記事中のボタン素材を頂きました。


<関連記事>
第5回: 背景の色を変えてみよう


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


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

2006/02/16

第5回:背景の色を変えてみよう

タイトル、サイドバー、記事本文の部分はデザインの「スタイル」で変更できますが、その周囲「背景」部分の設定は出来ません。
ここでいよいよ「CSS」の登場です。

今回はCSSを使って背景に色を付けてみましょう。

手順

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

    body{background-color :  #●●●●●●; }

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

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

私の場合はタイトル画像の菜の花に合わせて淡いグリーンを選んでみました。

背景色設定サンプル


ここがポイント

  • CSSを記述するときは、必ず下記のような書き方になります。

    セレクタ { プロパティ : 値 }

    セレクタで適用する場所、 プロパティでスタイル、 値で具体的な形を指定します。
    全て半角英数での記述になります。
    プロパティと値の間には必ずコロン( : )が入りますので忘れずに。
  • bodyはブログの表示範囲全体を表す要素(セレクタ)です。
    このbody部分に色や画像を設定すると、その色や画像が背景として表示されます。
  • background-colorは背景色を指定するプロパティです。
    ここにカラーコードで値を指定することで背景色を変更します。

お世話になりました

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


<関連記事>
第6回: 背景に画像を表示してみよう


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


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

2006/02/15

第4回:タイトルにオリジナルの画像を設定してみよう

自分で作った「カスタムテンプレート」のタイトル部分にオリジナルの画像を適用する方法です。

手順

事前準備:タイトル用の画像を準備する

タイトル用の画像を準備します。

※画像の大きさについては下の 「point」のところで説明しています。

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

※特に「切り取り」、「サイズ変更」、「文字入れ」など加工を考えている場合は加工を許可しているかどうか充分確認して下さい。

「自作で!」と思っていらっしゃる方ははっさくさんの下記の記事が参考になると思います。
『はっさくノート』 様内 「タイトルバナーをオリジナルの画像で  カスタマイズ・2方法」

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

画像をバナーに適用する

  1. 「管理ページトップ」→「ブログ」タブ→「デザインの編集」→「テーマを変更」
    ※現在使っているテンプレートとは別のテンプレートを使う場合は、「テンプレートの管理」画面で該当のテンプレートを選択、 適用してから 「テーマを変更」に進んで下さい。 
  2. 「タイトルバナー」の「編集」ボタンを押し、編集画面を開く。 
  3. 「オプション設定」の「タイトルバナーに画像を使用する」と「アップロードした画像は、タイトルの背景として使用する」 にチェックを入れて、「参照」ボタンを押す。
    準備した画像を選択し、「開く」ボタンを押す。 
  4. 「変更を保存」ボタンを押す。 
  5. 一つ前の編集画面に戻るので、もう一度「変更を保存」ボタンを押す。 
  6. 「デザイン」画面に戻るので画面下方の「反映」ボタンを押す。 
  7. 「反映」画面が別窓で開くので、反映するファイルの範囲を選択して「反映」ボタンを押す 
  8. 「すべてのファイルを反映しました。」の画面に切り替わったら終了。 
  9. イメージ通りに出来ているかどうか確認する。

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

ここがポイント

  • 画像の大きさは、
    幅が「カスタムデザイン」の「ページ全般の設定」 で指定した 「記事部分」+「サイドバー」 の幅を足した長さ
    (例えばここの場合、「記事部分:500px」+「サイドバー:200px」×2で計「900px」となります)
    高さはお好みで大丈夫ですが、あまり大きくするとその分記事部分が下に下がって記事が見えにくくなります。 
  • 「アップロードした画像は、タイトルの背景として使用する」について
    準備した画像に既にブログ名が画像として入力されている場合は、この項目のチェックを外して下さい。
    ※入れたままだとテキストのブログ名も表示されてしまいます。 
  • この部分の設定については設定後反映する前に「デザイン(テーマ)」画面の「確認」ボタンで確認した場合、 画像が表示されない場合があるようです。
    「反映」してブログ画面を確認すればタイトル画像が表示されますので、事前に確認したい場合は「メインページ」のみに反映して確認する、 などの手段で確認してみて下さい。

タイトルの文字位置が上がりすぎてしまう場合の対応

上記の処理をしたところ、タイトル文字の位置が上がりすぎて上3分の1くらい切れてしまったので、下記の方法で調整しました。

「デザイン」→「カスタムCSSの編集」
CSSの入力欄に

#banner{padding-top: ●px;}
●部分に任意の数値を入力。(私は10に設定しました)

「変更を保存」→前の画面に戻るのでここで「バックナンバーに反映」
反映するファイルの範囲を選択して「反映」ボタンを押す。
「すべてのファイルを反映しました。」の画面に切り替わったら終了。
イメージ通りに出来ているかどうか確認する。

これでタイトルの文字位置が下に下がります。

「#banner」はタイトルバナー部分を指定するセレクタ、「padding」 はボックスの中の余白を指定するためのプロパティです。
つまり「バナー部分」の「上(top)の余白」を「●px」に設定する、というタグになります。

paddingの詳細な説明はこちらのページなど参考にして下さい。
「TAG index」さん「ボックスのパディング(内側の余白)を指定する」
※HTMLやCSSのタグが設定サンプル付きで説明されていて判りやすいサイトです。


 

■タイトル画像は素材サイト「ミントblue」さんから頂きました。

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


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


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

第3回:カスタムテンプレートを作ってみよう

ココログにはデザインが統一された「ココログ・オリジナル・テーマ」 が多数準備されているのでこれをどんどん着せ替えて行っても楽しめますが、これにとらわれない自分専用のテンプレートを作ることも可能です。
特にフリープランの場合、「カスタムCSSの編集」が可能ですのでこれを使うことで、ブログの見た目をかなり自由に変更することが出来ます。
('06/03/28の仕様変更に伴い、「ベーシック」、「プラス」の各プランでも利用できるようになりました)

今回はまず、CSSに行く前に自分の好きな配色で「カスタム・テンプレート」を作ってみましょう。
「カスタムCSSの編集」は「カスタムテンプレート」にしか反映されませんので、 CSSを利用する場合もまずここから始めることになります。
※「リッチテンプレート」の設定については「ココログ:使い方ガイド」 『リッチテンプレート』のページに詳しく説明されていますので、こちらをご覧下さい。

手順

新規テンプレートを作成する

  1. 管理画面にログインし、「ブログ」タブ→「デザインの編集」→「新規テンプレートの作成」。 
  2. 『ステップ1:レイアウト』が表示されるので、 ここで自分が作りたいテンプレートのレイアウトを4つのタイプから選択しチェックを入れる。 
  3. 決定したら『ステップ2:表示項目を選択』へ。 
  4. ブログに表示したい項目にチェックを入れる。
    選択項目は全て初期値に戻っていますので、 以前他のテンプレート使用時にチェックを入れていた場合も最初から選択し直してください。 
  5. 全て選択したら『ステップ3:並べ方を設定』へ。 
  6. 前の画面で選択した項目でサイドバーに表示されるものが一覧で並んでいるので、この項目をドラッグ& ドロップで好きな順に入れ替える。
    ※ここで表示された項目に過不足がある場合はブラウザの「戻る」ボタンを使って『ステップ2』に戻れます。 
  7. 決定したら『ステップ4:テーマを設定』へ。 
  8. ここで表示されるデザインを決定する。 
  9. 「ココログオリジナル・テーマ」か「カスタムテーマ」のどちらかを選択する。
    「ココログオリジナル・テーマ」を選択した場合も 「カスタムCSSの編集」 は可能ですが適用できるCSSには制限があるようです。
    全面的に自分のオリジナルでカスタマイズしたい場合は、 「カスタムテーマ」を選択することをお薦めします。
    尚、このブログの中で取り上げるCSSによるカスタマイズはすべて 「カスタムテーマ」のテンプレートを基準にしたものです。 
  10. 「ココログオリジナル・テーマ」を選択した場合は、このまま『ステップ5:名前と説明を設定』へ。
    「カスタムテーマ」を選択した場合は更に各項目の設定へ(設定方法は後述
    全ての項目の設定が終了したら『ステップ5:名前と説明を設定』へ。 
  11. カスタムテンプレートの名前と説明を設定する。
    ※どちらの項目も設定する、しないは任意ですが、自分で区別するために名前だけはつけておいた方がいいと思います。 
  12. テンプレートを保存する。
    「このテンプレートを保存」→完成したテンプレートの保存のみ
    今使用中のテンプレートは変わりません
    「このテンプレートを保存して適用」→完成したテンプレートを、今使用中のテンプレートに変えてブログに反映

「カスタムテーマ」の設定方法
それぞれの項目の「編集」ボタンを押すと、編集ページが別画面で開きます。

  • 『ページ全般の設定』
    「記事表示欄」と「サイドバー」
    それを合わせたページ全般の
    <背景色>
    <枠線の有無・種類・色>
    <リンクのスタイル・ 色>
    が設定できます。 
  • 『タイトルバナー』
    ブログの一番上に表示されるタイトルバナー部分の
    <背景色>
    <枠線の有無・種類・色>
    <文字の位置・スタイル・色・フォント・ 大きさ>
    を設定できます。
    また、オプションとして画像をバナーとして設定することも可能です。
    ※この設定については
    第4回: タイトルにオリジナルの画像を設定してみよう
    を参照して下さい。 
  • 『記事表示欄』
    記事のヘッダー、タイトル、本文、フッターについて
    <文字の位置・スタイル・色・フォント・大きさ>
    <枠線の有無>
    <行間>
    などを指定できます。 
  • 『サイドバー項目』
    サイドバーに表示されるタイトル
    項目の<文字のスタイル・フォント・大きさ・配置>
    <枠線の有無・行間>など
    画像の<枠線の有無・ 配置>
    リンクの<文字色>
    の指定が出来ます。

設定を変更した場合は、画面下の 「変更を保存」ボタンを押して下さい
※ここの設定が終了したら、前項【新規テンプレートを作成する】の11.に戻って下さい。

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

ここがポイント

  • 一度作成した「カスタムテンプレート」は「テンプレートの管理」画面で保存されます。
    ここでは作成したテンプレートを『複製(コピー)』することも出来ますので、基本になるものを一つ作成しておき、 次からはそれをコピーし名前を変えて利用すれば上記の手順を大幅に省略することも可能です。 
  • 各ステップの設定内容は「確認」ボタンを押せばブログに反映させずに確認出来ます。 
  • 一度設定した各ステップの設定にミス・モレがあったとしても後で何度でも修正することが可能です。
    内容を確認しながら少しずつ調整していきましょう。 
  • 「カスタムテンプレート」でそれぞれの項目を設定する場合、 「色」(文字色・ 背景色)については最初に表示されている色見本以外に自分の好きな色が指定できます。
    方法は、色見本の右にある記入枠の中に自分でカラーコード(6桁)を記入するだけです。
    カラーコードについては下記のページなどを参考にして下さい。
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
    ■参考: 「色のみじん切り」様 色のみじん切り 
  • ココログの「使い方ガイド」でも「デザイン・ カスタマイズ」の項で、それぞれの手順について画像入りの詳しい説明がされています。
    参照して下さい。

 

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


 

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


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

2006/02/11

第2回:バナーを貼ってみよう

お気に入りのサイトやブログのバナーを表示して、そこに表示先へのリンクを設定する方法です。
↓こんな感じですね。

無料ブログはココログ※クリックするとココログトップに飛びます。

手順

事前準備:バナーを入手する

バナー画像を入手して下さい。
そのサイト(ブログ)で特別の指定がない限り、画像は自分のPCに一度保存するのが基本です。
画像の上で右クリックして「名前を付けて画像を保存」を選択、PC内の任意の場所に判りやすい名前(半角英数)を付けて保存しましょう。

バナー画像をココログにアップロードする

  1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く 
  2. 「新規ファイルのアップロード」の「参照」ボタンを押す 
  3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル(画像)を選択し「開く」ボタンを押す 
  4. 「アップロード」ボタンを押す
    ※ファイル名が半角英数でない場合、ここで
    ※「不正なファイル名です。 半角英数字のみのファイル名に修正したうえでアップロードしなおしてください。」
    ※と表示が出てアップロード出来ません。
    ファイル名を修正してやり直して下さい。 
  5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
    ※ここまでで画像のアップロードは完了です。

バナーをブログに貼り付ける

以下はサイドバーへの貼り付けについての説明です。

  1. 上記の5.で表示されている画像の名前をクリックしてページを開く。
    ※上記でアップロードした画像が表示されているはずです。 
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてもOKです。 
  3. 管理画面に戻って、「マイリスト」タブ→「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。
    ※名前の欄は入力した文字がサイドバーにタイトルとして表示されますので自分で相応しい文字列を入力してください(例:「お気に入り」 「リンク集」など)
    ※文字列を出したくない時は、スペースを入れても大丈夫です。 
  4. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。 
  5. 「項目を追加する」ウィンドウが表示されるので、「備考」欄に下記のタグを入力する。

    <a href="○○○"><img src="□□□" alt="△△△"></a>


    ○○○=リンク先サイトのurl、□□□=画像のurl (2.でコピーしたもの)、 △△△=サイトの名前に置き換えて下さい。
    ※画像の周囲に枠線が出て、それを消したい場合はalt="△△△"のあとにborder="0"を追加してください。 
  6. 「保存」ボタンをクリックする。 
  7. 「項目の一覧」画面に切り替わり、「リストにアイテムが追加されました。ブログやプロフィールページにリストを公開しますか?」のメッセージが表示されるので、メッセージ横の「公開」ボタンをクリックする。
  8. 「公開」画面が表示されるので、リストを公開(設置)したい場所(ブログ または プロフィールページ)を選択し、左端のチェックボックスにチェックを入れる。
    ※表示位置の調整が不要の場合:「変更を保存」をクリック→これで完了
    ※表示位置を調整する場合:「並べ方」をクリックして次に進む。
     
  9. 「デザイン」内「表示項目の並べ方」画面に切り替わるので、作成したバナー入りのマイリストを好きな場所に移動して「変更を保存」する。 

以上です。

うまく出来ましたか?

<ココログ『公式FAQ』内関連ページ>
バナー画像によるリンクをブログのサイドバーに表示する方法を教えてください

応用編:記事内にバナーを貼る場合

 

  1. 「記事の作成」画面を開く。 
  2. 「本文」(または「本文(続き)」)の任意の位置に上記のタグ(<a href="○○○"><img src="□□□" alt="△△△"></a>)を記事内に直接入力する。
    ・プレーンテキストモードを使っている場合→そのまま入力
    ・リッチテキストモードを使っている場合→画面を「HTMLの編集」 に切り替えて入力
    ※自分が使っているテキストモードがどちらかなのかを確認するには、下記のページを参考にして下さい。
    ※ココログ:使い方ガイド 『リッチテキストエディタ』 
  3. 「確認」画面でバナーが表示されていることを確認する。 
  4. 記事を保存する。

※ランキングサイト用などで毎回同じバナーを貼り付ける必要がある場合は、タグ全文を辞書に単語登録しておくと便利です。

ここがポイント

  • <a href="○○○">~</a>は、リンクボタンを作成するHTMLタグです。
    このタグで挟まれた部分にリンクを張って、指定した場所にジャンプさせることが出来ます。
    今回は画像を間に挟みましたが、間に文字列を入れれば文字にリンクを張ることが可能です。
    例:<a href="○○○">ABCD</a>
    (○○○には、 文字列ABCDへのリンク先urlを代入します) 
  • <img src="□□□">は画像を表示するタグです。
    リンクを張らなくても、これだけで使用可能です。
    また上記の説明でこのタグの中に入れたalt="△△△"は表示される画像の代替テキストを指定するタグです。
    画像が表示されている場合は画像の上にマウスを持っていくと表示され、 画像が表示できない場合は画像のある場所にテキストとして表示されます。
    (この上に貼ったバナーの上にマウスを持っていくと、サイト名が表示されるのが判ると思います)
    このタグは入れなくても画像の表示は可能ですが、閲覧者の環境などによって画像がうまく再現されないケースもありますので、 そんなときのためにここに代替テキストを指定しておくようにしましょう。 
  • 「マイリスト」へのタグの入力はメモリスト以外でも利用できます。
    その場合、『人リスト』は<一行紹介>欄に入力して保存、
    それ以外のリストは<メモ>欄にタグを入力して保存したあと、「設定」タブ内の<メモの表示>のチェックを入れて保存して下さい。
    (これらの処理が不要なので、タグを入れる場合は「メモリスト」が一番簡単だと思います)

 

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


 

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


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

掲示板用エントリー

■'06/09/17 サイドバーに設置したChobi掲示板の字数制限が厳しくて長文が書きにくいので、コメント欄を掲示板代わりに使うためのエントリーを立ててみました。 Chobi掲示板で一度に書ききれないくらいの長文を書き込みたい場合にご利用下さい。


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

| | コメント (130)

第1回:カウンターをつけてみよう

まずは、アクセスカウンターをつけてみましょう。

【'06/08/22追記】
「ベーシック/プラス/プロ」プランに、アクセスカウンターが標準機能として追加されました。
【'06/11/01追記】
「フリー」プランでもアクセスカウンターが標準機能として追加されました。
設置方法については下記のページを参照して下さい。
■「公式FAQ」内『アクセスカウンターをブログのサイドバーに表示する方法を教えてください』

ココログ以外のレンタルサービスを利用してカウンターを設置する場合は下記の方法をご利用下さい。

また、素材サイトで配布されているカウンター素材をCGIを利用して設置したい、という場合は『はっさくノート』 様の下記の記事が参考になります。
■CGIを使ってアクセスカウンターを設置する:第1話(準備・修正編) / 第2話(転送編) / 第3話(リンク編)

手順

事前準備:カウンター用タグの入手

カウンターのレンタルサイトに登録をして、カウンターを表示するためのタグを入手します。
※登録方法はサイトによって異なりますので、サイトの説明に従って手続きして下さい。

レンタルサイトは『Shinobi.jp』あたりが有名ですね。
その他、検索サイトで「カウンター 無料 レンタル」などのキーワードで検索すればたくさん出てきますので、デザインや機能などお好きなところを選んで下さい。
□参考サイト:『無料サイト集 KOOSS」』「無料カウンター、無料レンタルカウンター」

私は「@nifty」のホームページ作成サービス(「@homepage」)で提供されているカウンターを使いました。
(注)「@homepage」は既にサービスを終了しています。

カウンターの設置

ココログではカウンターは2箇所に設置出来ます。
一箇所はタイトルのすぐ下のサブタイトル部分、もう一箇所はサイドバーです。
二つの方法を順番に説明します。

■タイトル部分への設置

  1. ココログの管理画面にログインし、「ブログ」タブ→(便利メニューから)「設定の変更」 
  2. 「ブログの基本情報」が表示されるので、その中の 『ブログのサブタイトル (キャッチフレーズ)』が記入してある部分に、上記で入手したタグを全てコピー&ペーストする。 
  3. 画面下の「変更を保存」ボタンを押す。 
  4. 画面が切り替わった後に表示される「サイトに反映」ボタンを押す。

■サイドバーへの設置

  1. ココログの管理画面にログインし、「マイリスト」タブをクリック。 
  2. 「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。
    ※名前の欄は入力した文字がサイドバーにタイトルとして表示されますので自分で相応しい文字列を入力してください(例:「カウンター」 など)
    文字列を出したくない時は、スペースを入れても大丈夫です。 
  3. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。 
  4. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースに入手したカウンター用のタグをコピー&ペーストする。 
  5. 「追加」ボタンをクリックする。 
  6. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。 
  7. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」 
  8. 「ブログ」タブ→(便利メニューから)「デザインの編集」→「表示項目を変更」をクリック。 
  9. 「マイリスト」の一覧の中から、作成したカウンター用のリストを選択しチェックボックスにチェックを入れ「変更を保存」 。 
  10. 「デザインの編集」に戻って「並べ方を変更」をクリック。 
  11. 「表示項目の並べ方」画面が表示されるので、作成したカウンターを好きな場所に移動して「変更を保存」。

以上です。

うまく出来ましたか?

私は「サイドバーへの設置」でやってみました。
左サイドバーの真ん中辺に「カウンター」という項目で表示しています。

ここがポイント

マイリストを使ってサイドバーにタグを入れる方法はちょっと手順が多く面倒ですがカウンターに限らず殆ど全てのブログパーツに応用できますので、 覚えておくと便利です。


 

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。


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


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

第0回:ごあいさつ

こんにちは、はじめまして。
takoと申します。

'04年4月からココログプラスでブログをやっています。
昨年末無料版のココログ(フリー)が出来た、しかも従来のプランより高機能だというので、どんなもんかい?と思って取りあえずアカウントを取ってみました。
しばらくあちこち触ってみたものの特に考えがあるわけではなかったのでそのまま放置していたのですが、今になって「せっかくなのでこちらも稼働してみようかな」という気になりました。

で、何をやろうかと考えて思いついたのが、「ココログカスタマイズの覚え書き」です。

ブログを始めたのはいいけれど、やっぱりお仕着せのデザインじゃ物足りないな~と思って見よう見まねで始めたカスタマイズ。
HTMLやCSSについてはかじる程度で理論や体系の理解はもちろん、自力で記述するのもおぼつかないような実力ですが、それでも自分が「ここをこうしたい!」と思ったことを他のブログを参考にさせて頂いたり、検索して方法を探したり、本を参照したりして何とか実現している今日この頃。
その中で覚えたワザをこちらのブログにまとめてみようかな、と思いたったというわけです。
で、どうせならただ書いていくだけではなく、ココログフリーでブログを始めたけどカスタマイズってどうすればいいの?という人たちのヒントになったら嬉しいな~、と思ったので、処理方法をフリーの仕様に直して(どちらにしてもそれほど大きく違うわけではありませんが)掲載することにしました。

「私はこうやったら出来たよ」という方法を書いて行きますので、「おっ!」と思う記事があったらどんどん真似してくださって構いません。
但し、ご利用に当たっていくつかお願いしたいことがあります。

カスタマイズの適用はご自分の判断、責任でお願いします。

ここで紹介する予定のカスタマイズは全て私がこのブログで処理方法や表示を確認してから公開していくつもりですが、他の方のブログでも正しく反映されるかどうかは保証できません。
閲覧者様のブログでカスタマイズを適用した結果、デザインが崩れた、データが消失したなどの不具合が発生した場合の苦情には対応出来ないことをあらかじめお断りしておきます。
ご自分のブログへの導入はご自分の判断、責任の下でお願いいたします。

質問する前に自分で調べてみましょう。

手順に沿ってかなり判りやすく書いていくつもりなので、書いてある手順に従えば基本的なカスタマイズは出来るはずです。
ですので、ここに書いてある内容で不明点があった場合はまず自分で調べてみてください。
そんなに難しいことは書いてないはずなのでちょっと調べればすぐ判ると思いますし、自分で調べて少しでも判ってくれば出来ることが広がるので楽しくなりますよ。
どうしても途中で手順が判らなくなってしまう場合は、「どこまで出来たのか」「どんなエラーが出るのか」などなるべく詳しい情報を該当記事のコメント欄でご報告下さい。
判る範囲でお答えします。

こちらの更新は多分週1~2回程度ののんびりペースになると思いますが、お付き合いいただければ幸いです。
よろしくお願いします。

では、まずは定番、アクセスカウンターの設置方法から。


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


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

2006/02/10

index

基本 / □第1回~第10回 / □第11回~第20回 /
第21回~第30回 / □第31回~第40回 /
ブログ便利ツール / □カスタマイズ・サンプル /□その他

第0回:ごあいさつ

基本

基本1:ファイルのアップロード
基本2:マイリストの作成→サイドバーへの設置
基本3:記事欄への画像の挿入
基本4:自分のブログのCSSファイルを確認する
基本5:カスタム・テンプレート用CSSの主な要素名一覧

第1回~第10回

第1回:カウンターをつけてみよう
第2回:バナーを貼ってみよう
第3回:カスタムテンプレートを作ってみよう
第4回:タイトルにオリジナルの画像を設定してみよう
第5回:背景の色を変えてみよう
第6回:背景に画像を表示してみよう
第7回:コメントをツリー表示にしてみよう
第8回:サイト内検索を設置してみよう
第9回:アクセス解析を設置してみよう
第10回:サイドバーのタイトルにワンポイント画像をつけてみよう

第11回~第20回

第11回:記事とフッターの間に区切り線(画像)を入れてみよう
第12回:コメント欄の幅を調整してみよう
第13回:サイドバーを項目ごとに折り畳んでみよう
第14回:カレンダーの投稿した日付に色を付けてみよう
第15回:コメント欄のスクロールバーの色を変えてみよう
第16回:コメント欄の背景色を変えてみよう
第17回:ページ全体のスクロールバーの色を変えてみよう
第18回:コメント表示欄とコメント入力欄の背景に画像を表示してみよう
第19回:引用部分の装飾を設定してみよう
第20回:「Blog People」でリンク先の更新管理をしてみよう

第21回~第30回

第21回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉
第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉
第23回:サイドバーに掲示板を設置してみよう
第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう
第25回:記事に挿入した画像をポラロイド写真風に表示してみよう
第26回:サイドバーに「アクセス解析ツール」を設置してみよう
第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう
第28回:リンクの装飾を設定してみよう
第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう
第30回:文字(フォント)の設定を変えてみよう

第31回~第40回

第31回:現在の閲覧者数を表示するカウンターを設置してみよう
第32回:自分専用のfavicon(ファビコン)を付けてみよう
第33回:カレンダーの背景に画像を表示してみよう
第34回:ココログを携帯で閲覧してみよう
第35回:サブタイトル部分に簡易メニューを付けてみよう
第36回:記事内に挿入した写真にキャプション(説明文)をつけてみよう
第37回:記事欄を角丸の画像で囲んでみよう

ブログ便利ツール

「RSSリーダー」利用のススメ
「Track Word」
「Click Track」
「ブログ専用検索サイト」
「ブログ投稿支援ソフト」

カスタマイズ・サンプル

「No.1:sugar cube」
「No.2:Fly Away…」
「No.3:sea glass」
「No4:金魚」
「No5:sewing」
「No6:手帳」

その他

【ブログ・カスタマイズ お役立ちリンク集】
【よくある質問集】
「ココログを便利にする「ユーザーさん作成スクリプト」特集」


|

2006/02/10

基本2:マイリストの作成→サイドバーへの設置

ココログのマイリストはテキスト以外にも、HTMLやスクリプトなどの殆どのタグが入力可能です。
特に「メモリスト」は「メモ」欄にタグを入力してブログに表示するだけで各種のブログパーツを簡単に設置することが出来ますので、設置方法を覚えておくととても便利です。

メモリストの作成

  1. ココログの管理画面にログインし、「マイリスト」タブをクリック。 
  2. 「マイリストの新規作成」で『リストのタイプ』 が<メモ>のリストを作成する。 
  3. 必要に応じてリストに名前を付ける。   
  4. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。 
  5. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースにタグ(またはスクリプト)を貼り付ける。 
  6. 「追加」ボタンをクリックする。 
  7. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。 
  8. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」

サイドバーへの表示

  1. 「ブログ」タブ→(便利メニューから)「デザインの編集」→「表示項目を変更」をクリック。 
  2. 「マイリスト」の一覧の中から、上記で作成したリストを選択しチェックボックスにチェックを入れ「変更を保存」。 
  3. 「デザインの編集」に戻って「並べ方を変更」をクリック。 
  4. 「表示項目の並べ方」画面が表示されるので、リストを任意の位置に移動する。
    ※設置するパーツの種類(特にスクリプト関係)によっては、指定の場所に置かないと作動しない場合がありますので注意してください。
    ※その場合は、元記事に設置場所を注意点として明記しておきますのでそちらを参照して下さい。
  • 「マイリスト」へのタグの入力はメモリスト以外でも利用できます。
    その場合、『人リスト』は<一行紹介>欄に入力して保存、
    それ以外のリストは<メモ>欄にタグを入力して保存したあと、「設定」タブ内の<メモの表示>のチェックを入れて保存して下さい。
    ※ これらの処理が不要なので、タグを入れる場合は「メモリスト」が一番簡単だと思います。

<ココログ「公式FAQ」内関連ページ>
『ブログパーツを貼るにはどうしたらいいの?』
※「メモリスト」の使い方が画像入りで詳しく説明されていて判りやすいです。オススメ!


 

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


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

基本1:ファイルのアップロード

  1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く 
  2. 「新規ファイルのアップロード」の「参照」ボタンを押す 
  3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル(画像)を選択し「開く」ボタンを押す 
  4. 「アップロード」ボタンを押す
  5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
    ※ここまででファイルのアップロードは完了です。

<ココログ「公式FAQ」内関連ページ>
ファイルマネージャーでファイルを管理する方法を教えてください

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


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

2006/02/09

更新情報

<既存の記事への追記、修正のみ記載しています。新規記事の情報はサイドバーの「最近の記事」をご覧下さい。>

■'06/04/16
【リンク集】の「ココログヘルプ関連」に1件リンクを追加しました。

■'06/04/04
【リンク集】に新しいリンク先を2箇所追加しました。

■'06/03/19
【リンク集】に新しいリンク先を4箇所追加しました。

■'06/03/10
【リンク集】にマナー&セキュリティ情報を追加しました。

|

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