今回はSNSの中心となるホーム画面のカスタマイズについてご紹介します。
モバイルテンプレートも、PCテンプレート同様、各画面を自由にカスタマイズできるので、チャレンジしてみましょう！

---

●サンプルを見てみよう

変更前

変更後

デザインカスタマイズをするには、まずコントロールパネルの【モバイルデザイン設定】で【マスターテンプレート】をダウンロードします。
【個別テンプレート】にある【ホーム】を選択するとカスタマイズ画面のページに飛びます。

---

●お知らせリンクの文字色を変えてみよう

→

変更前

変更後

ここでは文字色を変える<font>タグを使います。
変更前のソース・・・ホームテンプレートの4行目付近にあります。

変更前

・<a href="/message">新着メッセージが {$message_num} 件あります！</a><br> {/if} {if $link_req_cnt} ・<a href="/link/view_request">リンク承認待ちの友人が {$link_req_cnt} 名います！</a><br> {/if} {if $notices} {foreach from=$notices item="notice" name="notice"} ・<a href="{$notice.url}">{$notice.title}</a><br> {/foreach} {/if} </td><td>

変更後のソース

<font color="色指定">・</font><a href="/message"><font color="色指定">新着メッセージが {$message_num} 件あります！</font></a><br> {/if} {if $link_req_cnt} <font color="色指定">・</font><a href="/link/view_request"><font color="色指定">リンク承認待ちの友人が {$link_req_cnt} 名います！</font></a><br> {/if} {if $notices} {foreach from=$notices item="notice" name="notice"} <font color="色指定">・</font><a href="{$notice.url}"><font color="色指定">{$notice.title}</font></a><br> {/foreach} {/if}

---

●イラスト画像を挿入してみよう

→

ここでは<img>タグを使ってSNSに画像を挿入してみましょう。
画像を挿入する時は、コントロールパネルにある【画像アップロード】画面からアップロードをし、タグをコピーして貼り付けます。

※なお、携帯電話の種類によって画像が表示されない場合がありますので、画像の横幅（width）は200未満に設定することをお勧めします。

変更前のソース・・・ホームテンプレートの15行目付近にあります。

<a href="#bottom">▼</a> <hr>

変更後のソース

<a href="#bottom"><font color="色指定">▼</font></a> <center><img src="画像ファイル名" width="横幅" height="縦幅" alt="" /></center> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" />

区切り線を画像に置き変えたい場合は、区切り線<hr>タグを<img>タグで上書きすると変更することができます。

---

●メニュー（上段・下段）を変更してみよう

→

変更前（上段）

変更後（上段）

ここでは先ほどご紹介した<font>タグと<img>タグを使って
文字色と画像を変更してみましょう。

変更前のソース（上段）・・・ホームテンプレートの18行目付近にあります。

<font color="#CC3366">[1]</font>{if $schedules}<a href="#schedule" accesskey="1">今日の予定</a>{else}<a href="calendar/user/{$user.name}/weekly" accesskey="1">今週の予定</a>{/if}<br> <font color="#CC3366">[2]</font><a href="#diary" accesskey="2">新着日記</a><br> <font color="#CC3366">[3]</font><a href="#topic" accesskey="3">新着トピック</a><br> <font color="#CC3366">[4]</font><a href="/enquete" accesskey="4">新着アンケート</a><br> <font color="#CC3366">[5]</font><a href="/event" accesskey="5">新着イベント</a><br> <font color="#CC3366">[6]</font><a href="/todo/user/{$login.name}" accesskey="6">ToDo</a><br> <font color="#CC3366">[7]</font><a href="/memo/show" accesskey="7">メモ</a><br>

変更後のソース（上段）

<img src="画像ファイル名" width="横幅" height="縦幅" alt="" />{if $schedules}<a href="#schedule" accesskey="1"><font color="色指定">今日の予定</font></a>{else}<a href="calendar/user/{$user.name}/weekly" accesskey="1"><font color="色指定">今週の予定</font></a>{/if}<br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="#diary" accesskey="2"><font color="色指定">新着日記</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="#topic" accesskey="3"><font color="色指定">新着トピック</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/enquete" accesskey="4"><font color="色指定">新着アンケート</font></a><br> <img src="画像ファイル名" width="横幅" height="横幅" alt="" /><a href="/event" accesskey="5"><font color="色指定">新着イベント</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/todo/user/{$login.name}" accesskey="6"><font color="色指定">ToDo</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/memo/show" accesskey="7"><font color="色指定">メモ</font></a><br>

