第39回：携帯サイトのアイコンを変えてみよう

ココログを携帯で閲覧すると、記事タイトルやコメント、投稿時間などいくつかの項目の前にアイコンが表示されています。   
携帯用のテンプレート（CSS）を全て自作にすることは（今のところ）プロプランとフリーでオプションパックアドバンスを契約しているユーザー以外は出来ませんが、その他のプランでもこのアイコンだけは変更できるようなので試してみました。

 

＜変更前＞    

 

＜変更後＞    

 

 

事前準備1：アイコン用の画像を準備する

 

表示する画像を準備します。   
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。    
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。    
私は「Web*citron」様で提供されているテントウムシのアイコン（17px×20px）をお借りしました。    
携帯用なのでどの程度の大きさを選択すればいいのか迷いましたが、普通にPCサイトに使う大きさのアイコンで問題なさそうです。    
但し、必ずgif形式の画像を選択して下さい。

 

事前準備2：アイコンの名前を変更する

 

携帯用アイコンは表示させる場所によって名前が決まっています。   
上記で準備したアイコンの名前を、下記のルールに従って変更します。

 

   
• バナー用画像 ： banner-logo.gif
   
• カテゴリー用アイコン ： category.gif（カテゴリー用のアイコン）
   
• 投稿日用アイコン ： clock.gif
   
• コメント用アイコン ： comment.gif
   
• 投稿者名用アイコン ： editor.gif 
   
• エントリー用アイコン ： entry.gif
   
• コメントエラー時用アイコン ： notice.gif
   
• プロフィールページへのリンク用アイコン ： profile.gif

 

ファイルをアップロードするフォルダを作成する

 

PC用の素材をアップロードする場合はどのフォルダを使っても問題ありませんが、携帯用で表示されるアイコンは画像を保存する場所が決まっていますので専用のフォルダを作成します。

 

   
1. 「管理ページトップ」→「コントロールパネル」→「ファイル」      
   と進み「ファイルマネージャー」画面を開く
   
2. 「現在のフォルダ」が［ホーム］になっているのを確認してその下の［ファイル名］からブログのサブドメイン名が付いているフォルダーを探してそのフォルダーを開く。    
   ＜サブドメインとは＞      
   例えば、このブログの場合、アドレスが      
   http://tea-for-me.cocolog-nifty.com/blog/      
   ですので、サブドメインは「blog」になります。
   
3. そのページの「新しいフォルダを作成」欄に      
   「mobile-images」      
   と入力し、「フォルダの作成」ボタンをクリックする。      
   ※フォルダは必ずこの名前で作成して下さい。
   
4. ページ内の［ファイル名］一覧に「mobile-images」フォルダが作成されているはずなので、更にこのフォルダを開く。

 

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

 

画像をココログのサーバーにアップロードします。   
アップロードの方法は別ページ、    
■ 『基本1： ファイルのアップロード』      
を参照して下さい。    
（注）フォルダは前項で開いた「mobile-images」フォルダを利用して下さい。

 

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

 

 

携帯用で表示されるアイコンは「アップロードするファイル名」と「素材を保存するフォルダ名」で指定されています。   
この2つのどこかが間違っているときちんと表示されませんので注意しましょう。

 

尚、プロプラン、オプションパックアドバンスでの携帯画面CSS設定方法については、下記の公式FAQを参照して下さい。   
『携帯版のブログのデザインをカスタマイズすることはできますか？』

第38回：DecoWeb提供のココログ用無料テンプレートを使ってみよう

（株）アクトクリエイティブが運営している「DecoWeb」という無料テンプレート配布サイトにてココログのテンプレートが配布されているのを発見したので使ってみました。

■ココログ＠Niftyテンプレート

上記のページで気に入ったテンプレートを選んでファイルをダウンロード。
保存したファイルを解凍するとCSSファイルが入っているので、それをデザイン画面の「CSSの編集」欄に貼り付けて保存するだけでデザインが変更できます。
※「ダウンロード方法」「解凍方法」「編集方法」は上記ページ内に詳しい解説ページへのリンクがあります。

