タグ別アーカイブ: CSS

ヤフーショッピングのページで、トリプル契約をしていなくても画面の左右に縦長のバナーを表示させる方法

こんにちは。nekonomoridesignのyoshyです。

ヤフーショッピングに無料で出店している方で、トリプルの契約無しと言う方もいらっしゃるのではないでしょうか?
でも、トリプルの契約をしていなくても、なんとなく「売ってるよ!」感を出したいと思うのは出店者としての本音だと思います。そこで、何とかできないかなーと試行錯誤したのがこちら。。。。

<ul>
<li style=”background-color:transparent;
background-image:url(画像のURLをここに記入);background-repeat:repeat-
y;background-position:top
left;background-attachment:scroll;height:7000px;top:230px;z-index:auto;left:0px;position:absolute;width:画像の横幅の大きさを指定;min-height:100%;visibility:visible;display:block;”>
<a href=”リンク先のURLを記入”
style=”display:block;min-height:100%;width:画像の横幅の大きさを指定;visibility:visible;height:5000px;text-indent:-9999px;”>
</a></li>
</ul>

こんな感じのタグを、ヘッダーのフリースペースに入れると出てきます。
ちなみに、これは左側に出したいときのタグです。

ヤフーショッピングの通常版(トリプル契約なし)で、CSSスタイルシート属性を適用したいときは、直接 styleで指定してしまう。

ヤフーショッピングなどのモールでの場合は、通常契約の状態だとスタイルシートは使えません。しかし、裏技的な事になりますが、直接style属性で設定する事はできます。

たとえば・・・

<p>スタイルを適用したいなー・・・</p>

<p style=”font-size:12px;color:#FF0000;font-weight:bold:line-height:20px;”>

スタイルを適用したいなー・・・

</p>

という記載は可能と言うことです。

直接CSSを適用しているので、スタイルシートの最も便利な「汎用性」「更新のやりやすさ」という利点はまったく活かされない

当然ではありますが、外部スタイルシートなどに直接CSSを設定できる場合、そのスタイルシートさえ書き換えれば、各ページも自動的に切り替わるというのがスタイルシートの利点でもあります。

しかし、直接style属性でcssを適用している場合は、当然ながら、書くページの変更をしないといけません・・・。

なので、css設定でしかやりづらい表現をしたいときなどは、この方法を使用しても良いと思いますが、できれば、外部スタイルシートを使用したページ作りができるような契約をしているほうが良いかなとも思います。

家賃無料・自社サイト系のクレジットカード決済よりも決済手数料が低いヤフーショッピングを最大限利用していこう

ヤフーショッピングで取り扱っているクレジットカード決済は、実は、EC-CUBEなどの自社サイト系で契約可能なクレジットカード決済サービスよりも手数料が安かったりします。(契約内容にもよるところはあります)

アフィリエイト負担等ちまちましたものはありますが、ヤフーショッピングは、限りなく0円に近く、それでいて集客もまあまあしてくれるサイトです。
正直なところ、詐欺だのナンだのが流行している時代に、モール以外の自社サイト系でしかも、大手じゃない小さなネットショップでショッピングをする人の絶対数は限りなく少なくなってきている事を考えても、ヤフーショッピングに出店する事はメリットになると思います。

(ヤフーショッピング+自社サイトはまだOK)

無料の範囲でも色々とできる事はあると思いますのでそれを追求し、広告費0円、固定費0円でどこまでやれるかこれからも頑張っていきたいと思います。

それでは、今日はこのあたりで。

スマホ用のページ作製はたとえ楽天市場やヤフーショッピングなどのモールであっても、画像のサイズ設定やタグをきちんとスマホ用にした方が良い

こんにちは。nekonomoridesignのyoshyです。
最近、ヤフーショッピングのサイトを作っていたのですが、その作業中、気づいた事がありました。

商品説明文(PC用)のところに、商品説明を画像で作ったものをIMGタグで配置したり、TABLEタグで左に画像、右側に文章を書くという感じの物をつくっていたのですが、それを気にせずにスマホ用の説明文(フリースペース)に貼り付けて商品ページをつくっていました。

スマホで見て見ると、画像が凄く小さかったり文字が凄く凝縮されていて見づらかった

スマートフォンは縦にスクロールするので、画像の右隣に配置した文字とかがぐちゃぐちゃっと寄せられてしまっていました。
さらに、画像の表示大きさ指定をしていなかったので、画像サイズが凄く大きいもの(600pxや800px等)のものはスマホの画面からはみ出していたり、テーブルタグも表示崩れのようになっていたのです。

スマホ用のIMGタグには、画像の大きさを、WIDTHで画像表示サイズを指定しよう

