jdash 2000 site

DTP・Web制作・CSS・マーケティング・スマートフォン・印刷などの色んなものに四苦八苦しながら次なる営業展開を考える営業部所属の人のブログ



レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap(Twitter Bootstrap)です。

このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。



さて、その強力なBootstrapで今回はTipsを紹介。

Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。

それでは実例を見ながら説明しましょう。


●実例「スマートフォン表示の時だけ改行する/○○を表示する」

実例で使うサイトは「グラシン工房」のページ。

スクリーンショットはPCのウェブブラウザーで見た時のものです。トップページの右側にあるサイトの説明文で「スマートフォン表示の時だけ改行する/○○を表示する」という技を使っています。

20141015-BootStrap-Tips-01

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


この部分は以下の様な文章が入っていて、実はそのままの状態でスマートフォンで表示すると、文字数の関係で変な所で折り返されたりしてしまいます。

2行目の「グラシンペーパーにパターン柄やイラストをプリントした」などはかなり長いですよね。

20141015-BootStrap-Tips-02

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


ひとつのHTMLでPCもスマートフォンもお手軽にキレイに表示したいので、スマートフォンで表示した時だけ改行を多く増やしたいわけです。

実際のサイトをスマートフォンで見た時には以下の様に表示されており、PCのウェブブラウザーで見た時よりも改行が多く入っています。(縦に長いという指摘は今回はご勘弁下さい)

20141015-BootStrap-Tips-03

20141015-BootStrap-Tips-04

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


それでは、ソースを見てみましょう。

記事の続きを読む




というわけで、はてなブログは使っていなくてはてなダイアリーしか開設していない私ですが、はてなのブログカードって「お、これいいな〜」と思っていたのですよ。


はてなのブログカードとは、以下の画像で見える、記事のタイトルと概要とスクリーンショット(またはイメージ)がコンパクトにまとめて紹介できるものです。

20141009-はてなブログカードを他のブログサービスで使う-01

画像出典:はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます【追記あり】(はてなブログ開発ブログ)


ただ、開発日記を見てみると、この機能を他のブログサービス、例えばライブドアブログやMovable Typeなどで使おうとするとちょっと敷居が高いように思えました。なんですか、oEmbedって…。(詳しくは→はてなブログoEmbed APIを公開しました。ブログカードの情報をAPIで取得できます(開発者向け)(はてなブログ開発ブログ))


●ブログカードは他のサービスでは手軽に使えないと思ったら

他のブログサービスでは手軽に使えないのか…残念!と思っていたら、こんなブログ記事が!

このページを読むと、iframeのsrcに「http://hatenablog.com/embed?url=《表示したいアドレス》」と書けばOKとのことだそうです。動作原理は簡単でしたね。


記事の続きを読む



もう半年も前の話で恐縮なのですが、これは良いなと思ったものを紹介し忘れていたので紹介。

商品をネットで買って、そのショップから来るメールってのは大抵は売り込みのメールだったりして、あんまり読みませんよね?

でも、ショップから来るメールでこんなメールなら嬉しいかも。それがこちら。

カメラのキタムラのネットショップでデジタルカメラを購入して11ヵ月が経った時に届いたメールです。

▲▲▲▲▲▲▲▲▲▲▲様

--------------------------------------------------------------------------
本メールは、当店にて商品をご購入後1年を迎えるお客様にお送りしております
保証書のない商品をお買上げのお客様にもお送りしておりますのでご了承下さいませ
--------------------------------------------------------------------------
□対象の注文
注文日:2013年03月06日
ご購入商品:
キヤノン PowerShot S110 ブラック
--------------------------------------------------------------------------

キタムラネットショップです。
昨年は、当店をご利用いただき誠にありがとうございます。

ご購入からまもなく1年となりますが、商品の調子はいかがでしょうか?
メーカー保証が終了する前に、商品のご確認をお勧めいたします。


□メーカー保証書の有効期限をご確認ください
 保証期間を過ぎますと、自然故障の修理代金もお客様のご負担となります。


■故障時の修理に関しまして
(1)カメラ、レンズの場合
最寄りのカメラのキタムラ店頭、またはオンライン修理をご利用ください。

(2)大型家財、家電の場合
メーカーサポート窓口、または最寄りの家電量販店をご利用下さい。

メーカー保証期間中の「自然故障」に関しましては、お近くの取扱店でも「保証」が
受けられます。

▼オンライン修理窓口
http://shop.kitamura.jp/files/syuuri/index.html

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

【ご注意下さい】

メーカー保証修理をご利用の場合は、付属のメーカー保証書が必要です

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
■お問合せの際には「注文番号」をお知らせください
注文番号:▲▲▲▲▲▲▲▲▲▲▲
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
---------------------------------------------------------------------------
キタムラネットショップ http://shop.kitamura.jp/
・電話番号 050-3155-4111(10時〜19時)
《運営会社》 株式会社キタムラ
・住  所 〒761-0102 香川県高松市新田町甲 35−2
・営業時間 月曜日〜土曜日:10:00〜19:00
      日曜日:発送業務のみ ※コールセンター定休日
-------------------------------------------------------------------ktmr


なかなか気が利いていると思いませんか?

記事の続きを読む



Yahoo!の検索結果はGoogleと同じものが出てくるとよく言われていますが、広告周りや検索結果に挟んでくる自社サービスへの誘導などはかなり違います。

今回は、そんなYahoo!独自の検索連動型広告の話


Yahoo!の検索にて「損保ジャパン日本興亜」と検索したら、次のような結果が出てきました。

20141003-Yahoo-損保ジャパン日本興亜の検索-01

画像出典:「損保ジャパン日本興亜」の検索結果(Yahoo!検索)


ばばーんと、「損保ジャパン日本興亜」のバナーが表示されました!

そのサイズは492×277ピクセル!

結構大きなサイズで表示され、通常の検索連動型広告(下地が黄色くなっている部分)よりも上位に表示されています。

記事の続きを読む




DTPer温泉ゆるゆる勉強会ツアー(@新潟)で須藤さんに現物も見せてもらいましたが、こんなものを紹介頂きました。


世の中はiPhone 6 Plusがかなり売れているようで、Appleもついにファブレットへ!みたいな感じですが、私は現在Galaxy Note 3ユーザーです(+iPhone 5s)。(初代Galaxy Noteも使っていました

iPhone 6 PlusやGalaxy Note 3みたいに大きなスマートフォン(ファブレット)は、その大きさ故、片手で持って操作すると、落っことしそうになりますよね。


というわけで、今さらですが、Amazoのレビューやらお値段やらを考慮して購入したのが、BUNKER RING 3です。この手のものは色々あるようですが、買ってすぐに壊れるのもイヤなので。


BUNKER RING 3 (全5色) バンカーリング iPhone/iPad/iPod/Galaxy/Xperia/スマートフォン・タブレットPCを指1本で保持・落下防止・スタンド機能(ブラック)
by カエレバ


それでは、BUNKER RING 3の商品紹介をフォトレビューでどうぞ。

記事の続きを読む




ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索