私が選んだのは「自然 葉っぱ 3カラム」という爽やか系のデザイン。
ホントはこっちの「Simple Modern 3カラム」のほうが好きだったのですが、タイトル部分の余白とか文字色とか調整する部分が多かったので今回は諦めました。

デザインの点数はまだ少ないのですが、ココログのリッチテンプレートとはちょっと違った感じのデザインなのでお気に入りが見つかるかもしれません。
また、ココログのリッチテンプレはCSSのカスタマイズは（原則的に）出来ませんが、こちらは

当サイトのテンプレートは、上記禁止事項に当てはまらないサイトに限り無料で利用でき、加工も自由です。
サイズ、色などもご自由に変更してご利用下さい。利用報告の義務もありません。
「利用規約」内「テンプレート利用範囲と制限」より

とのことなので、改造して自作デザインのベースとして使うことも出来そうです。
（但し、テンプレートのフッターに表示される『decoウェブ』ロゴ又は『無料テンプレートのdecoweb - テンプレート』テキストは削除出来ません。）

それに、他社のブログと同じデザインもあるので、ココログと例えばFC2のブログを同じデザインで運営することも可能ですね。
※他のブログにあるけど、自分のブログにないデザインをリクエストすることも出来るようです。→リクデコ

★ご利用の際は、「利用規約」を充分ご確認下さい。

ココログフリー、1年間放置ブログのアカウント自動削除へ

ご無沙汰しています。約1年ぶりの更新です。

本日付けの「お知らせココログ」で、1年間記事更新のないフリープランのブログについて自動的にアカウントを削除する旨の告知がありました。

2008年4月1日より、ココログフリーでは、1年間記事の作成がないアカウントにつきまして、毎月自動的にココログのアカウントを削除させていただきます。
１年間記事の新規作成のないココログフリーのアカウントについて

このブログもコメントへの対応や過去記事の更新は時々やっているものの、新規記事の投稿は去年の3月11日で止まっているためこのままだと2ヶ月後にはデータを削除されてしまうことになるので慌てて新規記事を書いている次第です^^;

急に対応が厳しくなったようにも感じますが、今後使うかどうか判らないスペースを無料でいつまでも解放しておくわけにもいかない、ということなんでしょうね。

対象のブログには削除前にはメールで連絡が来るようですので、更新間隔の長いブログの場合はお知らせメールに注意したほうがよさそうです。

これ以外にもいつなんどき何が起こるか判りませんので、データのバックアップは定期的に取っておくことをオススメします。

ブログ便利ツール：ブログ投稿支援ソフト

ブログの記事を書いていて、「（管理画面の）本文欄がもっと広かったらなあ」と思ったことありませんか？
私はここでも、メインのブログでも大抵の場合長文をダラダラ書いてそれを何度も推敲して仕上げるタイプなので、 あの大きさの記入欄では狭すぎて非常に使いにくいのです。
テキストだけの記事だったらテキスト・エディター（「メモ帳」とか）を使う、という手もありますが、リンクを貼ったり、画像を挿入したりしたい場合は同時に作業が出来ないのでそれも面倒。
また、ようやく書き上げて「さあ、投稿しよう！」とボタンを押したはいいけれど何故かエラーが出てしまい、慌てて前の画面に戻ったけれど書き上げた記事は全て消えていた…という経験をしたことがある人もいるのでは。
時間を掛けて丁寧に書いた記事でこれが発生するとかなりやる気がなくなりますよね。

ブログ投稿時にありがちなそんな悩みを解消してくれるのが『ブログ投稿支援ソフト』です。
「ブログ投稿」に特化した様々な機能を持ち、その中で作成した記事を自分のブログに投稿するのが主な機能です。

このソフトを利用することで上記に挙げた

• 広い画面で記事が書ける
  
• ブログ側のサーバーエラーによって投稿できなかった場合の記事の消失を防げる

などの他に

• 複数のブログIDの管理が一つのソフトで完結出来る
  
• ローカルへのログの保存が記事投稿と同じタイミングで出来る
  
• 実際に使っているブログサービス以上のテキストや画像の装飾が簡単に出来る（利用するソフトによって差があります）

などの利点があります。

現在はいろいろなソフトが出ていますので、「投稿画面が使いにくいな～」と思ったことのある方は一度使ってみては如何でしょうか。
以下、私が知っているものをいくつかご紹介します。
（全て無料で入手出来るものです）

