楽天ショップのためのSEO情報

  • 2013年04月03日
  • RMS

買い物かご周りの内容が重要。

楽天は、「商品ページ設定」の「商品個別登録」画面で商品登録を行います。
その際、下記の3箇所に入れる内容が重要です。

・商品名
・キャッチコピー(PC用/モバイル用)
・商品説明文(PC用/モバイル用)

上記3つにいれた内容は、買い物かごの周りに表示されます。
そして、この内容の中に含まれる言葉(キーワード)が楽天市場の検索に使われることになります。

特に、商品名は検索した時の検索結果一覧に表示されます。
商品名を魅力的につけるとクリックしてもらえる率が高まるでしょう。

Be Sociable, Share!

楽天RMSでCSSが使えるのは基本的に次の場所

  • 2013年03月27日
  • RMS

「PC用商品説明文」「PC用販売説明文」「カテゴリ説明文上」
「カテゴリ説明文下」 「トップ説明文上」「トップ説明文下」
「ヘッダー・フッター・レフトナビ」「共通説明文(大)」
「決済方法の備考欄(PC)」「配送方法の備考欄」「送料設定の備考欄」

◆外部ファイル
外部のcssファイルを読み込む属性(タグ)は使えないので
「style要素内で指定」または「任意のタグのstyle属性で指定」
のどちらかの方法でCSSを記述

◆新RMS
新RMSではタグが使えない。。。
一部のフォントカラーを変えたい時はタグを使用。

Be Sociable, Share!

円を描いて任意の数に等分割する描きかた


①楕円形ツールで真円を描く

楕円ツールで円を描く

楕円ツールで円を描く

②画面(又は、表示)
・ポイントにスナップとスマートガイドにチェックを付ける

ポイントスナップとスマートガイドにチェック

ポイントスナップとスマートガイドにチェック

③ペンツールで円の中心をクリック

ペンツールで円の中心をクリック

ペンツールで円の中心をクリック

④Shiftを押したままで円の外をクリック(円の半径よりも長い直線を描く)

Shiftを押したままで円の外をクリック

Shiftを押したままで円の外をクリック

⑤回転ツールをクリック
・回転ツールでAltを押したままで円の中心をクリック
・角度を入力(360度/分割数)
・コピー

回転ツールをクリック

回転ツールをクリック

Ctrl+Dキーを円が等分割になるまで押す

Ctrl+Dキーを円が等分割になるまで押す

⑥全体を選択ツールで選択

全体を選択ツールで選択

全体を選択ツールで選択

パスファインダパレット内の「分割」をクリック

パスファインダパレット内の「分割」をクリック

⑦オブジェクト
・グループ解除

オブジェクト→グループ解除

オブジェクト→グループ解除

⑧分割した図形を個別に選択・編集。
分割した図形を個別に選択・編集

Be Sociable, Share!

効果的に画像を重ねて使うCSS方法

  • 2013年02月05日
  • CSS

画像を重ねて表示するとは?

例えば次の画像のように、「商品」の画像と「送料無料」の画像 2枚を重ねて表示するような場合を言っています。

サンプルを用意しました。(サンプルをご覧ください

効果的に画像を重ねて使う方法(1)
▼コチラのサイトを参考にしました▼
http://kumacrow.blog111.fc2.com/blog-entry-492.html#comment878

①HTMLコード

<a href="~"><img src="(画像1)" width="240" height="240" /></a><br />
<a href="~"><img src="(画像2)" class="souryou" width="140" height="30" /></a>

②CSSコード

.souryou {
 position: relative;
 top: -55px;
 left: 195px;
}

画像1が背面に配置する画像で、画像2が前面に配置する画像です。そして、画像2には classで「souryou」を指定します。

クラス名「souryou」では、position(配置)プロパティで、relative(相対配置)を行っています。画像の大きさにあわせて、数値を変更します。

ちょっと問題なのが、「position: relative;」している画像の大きさだけ、画像同士の間が空いてしまいます。

効果的に画像を重ねて使う方法(2)

(1)の方法よりもいい方法を

①HTMLコード

<div class="goods">
<a href="~" class="goods-menu"><img src="(画像1)" width="240" height="240" /></a>
<a href="~" class="order"><img src="(画像2)" width="140" height="30" /></a>
</div>

②CSSコード

.fw_cellin_3 a{display: block; }

.fw_cellin_3 {
	margin-bottom: 5px;
	width:240px;
        height: 24px;
        position: relative;
	color:#333;
	text-align:center;
	font-weight:bold;
	font-size:12px;
}
a.goods-menu {
 border: 1px solid #777;
 width: 250px;
 height: 188px;
}
a.order {
 position: absolute;
 top: 133px;
 left: 195px;
 width: 50px;
 height: 50px;
}

サンプルを用意しました。(サンプルをご覧ください

Be Sociable, Share!

iPhoneでアメブロを更新して後ほど編集すると不具合が…


iPhoneでアメブロを更新して

以前の記事を編集すると改行がおかしくなること。行間が妙に空いてしまいスカスカになってしまいます。
こう言う現象が起きる

色々ネットで調べたところ、アメーバの不具合のようです。

今後改善されるかもしれませんが、今のところは…

【改善策】
一度、下書き保存して下書きUPしておき、PCの使える環境から文字装飾やリンクの貼り付けなど手を加え正式にアップする。

Be Sociable, Share!