５：携帯画面のデザイン
１：リッチテンプレートから選択
携帯画面のデザインは、PC 用に選択したリッチテンプレートと連動しています。リッチテンプレートについては、「リッチテンプレート」で解説しています。 また、携帯管理画面からもリッチテンプレートを選択してデザイン変更を行うことができます。
２：上級者は CSS でもデザイン変更が可能です
ココログプロをご利用の方は、携帯画面の CSS を変更することができます。インデックステンプレートでファイル名を「styles-mobile.css」として保存すれば、携帯画面用 CSS として有効になります（作業はPC上で行ってください）。
以下が携帯画面のクラス構造となります。これを参考に、見た目を自由に変更ください。
●クラス構造
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" title="" type="text/css" href="/.shared-pleasy/css/mobile.css" />
<link rel="stylesheet" title="" type="text/css" href="http://template.cocolog-nifty.com/000136/two_column_right/component/styles-mobile.css" />
<title>ブログタイトル</title>
</head>
<body class="body"><a name="top"></a><div id="container"><img src="http://axX.a.cocolog-nifty.com/ax.gif?ブログURL" width="1" height="1" alt="" /><div id="banner"><h1>ブログタイトル</h1><h2>1行紹介</h2></div>
<hr class="border" /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル１</a></h2><p class="entry-footer">
日時1<br />
<a href="http://ブログのURL/list_comments">コメント(1)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル2</a></h2><p class="entry-footer">
日時2２<br />
<a href="http://ブログのURL/list_comments">コメント(1)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル3</a></h2><p class="entry-footer">
日時3３<br />
<a href="http://ブログのURL/list_comments">コメント(2)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル4</a></h2><p class="entry-footer">
日時4<br />
<a href="http://ブログのURL/55list_comments">コメント(2)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル5</a></h2><p class="entry-footer">
日時5<br />
<a href="http://ブログのURL/list_comments">コメント(0)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル6</a></h2><p class="entry-footer">
日時6<br />
<a href="http://ブログのURL/list_comments">コメント(1)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル7</a></h2><p class="entry-footer">
日時7<br />
<a href="http://ブログのURL/list_comments">コメント(1)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル8</a></h2><p class="entry-footer">
日時8<br />
<a href="http://ブログのURL/list_comments">コメント(0)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル9</a></h2><p class="entry-footer">
日時9<br />
<a href="http://ブログのURL/list_comments">コメント(5)</a></p>
<h2 class="entry-header"><a href="http://ブログのURL/">タイトル10</a></h2><p class="entry-footer">
日時10<br />
<a href="http://ブログのURL/list_comments">コメント(2)</a></p>
<p class="nav"><hr class="border" />
前へ
|
<a href="http://ブログのURL/?page=2" accesskey="6">次へ</a></p>
<hr class="border" /><a href="mailto:?subject=タイトル名;body=http://ブログのURL/">このﾌﾞﾛｸﾞを友達に教える</a><br />
<hr class="border" /><form action="http://mobile.nifty.com/cgi-bin/search.cgi" method="get"><input type="text" name="q" value="" size="16" /><input type="hidden" name="ss" value="cocofree" /><br />
<select name="s_type">
<option value="s_blog_cocolog">ブログ ▽</option>
<option value="s_site">ケータイサイト</option></select><input type="submit" value="検索" /></form><hr class="border" /><hr class="border" /><div class="back-top"><a href="#top" accesskey="2">TOP↑</a></div><hr class="border" /><div class="footer"><a href="" accesskey="5">リロード</a><br />
<a href="http://m-cocolog.jp/login.html" accesskey="7">ログイン</a><br />
<a href="http://ブログのURL/" accesskey="9">ブログトップ</a><br />
<a href="http://m-cocolog.jp/" accesskey="0">ココログ</a><br />
<hr class="border" /><a href="http://mobile.nifty.com/">@niftyトップへ</a><br />
</div><hr class="border" /><div class="powered">
powered by <a href="http://m-cocolog.jp/">cocolog</a></div></div></body></html>
●CSS サンプル（デフォルトの物）
body {background-color: #ffffff;
color: #666666;
}
a {color:#f4bd24;}
a:link{color:#f4bd24;}
a:focus{color:#f4bd24;}
a:visited{color:#f4bd24;}
hr.border {
border-style:solid;
border-color: #f4bd24;
background-color: #eeeeee;
margin: 5px 0;
}
form {
margin: 10px 0;
}
h1{
font-size: medium;
}
h2{
font-size: medium;
}
#container {
}
#banner {
color: #666666;
text-align: left;
margin: 0 0 10px 0;
padding: 0;
}
#banner h1 {
color: #666666;
text-align: left;
margin: 0 0 5px 0;
font-size: medium;
}
#banner h2 {
color: #666666;
font-size: small;
display: -wap-marquee;
-wap-marquee-style: scroll;
-wap-marquee-dir: rtl;
-wap-marquee-loop:;
}
.entry-header {
text-align: left;
margin: 5px 0 5px 0;
font-size: medium;
color:#000000;
}
.entry-footer, .comment-footer, .trackback-footer {
color: #666666;
background-color: transparent;
border-bottom: 1px solid #f4bd24;
margin: 5px 0 15px 0;
padding: 0 0 5px 0;
font-size: small;
text-align:right;
}
.comments-header, .comments-open-header, .trackbacks-header {
color: #000000;
text-align: left;
border: 0;
font-size: medium;
}
.footer {
margin: 10px 0 ;
text-align: left;
}
.powered {
margin-top: 5px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
font-size: small;
background-color: #ffffff;
color: #666666;
}
.back-top { text-align: right; }
.adbanner { text-align: center; }
３：オリジナルアイコンを表示させる
携帯画面でカテゴリーや記事タイトルの頭に表示するアイコンは、独自のものにカスタマイズすることが可能です。下記の方法で行ってください。ただし設定はPCからとなります。ファイルのアップロードについては「ブログへの画像／ファイルのアップロード」で解説しています。
※リッチテンプレートではオリジナルアイコンは使えません
i)PC管理画面のコントロールパネルタブにあるファイル管理ページでカスタマイズしたいブログのフォルダを開きます
ii)続いて「新しいフォルダの作成」欄に「mobile-images」と入力し、「フォルダを作成」をクリック。
iii)作成された「mobile-images」フォルダに、表示させたいアイコンをアップロードしてください
なお、表示させる場所によってアイコンの名称は決まっています。下記のとおり、間違いのない名前でアップロードしてください。
banner-logo.gif（バナー用の画像）
category.gif（カテゴリー用のアイコン）
clock.gif （投稿日用のアイコン）
comment.gif （コメント用のアイコン）
editor.gif （投稿者名用のアイコン）
entry.gif（エントリー用のアイコン）
notice.gif（コメントエラー時に表示するアイコン）
profile.gif（プロフィールページへのリンクのアイコン）
カテゴリー ： 04.携帯電話で閲覧・管理