■ubicast blogger

今、この記事を書いているのがこのソフトです。
記述欄の画面イメージはこんな感じ↓。

とにかく記事の記入欄が画面いっぱいに広く取れるのが気に入ってます。
画像は保存してあるフォルダーからドラッグ＆ドロップで簡単に挿入出来ますし、よく使う言葉やタグを「定型句」として設定してメニューから簡単に呼び出す機能もあります。
また過去に投稿した記事もソフト導入前に遡って取得可能です。

CSSの反映などがプレビュー出来ないことと、記事内のHTMLタグの編集を外部ソフト （私の場合はメモ帳）で開かなければならないのがちょっと不満なのですが、概ね使い易いです。
特にMSWord（ワード）などを使い慣れている人だったら、簡単に操作出来るのではないでしょうか。

■Windows Live Writer

こちらも現在利用中。
ココログプラスの記事を投稿するときに使っています。
本当は機能的にこちらの方が気に入っているのでフリーもこちらを使いたいのですが、フリー版のID登録は出来るのに何故かカテゴリーが取得出来ないのです(T_T)
※一旦アカウントを削除して再登録したら無事に取得出来ました。フリーでも問題なしです。
（それ以外の投稿などは問題なく出来ます）

このソフトの特徴は、利用しているブログのCSS情報を取得して（させて）そのイメージ通りの画面で記事の作成が出来る点です。
例えば昨日投稿した記事の作成画面はこんな感じ↓。

背景色、記事欄の枠、引用部分などのCSSがちゃんと表示されています。
それから、画像の挿入が「ubicast blogger」以上に簡単で、例えば上記のようなPrintScreenだったら 「ubicast blogger」は一旦何らかの画像ソフトに落としてgifなりjpegなりで保存する必要がありますが、このソフトはprint screenボタンを押した後、そのまま「貼り付け」で挿入出来てしまうのです。
これは便利！
更にその画像の装飾も「影付き」や「枠＋影付き」をボタン一つで設定できます。
また画面表示を「Normal」「Web Layout」「Web Preview」「HTML code」の4つのパターンから選択出来てHTMLの編集からプレビューまで同じソフトの中で完結出来るのも便利です。
（上記画面は「Web Layout」）

まだ英語バージョンしか公開されていない（でも操作は特に難しくはないです）、利用開始前の過去ログの取得が出来ない（多分）などいくつかマイナスポイントもありますが、私はかなり便利に使っています。

プラス版のブログでもうちょっと詳しい紹介記事（画像入り）を書いていますので、 興味があったら読んでみて下さい。
■ 「Windows Live Writer（β版）」を使ってみる

【'07/06/02追記】
5/31に日本語バージョンがリリースされました！
■マイクロソフト社のニュースリリース
英語版より機能が追加され、インターフェイスも洗練されて更に使い易くなりました。
オススメです！
■ダウンロードページ

■xfy Blog Editor（エクスファイ・ブログ・エディタ）

「ATOK」や「一太郎」を出している「ジャストシステム （JUSTSYSTEM）」製のソフトです。
先日ダウンロードしてみましたが、使い勝手が今ひとつだったのでその後全く使っていません^^;
機能はかなり多いようなので使いこなせれば便利になるのでは…。

プラス版ので使用した感想を書いてますので参考にして下さい。
■ジャストシステムのブログ編集・ 管理ソフト「xfy Blog Editor」をダウンロードしてみた

■feedpath

この「feedpath」はブラウザ上で利用できるサービスです。
上記で紹介したダウンロードソフトと同様複数のブログ投稿管理が出来ます。

このサービスで特徴的なのは、記事の投稿画面（テンプレート）に色々なパターンがあること。
例えば、「本」用の投稿画面はこんな感じ↓。

本の感想を書く上で必要な項目が予め設定されているのです。
この項目は自分で入力することも可能ですが画面上部の「アフィリエイト：商品選択」ボタンを押して登録してあるサイトから該当の商品を選べばそこに記載されている項目が（画像も含め）自動的に入力されるようになっています。
自分でテンプレートを作ることも出来るようなので、ある程度決まったフォームで投稿することが多い場合に便利だと思います。

