• 楽天
  • Yahoo!

【ヤフーカスタマイズ】CSSで検索ページをもっと見やすくスタイリッシュにする方法

名称未設定-1

「13枚のコインの中に1枚だけ重いか軽いか分からない偽コインを天秤を3回だけ使って
判別してください」という問題が解けなかったogaRia佐藤です。

今回はヤフーの検索ページをカスタマイズする方法をご紹介したいと思います。
さっぱりとしたシンプルなデザインにされたい店舗様におすすめです。

デモ

標準のデザイン

01

枠の色や見出しの色など変更は出来ますがちょっと古臭い印象があります。

カスタマイズデザイン

02

今回は極力シンプルに余白を多くとったデザインにしてみました。
リンクのカラー、フォントはヤフーショッピングのリンクカラーと統一させているので
一体感が増すかと思います。
ページナビゲーションは大きく綺麗に調整しました。

リンクカラー、フォントだけ統一

専用CSSをコピー

まずは下記CSSをすべてコピーしましょう。

#wrapper2 #wrap2 #Left,
#wrapper2 #wrap2 #Container{
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Lucida Grande", Verdana, "MS Pゴシック", sans-serif !important;
    color: #222222;
    -webkit-font-smoothing: antialiased;
}
#wrapper2 #wrap2 a{
    color: #09a;
    text-decoration:none;
}
#wrapper2 #wrap2 a:hover{
    color: #66CCCC;
}

CSSファイルを作成してトリプルサーバーにアップ

コピーしたCSSで、.cssファイルを作成してトリプルサーバにアップロードします。

  1. コピーしたCSSをメモ帳に貼り付けます。
  2. 「style.css」という名前で”名前をつけて保存”します。
  3. トリプルサーバーへ接続して、先ほどの「style.css」をアップロードします。

    トリプルサーバーへ接続した事がない場合は、ストアクリエイターのマニュアルもしくはカスタマーサポートへご連絡ください。
    style.cssのアップロード先はどこでも構いません。CSSの専用フォルダを作って管理されると分かりやくすなるかもです!

  4. style.cssのURLを確認します。

    https://shopping.geocities.jp/(ヤフーショップアカウント)/(フォルダ名)/style.css
    (※フォルダを作っていない場合は、/(ヤフーショップアカウント)/style.css になります。)

CSSタグをストアクリエイターに貼り付け


<link type="text/css" rel="stylesheet" href="style.cssのURL">

↑赤字をクリックで編集できます。

style.cssのURLを書換えたら、以下の場所に貼り付けます。

  1. ストアクリアイターに入ります。
  2. 「ストアデザイン」 > 「ヘッダー・看板」内の「フリースペース」に入ります。
  3. 保存をし、最後に反映管理から反映すれば完了です!

検索ページをカスタマイズ

貼り付けタグを取得

こちらはogaRiaフルバージョン会員様限定です。

タグをストアクリエイターに貼り付け

  1. ストアクリアイターに入ります。
  2. 「ストアデザイン」 > 「ヘッダー・看板」内の「フリースペース」に入ります。
  3. 保存をし最後に反映管理から反映すれば完了です!

確認済みブラウザはChrome、firefox、IE11、10
IE8、9は検索窓、ページナビゲーションに若干のズレあり。
その他のブラウザは未確認の為ご了承ください。

まとめ

このカスタマイズは全ページに適応されますので
リンクカラー、フォントがすべて変更されます。
場合によっては既存の場所が崩れてしまうこともございますので
ご確認、ご理解頂いた上でご活用くださいませ!

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。