BLOG

カスタマイズTIPS

2017/05/02 19:02


デザイン編集のテキストを入力できる欄はHTMLタグが有効なので、改行したり、部分的に太字にしたり、色を変えたり、動画を挿入したりできます。有効に活用していただくとデザインの幅が広がります。
HTMLの基礎知識が無い方も快適に使っていただけるように、代表的なタグをご紹介します。


メインカラーに対する文字色の設定について


LPshootはメインカラーを決める項目があります。メインカラーは、フッターやボタン、FAQなどに採用されるのですが、そのメインカラーに対する文字の色は、「ナビゲーション」という項目になります。この項目は名前を変更できない仕様になっており、わかりづらくなってしまい申し訳ございません。


フォント変更について


タグの前に、LPshootはフォントを変更できる設定があります。
テキスト入力欄にワードを入力すればフォントが変更されるのですが、その時に、誤字になっていたり、全角やスペースが入っていると反映されないのでご注意をお願いします。
上記GIF画像のように、単語の上でダブルクリックをすると単語単位で選択できます。


数字入力欄について

LPshootにはフォントサイズ変更や、高さ調整など、数字を入力する欄がありますが、全角数字や数字以外の文字を入れるとエラーが起こります。必ず半角で入力してください。また、スペースなどが入っていてもエラーになる場合がありますのでしっかりと確認をお願いします。



ファーストビュー背景画像と画像について

上記画像のように、「ファーストビュー"背景"画像」は、パソコン画面とスマホ画面で見える範囲が変わるので、「ファーストビュー"背景"画像」で文字が入っている画像は、画面から見切れる可能性があり推奨しません。


ファーストビューにいれる文字を、入力ではなく画像で表現したい時は、「ファーストビュー｜画像にする」をONにして、「ファーストビュー画像」に挿入してください。
「ファーストビュー"背景"画像」と重なる形になりますので、「ファーストビュー画像」の背景は透明推奨です。フォトショップなどの画像加工ソフトで、拡張子をPNGにすれば、透過画像がつくれます。ご自身でつくることが困難な場合は、サポートサービスをご利用ください。作成代行致します。

スマホ用と分かれていますが、スマホとPCが同じ画像で構わない場合は、両方に同じ画像を挿入してください。



ファーストビュー背景について

「ファーストビュー背景画像の画質が荒くなる」とのお問い合わせが多いので記載します。
デザイン編集の項目に、ファーストビューの高さを調節する項目があります。
ここの数字は添付画像の緑色の部分に当てはまるのですが（例として「30」と入力したら、上下30ずつの計60px間隔が空くという感じです）、そこの数字を変更したら背景画像の解像度が崩れなくなるので、こちらの数字を調節してください。
全角数字であったり、余計なスペースなどがあると反映されません。（例：「50 」←数字の後ろに半角スペースが入っているのですが、これでは反映されません）半角数字以外の文字を入力しないでください。
わかりづらくて申し訳ございません。


テキスト入力欄でできること


改行を入れる

このタグを入れると、<br>改行されます。



太字にする

囲った範囲が<strong>太字になります</strong>




字を赤くする

囲った範囲が<span class="red">赤くなります</span>




太字で赤くする

囲った範囲が<strong class="red">太字で赤くなります</strong>




字をメインカラーにする

囲った範囲が<span class="mc">メインカラーの色になります</span>




太字でメインカラーにする

囲った範囲が<strong class="mc">太字でメインカラーの色になります</strong>




好きな色にする
囲った範囲が<font color="#ff0000">カラーコードを挿入し好きな色にする</font>




蛍光マーカー風にする

囲った範囲が<span class="marker_yellow">蛍光マーカー風になります</span>
囲った範囲が<span class="marker_red">赤色蛍光マーカー風になります</span>
囲った範囲が<span class="marker_blue">青色蛍光マーカー風になります</span>
囲った範囲が<span class="marker_white">白色蛍光マーカー風になります</span>


太字で蛍光マーカー風にする

囲った範囲が<strong class="marker_yellow">太字で黄色蛍光マーカー風になります</strong>
囲った範囲が<strong class="marker_red">太字で赤色蛍光マーカー風になります</strong>
囲った範囲が<strong class="marker_blue">太字で青色蛍光マーカー風になります</strong>
囲った範囲が<strong class="marker_white">太字で白色蛍光マーカー風になります</span>








リンクを入れる

囲った範囲が<a href="飛ばしたいURLを入れる">テキストリンクになります</a>

新しいウインドウを立ち上げて、リンク先のページを表示する
囲った範囲が<a href="飛ばしたいURLを入れる" target="_blank">テキストリンクになります</a>






