こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はスマートフォンの『お知らせ』表示をカスタマイズする方法をいくつかご紹介したいと思います。
関連記事 スマホにもお知らせを表示したい【基本編】
こんなお悩みありませんか？
・「お知らせ一覧へ」リンクをつけたい！
・トップページのお知らせ表示を好きな件数表示したい
・「お知らせのリンク文字」に色や下線をつけてリンクをわかりやすくしたい
それぞれ早速解決方法をみていきましょう！
[難易度 ★☆☆ ]
スマホの「お知らせ一覧へ」ボタンをつける方法！
（1）HTMLを追加！
例えばトップページからリンクしたい場合は
【ショップデザイン（スマホ）】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【トップ画面】へ
「HTML編集」エディターエリアに下記を記載してください。
|
1 |
<p class="newsLink"><a href="/smartphone/news_list.html">お知らせ一覧へ</a></p> |
（2）CSSでボタンを作る！
同じ画面の「CSS編集」エディターエリアに下記を記載してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
.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編集」エディターエリア14行目の下記のソース内「max=」の後ろの「$news.max」の箇所をお知らせを表示したい数値に変更します。
|
1 |
<{section name=i loop=$news.list max=$news.max}> |
↓
例） お知らせを5件表示したいとき
|
1 |
<{section name=i loop=$news.list max=5}> |
→かんたんですね
[難易度 ★☆☆ ]
スマホのトップページの「お知らせのリンク文字」に色や下線をつけてリンクをわかりやすくする方法！
（1）CSSを追加！
【ショップデザイン（スマホ）】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【トップ画面】へ
「CSS編集」エディターエリアに下記を記載してください。
|
1 2 3 4 |
.indexNewsList a { color:#1d59be; /* 青文字に指定*/ text-decoration:underline; /* 下線あり*/ } |
→かんたんですね
カスタマイズ完了！
ショップをみるで確認してみましょう！
いかがでしたでしょうか。
ちょっとしたソースの修正で希望のデザインへ変更できると嬉しいですね。
ぜひカスタマイズ編表示もお試しください！それではまた！
