サイト内検索



管理人情報

  • プロフィール
    プロフィールページに飛びます。

  • *second message*
    ココログ・プラスでやっている別ブログです。 本の感想と日々の記録などを書いています。 カスタマイズ関連も少しありますので、興味があったら遊びに来てください。

（勝手に）相互リンク

  • 当ブログをリンクリストに入れて下さっているブログ様をこちらでも勝手にリンクさせて頂いています。（随時更新）
    ※「リンクしてるのに載ってない」、逆に「リンクされては困る」という場合は管理人までご連絡下さい。

track word

参考書籍

素材＆ツール

Google検索


  • ウェブ全体から検索
    ココログ全体から検索
    このサイト内を検索

2007/03/04

ココログを便利にする「ユーザーさん作成スクリプト」特集

ココログには表示方法や各種設定などをココログの標準仕様よりも使い易くしてくれる便利な自作スクリプトを公開されているユーザーさんがたくさんいらっしゃいます。
そんな便利なスクリプトを用途別にまとめてみました。（過去に記事にしたものも含めてあります）
カスタマイズの際の参考にして下さい。

【お願い】
下記のスクリプトの設置ついて、（過去に記事にしたものを除き）ここでは説明はいたしません。
動作の詳細や設置方法については該当のユーザーさんのブログ記事にてご確認下さい。
（過去に記事にしたものについては、その記事へのリンクを貼っておきます）
設置方法が判らない、上手く動かないなどの質問についてもこちらではお答え出来ませんので、作者様に直接お問い合わせ頂けますようにお願いいたします。
※設置方法が「マイリストのメモ欄に貼り付け」→「サイドバーに設置」の場合は「基本2： マイリストの作成→サイドバーへの設置」が参考になると思います。

サイドバーの表示 / 記事欄の表示 / コメント、トラックバック欄の表示  / ページフッターの表示

サイドバーの表示

■サイドバーの折り畳み

■「最近のコメント」のツリー化

■ブログ内検索

■カレンダー

■サイドバーのリストにスクロールバーを付ける

■「最近の記事」のツリー化

■バックナンバーをプルダウン化

■「カテゴリー」に最近の記事をツリー化

■サイドバー標準項目に任意の文字列追加

■「最近のトラックバック」を別窓で開く

■サイドバーのリスト項目数を減らす

■リストタイトルをコメントアウト（ココログ・フリー）

記事欄の表示

■記事欄「続きを読む」の表示変更

■アーカイブページに目次を付加

■トップページに過去記事へのリンクを設置

■ページ内記事の目次作成

■折り畳みで「続きを読む」

■記事欄で絵文字を使う

コメント、トラックバック欄の表示

■トラックバックURLをコピーする

■コメント、トラックバックの注意書き

■コメント欄で絵文字を使う

ページフッターの表示

■全ページ共通フッターの設置

お世話になりました

■素材サイト 「PRISM」様＜記事内のボタン素材＞
■facet-divers様
■暴想様
■風柳亭－別館：書庫のある庵様
■LONGER THAN FOREVER様
■あずスタ様
■KOROPPYの本棚様

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連, スクリプト | | コメント (5) | トラックバック (1)

2007/01/28

カスタマイズ・サンプル＜No.6：手帳＞

デザインを変更しました。

カスタマイズ・サンプル＜No6：手帳＞

と言っても、新作ではなく去年の春に別ブログで使ったデザインの使い回しなのですが… ^^;
実は、別のデザインを考えて素材の調整などをしていたのですが、プレビューなどしているうちになんとなくこのブログとは雰囲気が合わないような気がしてきてしまったので、去年使って気に入っていたこちらのデザインに差し替えました。
元々作っていたものも出来が悪いというわけではないので、もう少し調整したあとに別ブログの方で使おうと思っています。

ということで、以下今回のデザインのポイントです。

■背景

body部分に「web*citron」さんの壁紙、 container部分に「ミントblue」 さんの写真を使わせて頂いています。
（バナー部分、記事欄、左右サイドバーは透明化しています）
CSSは下記の通り。

/*背景（チェック柄）*/
body
{
background-image:url(画像のurl);
}

/*背景（写真）*/
#container
{
background-image:url(画像のアドレス);
background-repeat:no-repeat;
background-position:top right;
}
/*バナー、記事欄、サイドバーの透明化*/
#banner,.content,#right,#left
{
background-color:transparent;
}

■サイドバーのリスト及び記事のタイトル

サイドバーのリストと記事のタイトル部分はボーダー（border）を使って付箋紙風に見せています。

/*サイドバータイトルの背景*/
.sidebar h2
{
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 140px;position: relative;
font-family: "MS UI Gothic",serif;}
}

/* 記事タイトルの背景 */
.content h3
{padding: 5px;
background-color: #ffffff;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 15px solid #e7ccaf;
width: 350px;position: relative;
left: -20px;font-family: "MS UI Gothic",serif;}

■コメント欄 及び 引用部分

コメント欄と引用部分にはトップに置いたのと同じ画像のモノクロ版を背景にしてあります。

.comment-body
{
  background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;
border:#58393f 1px solid;
padding:5px;
  }

/*引用*/
blockquote
{
border:1px dashed #cc9966;
margin:10px 15px;
padding: 10px;
background-image:url(画像のurl);
background-repeat:no-repeat;
background-position:top right;  }

