カラーミーショップでHTMLとCSSをいじる！！～その2～
2015
11
前回，その１はこちら
さぁ，いよいよHTMLをさわっていきましょ～
私が振り返って，ココわかりにくかったな～というところを少しずつやっていきます。
まず，前準備
メモ帳かワードを用意しましょう。
ちょっとした部分だけだったらメモ帳でOKです。
大幅に変える場合は，置換などができるワードは結構便利です。
次に，cssとhtmlの知識はある程度ないと難しい。
divやpositionなど使いこなせるようになりましょう。
使いこなせない方は，本やサイトを見ながら一度自分で作ってみると良いです。
メモ帳にhtml，cssを書けば疑似的なホームページを作れるので，練習してみましょう。
↓オススメサイト
調べ物はコチラ
練習はコチラ
長い前準備でした。
さて，本当にいよいよやっていきましょう。
↓初期状態のテンプレート「WASHI」で表示
オレンジ色の丸で囲ってあるところをまず変えていきましょう。
恐らく，「ホーム」や「すべての商品」という文字があるので，検索をかけてみます。（ctrl+f）
すると，それらしきところが2か所ありました。
どっちかは書いてある内容を少し変えてプレビューして見てみましょう。
当たりなら変わっているはずです。
↓当たりはコチラ
<h1 id="header-logo" class="shop-name header-link font-mincho"><a href="<{$home_url}>"><{$logo}></a></h1>
<!-- <p class="shop-description"><{$shop_name}></p> -->
<div id="header-global-nav" class="header-link font-mincho hidden-phone">
<ul class="inline">
<li><a href="<{$home_url}>">ホーム</a></li>
<li><a href="/?mode=srh&cid=&keyword=">すべての商品</a></li>
<li><a href="<{$sk_url}>">ご利用案内</a></li>
<{if $manager_url != ""}><li><a href="<{$manager_url}>">ブログ</a></li><{/if}>
<li><a href="<{$view_inq_url}>">お問い合わせ</a></li>
<{* フリーページをヘッダーメニューに追加 (PC用) *}>
<!-- <li><a href="?mode=f1">フリーページ1</a></li> -->
<!-- <li><a href="?mode=f2">フリーページ2</a></li> -->
</ul>
</div>
ちなみに，もう一か所はスマホ用でした。
スマホ用には別に作るよ！という方は，その部分を消しちゃっても良いかも。
さぁ，ホームなどの文字を変えるだけなら簡単です。
しかし，urlのところを見てください。
例えば，「ホーム」
<li><a href="<{$home_url}>">ホーム</a></li>
「{$home_url}」って何だ？！となりますよね。
これがいわゆる独自タグというやつです。
カラーミーショップのマニュアルで検索すると一覧が出てきます。
カラーミーショップをいじる上で避けては通れない独自タグは次回のおたのしみ！
さぁ，いよいよHTMLをさわっていきましょ～
私が振り返って，ココわかりにくかったな～というところを少しずつやっていきます。
まず，前準備
メモ帳かワードを用意しましょう。
ちょっとした部分だけだったらメモ帳でOKです。
大幅に変える場合は，置換などができるワードは結構便利です。
次に，cssとhtmlの知識はある程度ないと難しい。
divやpositionなど使いこなせるようになりましょう。
使いこなせない方は，本やサイトを見ながら一度自分で作ってみると良いです。
メモ帳にhtml，cssを書けば疑似的なホームページを作れるので，練習してみましょう。
↓オススメサイト
調べ物はコチラ
練習はコチラ
長い前準備でした。
さて，本当にいよいよやっていきましょう。
↓初期状態のテンプレート「WASHI」で表示
オレンジ色の丸で囲ってあるところをまず変えていきましょう。
恐らく，「ホーム」や「すべての商品」という文字があるので，検索をかけてみます。（ctrl+f）
すると，それらしきところが2か所ありました。
どっちかは書いてある内容を少し変えてプレビューして見てみましょう。
当たりなら変わっているはずです。
↓当たりはコチラ
<h1 id="header-logo" class="shop-name header-link font-mincho"><a href="<{$home_url}>"><{$logo}></a></h1>
<!-- <p class="shop-description"><{$shop_name}></p> -->
<div id="header-global-nav" class="header-link font-mincho hidden-phone">
<ul class="inline">
<li><a href="<{$home_url}>">ホーム</a></li>
<li><a href="/?mode=srh&cid=&keyword=">すべての商品</a></li>
<li><a href="<{$sk_url}>">ご利用案内</a></li>
<{if $manager_url != ""}><li><a href="<{$manager_url}>">ブログ</a></li><{/if}>
<li><a href="<{$view_inq_url}>">お問い合わせ</a></li>
<{* フリーページをヘッダーメニューに追加 (PC用) *}>
<!-- <li><a href="?mode=f1">フリーページ1</a></li> -->
<!-- <li><a href="?mode=f2">フリーページ2</a></li> -->
</ul>
</div>
ちなみに，もう一か所はスマホ用でした。
スマホ用には別に作るよ！という方は，その部分を消しちゃっても良いかも。
さぁ，ホームなどの文字を変えるだけなら簡単です。
しかし，urlのところを見てください。
例えば，「ホーム」
<li><a href="<{$home_url}>">ホーム</a></li>
「{$home_url}」って何だ？！となりますよね。
これがいわゆる独自タグというやつです。
カラーミーショップのマニュアルで検索すると一覧が出てきます。
カラーミーショップをいじる上で避けては通れない独自タグは次回のおたのしみ！