動画を埋め込む


YOUTUBEやvimeoなどの動画を埋め込む事も可能です。
ただ、オフィシャルの埋め込みコードは、スマートフォンに対応していないので、embedresponsively.comからコードを取得する必要があります。
設定方法は簡単で、embedresponsively.comに行き、メディア選択、動画のURL入力してボタンを押せば、スマホに対応したコードが取得できるので、それをそのままテキスト入力欄にペーストすればOKです。


逆三角形アイコンをつけて、ボタンを押すと下へスクロールするという事を分かりやすくする

テンプレートを購入する <i class="fa fa-angle-down" aria-hidden="true"></i>




スタイルシートでさらにカスタマイズ！

他に、LPshootはスタイルシート（CSS）を挿入できる欄を設置しています。
WEB制作の基礎知識のある方は、この欄の活用でもっと自由にカスタマイズができます。
基礎知識の無い方に向けて、使えそうなコードを並べていきます。
HTML編集画面最下部の「スタイルシート(CSS)用スペース」にコピペするだけでおk！

サイト全体の文字を明朝体にする
body{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


ヘッダーを固定にする(ナビゲーションをページの上に常に表示させる)
#header {
    position: fixed;
    z-index: 1;
}


ファーストビューのサブキャッチをゴシック体にする
HTML編集ではファーストビューのメインキャッチとサブキャッチは同じフォントに指定されます。英語用フォントにした時に日本語が明朝になるので、その場合にお使いください
.topin p{
    font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}


ファーストビューボタンネームの色を変える

.btn-top {
background-color: #45966e; /*背景色。希望のカラーコードに変える*/
color: #ffffff;  /*文字色。希望のカラーコードに変える*/
margin-top: 50px;  /*ボタンの位置。数字を増やす分位置が下がる*/
}




見出しタイトルの文字の大きさを変える

.midashinaka h2 {
    font-size: 40px;/*数字を変更する*/
}


コンセプトの文章をカスタムする

.firsttext{

text-align: left; /*中央寄せから左寄せになる*/
font-size: 17px; /*フォントサイズ。数字で調整*/
max-width: 800px; /*デスクトップ時の横幅を変更できる。デフォルトは1000px*/
}


スリーポイントの画像を四角にする

#inmain img{border-radius: 5%;}


スリーポイント説明文をスマホ・タブレットだけ中央揃いにする
説明文の文字数が少ない時はスマホから見える事も想定して中央揃いにした方がいい場合に。

@media screen and (max-width: 767px) {
#inmain p{
    text-align: center;
}
}



レビュー写真の枠を四角にする

#koe img {border-radius: 5%;}


クロージングの文章をカスタムする

.closetext{

text-align: left; /*中央寄せから左寄せになる*/
font-size: 17px; /*フォントサイズ。数字で調整*/
max-width: 800px; /*デスクトップ時の横幅。デフォルトは1000px*/
}



カテゴリーの色を変更する

#cate {
    background: #ccc;/*背景色。カラーコード変更でかわる*/
}
.catefc {
    color: #616161;/*タイトル文字色。カラーコード変更でかわる*/
}
.category-list li a {
    color: #616161;/*文字色。カラーコード変更でかわる*/
}

カテゴリーページの色を変更する

.kokate {
    background: #eaeaea;/*背景色。カラーコード変更でかわる*/
}
.kokate li a {
    color: #616161;/*文字色。カラーコード変更でかわる*/
}


「商品列2列」時のスマホ表示の1列を2列にする

@media only screen and (max-width: 600px){
.cloms2 {
    width: 48.8%;
    margin-bottom: 16px;
}
.cloms2 .item-detail {
    padding: 12px 10px 9px;
}
.cloms2 .truncate {
    font-size: 13px;
    margin-bottom: 4px;
}
.cloms2 .item-detail h3 {
    font-size: 17px;
}
.cloms2 .btn_sho {
    display: none;
}
.cloms2 .item-detail .price_sol {
    font-size: 14px;
    padding-top: 4px;
}

.cloms2 .item-detail h3{
word-break: break-all;
white-space: normal;
}

.wari-biki-top{
    font-size: 17px;
white-space: normal;
}

.com_soon{
    font-size: 14px;
    margin-bottom: 5px;
}

.yoyaku_waku{
    margin-top: 6px;
}

.yoyaku{
  font-size:11px;
}

.cloms2 .label_image{
  width: 50px !important;
  height: 50px !important;
}
}









このように、CSSコードを編集すればカスタムが大幅に広がります。
この記事内に書かれていないCSSコードは別途料金を頂戴させていただいております。
宜しくお願い致します。