はてなブックマーク

https 通信下で javascript が動かない！とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか？例えばログインページ、決済ページのみ暗号化を行う https でその他のページは標準の http という場合などです。 その場合 http 通信下では javascript や jquery が動くのに、https 通信下のページでは動かないという事態になります。ヘッダータグ内のスクリプトタグで <script type="text/javascript" src="http://test.jp/example.js"></script> という記述をしている場合、https のページになっても http で javascript が読み込まれる事になります。つまり安全なページから安全ではないものを読み込もうとしているとい

スタイルシート（CSS）はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 では li にスタイルを適用すればクラスや ID を個別に指定しない限り全ての li にスタイルが適用されます。しかし、CSS3 ではクラスや ID を指定せず1番目の li、最後の li、偶数・奇数番目の li、というように細かなスタイルの指定ができるようになりました。 最初、最後、偶数、奇数番目の要素にスタイルを適用する方法というのは基本なのでよく見かけますが、要素の2番目以降とか2番目以外にスタイルを適用する方法に意外に手間取ったのでメモしておきます。 要素の2番目以降にスタイルを適用 上の画像を例に2番目以降の li 要素にスタイルを適用する方法を紹介します。 2

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こんなマークを見たことがありませんか？大抵右上か左上にこの三本線マークがあるのではないかと思います。これはメニューのマークです。このボタンを押す事で画面外の上からか横からメニューが出て来る仕様にしているサイトがほとんどです。このメニューはドロワーメニュー、若しくはハンバーガーメニューと呼ばれています。三本線がハンバーガーみたいだからでしょうね。 その理由はメニューをサイト上に表示してしまうと画面のほとんどを専有してしまいます。元々表示する情報量が少ないスマートフォンですので、メニューは常時表示せずボタンを押す事で表示するようになっています。 この仕様は Google のアプリ

Tumblr へウェブサイトを移転した場合など、多くのリンク切れが発生してしまう場合があります。Tumblr などのウェブサービスではなく通常のウェブサイトであれば htaccess を使ってリダイレクト処理をかけて転送を行いますが、Tumblr では htaccess を使うことができません。さて、どうしたものか。 Tumblr で hataccess の代替手段としていくつかの方法があります。 Tumblrでリダイレクト設定 Tumblr にログインして右上の人型マークをクリックして設定を開きます。 更に右メニューから該当のブログをクリックしてブログの設定画面を開きます。 サイトのテーマ欄からテーマの編集をクリックします。 テーマの編集メニューの一番下の方にページの追加ボタンがあるので、それをクリックします。 テーマ準拠デザインという所をクリックして、ドロップダウンメニューから「リダイ

Adobe 社の Illustrator と言えばチラシやカタログ等のデザイン等にもよく使われ、当然表を作る機会というのも多いです。私も業務上、Illustrator で表を作る機会があったのですが、直線ツールで一本一本線を引いて表を作っていました。これがまためんどくさいのです。 ふと思ったのです。もっと効率よくする方法があるのではないかと。Excel みたいに楽に表を作る事はできないのか？と。 ある！ 知らないって恐ろしい。 Illustrator で表を作る 適当に表の外枠を長方形ツールで作る。 外枠を選択ツールで選ぶ。 【オブジェクト】メニューから、【パス】→【段組設定】を選ぶ。 行や列の段数を指定して表を作ります。（プレビューを押すと表の状態がリアルタイムにわかります。） 間隔は、セル間隔を調整できます。 セルの結合もできる！ Excel のようなセルの結合もできます！感涙！ 結合