こんな感じかな。

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

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

こちら（↓）に表示サンプル用ページを用意しました。
上記のキャプチャ画像では見えない部分も表示してあります。
■サンプル：手帳

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連, デザイン・サンプル | | コメント (13) | トラックバック (0)

2006/11/04

第37回：記事欄を角丸の画像で囲んでみよう

ずっとやりたかったけど設定が面倒臭そうで先送りにしていた「記事欄角丸」をようやく実現しました！
やってみたら、思った通り面倒臭かったです…^^;

ついでにデザイン変更もしてみました。
タイトル画像は「ミントblue」様、背景のドット柄素材は「素材の庭園」 様からお借りしました。
ありがとうございます♪

記事欄角丸画像サンプル


JavaScriptとCSSを使って角丸を実現するといった方法もあるようですが、私が取った方法は「角丸の画像を準備して、それをCSSで背景に設定する」という方法です。

手順

事前準備：角丸画像を準備する

entry_base


  1. 画像ソフトを使って上記のような角丸画像を作成する。
    ※大きさは記事欄の幅に合わせますが、設定サイズちょうどではなく左右に少し余裕があったほうがいいと思います。
    ※私の場合は、幅390px / 高さ81pxで作成しました。
    （上記の画像は縮小してあります）
  2. 上記の画像を「entry-top」用、「entry」用、「entry-bottom」用に3分割し、 それぞれ別の名前を付けて保存する。

    A.「entry-top」用
    角丸画像「entry-top」用

    B.「entry」用

    角丸画像「entry」用

    C.「entry-bottom」用

    角丸画像「entry-bottom」用


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

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

CSSを編集する

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

    .entry-top{
    background-image:url(A.「entry-top」 用画像のURL);/*画像の指定*/
    background-repeat:no-repeat;/*画像の繰り返し：なし*/
    padding:40px 30px 0px 20px;/*画像内側の余白：上右下左*/
    margin:-5px -10px ;/*画像外側の余白：「上下」「左右」*/
    background-position:top center;/*画像の位置*/
    }

    .entry{
    background-image:url(B.「entry」 用画像のURL);/*画像の指定*/
    background-repeat:repeat-y;/*画像の繰り返し：縦方向へ繰り返し*/
    padding:5px 30px 5px 20px;/*画像内側の余白：上右下左*/
    margin:-12px -10px ;/*画像外側の余白：「上下」「左右」*/
    background-position:top center;/*画像の位置*/
    }

    .entry-bottom{
    background-image:url(C. 「entry-bottom」 用画像のURL);/*画像の指定*/
    background-repeat:no-repeat;/*画像の繰り返し：なし*/
    padding:40px 30px 0px 20px;/*画像内側の余白：上右下左*/
    margin:-12px -10px;/*画像外側の余白：「上下」「左右」*/
    background-position:top center;/*画像の位置*/
    }

    上の3つの指定でメインページはきちんと表示できたのですが、 個別ページではコメント欄などがはみ出すなど不具合が出たので下記の設定を追加しました。

    .entry-body,.entry-trackback,.entry-comment,comment-content,.comment-form
    {
    padding:10px 0px 0px 5px;
    margin:-5px -10px;
    }

    #comment-text textarea, #comment-text-field textarea {
    width: 330px;
    }
  3. 設定が完了したら「変更を保存」ボタンを押す。
    ※保存する前に見え方をチェックしたい場合は「確認」ボタンを押してプレビューしてみて下さい。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

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

ここがポイント

  • 今回の角丸画像はフリーソフト「J-Trim」を使いました。
    画像を切り取るための「角丸切り取り」という機能があるのですが、 何もない新規のキャンバスでそのまま使ったところ今回のような角丸画像が簡単に作成できました。
    ■「WoodyBells」 様内「J-Trim」
    ※「J-Trim」は高機能なのに使い易い便利なソフトでオススメですが、インストールについては自己責任でお願いいたします。
  • 「まろぶろぐ」の森イチローさんが〈角丸作成専用プログラム〉を作っていらっしゃいます。
    ■Lib/エントリ画像作製
    角丸画像を自分の好みの大きさ・色・形で作成出来るようです。
    利用してみてはいかがでしょうか。【'07/06/16追記】
  • 今回のカスタマイズのポイントは「余白」です。
    上記のCSS内の数値はあくまで作った画像を利用した場合の設定であり、画像の大きさ、 切り取り方の違いなどで微妙に違ってくると思います。
    最初は上の設定をコピーして適用してみて、ずれるようであれば設定を細かく変更しながらプレビューを繰り返してみて下さい。
    （私もプレビューを50回以上繰り返しました^^;）
    余白の設定については下記のページなどで確認して下さい。
    ■「TAG index」 様内 「ボックスのマージン （外側の余白）を指定する」/ 「ボックスのパディング（内側の余白）を指定する」
  • 画像の幅が大きなものとかはみ出しちゃってますね…お見苦しくてスミマセン(T_T)
    後日修正しておきます。
    画像を多用されている方はこのあたり、注意が必要かと。
    【'06/11/05追記】
    一応目に付いたところは修正しました。
    いずれにしても幅が狭くなるので、このブログのように長文が多い場合はちょっと読みにくいかも知れません。
    レイアウトを3カラムじゃなく、2カラムにして記事欄の幅を広げた方がいいかも。

 

お世話になりました