→

変更前（下段）

変更後（下段）

変更前のソース（下段）・・・ホームテンプレートの63行目付近にあります。

・<a href="/diary/entry">日記を書く</a><br> 　-><a href="/setup?action=moblog_setting">メール投稿</a><br> ・<a href="/diary/user/{$login.name}">日記を読む</a><br> ・<a href="#comment">コメント履歴</a><br> ・<a href="/message">メッセージを読む</a><br> <hr color="#EEEEEE"> ・<a href="/group/user/{$login.name}">グループをみる</a><br> ・<a href="/friend/user/{$login.name}">友達をみる</a><br> ・<a href="/friend">メンバーリスト</a><br> ・<a href="/group">グループリスト</a><br> ・<a href="/user/{$login.name}">プロフィール</a><br> ・<a href="/setup?action=mobileset">簡単ログイン設定</a><br>

変更後のソース（下段）

<img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/diary/entry"><font color="色指定">日記を書く</font></a><br> 　<img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/setup?action=moblog_setting"><font color="色指定">メール投稿</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/diary/user/{$login.name}"><font color="色指定">日記を読む</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="#comment"><font color="色指定">コメント履歴</font></a><br> <img src="画像ファイル名" width="横" height="縦" alt="" /><a href="/message"><font color="色指定">メッセージを読む</font></a><br> <hr color="色指定"> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/group/user/{$login.name}"><font color="色指定">グループをみる</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/friend/user/{$login.name}"><font color="色指定">友達をみる</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/friend"><font color="色指定">メンバーリスト</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/group"><font color="色指定">グループリスト</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/user/{$login.name}"><font color="色指定">プロフィール</font></a><br> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><a href="/setup?action=mobileset"><font color="色指定">簡単ログイン設定</font></a><br>

---

●日記・グループ・コメント履歴を変更してみましょう

→

変更前

変更後

最後に、<hr>・<font>・<img>タグを用いてカスタマイズしてみましょう。

変更前のソース・・・ホームテンプレートの40行目付近にあります。

<a name="diary"></a> <font color="#99CC66">■</font>最新日記一覧<br> {foreach from=$diaries item="diary" name="diary"} ・{$diary.timestamp|date_format:"%m/%d"} <a href="{$diary.url}">{$diary.title}</a>({$diary.comment_num}){$diary.author_full_name}<br> {/foreach} <div align="right"> ><a href="/diary">もっとみる</a> </div> <hr> <a name="topic"></a> <font color="#99CC66">■</font>グループ新着トピック<br> {foreach from=$topics item="row" name="topic"} ・<a href="/group/{$row.group_id}/topic/{$row.id}">{$row.title}</a>({$row.comment_num})<br> {/foreach} <hr> <a name="comment"></a> <font color="#99CC66">■</font>日記コメント履歴<br> {foreach from=$comments item="comment" name="comment"} ・<a href="{$comment.url}">{$comment.title}</a>({$comment.num})<br> {/foreach}

変更後のソース

</a> <font color="色指定">■</font><font color="色指定">最新日記一覧</font><br> {foreach from=$diaries item="diary" name="diary"} <font color="色指定">・</font><font color="色指定">{$diary.timestamp|date_format:"%m/%d"}</font><a href="{$diary.url}"><font color="色指定">{$diary.title}</font></a><font color="色指定">({$diary.comment_num}){$diary.author_full_name}</font><br> {/foreach} <div align="right"> ><a href="/diary"><font color="色指定">もっとみる</font></a> </div> <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><br> <a name="topic"></a> <font color="色指定">■</font><font color="色指定">グループ新着トピック</font><br> {foreach from=$topics item="row" name="topic"} <font color="色指定">・</font><a href="/group/{$row.group_id}/topic/{$row.id}"><font color="色指定">{$row.title}</font></a><font color="色指定">({$row.comment_num})</font><br> {/foreach} <img src="画像ファイル名" width="横幅" height="縦幅" alt="" /><br> <a name="comment"></a> <font color="色指定">■</font><font color="色指定">日記コメント履歴</font><br> {foreach from=$comments item="comment" name="comment"} <font color="色指定">・</font><a href="{$comment.url}"><font color="色指定">{$comment.title}</font></a><font color="色指定">({$comment.num})</font><br> {/foreach}

---

今回利用させていただいた画像はふわふわ。りさんのところにあります。
可愛い画像が沢山あるので、みなさんも是非ご利用ください！

カテゴリ：デザインカスタマイズ