Tumblrとはブログ型 SNS で Facebook や Twitter とは違い、見た目はブログそのものです。WordPress のようにテーマにも対応しデザインを自由に作り込めるなどカスタマイズに富むのが特長。更に独自ドメインまで使う事ができます。 Tumblr で独自ドメインが使える事がわかり、この度レンタルサーバーで月額料金を払っていた別サイトを無料の Tumblr へ移転しました。しかし、この独自ドメインの設定方法が非常にわかりにくかったので設定までの奮闘を書き起こしておこうと思います。 Tumblrで独自ドメインを設定 Tumblr 公式サイトにも独自ドメインの設定方法が案内されています。 2つのレベルがある場合(mywebsite.comなど)：ドメインのAレコード（IPアドレス）を66.6.44.4に指定してください。 3つ以上のレベルがある場合(www.mywebsit

2015年6月13日に開催されたブログアクセスアップセミナーに参加してきました。 今までブログは一人で孤独にやってきましたが、ブログを通じて何かイベントに参加する事は初めてでした。きっかけはいつも Twitter で仲良くさせて頂いているあめたまさん（@ametama_l2l）がセミナーの講師を務められると聞いて参加を決めました。あとは、ブログという同じ趣味を持つ人とたくさん出会えたら面白いだろうなと思った為です。 大阪心斎橋まで遠征しました！ 参加者を見てみると老若男女様々でした。男女比は9：1くらいでしたが。ブログを書き始めた初心者から、SEOを生業としているベテランまで様々な人が参加していました。 ご講師の方の紹介 松原潤一さん まずは主催者。ブログマーケティング、ブログ集客を専門にフリーランスとして活動されている松原潤一さん。数々のセミナーを催されているだけにお話も上手で話しやすい

Windows ノートパソコンを使っていた頃は、多少持ち運びにかさばっても便利なので USB マウスをいつも持ち歩いていました。しかし、Chromebook ではマウスを使っていません。何しろ、マウス不要と思えるほどの便利なタッチパッド（トラックパッド）ジェスチャーがあるからです。 ※Chromebook でも USB マウスや Bluetooth マウスを使用することができます。 タッチパッド（トラックパッド）ジェスチャーとは？ タッチパッドとは、ノートパソコンのキーボードの下部に付いてあるマウスの代わりになる部分です。このタッチパネルを使ってクリック、ダブルクリック、スクロールなど様々な動作を実現できるのがタッチパッドジェスチャーです。 タッチパッドジェスチャーの使い方 左クリック Windows での左クリックはタッチパッドをタップです。ようするにスマートフォンと同じです。タッチパッ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋ねるのによく使われます。 しかしこの商品ページの選択肢、デフォルトでは全く目立ってなくてスルーしてしまうのも無理もない状況です（上記画像参照）。選んで欲しいのに選ばずにカートに入れてしまうお客様が多いのです。そこで、この選択肢を目立たせるカスタマイズを紹介します。 楽天の商品ページの選択肢をデザインして目立たせる 上記画像を御覧ください。背景に gif アニメーションを採用しています。これなら目に付くでしょう。 このような事を行う機能は楽天にはありません。その為、CSS で無理くり実装しています。それでは CSS を御覧ください。 select[name="choice"]

今日は楽天ショップの商品ページについてのお話です。 これからAという商品を商品ページに載せるとします。そのAという商品には多数のオプション品があり、合わせてオプション品もたくさん売りたいという場合結構頭を悩ます問題だったりします。その対応策を効果が薄い順に紹介します。 商品説明文にリンクを付ける 最も基本的な策ですね。カート下の商品説明文にテキストでリンクを付けます。 <a href="商品ページのURL">オプション品1</a> ないよりはましですが、地味で目立たないのであまりオプション品の購入動機には繋がりにくいです。 販売説明文にバナーでリンクを貼る 楽天の販売説明文とはカート上の部分です。商品を買おうと思っている人には必ず目に入る場所です。そこにオプション品へのバナー画像リンクがあれば、オプション品も見てくれるかもしれません。 <a href="商品ページのURL"><img sr

カテゴリー Web制作 (123) WordPress (43) ネットショップ (52) ノウハウ (23) Android (101) Androidアプリ (41) スマホゲーム (13) 端末 (28) Chromebook (23) アプリ (6) Windows (50) セキュリティ (15) フリーソフト (11) インターネット (131) Webサイト (23) 素材サイト (12) Webサービス (68) Google Playミュージック (4) ブラウザ (27) 動画 (3) ソフトウェア (78) Illustrator (18) Photoshop (23) Premiere Elements (12) Excel (10) Word (1) その他 (11) モバイル (1) プログラミング (16) FLASH (4) Unity C# (7) おすす