■素材サイト「ミントBlue」 様
■素材サイト「素材の庭園」 様
■「TAG index」 様
■素材サイト 「PRISM」様＜記事内のボタン素材＞

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連 | | コメント (8) | トラックバック (0)

2006/09/24

第36回：記事内に挿入した写真にキャプション（説明文）をつけてみよう

先日『みんなで解決！広場』で「写真にキャプションが付けたい」という質問を見て検索した結果、「All About」の下記の記事を見つけました。

■キャプション付き画像を左右の端に寄せたい

アドレスをつけて回答したのですが「よく判らなかった」という返事が返ってきてしまったので、僭越ながら内容をココログ用にアレンジしてみました。
※以下の内容は、AllAbout掲載の該当記事を全面的に参考にさせて頂きました。ありがとうございました。


写真にキャプション：サンプル
*江戸東京博物館内「モダン亭」にて*

実際にCSSを適用すると、こんな感じで画像の下にキャプションが表示されます。
CSSで文章の回り込みを右（または左）に設定するので、画像の後ろにキャプション以外の文章を記述すると画像の横に表示されます。


手順

CSSを編集する

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

    div.imagebox {
       float: right;/*画像の配置場所*/
       font-size: 80%;/*キャプションの文字サイズ*/
       color: gray;/*キャプションの文字色*/
    }

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

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

記事に画像を挿入する

記事欄への画像の挿入方法は
■基本3： 記事欄への画像の挿入
を参照して下さい。
※この際に、＜2.画像オプション＞→＜カスタム設定＞にて「テキストの回り込み」を『指定なし』（チェックを外す）にして下さい。
※上記で設定したCSSで既に回り込みが設定されているためです。

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

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

    <img alt="画像の名前" title="画像の名前" src="画像のアドレス" border="0"  />

    ※「カスタム設定」でサムネイルやポップアップを設定した場合はもっと複雑なタグが記入されます。
    というようなタグが表示されるので、上記のタグを

    <div class="imagebox">～</div>

    で囲む。
  3. 更に、最後の</div>の前にキャプションとなる文章を前後に<br />を付けて記述する。
    ※つまり、上の画像タグの場合だったら、

    <div class="imagebox">
    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0"  />
    <br />キャプション<br />
    </div>

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

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

ここがポイント

  • 「カスタムCSS」内に記述するCSSのそれぞれのプロパティの値（上記では「right」「80%」「gray」） は自分の好きなようにアレンジして下さい。
    ここではそれぞれ「left」「small」「orange」にしてあります。
    ※色はいつものようにカラーコード（#●●●●●●）で指定してもOKです。
  • キャプションの文章が長くなる場合は、画像の幅に合わせて適当なところで改行（<br />）を入れて下さい。
  • 画像横の文章の回り込みを解除する場合は、解除したい場所（文章やタグの最後）に

    <br style="clear:both;" />

    を記述して下さい。

お世話になりました

■「All About」
■素材サイト 「PRISM」様＜記 事内のボタン素材＞

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連 | | コメント (2) | トラックバック (1)

2006/09/16

カスタマイズ・サンプル＜No.5：sewing＞

秋っぽくなってきたので、暖色系のデザインに変えてみました。
「金魚」はやはり短命（？）に終わってしまいました…変えるタイミングが悪かったですね^^;

デザインサンプル＜No5:sewing＞

今回のデザインも（ご覧頂ければ判るとおり）CSSは特に新しいことはしていません。
今まで記事に書いたことを組み合わせているだけです。
変わったように見えているとしたら、それは全て素材の力です。

私の場合、ブログをカスタマイズするときに一番時間を掛けるのは「素材を探す」ことです。
ココログはプロプラン以外ではHTMLが変更できないので、ブログの構成を劇的に変えることは出来ません。
そのため何度かデザインを変更していくうちに素材を使う場所や使い方がある程度決まってきてしまいます。
（実際、CSSについては前回使ったものをコピーして素材と色の部分を書き換えたら殆ど終わりです（笑））
そうなったときに（他のブログと、または以前の自分のデザインと）差を出すために一番手っ取り早いのは、素材にこだわることじゃないかな、と思います。

私は出来るだけデザインを統一したイメージにしたいので、素材のなかでもセット素材を重点的に見ていきます。
欲しいのは壁紙とタイトル用のアイコン（大小）、それに区切り線用のライン。
その他、タイトル部分に入れるイラストやパーツが何かあれば言うことなし！です。

もちろん別々の素材サイトさんから単品でお借りして組み合わせることもありますが、素材は「作品」なのでやはりその作者さんの個性がすごく強く出ているんですよね。
同じようなイメージの素材なのに組み合わせてみたらちょっとぶつかってしまう…なんていうこともけっこうあります。
なのでもしセットではなく単品を使う場合も、出来る限り同じ素材サイトさんのものを使うようにしています。

で、今回の素材は、まず「WEB MAGIC」 様のセット素材のなかに秋のイメージにあった色合いの素材を見つけたので壁紙、アイコン、ラインをお借りして、まずこれでデザイン。
確認してみたところそれだけだとタイトル部分がちょっと白すぎて寂しかったので、壁紙と同系色のリボンが入った写真を「ミントBlue」様よりお借りしました。
この写真があるのとないのでは、随分印象が変わります。
（今回はたまたまイメージにピッタリの素材が見つかってラッキーでした♪この写真がなければ、このデザインはお蔵入りになっていたかもしれません…^^;）

