近くの図書館を登録するとAmazonのページで 本が図書館に置いてあるかや貸出状態などが分かります。 本を買う前に図書館で借りることができないかどうか、一目で分かり、 貸し出されていても「予約する」をクリックすると図書館のホームページに移動します。 毎回、図書館のホームページを検索する必要もなくなり、とても便利です。

デジタルマーケティングで広告をおこなう際、ターゲット選定が大切になります。 広告にはリスティング広告のようなキーワードで決めるものや、リマーケティング広告のような過去の来訪者に広告を配信する方法もありますが、ユーザの属性などを元にしたターゲティング手法が重要になってきています。 例えば、「自社のサービスは30歳前後が多いからウェブサイトアクセスはその前後が多い」と考えても実際に来ている層は異なることはよくあります。 狙いたいターゲットと実際来ている層の「ギャップ」や、競合サイトの訪問者層を知ることはコンテンツ戦略や広告戦略を考える上で参考になります。 そこで実際に来ている層を知る方法と活用法をご紹介します。 １．Googleアナリティクス　※設定忘れに注意 「とりあえずGoogleアナリティクスを設定している」という企業は意外に多いです。 そしてそういう使い方は非常にもったいない。 最初の

CSSはWebページを表示する際に、「どの要素をどこに配置するのか」を決めるものですが、Webの発展とともにCSSもさまざまな設定が追加されており、「CSSで何ができるのか」という段階でつまずいてしまうことも少なくありません。そんなCSSの項目を視覚化し、一目でどんな効果がでるのかを確かめられるようにまとめたページが「CSS Reference」です。 CSS Reference - A free visual guide to CSS https://cssreference.io/ サイトにアクセスし、下にスクロールすると…… CSSの項目を分野ごとにまとめた「Collections」と、その下に全ての項目を検索できる検索ボックスが出てきます。例えば「margin」と検索し、出てきた「margin」の項目をクリックしてみます。 左側に分野名と検索ボックス、右側にmarginの説明という

日本語のフリーフォントを好きな言葉・文章で試せるサイト

ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な

img2cssは任意の画像をアップロードするだけでCSSに変換するツールです。アップロードされた画像をパースして色や形状をCSSのみで実装、コードを提出してくれます。用途は正直な所、思い浮かびませんが、技術としては凄いなぁと。ソースコードはGithubにて公開されていますが、ライセンスの表記は今のところ見当たりませんので気になる方は開発者さんにお問い合わせ下さい。 img2css

会社やお店のウェブサイトなら、必ずと言って良いほどGoogleマップで位置が表示されています。もしそれがスマホで表示できるなら、さらにルート案内するリンクをつけて、会社やお店までの経路や到着時間をスマホに表示させるようにして、もう一工夫してみましょう。 ルート案内の概要 ルート案内のリンクをクリックすると、設定した目的地までの経路をGoogleマップに表示する仕組みです。PCでクリックするとGoogleマップでルートを表示します。AndroidやiPhoneなどでタップすると、Googleマップアプリへ誘導されますので、アプリのルート案内が使えます。 ルートの設定は「現在地から目的地」だでけはなく、「任意の出発地から目的地」の設定も可能です。また出発地や目的地は、名前・住所・座標(緯度,経度)で設定することができます。 到着時間が、現在の交通状況が加味されて計算されるので、なかなか便利だと

Gmailにちょっとした設定をすると、Gmailでありながら、ISPや企業など「～@gmail.com」以外のメールアドレスを差出人としたメールを送信できるようになる。その具体的な方法は？ 連載目次 前回は、Gmailで受信メールを集約・一元管理するために、ISPや企業などのメールアドレスに届くメールをGmailのメールボックスに転送する方法を説明した。これで複数のメーラーやWebメールを巡回することなく、Gmailだけで各メールアドレス宛てに届くメールを閲覧できるようになった。 しかし、このままではメールを送信する際には、やはり各メールアドレスにひも付いているメーラーやWebメールを利用する必要がある。例えば、「～@gmail.com」以外のメールアドレス宛て（仮に「～@example.jp」とする）に届いたメールに対して、Gmailから返信しようとすると、差出人（From:フィールド）

はい、これをどうぞ。 ブログのアイキャッチ画像やホームページのバナー画像を作るぐらいなら、これでじゅうぶん。 canvaというサービスです。ブラウザから無料で使えて、操作も簡単。デザインを良くするフリー素材も付いてきます。 無料でcanvaを使ってみる 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2012 ちなみに本記事の画像もすべてCanvaを使って作成しました （gifアニメ以外） 作り方はこんな感じ。canvaを使えばこうもスピーディーに素敵な画像を作成できます。 だれでも、すぐにマスターできそうなくらい操作は簡単なのですが、親切にもチュートリアルを用意してくれて

