« 2008年9月 | トップページ | 2010年8月 »

2009年9月の1件の記事

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を参照して下さい。
『携帯版のブログのデザインをカスタマイズすることはできますか?』

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

« 2008年9月 | トップページ | 2010年8月 »