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

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

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

---

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

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

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

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

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

PCサイトを利用する

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

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

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

1. 画面内1.の空いている欄に閲覧したいココログのURLを入力する。
   
   ※例えばこのブログの場合は、
   
   
   となります。
   ※フリー以外のプランを利用している方は、真ん中の 「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」様＜記事内のボタン素材＞

---

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

---

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

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

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

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

相変わらずそんなに凝った技は使っていません。
強いていえば下記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」様＜記事内のボタン素材＞

---

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

---