ココログプロ、ココログフリーでオプションパックアドバンスをご利用の方は、携帯画面の CSS を変更することができます。上級者向けテンプレートセットのインデックステンプレートでファイル名を「styles-mobile.css」として保存すれば、携帯画面用 CSS として有効になります（作業はPC上で行ってください）。
以下が携帯画面のクラス構造となります。これを参考に、見た目を自由に変更ください。
<h4>クラス構造</h4>
<pre>
<p><?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"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><br /><meta name="robots" content="noindex,nofollow" /><br /><link rel="stylesheet" title="" type="text/css" href="/.shared-pleasy/css/mobile.css" /><br /><link rel="stylesheet" title="" type="text/css" href="http://template.cocolog-nifty.com/000136/two_column_right/component/styles-mobile.css" /><br /><title>ブログタイトル</title><br /></head><br /><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></p>
<p><hr class="border" /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル１</a></h2><p class="entry-footer"><br />日時1<br /><br /><a href="http://ブログのURL/list_comments">コメント(1)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル2</a></h2><p class="entry-footer"><br />日時2２<br /><br /><a href="http://ブログのURL/list_comments">コメント(1)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル3</a></h2><p class="entry-footer"><br />日時3３<br /><br /><a href="http://ブログのURL/list_comments">コメント(2)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル4</a></h2><p class="entry-footer"><br />日時4<br /><br /><a href="http://ブログのURL/55list_comments">コメント(2)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル5</a></h2><p class="entry-footer"><br />日時5<br /><br /><a href="http://ブログのURL/list_comments">コメント(0)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル6</a></h2><p class="entry-footer"><br />日時6<br /><br /><a href="http://ブログのURL/list_comments">コメント(1)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル7</a></h2><p class="entry-footer"><br />日時7<br /><br /><a href="http://ブログのURL/list_comments">コメント(1)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル8</a></h2><p class="entry-footer"><br />日時8<br /><br /><a href="http://ブログのURL/list_comments">コメント(0)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル9</a></h2><p class="entry-footer"><br />日時9<br /><br /><a href="http://ブログのURL/list_comments">コメント(5)</a></p><br /><h2 class="entry-header"><a href="http://ブログのURL/">タイトル10</a></h2><p class="entry-footer"><br />日時10<br /><br /><a href="http://ブログのURL/list_comments">コメント(2)</a></p><br /><p class="nav"><hr class="border" /><br />前へ</p>
<p>| <br /><a href="http://ブログのURL/?page=2" accesskey="6">次へ</a></p><br /><hr class="border" /><a href="mailto:?subject=タイトル名;body=http://ブログのURL/">このﾌﾞﾛｸﾞを友達に教える</a><br /><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 /><br /><select name="s_type"><br /> <option value="s_blog_cocolog">ブログ ▽</option><br /> <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 /><br /><a href="http://m-cocolog.jp/login.html" accesskey="7">ログイン</a><br /><br /><a href="http://ブログのURL/" accesskey="9">ブログトップ</a><br /><br /><a href="http://m-cocolog.jp/" accesskey="0">ココログ</a><br /><br /><hr class="border" /><a href="http://mobile.nifty.com/">@niftyトップへ</a><br /><br /></div><hr class="border" /><div class="powered"><br />powered by <a href="http://m-cocolog.jp/">cocolog</a></div></div></body></html></p>
</pre>
<h4>CSS サンプル（デフォルトの物）</h4>
<pre>
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; }
</pre>
<h4>オリジナルアイコンを表示させる</h4>
携帯画面でカテゴリーや記事タイトルの頭に表示するアイコンは、独自のものにカスタマイズすることが可能です。下記の方法で行ってください。ただし設定はPCからとなります。
<div class="attention">
リッチテンプレートではオリジナルアイコンは使えません
</div>
<div class="step01">
PC管理画面のコントロールパネルタブにあるファイル管理ページでカスタマイズしたいブログのフォルダを開きます
例）ブログのフォルダ名がblogだった場合、「現在のフォルダ」が「ホーム / blog /」となるようにしてください。
</div>
<div class="step02">
続いて「新しいフォルダの作成」欄に「mobile-images」と入力し、「フォルダを作成」をクリック
</div>
<div class="step03">
作成された「mobile-images」フォルダに、表示させたいアイコンをアップロードしてください
</div>
なお、表示させる場所によってアイコンの名称は決まっています。下記のとおり、間違いのない名前でアップロードしてください。
banner-logo.gif（バナー用の画像）
category.gif（カテゴリー用のアイコン）
clock.gif （投稿日用のアイコン）
comment.gif （コメント用のアイコン）
editor.gif （投稿者名用のアイコン）
entry.gif（エントリー用のアイコン）
notice.gif（コメントエラー時に表示するアイコン）
profile.gif（プロフィールページへのリンクのアイコン）
60
17404
携帯版のブログのデザインをカスタマイズすることはできますか？
2