あとは、スクロールバーやリンクなど色指定の部分を素材の色と同系色に変更して完了です。
これからの季節に合った落ち着いたデザインになったと思いますがいかがでしょうか。

各パーツのカスタマイズの詳細については 「記事一覧」のページからそれぞれ過去記事に飛んでみて下さい。

お世話になりました

■「WEB MAGIC」様
■「ミントBlue」様
■「IMAGE」様
■素材サイト 「PRISM」様＜記 事内のボタン素材＞

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

投稿者 tako カスタマイズ, デザイン・サンプル | | コメント (0) | トラックバック (0)

2006/09/02

第35回：サブタイトル部分に簡易メニューを付けてみよう

KOROPPYさんのブログを参考に、任意の記事にジャンプする（させる）ための簡易メニューをサブタイトル部分に付けてみました。

サブタイトルに簡易メニュー：サンプル

 


参考にさせていただ いたのは以下のエントリーです。
■KOROPPYの本棚様： 「メニューをつけてみました」 / 「サブタイトルの表示をアレンジ」
ありがとうございました♪

KOROPPYさんは画像（バナー）にご自分で文字入れをしたものを使っていらっしゃいますが、私はサブタイトル部分にはリンク用のタグだけを入れてそのリンクをCSSで装飾する方法をとりました。
処理方法は以下の通りです。

手順

リンク用のHTMLタグ、及びCSSタグを準備する

サブタイトル部分の変更は、反映前に「確認」することが出来ません。
保存するとそのまま（少なくともトップページには）反映してしまうので変更する場合は、事前準備をしっかりしておく必要があります。

〈HTMLタグ〉
リンク先を指定するタグです。

  1. リンク用のHTMLを「メモ帳」などに記述する。

    <a href="●●●">■■■</a>
    ※●●●=リンク先のアドレス、■■■=サブタイトル欄に表示する文字列を代入

    ※いくつ書いても大丈夫ですがタイトル表示部分の幅を考えて並べて下さい。
    ※折り返す場合は<br />タグを間に入れましょう。
  2. 記述したHTMLを

    <div class="menu">
    と
    </div>

    で挟む。
    ※下記のCSSを適用するためのクラスをここで指定します。
    ※上記の例でいくと

    <div class="menu">
    <a href="●●●">■■■</a>
    </div>

    となります。
    ※CSSを適用しない場合は、この<div>タグは不要です。

〈CSSタグ〉
上記のHTMLを装飾するためのタグです。

  1. リンク装飾用のCSSタグを「メモ帳」などに記述する。
    ※セレクタはそれぞれ下記のような形で指定します。

    /*未訪問*/
    #banner h2 div.menu a:link{～}

    /*訪問済み*/
    #banner h2 div.menu a:visited{～}

    /*マウスでポイントしたとき*/
    #banner h2 div.menu a:hover{～}

    ※{～}内の要素はそれぞれ好きなように記述して下さい。
    ※私は以前
    ■第28回： リンクの装飾を設定してみよう
    でサンプルに使った「枠線を付けてボタン風に表示」のスタイルを使ってみました。

サブタイトル欄にHTMLタグを入力する

  1. ［管理ページトップ］→［ブログ］タブ→［設定］→［基本設定］画面を開く。
  2. 上記で書き出した〈HTMLタグ〉を全文コピーして、「ブログのサブタイトル（キャッチフレーズ）」欄に入力する。
  3. 画面一番下の「変更を保存」ボタンを押す。
    ※保存が終了すると、
    『設定変更の内容を保存しました。変更をサイトに反映させるには、サイトへの反映が必要です。』
    の文章と「サイトに反映」ボタンが表示されますが、ここでは反映せずに次の作業に移ります。
    ※CSSの適用が不要な場合は、ここで「反映」してしまって構いません。

カスタムCSSにCSSタグを入力する

  1. ［管理トップページ］→［ブログ］タブ→（便利メニューから）［デザインの編集］→［カスタムCSSを編集］
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    ※CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
    ※カスタムテンプレートの作り方は
    ■第3回： カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 上記で記述したCSSを「編集」画面のCSS記述欄に全文コピー＆ペーストする。
  3. 「変更を保存」ボタンを押す。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
うまくできましたか？

ここがポイント

  • KOROPPYさんのように画像（バナー）を使ってリンクを張る場合はCSSは不要です。
    サブタイトル欄にHTMLタグのみを入力して、「保存」→「反映」させて下さい。
  • この方法ならどのページから入ってもリンクが見えますので「目次」や「ブログポリシー」「注目記事」 など読んで欲しい記事へのリンクの他、別ブログ、掲示板への誘導など工夫次第でいろいろと便利に使えると思います。
    試してみて下さい。

お世話になりました

■「KOROPPYの本棚」 様
■素材サイト 「PRISM」様＜記事内のボタン素材＞

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連 | | コメント (4) | トラックバック (4)

2006/08/12

第34回：ココログを携帯で閲覧してみよう

【'07/04/05追記】
本日より、ココログが携帯で利用出来るようになりました。
URLの変換をしなくても自分のブログアドレスにアクセスすれば閲覧出来（自動的に携帯用アドレスに接続される）、コメントも投稿可能。
また閲覧だけでなく管理画面へログインし、記事の作成、コメント・トラックバックの管理も出来るなどとても便利になりました。
詳しい使い方はココログ公式サイト内の下記ページを参照して下さい。
■ココログの携帯閲覧サービス（β版）スタート！
■ココログ通信「ブログパーツ・携帯対応特集」

