« 第38回:DecoWeb提供のココログ用無料テンプレートを使ってみよう | トップページ | 掲示板用エントリー(’2010/08/02) »

2009/09/06

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

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

<変更前>
mobile-image1

<変更後>
mobile-image2

22_howto

事前準備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」フォルダを利用して下さい。

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

22_point

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

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

|

« 第38回:DecoWeb提供のココログ用無料テンプレートを使ってみよう | トップページ | 掲示板用エントリー(’2010/08/02) »

カスタマイズ」カテゴリの記事

コメント

はじめまして。
以前よりこのブログを愛読していました。
大変参考になり、感謝しております。

未熟なくせにプロ会員です。

今、携帯のデザインを変更したいと思っていますが、上級者向けテンプレートのstyles-mobile.cssでカラー等は変更できましたが、一番やりたいトップバナーの配置がわかりません。
『携帯版のブログのデザインをカスタマイズすることはできますか?』を読んでも、いまいちで・・・
かなり時間をかけて色々やってみましたが、行き詰まってしまったので、勇気をだしてこちらに質問してみようかと思いました。

ちなみに、オリジナルアイコンの表示もちゃんと確認をしてファイルを入れ、フォルダも作成しておりますが。。。うまく行きません。
本来やりたいことは、アイコンの変更だけでいいのですが。
お手数ですが、教えて頂きますと嬉しいです。。crying

投稿: にゃんこ。 | 2009/10/07 18:06

■にゃんこ。さん
こんにちは。ご訪問&コメントありがとうございます。

さて、お問い合わせの件ですが、申し訳ありませんが私も上記の記事に書いた以上のことはよく判らないというのが正直なところです。

特に私の場合、プランがフリーなのでCSSでの調整は出来ない状態ですが、記事に書いた手順でバナー画像をアップすると指定した通りに差し替えられ、それ以外のことは一切やっていないのです。
ちなみに記事を書いたときは記事タイトルのアイコンのみ替えましたが、今回お問い合わせを受けて(暫定的に)タイトルバナーも入れてみました。
下記リンクをクリックするとPCのブラウザで携帯画面が開きます。
200px×40pxのバナー画像を素材屋さんでお借りして名前を変えてアップロードしただけなのですが、ちゃんと表示されてますよね?
http://app.f.m-cocolog.jp/t/typecast?blog_id=2697&user_id=2654
なので、上記の記事通りに処理すればタイトルバナーも見えるはずなのですが…。
(加工している時間がなかったのでブログ名は入れてません^^;ので、しばらくしたら外します)

他に考えられるとしたら、フォルダーやバナー画像の名前を間違えて付けていることくらいなので、作成場所や名前を再度確認してみてはどうでしょうか。
にゃんこ。さんのブログを拝見することが出来ないので、現在の情報ではお答え出来るのはこのくらいです。
あまりお役に立てる回答が出来ず申し訳ありません。

※ファイルマネージャーで該当の画像を表示したときのアドレス(=画像のアドレス)を教えて頂ければ、何か判るかもしれません。
もし差し支えなければお知らせ下さい。
アドレスがコメント欄に表示されるのが抵抗がある場合は、その旨書いていただければコメントを公開する前に削除しますので。

投稿: tako→にゃんこ。さん | 2009/10/07 20:22

早急に、ご丁寧にお返事を頂いていたのに、お礼もあり得ないくらい遅くなってしまい、大変申し訳ありませんでした。

わたくしの様な、こういう人が一番、迷惑ですよね。
大変失礼致しました。
きっと嫌な思いをさせてしまったと思います。

問題ですが、なんとか、解決いたしました!!
何度かやったら、何故か出来ました。
多分、名前を間違えていたみたいです。何度も確認してから、コチラに質問をしておりましたが、大きく勘違いしていた箇所があったかもしれません。
本当にお手数おかけしました。

ただ、今は、一度ファイルにあげた画像を、変えたいと思っても、何故か反映されず困っています。
同じ名前の素材なので、『更新する』とやってみましたが、実際ファイルは更新されているのに、モバイルとブログ全体、両方とも反映を繰り返しても、更新されないんですよね。

反映が遅い時もあるので、何日か様子をみてみます・・・

ともかく、お返事、本当に有り難うございました。
これからも、拝見・参考にさせていただきます。

投稿: にゃんこ。 | 2010/01/09 04:18

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/31259584

この記事へのトラックバック一覧です: 第39回:携帯サイトのアイコンを変えてみよう:

« 第38回:DecoWeb提供のココログ用無料テンプレートを使ってみよう | トップページ | 掲示板用エントリー(’2010/08/02) »