こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はスマートフォンの『お知らせ』表示をカスタマイズする方法をいくつかご紹介したいと思います。

関連記事 スマホにもお知らせを表示したい【基本編】

こんなお悩みありませんか？

・「お知らせ一覧へ」リンクをつけたい！
・トップページのお知らせ表示を好きな件数表示したい
・「お知らせのリンク文字」に色や下線をつけてリンクをわかりやすくしたい

それぞれ早速解決方法をみていきましょう！

[難易度 ★☆☆ ]
スマホの「お知らせ一覧へ」ボタンをつける方法！

（1）HTMLを追加！

例えばトップページからリンクしたい場合は

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定
適用中のスマホテンプレートの「編集」をクリック【トップ画面】へ

「HTML編集」エディターエリアに下記を記載してください。

<p class="newsLink"><a href="/smartphone/news_list.html">お知らせ一覧へ</a></p>

（2）CSSでボタンを作る！

同じ画面の「CSS編集」エディターエリアに下記を記載してください。

.newsLink {	
	text-align:right;/* ボタンを右端に寄せる指定*/
	margin:8px 0;
}
.newsLink a{
	font-size:0.7rem;/* ボタン文字サイズ*/
	color:#fff;/* ボタン文字色*/
	background:#333;/* ボタンの色指定*/
	padding:0.2rem 0.5rem;
	margin-right:0.5rem;
}

CSSを追加すると
↓↓このように表示されます！

お知らせ一覧へ

→できあがり

[難易度 ★☆☆ ]
スマホのトップページのお知らせ表示の件数を変更する方法！

（1）HTMLを変更！

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定
適用中のスマホテンプレートの「編集」をクリック【トップ画面】へ

「HTML編集」エディターエリアの下記のソース内「max=」の後ろの「$news.max」の箇所をお知らせを表示したい数値に変更します。

<{section name=i loop=$news.list max=$news.max}>

↓

例） お知らせを5件表示したいとき

<{section name=i loop=$news.list max=5}>

→かんたんですね

[難易度 ★☆☆ ]
スマホのトップページの「お知らせのリンク文字」に色や下線をつけてリンクをわかりやすくする方法！

（1）CSSを追加！

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定
適用中のスマホテンプレートの「編集」をクリック【トップ画面】へ

「CSS編集」エディターエリアに下記を記載してください。

.indexNewsList a {
	color:#1d59be; /* 青文字に指定*/
	text-decoration:underline; /* 下線あり*/
}

→かんたんですね

カスタマイズ完了！

ショップをみるで確認してみましょう！

いかがでしたでしょうか。
ちょっとしたソースの修正で希望のデザインへ変更できると嬉しいですね。

ぜひカスタマイズ編表示もお試しください！それではまた！