import.ioとは import.ioは、データ化したいページのURLを入力するだけで、自動でデータ箇所を判断して情報を集めてくれるスクレイピングサービスです。 無料で利用することができ、セットアップも、データ収集用のトレーニングなども必要ありません。 URLを入力して、ボタンを押すだけという簡単さから、誰にでも利用できるデータ収集ツールだと思います。 以下では、その簡単な使い方や、利用例などを紹介したいと思います。 定期的なサイトへのスクレイピングは相手サイトの負荷になるので、一日に何度も何度も同一サイトに使用するのはやめましょう。加えて、取得したデータを、そのまま何かに利用すると著作権違反になる恐れもあります。 基本的な使い方 import.ioの最大の特徴は、使い方の簡単さです。 以下では、その使い方の例として、IKEAのソファー検索結果ページのデータを取得してみたいと思います。

で、図説ドローツールとしては、CacooやGliffyを紹介しました。 けれども、「draw.io」というのを使ってみたら、完全に無料で利用できるうえに、日本語にも対応、さらには機能も豊富という何拍子も揃った素晴らしいドローツールだったので紹介です。 photo by David Goehring draw.ioとは draw.ioは、WEB上で無料で使えるフローチャート作成ツールです。 インストールなどは必要なく、ブラウザからログインも不要で手軽に利用することができます。 通常、こういったドローツールは、「作業シート何枚まで無料であとは有料」などというサービスも多いのですが、draw.ioは完全無料で利用することができます。 やれることが豊富 このツールを利用するだけで、以下のような図を手軽に作成することができます。 チャートなんかも。 こんな回路図なんかも。 もちろんこんなフローも。

みなさん、こんにちは。 ラボの阪本です。 どうやら、2015年6月23日より、従来利用していたfacebook埋め込みが利用出来なくなる模様です。 確かに、facebookの管理画面を見ると埋め込みに関する注意書きがあり、詳細を確認すると、 かなり思い切った仕様変更を行う模様で、企業サイトなどでfacebookを活用している場合、対応せざるを得ない状況でした。 状況をまとめてみましたので、参考にしてみてください。

作成日 2015年1月22日（木曜）10:38 | 最終更新日 2015年1月22日（木曜）17:24 | 作者: 森　純一 | 参照数: 317 バスロックの各クライアントでの地図表示には、OpenStreetMap を使っています。今まではAndroid の専用クライアントでの表示でしたが、ブラウザでも見れるようにしたいと考えています。 そこで、OpenStreetMap をブラウザで表示する方法を試してみました。具体的には、OpenLayers というライブラリを使って表示することになります。ここでは、OpenLayers を使ったOpenStreetMapの表示方法をまとめておきます。 OpenStreetMap について 実際の表示方法の前に、OpenStreetMap についてちょっとまとめておきます。OpenStreetMap というのは、 OpenStreetMap(OSM

2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen

先日、Nibbler（ニブラー）という、SEOとWEBマーケティング分析サービスを見つけました。 これを使ってみたら、無料ながら、かなり詳細にサイト分析（改善点の可視化）が行える素晴らしいツールだったので紹介です。 Nibblerとは Nibbler – Test any website Nibblerとは、フリーのウェブサイトテストツールです。 アドレスを入力するだけで、アクセシビリティ、SEO、ソーシャルメディアテクノロジーなどの観点から、ウェブサイトをクロールして、レポートを出してくれます。 加えて、適切な改善提案を示してくれるので、提案に従ってサイトを修正すれば、かなり良いサイトに仕上がるのではないかと思います。 Nibblerを英和辞典で調べてみると、「少しずつかじる（小動物）」、「打抜き切断工具」などという意味があります。サイトを細かく分析するツールという意味もあるのだと思いま

仕事でInstagram APIを使うことになったので、勉強がてら以前から作ってみたかった「おうちごはんカレンダー」を作ってみました。 １年以上も前の記事です。情報が古くなっている可能性があります。 できたもの ・我が家のおうちごはん（JavaScript版） ・我が家のおうちごはん（PHP版） ・みんなのおうちごはん APIの仕様変更に伴い、上記サイトは削除しております。ご了承ください。 我が家のおうちごはん ２つは、どちらも私が@mei331のアカウントで投稿している写真の中から#おうちごはんタグのついたものだけを抽出してカレンダー状に表示しているものです。 みんなのおうちごはん はInstagramの写真すべてから、#おうちごはんタグのついたものだけを抽出し、並べています。 Instagram APIについて Instagram APIを使う場合、Instagram Develope

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

Windowsのイルカ並に消されてしまう不憫な子…（？） 脳内イメージはこんな感じです。 日本公式キャラクター「わぷー」 冗談はさて置き本題に入ります。 目次 オリジナルのCSSを追加 オリジナルのウィジェットを追加 「概要」にカスタム投稿を追加 「アクティビティ」にカスタム投稿を追加 ウィジェットの削除 ウィジェットのカラム数を変更 フッターのテキストを変更 オリジナルのCSSを追加 カスタマイズする上で重要ですよね。 ダッシュボードに限らず管理画面のカスタマイズで、最初の内は悩んだらとりあえずCSSで対応！という感じでいける部分もあると思います。 以下の例では記事中で紹介しているものを入れてます。多い場合は外部ファイルにまとめてしまっても良いですね。 function custom_dashboard_styles() { ?> <style> #dashboard-widgets-w