以下の記事は、『過去の遺物』ということで…（笑）

ココログは携帯での閲覧について公式ではサポートされていません。（'06.08現在）
最近は携帯の性能がよくなってきているのでそのままのURLでも閲覧可能になる場合もあるようですが、機種や環境に影響されてしまうのが現状です。

でもやっぱり外出先でもお気に入りココログのチェックがしたいなあ…という場合のために、ココログのURLを携帯閲覧用に変換してくれるサービス 「ココモブ」があります。
「ココモブ」は、ココログ開始当初からココログ利用者だった「健康な生活を送ろう！」 のCurryさんが個人で作られた検索サイト「ココログル」 （現在は検索機能を停止しています）の中のサービスとして提供されているものです。

今回はこの「ココモブ」を使ってお気に入りのココログを携帯で読む方法について説明します。

手順

■ココログのURLを携帯閲覧用URLに変換する

この方法にはPCサイト上で変換したものを携帯へメールで送る方法と、携帯用のサイトに直接アクセスして変換する2つの方法があります。
■PCサイトを利用する場合についてはこちら
■携帯用サイトを利用する場合はこちら
からどうぞ。

PCサイトを利用する

「ココモブ（PC用）」にアクセスする。

閲覧したいココログが一つの場合は「特定のココログ（1つ）を携帯から見る」、複数のココログの新着記事を一気に表示させたい場合は「ココモブリーダー」、どちらかを選択する。

《「特定のココログ（1つ）を携帯から見る」を選択した場合》

  1. 画面内1.の空いている欄に閲覧したいココログのURLを入力する。

    ※例えばこのブログの場合は、

    Moblog1
    となります。
    ※フリー以外のプランを利用している方は、真ん中の 「cocolog-nifty」 の部分をご自分のURLに合わせて変更して下さい。
  2. 正しく入力出来たら「表示」ボタンを押す。
  3. 下の空欄に携帯用に置き換えられたURLが表示されるので、これを全文コピーしてメールで携帯に転送する。
  4. 携帯に着信したメールからURLにアクセスする。

    ※この機能を利用した場合、下記のリンク先のような表示になります。
    ■携帯用 「初めてのココログ・カスタマイズ」

《「ココモブリーダー」を選択した場合》

  1. 画面内1.の空いている欄にココログのURLの一部を入力する。（1回につき最大5件）

    ※入力する部分は画面の説明にもありますが
    http://aaa.○○-nifty.com/bbb/のaaaの部分
    となります。
    例えば、このブログの場合、URLが
    http://tea-for-me.cocolog-nifty.com/blog/
    ですので、入力するのは
    「tea-for-me」 の部分になります。
  2. 「リストにサイト名を表示しない」のチェックを必要に応じて「ON」「OFF」する。
  3. 「表示」ボタンを押す。
  4. 下の空欄に携帯用に置き換えられたURLが表示されるので、これを全文コピーしてメールで携帯に転送する。
  5. 携帯に着信したメールからURLにアクセスする。

    ※この機能を利用した場合、下記のリンク先のような表示になります。
    ■ココモブリーダー

携帯用サイトを利用する

  1. 携帯のブラウザで「携帯用ココモブ（http://web.or.tv/m/）」へ直接アクセスする。
  2. 「ココログを見る」をクリックする。
  3. 上記の《「特定のココログ（1つ）を携帯から見る」を選択した場合》の1.で書いたのと同じ画面が出てくるので、 同じように読みたいココログのアドレス（PC用）を入力する。
  4. 「表示」ボタンを押す。
  5. そのブログの記事一覧（トップページ）が表示される。

    ※この他にも「新着記事一覧」「記事検索」「話題のキーワード」の3つのサービスが利用できます。
    ※それぞれのサービスでは、記事のタイトルが表示されるのでそのタイトルをクリックして閲覧して下さい。
    ※表示された各記事の一番下に「記事一覧」というリンクがありますので、ここをクリックするとそのココログの（携帯用） トップページに飛べます。

ココログの携帯用URLのQRコードをブログに貼り付ける

上記のサービスを利用して携帯用に変換したアドレスを、QRコードにしてブログに貼り付けてみます。

●携帯閲覧用のQRコードを作成する

  1. 上記の《「特定のココログ（1つ）を携帯から見る」を選択した場合》を利用して、自分のココログのURLを携帯用に変換する。
  2. 「QRCode.jp」にアクセスする。
  3. 画面にある空欄に1.で作成した携帯用のURLを入力する。
  4. 「サイズ」と「色」を指定して「QRCode生成！」ボタンを押す。
    ※サイドバーに表示する場合「サイズ」は「2」または「3」くらいがいいと思います。
  5. 入力欄の下に「QRCODEが生成されました。」の赤文字とともに、その下に自分用のQRコードが表示されたのを確認する。
    ※「サイズ」「色」が気に入らない場合は何度でも作り直し出来ます。
  6. 生成されたQRコードの上にある「直リンク」の文字をクリックしページを表示する。