スマホ用の説明文のところにIMGタグを使用して画像を配置する場合は、WIDTH=100%で画像の表示サイズを100%に指定する方が良いと思います。

そうすれば、iphoneやAndroid等さまざまな機種のスマホがあってもそのスマホの表示サイズに合わせて%で比率を変えて表示してくれます。

個人的には100%だといっぱいっぱいでスペースが無いので、95%くらいにしています。

TABLEタグで2列配置にしている説明文は、上下2段での説明文にしよう

どういうことかと言いますと、簡単に言うと下記の図のような感じ。

↓これはパソコン用のタグ。

スマホ用タグとPC用タグの違い
スマホ用タグとPC用タグの違い

 

 

↓こっちがスマホ用。

1002-2

スマホの場合、縦スクロールで見る事を前提にして文字や画像の配置をした方が良いということです。
ですので、TABLEタグで、PCの時に左に画像、右に文字を売っている場合は、スマホ用は、上に画像、下に文字と言うふうに並び替えが必要だと言うことです。

CSSが使えない出店方法をしている店舗は、必ずタグの打ち変えが必要

CSS(スタイルシート)が使える環境での契約で出店している店舗の場合は、DIVタグで画像や文字のブロックを設定しておくだけで、FLOAT設定で右にしたり左にしたり上にしたりで変えられるので楽ですが、TABLEぐらいしか使えない又は昔にTABLEで組んでいたと言うところは、打ち変えしたほうがよいと思います。

今は、スマホからの購入も多いネットショッピング

いまや、各モール専用のアプリが出ているくらい、スマホ経由での購入も多いネットショップです。ですので、スマホ用のページも意識していく事も重要になってきます。

スマホ用ページをいじってない、、という店舗さんは一度見直しを検討されてみてはいかがでしょうか?

スマホでの自分の店舗の見栄えをチェックするのも良いですよ!

それでは、今日はこのあたりで失礼します。

スマホ用サイトの作製などの依頼やタグの打ち変え作業など細かい作業も請け負いますのでご相談されたい方はフォームからのご連絡お待ちしております♪

無料でHTML、PHP、CSS、Ruby、jQueryのプログラムを勉強する方法 動画でもなく実践で必ず身につくプログラム勉強サイト紹介

こんにちは。nekonomoridesignのyoshyです。プログラミングを勉強したいけどどうしていいかわからない。webデザインは出来るけどプログラムは出来ない、やってみたい。そんな人におすすめのサイトを今日は紹介したいと思います。

プログラミングレッスンサイト
Progate 無料プログラムレッスンサイト

最初、私もこんな無料で勉強出来るサイトがあるとは知りませんでした。このサイトを知ったきっかけは、今の会社に入社するまえ、プログラミングの勉強を自主的に行うようにと言うことで教えられたサイトなのです。このプログラミングレッスンサイトの特徴は・・・

  • 簡単な登録(Eメールと名前だけ)で即開始できる。
  • HTML+CSS(基礎)、HTML+CSS(応用)、PHP、Ruby、jQuery、を無料で学べる。
  • 初歩からやっていけるので基礎力が身につく
  • 独学でやってたことを復習できる
  • ヒント機能があるので自主勉強形式でも行き詰らない
  • 実際にプログラムを手打ちして覚えて行くので忘れにくい
  • エディターなどソフトも必要ない状態でプログラムを実際に打ち込みながら覚ええる形式でより実践的

という至れり尽くせりなプログラム勉強サイトなのです。

動画レッスンよりも、実際に出された課題をこなしていくほうが覚える

動画レッスンも最近はやっていますが、個人的に私の場合は、見ているだけでは覚えられないたちなので、このProgateが良かったです。
入社した会社(Webプログラム会社)が薦めてくるだけあって、本当に実践的で良いレッスンが受けられるのは凄いと思います。

プログラムは自分でプログラムを入力してみて、で、思い通りに動かなくて
「あれ・・なんで動かないの・・表示されないの・・・」
という絶望感を味わったほうが成長は早いです(笑)

手打ちでプログラム言語を打ち込んでいくと、50%くらいの確立でタグの打ち間違え、単語ミス、開始括弧l、閉じ括弧のミスなどが原因だったりします。
そういうのは、動画を見てるだけでは無理です。実際にやってみて、ミスって、初めて自分の癖みたいなのもわかりますし、タグの1つでプログラムが動かなくなる事を肌で覚えたほうが早いです。

デバッグ力(直す力)がある人は成長できる

プログラムの仕事を少しやってわかった事があります。
Filemakerでのプログラムのときでもそうですが、自分が組んだものが動かなかったとき、または、思い通りではなかったとき、表示が思うように出来なかったとき、プログラムソースを見て、バグ(間違え)を見つけなければなりません。

