ウェブ

当サイトも、サクりとレスポンシブデザインにしてみた。

当サイトも、サクサクとレスポンシブデザインにしてみた。

今頃感ただよいますが、
これまで、PC画面サイズ用のみとして機能していたテーマをスマートデバイス向けに、
レスポンシブデザインを適用してみました。

1.モバイルファーストへの転換

PCベースのレイアウトから、基本をモバイルとして1カラムで考え、画面サイズが大きくなることで、
2カラムへと変化させる。

2.viewport の設定

レスポンシブデザインにて、マルチデバイスに対応する為、viewport(width=device-width を設定します。
>HTML

<meta name="viewport" content="width=device-width">

2-2.IE8への対応

・・・。

3.可変を前提とする

>CSS

#container,
.wrapper {
  margin: 0 auto;
  width: 90%;
}

4.ブレイクポイントを設定する

今回は、スマートフォン、PC(タブレット)として320px、768pxの2つをブレイクポイントとしました。

>CSS

/* for SmartPhone */
@media only screen and (min-width: 320px) {
}

モバイルファーストとして考えてるのでベースになります(1カラム)。

/* for Tablet */
@media only screen and (min-width: 768px) {
}

2カラムへ変化。

5.WordPress アップロード画像の処理

レスポンシブデザインにするため、アップロード画像の可変処理を追記します。
(記事本文内の画像がはみ出ないようにね!)

>CSS

img.size-full,
img.size-large,
img.size-medium,
.attachment img {
    max-width: 100%; /* When images are too wide for containing element, force them to fit. */
    height: auto; /* Override height to match resized width for correct aspect ratio. */
}

その他、もろもろ調整はしておりますが、とりあえず主要なとこだけ。
メジャーブレ960pxは、まぁ置いときましょう・・・。

レスポンシブデザイン自体、実際どうかなと想うところもありますが、まぁブログだし。

Yahoo!JAPANがEコマース革命!初期・月額費用・売上ロイヤリティ無料化

shopping-yahoo

さて、昨日発表されましたYahoo!JAPANのEコマース革命ですが、素直に驚きました。
Yahoo!だからなせる技なのか、ECに関わっているものとしては、検討せざるを得ないでしょうね。

初期費用から、月額費用、さらに・・売上ロイヤリティまでも無料!って、
盛り上げっているとは決して言えないようなYahoo!ショッピングでしたが、
これで、出店者も増えるは確実でしょうね。
個人も出店可能になるとの事で、活性化されECが盛り上がるのは嬉しい事です。

簡単に、Yahoo!ショッピングの変更点として、

・出店料としての初期費用(2,1000円)、月額費用(25,000円)と売り上げからのロイヤリティ1.7~6.0%が無料!!
・Yahoo!ショッピングからの外部リンクが可能に!(他モールでは考えられないですね。)
・個人出店は本人確認・プレミアム会員完了していれば誰でも店舗を持てる

などなど、Yahoo!ショッピング以外にもYahoo!オークションも無料がたくさんとなっています。

まぁ、リスク(コスト)が低くなったんですもん、こりゃ出店確実になるでしょう。
さてさて、大手Rモールからのコンバートも作業視野に入れなくては・・・。

もちっと詳しくはコチラでも紹介しています。
Yahoo! JAPANがEC革命!出店料等を無料化!Yahoo!ショッピングはロイヤリティすら無料!

クロス・マーケティングセミナーへ参加してきました

本日、営業より話しいただいた、クロス・マーケティングのセミナーへ参加してきました。

現在の市場の動向から、ネット経済の原理、
テレビ、新聞、雑誌、インターネットなど、多様な媒体(メディア)を複合的に利用することで、各メディアの特性を生かしながら、相乗効果の創出を狙うクロス・マーケティング手法を実例を基にしながら、わかりやすく説明いただき、
オンライン(ネット)→ オフライン(リアル)/オフライン(リアル)→ オンライン(ネット)のOtoO(O2O)の戦略や実践事項など
イチ担当としても非常に参考となるお話でした。
当然、これまでの経歴・またEC担当としても共感するところ、改めて考えるべきところ、やることやらないとな・・・と反省すべきところ多々あり、
あっという間の2時間で終えたのは有意義です。

大企業では出来ない、中小企業の利点を活かして頑張ろうっと。
まずは、土台づくりから^^;

そのおかげで、楽天優勝セールの受注処理、たまってしまいましたが・・・w

seminar

複数のWebサービスを組み合わせて簡単に連携させることができる「IFTTT」

ifttt

If This Then That(これをやったらあれをやる)というその名の通り、
きっかけとなる操作を実行すると、登録しておいたWebサービスを実行してくれるという便利なサービスです。
例えばブログに記事を公開したらfacebookに記事を投稿する。
IFTTTがiOSとも連携しているので、iphoneのカメラロールに写真が追加されたら、
dropboxに保存するなどといった連携も、IFTTTを使えば簡単に自分のレシピを作成する事ができます。

この手の移植アプリの中でも豊富なチャンネルの中から選択し、
Facebook、Evernote、Weather、DropboxなどのWebサービス同士で連携することができます。

IFTTT

アメブロからの~データ移行

これまで、母豆がアメブロで気ままに書いておりました
ブログのデータを当サイトにインポートしてみました。

さすがアメブロというべきか否か
インポートは簡単、でもエクスポートはめんどいよ!という何ともいやらしい仕様で
他ブログサービスを利用し迂回しての取り込みではありましたが、
無事にデータのインポートは完了。
質はどうあれ2008年より溜まってたコンテンツ(思い出)な訳で、
まだまだ、ちょいとイジる必要ありありですが…。
とりあえず自前の場所へ移した次第ですw

シンプルなオンラインエディタがいい感じ

オンラインエディタscratchpad.ioが「超」シンプルかつ軽快なエディタとして良い感じ。
いろいろと含む場合はjsfiddle使いますが、フロントエンド・エンジニア畑の私は、
ちょぺっとコーディングしたい、それ共有したい・・・って時にはサクッとしてて有効かも。
なによりUIが好き(笑)

Scratchpadの使い方:

  1. HTML & CSS —レンダリングしながらカキカキ
  2. Press ⌘ + i でフルスクリーン切り替え
  3. URLコピってシェア(リアルタイムでアップデート♪)

http://scratchpad.io/VEqdd713Gz