●サイドバーにQRコードを表示する

  1. 表示用のマイリストを作成する。
  2. 作成したマイリストに

    <img src="■■■">
    ※■■■には、上記6.で表示されたページのアドレスを代入する。

    のタグを入力する。
  3. マイリストをサイドバーに表示させる。
  4. マイリストの作成、表示については
    ■ 「基本2：マイリストの作成→サイドバーへの設置」
    を参照して下さい。

【'06/09/03：追記】
上記でご紹介した「QRCode.jp」さんに昨日あたりからアクセス出来なくなっているようです。
同様のサービス「QRコードのQRy（キューリー）」さんの 「QRコードジェネレータ」を見つけましたのでご紹介しておきます。
■QRコードジェネレータ
このサービスは生成画像への直リンクは出来ませんので、画像を一度自分のPCに保存→ココログにアップロードしてから利用して下さい。
アップロードの方法については下記を参照して下さい。
■基本1： ファイルのアップロード
マイリストへの追加については上記に書いたのと同じです。

以上です。
うまくできましたか？

ここがポイント

  • 「ココモブ」用のURLでは記事とコメントは閲覧出来ますが、画像の表示、 コメントの投稿は出来ません。
  • 記事中のリンクについては、リンク先が他のココログであれば同じように閲覧出来ますが、他のウェブサイトは閲覧出来ません。
  • 「ココモブリーダー」の設定はPC用サイトでしか出来ません。

お世話になりました

■「ココモブ」
■「QRCode.jp」様
■「QRコードのQRy（キューリー）」様
■素材サイト 「PRISM」様＜記事内のボタン素材＞

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連 | | コメント (4) | トラックバック (0)

2006/08/06

カスタマイズ・サンプル＜No4：金魚＞

ご無沙汰しています。久々の更新です^^;

前回デザインを変更してから2ヶ月も放っておいたので、取りあえずデザインのみ変えてみました。
「カスタマイズ方法」でなくてゴメンナサイ。

今回は「金魚」です。
ちょっと涼しげに…と思ったのですが、大きなアイコンを使いすぎて却って暑苦しくなってしまったかな？^^;
素材は前回のデザイン同様『季節素材 雲水亭』 様からお借りしました。

kingyo


相変わらずそんなに凝った技は使っていません。
強いていえば下記2点のみ。

■タイトル画像

タイトル部分の画像は画像加工ソフトを使って作成した画像（大きさ： 800×150。金魚の絵以外の部分は透過してます）を、カスタム・テーマのタイトル画像指定を使わずに直接CSSで指定しています。
CSSはこんな感じです。

#banner{
padding-top:10px; /*タイトル文字の縦位置調整*/
padding-left:80px; /*タイトル文字の横位置調整*/
background-image:url(画像のurl); /*タイトル画像の設定*/
background-repeat:no-repeat; /*タイトル画像の繰り返し（なし）*/
background-position:right top; /*タイトル画像の位置（右上）*/
height:170px; /*タイトル部分の高さ*/
}

「テーマの編集」でも設定できるしその方が簡単なのですがこれを使うと何故か「確認」しても画像が反映してくれないことが多く調整が面倒なので、今回は直接CSSで指定してしまいました。
「テーマの編集」を利用する場合は下記のエントリーを参考にして下さい。
■第4回： タイトルにオリジナルの画像を設定してみよう

■日付の右端のアイコン

タイトル部分にアイコンを付けてしまうと表示できる文字数が少なくなってしまいます。
特に今回のアイコンは大きめなのでタイトル名が長いこのブログで使うと何度も折り返しが出てあまり格好良くないので、タイトルの上の「日付」 部分にアイコンを付けてみました。

.content h2{
background-image:url(画像のurl); /*画像の設定*/
background-repeat:no-repeat; /*画像の繰り返し（なし）*/
background-position:center right; /*画像の位置（右端の中央）*/
height:36px; /*高さの設定*/
}

以上です。

お世話になりました

■ 「季節素材雲水亭」様
■素材サイト 「PRISM」様＜記事内のボタン素材＞

 

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連, デザイン・サンプル | | コメント (2) | トラックバック (0)

2006/06/20

第33回：カレンダーの背景に画像を表示してみよう

カレンダーの背景に画像を表示してみました。
こんな感じになりました。↓

calendar_bg


う～ん、見やすいかどうかは微妙ですね^^;

手順

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

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

私は「NOION」 様でお借りした素材（200px×150px）を使いました。

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

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

CSSを編集する

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

    /*カレンダーの背景画像*/
    #calendar table{
    background-image:url(●●●); /*画像のURL*/
    background-position:center; /*画像の位置*/
    background-repeat:no-repeat; /*画像の繰り返し：なし*/
    }

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

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

ここがポイント

  • ここではカレンダーのタイトル以外の曜日、日付部分に背景が来るようにしたのでセレクターに「#calendar table」 を使いましたが、カレンダーには他にもいくつかセレクターがありますので部分的に画像を変更することも可能です。
    #calendar → カレンダー全体（○年○月部分も含む）
    #calendar table → カレンダーの曜日＋日付部分
    #calender caption → カレンダーのタイトル（○年○月部分）のみ
    #calendar th → カレンダーの曜日部分のみ
    #calendar td → カレンダーの日付部分のみ
  • それぞれのセレクターに対して「background-image」ではなく 「background-color:#○○○○○○」と指定すれば画像でなく、背景色の変更が出来ます。
  • 背景画像を敷き詰めタイプにする場合は「画像の位置」と「繰り返し」の指定は不要です。
    画像のURLのみ指定して下さい。
  • 参考画像で日付の色が変わっている部分は記事を投稿した日付です。
    このカスタマイズについては、
    ■ 『第14回：カレンダーの投稿した日付に色を付けてみよう』
    を参照して下さい。