その時に、ミスった経験がない場合、たった1個の文字のうち間違えに多大なる時間がかかる場合もあります。絶対こんなとこはミスしないだろうと言うところが意外と間違えているパターンが、プログラムの場合は多く存在します。(コピペでもってきて途中までしかコピペされてなかったとかいう悲しいパターンとか・・)

普段から、デバッグを見つける能力を高める事こそが、より正確なプログラムを打てる用にもなりますし、そのためにもやはり独学だけでなく「基礎力」を最初からもう一度体に叩き込むのも良いと思います。

独学で勉強していた人が再復習するにもこのProgateでのプログラミング練習はおすすめ

私も独学でHTMLもCSSもやってきましたが、このProgateでの復習は今に役立って居ます。是非、プログラミングをやってみたいけど何からしたらいいかも判らない。独学でやってきたのを確かめたい、新しいプログラムを触ってみたいけど何からしていいかもわからない、と言う人は、このProgateでプログラムを練習したり、触ったりしてみると良いかもしれません。

おすすめです!

 

レスポンシブウェブデザインの作り方 

こんにちは。nekonomoridesignのyoshyです。
最近、お仕事ではもっぱら、レスポンシブウェブデザインの為に、EC CUBEのデフォルトテンプレートをいじり、レスポンシブウェブデザインになるようにCSSと睨めっこして、慣れない作業に毎日うなっています。

そもそも、レスポンシブウェブデザインとは

簡単に言えば、見る端末によって最適な見た目でウェブページをデザインすることで、CSSをつかって、各端末に合わせたデザインで見せ方を変えるというものです。ちなみに、このブログも、レスポンシブウェブデザインになっています。レスポンシブウェブデザイン対応のテーマを使っています。Twenty fourteenというテーマを使っています。

レスポンシブウェブデザイン対応のwebサイトは検索結果の表示にも影響があるといううわさ

 

最近、Googleさんの検索ランキングの評価対象に、レスポンシブ対応のwebページかどうか、というのが要素として加わったそうです。おそらく、タブレット、スマートフォン等の端末も増えた影響でしょう。中途半端な大きさのタブレット端末だと、たしかにPC用サイトを表示すると、編に横スクロールしないといけないなどで見づらいところもありました。
ユーザビリティ性を重視した検索結果を求めるgoogleさんですので、納得ですが、こういった時代の流れに対応をしないといけないので、やはりweb業界はいかにスピードを早く対応していかないといけないのかがよくわかります。

レスポンシブウェブデザインの作り方

とりあえず、根本的にCSSを理解していないと無理です。(CSSでサイト作成の不慣れだったのですごーく苦労しています)
EC-CUBEとかの場合、SmartyというPHPテンプレート等の構成も調べながらじゃないと思い通りにならないです。

普通のwebサイトを作る際にレスポンシブデザインを気にしてつくる、というのであれば、レイアウト的に苦しくない範囲でデザインしていけば大丈夫かと思います。

で。

HTMLの作り方ですが、基本的に普通に作ります。
レスポンシブウェブデザインは、CSSで「見せ方」だけを変えているので、レイアウトや配置も、「見せ方」で変えています。

たとえば、PC用では見せておきたいDIV要素でも、スマホ用では不要な場合は、そのDIV要素のIDやCLASSを、 display:none にしておくだけなので、HTMLそのものは、1個です。

作るのは、CSSを、各端末用のものをデザインするのです。

一般的?というか、私の場合ですが、以下のようにしています。

スマホ用CSS、PC用CSS、タブレット用CSS

をそれぞれ用意。

それを、HTML上では3つ全部読み込ませる感じです。

CSSの設定の方法

CSSを作る時に少し細工をします。
********横幅640pxまで*************************
@media screen and (max-width: 640px) {

ここの間にCSSをかく

}
*********************************************

というような感じで、各サイズに合わせたものを作ります。

ちなみに、PC用の場合、

********横幅780px以上*************************
@media screen and (min-width: 780px) {

ここの間にCSSをかく

}
*********************************************

という感じにします。

そして、ココ大事。

width とかの設定は、必ず「%」で設定すること!!!

じゃないと、可変(端末の大きさによってサイズが変わること)にならないので。。

可変しなきゃ、レスポンシブの意味が無いです。

という事で・・・。

CSSを使いこなせないと、レスポンシブウェブデザインは出来ない・・・です。

これからも悪戦苦闘しながら頑張ります。

それにしても・・・レスポンシブウェブデザインの作り方がまさかCSSで見せ方を変えていただけとは驚きでした。
新たな発見!

目指せ、出来るwebデザイナー!