ここまでは自分で実際に利用したものでしたが、以下は利用経験がありませんのでご紹介のみです。

■BlogWrite
■ecto
■blogeet
■簡単ウェブログ投稿アシスト
■Qumana

『ブラウザの中でデザインなどの各種設定から、記事の作成・投稿まで完結出来る』というのがブログの一番の特徴なのに、投稿するためにダウンロードソフトを使うのは流れに逆行している気もしますが、「自分が便利で使い易い」のも長く続けるコツだと思います。
自分に合ったツールがあったら試してみてはいかがでしょうか。

---

 

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

---

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

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

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

---

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

サイドバーの表示

■サイドバーの折り畳み

• サイドバー折り畳み2： 状態保持機能付き：facet-divers様
  当ブログの記事はこちら→■第13回： サイドバーをリストごとに折り畳んでみよう

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

• ブログ人でコメントをツリー化： のっぺログ様
  当ブログ内の記事はこちら→■第7回： コメントをツリー表示にしてみよう
• コメントリストツリー化： 昇順表示パッチ：風柳亭－別館：書庫のある庵様

■ブログ内検索

• ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript ：暴想様/ココログ・プロ用
• 自分のココログを全文検索するJavaScript：暴想様/フリー、ベーシック、プラス用

■カレンダー

• ココログのカスタマイズ【カレンダー編（導入）】：LONGER THAN FOREVER様
• ココログのサイドバーカレンダーを最高に便利にするブログパーツ（cocolog_ajax_calendar.js） をリリース：暴想様
• 【ココログ】 バックナンバーに応じたカレンダーを表示するスクリプト＆過去月カレンダー作成フォーム：風柳亭－別館： 書庫のある庵様
• 【ココログ】 ラインカレンダーの設置：風柳亭－別館：書庫のある庵様
• ココログ・カレンダーを横一列に表示させるスクリプト：あずスタ様

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

• サイドバーのマイリストにスクロールバーを付けるJavaScript： facet-divers様

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

• 【ココログ】 『最近の記事』を日付別ツリー表示するスクリプト：風柳亭－別館：書庫のある庵様

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

• 月別バックナンバーをプルダウンメニューにするJavaScript：暴想様
• カテゴリ別バックナンバーをプルダウンメニューにするJavaScript：暴想様
• 月別バックナンバー　プルダウンメニュー： facet-divers様

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

• 【ココログ】 カテゴリー欄に最近の記事をツリー表示するスクリプト：風柳亭－別館：書庫のある庵様

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

• ココログ・サイドバーの標準項目の上下に任意の文字列を追加するスクリプト：あずスタ様

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

• 「最近のトラックバック」を別窓で開くようにする：facet-divers様

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

• サイドバーのリストの項目数を減らすJavaScript：facet-divers様

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

• 表示されてしまったリストタイトルのコメントアウト部分を再び非表示にするスクリプト： facet-divers様

記事欄の表示

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

• ココログ 「続きを読む」リンク表示をシンプルにするスクリプト：風柳亭－別館：書庫のある庵様

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

• 【ココログ】アーカイブページに目次とページングを付加するJavaScript：風柳亭－別館：書庫のある庵様

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

• 【ココログ】 トップページに過去の記事へのリンクを付ける：風柳亭－別館：書庫のある庵様

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

• 【ココログ】ページ内記事の目次を作るJavaScript(謎のおまけ付き)：風柳亭－別館：書庫のある庵様
• タイトルと概要を表示するJavaScript：暴想様

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

• 折り畳みで 「続きを読む」（新HTML暫定対応版）：facet-divers様

■記事欄で絵文字を使う

• ココログ本文で絵文字を使う方法(改訂版)： KOROPPYの本棚様

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

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

• ココログ・トラックバックURLをコピーするスクリプト：あずスタ様

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

• トラックバックの注意書きを明示する： facet-divers様
• コメント欄の設定を明示する： facet-divers様

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

• テンプレートをいじらずにコメント欄で絵文字を使う方法： KOROPPYの本棚様

ページフッターの表示

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

• ココログのカスタマイズ 【フッタ編】：LONGER THAN FOREVER様

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

---

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

---