お世話になりました

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

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

投稿者 tako カスタマイズ, ウェブログ・ココログ関連 | | コメント (6) | トラックバック (2)

2006/06/18

基本5：カスタム・テンプレート用CSSの主な要素名一覧

カスタム・テンプレートを作成したときに生成される主な要素（セレクター）名を一覧にしてみました。
CSSを記述する際の参考にして下さい。

【注意】

     
  • 表示してある項目によって、セレクターの種類・数は変動します。
      下記に記載したのは、あくまで私が作ったカスタム・   テンプレート上で確認できたものであり全てのセレクターを網羅しているわけではありません。  
  • 「適用箇所」については、適用が確認出来たもののみ記載しました。
      記入がないものは、セレクターとして存在するがどこに適用されるか判断出来なかったものです。
      今後確認しましたら随時追加・修正していきます。  
  • セレクターの記載には注意を払ったつもりですが、記入ミスがあるかもしれません。
      ミス・モレを発見しましたら管理人までご一報頂ければ幸いです。  
  • 各セレクターに対してCSSを適用する方法については、CSSの解説サイトなどを参考にして下さい。
      【参考サイト】
      「TAG index」   様
        「超初心者のためのスタイルシート講座」様

A / B / C / D / E / F / H / I / L / M / P / R / S / T / U

索引

要素（セレクター）名

 適用箇所
A a リンク全体
  a:link 通常のリンク
  a:visited 訪問済みリンク
  a:active 接続中リンク
  a.parmalink 記事フッターの「固定リンク」
  #archive-category サイドバーの「カテゴリー」
  #archive-datebased サイドバーの「バックナンバー」
B body ブログ全体の背景
  #banner タイトル部分
  #banner-img タイトル画像
  #banner a タイトル文字のリンク
  #banner h1 タイトル文字
  #banner h2 サブタイトル文字
C #container 記事表示欄＋サイドバーの背景
  #center  
  .content 記事欄全体
  .content p 記事内の段落
  .content blockquote 記事内の引用
  .content li 記事内のリスト
  .content h2 記事の日付
  .content h3 記事のタイトル
  .content p.posted 記事のフッター全体
  #calendar カレンダー全体
  #calendar table カレンダーの曜日・ 日付部分
  #calendar caption カレンダーのタイトル
  #calendar th カレンダーの曜日
  #calendar td カレンダーの日付
  #comment-data コメント入力欄 （ 「内容」以外）
  .content-center  
  .comment 記事のフッターのコメント部分
  .content-bottom  
D .date-footer  
E .entry-center  
  .entry 個別の記事部分 （タイトルからフッターまで）
  .entry-body-center 記事欄の一行目
  .entry-body 個別の記事部分 （本文のみ）
  .entry-body-text  
  .entry-body-bottom 記事のフッター部分
  .entry-bottom  
F #footer  
H h1 タイ トル部分
  h2 サブ タイトル、サイドバーのリストタイトル 記事の日付
  h3 記事 のタイトル
I .img-full 挿入した画像の最大状態
  .img-thumbnail 挿入した画像の縮小状態
  .image-thumbnail img 「マイフォト」のサムネイル
  .img-link  
L #left 左サイドバー全体
  .link-note サイドバーの「プロフィール」、「マイニ フティ」、「RSS」、 「マイリスト」
M #main-center  
  #main  
  .module-typelist module list  
  .module-header h2  
  .module-center  
  .module-content module-body  
  .module-list-item li サイドバーのリスト内の項目
  .module-bottom  
  .module-content module-body typelist-plain  
  .module-syndicate module  
  .module-content link-note  
  .module-calendar module  
  .module-categories module  
  .module-archives module  
  .module-content  
  .module-recent-comments module  
  .module-recent-trackbacks module  
  .module-nifty-rss-reader module  
  #main-bottom  
P .photo  
  #powered  
  #pagebody  
  #pagebody-inner  
  .post-footers 記事のフッターの日付
R #right 右サイドバー全体
  #recent-entries サイドバーの「最近の記事」
  #recent-comment サイドバーの「最近のコメント」
  #recent-trackback サイドバーの「最近のトラックバック」
S .sidebar サイドバー全体
  .sidebar h2 サイドバーのリストタイトル
  .sidebar ul サイドバーのリスト項目（番号付き）
  .sidebar li サイドバーのリスト項目
  .sidebar img サイドバーの画像
  .sidebar-center  
  .sidebar-bottom  
  .separator 記事のフッター項目を区切る縦線
T textarea#comment-text コメント入力欄
  .typelist-note  
  .trackback 記事のフッターの「トラックバック」
U ul.module-list サイドバーのリスト項目全体

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

投稿者 tako 基本, カスタマイズ, ウェブログ・ココログ関連 | | コメント (4) | トラックバック (1)

2006/06/04

第32回：自分専用のfavicon（ファビコン）を付けてみよう

favicon（ファビコン）とは、

FAVorite ICONの略で、 ウェブブラウザのお気に入りリストやタブに現れることのある、ウェブサイト独自のアイコン。
（はてなキーワード 「favicon」より）

