サポート
携帯閲覧ページの独自 CSS の指定
※ この方法を利用するには上級者テンプレートを利用する必要があります。
ただし、カスタム CSS や上級者テンプレートの編集はサポート対象外となります。
携帯閲覧ページの CSS を編集する場合は、管理画面ページ上部のメニューから [ブログ管理] - [デザイン] をクリックし、ページ内のタブから [PC] をクリックします。
※ ブログに上級者テンプレートを設定していない場合は [上級者テンプレートを作成する] を参考に、上級者テンプレートの作成、適用を行ってください。
携帯閲覧ページの独自 CSS テンプレートを作成
- [新しくインデックス・テンプレートを作成] をクリックする
- [テンプレート名] に任意の名前を入力し [出力ファイル] に [styles-mobile.css] と入力する
- [テンプレートの内容] に [styles-mobile.css サンプル] を挿入し編集する
- [保存] をクリックする
styles-mobile.css サンプル
/* Baby theme for Mobile */
* { color: #333; }
body { color: #333; background-color: #FAD7D7; }
#container { background-color: white; border-left: 3px solid #D4EFC1; border-right: 5px solid #D9E6F3; }
#banner { background-color: white; color: #69c; border-left: 10px solid #FEDE58; }
h1 { color: #69c; }
h2 { color: #69c; }
hr.border { color: #D4EFC1; }
.entry-header, .comments-header, .comments-open-header, .trackbacks-header
{ color: #69c; background-color: #E6F8DA; border-top: 1px solid #ccff42; border-right: 1px solid #D9E6F3;
border-bottom: 1px solid #ccff42; border-left: 1px solid #ccff42; }
ul.enclosure li { list-style-type: none; }
ul.enclosure li.video { list-style-image: url(/.shared/themes/lilia/theme-baby/mobile-icon-video.gif); }
ul.enclosure li.audio { list-style-image: url(/.shared/themes/lilia/theme-baby/mobile-icon-audio.gif); }
ul.enclosure li.image { list-style-image: url(/.shared/themes/lilia/theme-baby/mobile-icon-image.gif); }
携帯閲覧ページの HTML、クラス構造
携帯閲覧ページの HTML、クラス構造は以下のとおりです。
携帯閲覧ページの HTML は変更できませんが、以下のクラス構造を参考に styles-mobile.css で各要素に CSS を設定すると、文字色など見た目の雰囲気を自由に変更することができます。
メインページ
<body class="body"><div id="container">
<div id="banner">
<div id="banner-logo">
<img class="icon" src="[バナー画像]">
</div>
<h1>[ブログタイトル]</h1>
<h2>[ブログ副題]</h2>
</div>
<hr class="border">
<h2 class="entry-header">
<img class="icon" />
[記事タイトル]
</h2>
<p class="entry-body">[記事概要]</p>
<p class="entry-more-link"><a>続きを読む</a></p>
<p class="entry-footer">
<img class="icon" />[カテゴリ名]<br />
<img class="icon" />[投稿日時]<br />
<img class="icon" /><a>コメント([件数])</a><br />
</p>
<div class="nav">
<hr class="border">
<a>前</a> | <a>次</a>
</div>
<div class="footer">
<hr class="border">
<img class="icon" /><a>カテゴリー一覧</a><br />
<img class="icon" /><a>最近のコメント</a><br />
<img class="icon" /><a>プロフィール</a><br />
<img class="icon" /><a>メイン</a><br />
</div>
</div></body>
個別ページ
<body class="body"><div id="container">
<div id="banner">
<div id="banner-logo">
<img class="icon" src="[バナー画像]">
</div>
<h1>[ブログタイトル]</h1>
</div>
<hr class="border">
<h2 class="entry-header">
<img class="icon" />
[記事タイトル]
</h2>
<p class="entry-body">[記事概要]</p>
<p class="entry-footer">
<img class="icon" />[カテゴリ名]<br />
<img class="icon" />[投稿日時]<br />
<img class="icon" /><a>コメント([件数])</a><br />
</p>
<div class="nav">
<hr class="border">
<a>前</a> | <a>メイン</a>|<a>次</a>
</div>
<hr class="border">
<h3 class="comments-header">コメント</h3>
<div class="comment-nav">
<img class="icon"><a>コメントを見る ([件数])</a>
</div>
<h3 class="comments-open-header">
<img class="icon">コメントを投稿
</h3>
<form>
<dl>
<dt><label for="comment-author" class="comment-label">名前:</label></dt>
<dd><input id="comment-author"></dd>
<dt><label for="comment-email" class="comment-label">メールアドレス:</label></dt>
<dd><input id="comment-email"></dd>
<dt><label for="comment-url" class="comment-label">URL:</label></dt>
<dd><input id="comment-url"></dd>
<dt><label for="comment-text" class="comment-label">コメント:</label></dt>
<dd><textarea id="text"></textarea></dd>
</dl>
<div>
<input name="preview" value="確認" type="submit">
<input name="post" value="投稿" type="submit">
</div>
</form>
<hr class="border">
<div class="footer">
<img class="icon" /><a>カテゴリー一覧</a><br />
<img class="icon" /><a>最近のコメント</a><br />
<img class="icon" /><a>プロフィール</a><br />
<img class="icon" /><a>メイン</a><br />
</div>
</div></body>