のことです。
例えばココログのログイン画面をブラウザで開くとアドレスバーのURLの前に「ココログ」の文字が表示されます。

Cocolog_favi1


これが「favicon」です。

今回はこれを自分のブログに設定する方法です。

手順

事前準備1：favicon用の画像を準備する

「ペイント」などの描画ソフトで正方形の画像を作成し、自分のPC内の判りやすい場所に保存する。
※ favicon自体は16px×16pxの大きさですが今回は後でアイコンファイルに変換するツールを通し自動的にこの大きさに縮小するため、 元画像の大きさはもっと大きくても大丈夫です。
※但し、実際に使う大きさはあくまで16px×16pxですから、その大きさに縮小されることを考えて画像を作成しましょう。
※作成した画像は「jpg」「gif」「png」のいずれかの拡張子で保存して下さい。

事前準備2：画像をfaviconに変換する

「Favicon Japan」さん提供の 「Favicon自動生成」を利用して、画像をfaviconに変換します。

  1. 「Favicon Japan」 さんにアクセスし、トップページの「Favicon自動生成」欄にある「参照」ボタンを押す。
  2. 「ファイルの選択」ウィンドウが開くので、上記で保存した画像を選択し「開く」ボタンを押す。
  3. 元のページに戻るので「faviconを作成する」ボタンを押す。
  4. 「preview」部分に出来上がりのイメージが表示されるので、それでよければ「DownLoad」ボタンを押す。
  5. 「ファイルのダウンロード」ウィンドウが表示されるので「保存」を選択し、自分のPC内の判りやすい場所に保存する。
    ※この場合、「ファイルの種類」は「全てのファイル」 にして下さい。

【'07/02/24追記】
※「Favicon Japan」さんのツールは時々変換に失敗することがあるようです。
※同様の処理をしてくれるサイトを2つご紹介します。（いずれも海外のサイトで説明は英文ですが、操作は簡単です）
■DeGraeve.com内の 「favicon editor」→注意：変換できるのはpng形式のみ/元画像を16×16pxで作成/ダウンロードファイルは「zip」形式（解凍ソフトが必要）
■HTML-kit Tools内 「Favicon from pics」→注意：ダウンロードファイルは「zip」形式（解凍ソフトが必要）

以上でfavicon用ファイルの完成です。

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

上記で作成したファイルをココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1： ファイルのアップロード』
を参照して下さい。
＜'06/06/06追記＞
※アップロードの場所について
「ホーム（ルートディレクトリ）」を指定しないとIE6には表示されない
との情報を「風柳亭」 の風柳さんから頂きました。（風柳さん、ありがとうございました）
※IEをお使いの方は参考にして下さい。
※詳細は風柳さんのコメントを参照して下さい。

faviconを表示するための設定をする

  1. 上記の『基本1： ファイルのアップロード』の5.で表示された画像の名前をクリックしてページを開く。
    ※上記でアップロードした画像が表示されているはずです。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※この時urlの最後（つまりファイルの拡張子）が「http://～.ico」になっていることを確認して下さい。 これ以外の拡張子ではfaviconとして使えません。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてもOKです。
  3. 「管理ページトップ」→「ブログ」タブ→（便利メニューから）「設定の変更」を開く。
  4. 「ブログのサブタイトル（キャッチフレーズ）」 欄に下記のタグを入力する。

    <link rel="shortcut icon" href="○○○">

    ※○○○=faviconファイルの保存先url（上記2.でコピーしたもの）に置き換えて下さい。
  5. 画面下方にある「変更を保存」ボタンを押す。
  6. ページに「サイトに反映」ボタンが表示されるので、これをクリックする。
  7. 反映する範囲を指定して「反映」ボタンを押す。
  8. 「反映しました」画面が表示されたら終了。

以上です。
上手くできましたか？
自分のブログを表示してみてアドレスバーに作成した画像が表示されていればOKです。
※ブラウザに反映するまでにしばらく時間が掛かる場合もあるようです。

私は単純にココログカラーのオレンジを背景色にして、「初めて」の「は」の字を入れてみました（笑）

当ブログのfavicon


 

おまけ：faviconを削除、変更する場合

一度設定したfaviconを削除または変更する場合、通常はタグを削除するか、上記の手順を繰り返して新しい参照先を指定し反映させれば大丈夫なはずですが、場合によっては以前のfaviconが消えないときがあるようです。
その場合ブラウザの「ファイルの削除」を実行すれば削除、変更が有効になるはずです。
但し、ブラウザによってはfavicon用の保存フォルダーを別に持っていて、そこのファイルを削除しないと変更が有効にならないものもあります。（例：Sleipnirなど）
その場合は、PC内のファイル検索で「favicon」ファイルを探してその中の該当のデータを削除してから、修正をかければ反映するはずです。

ここがポイント

  • faviconはブラウザの種類によって、 表示されるものとされないものがあるようです。
    「Favicon Japan」 さんにブラウザごとの対応表がありますので、詳しくはそちらを参照して下さい。
    ■ブラウザ別ファヴィコン対応表
  • （個人的なPC環境のせいだと思いますが）私の場合「Favicon Japan」 さんのツールでは上手くいかなかったので下記のサービスを利用しました。
    ■「degrave.com」内「Favicon Editor」
    これは表示さ