[動画][健康] 電磁波・5G・ブルーライトから体をまもる

[css] pointer-events:none; でリンクを非リンクに変える

[css] pointer-events:none; でリンクを非リンクに変える | 鹿児島のホームページ制作 株式会社 カナメン
2014.2.22
author : canamen, Inc.
「pointer-events:none;」はレスポンシブで重宝する可能性が高いです。
「pointer-events:none;」をレスポンシブで使用する方法や考え方はこちらから。合わせてご確認ください！
pointer_events_index
メニューリストを作成して、現在閲覧中のページのaタグをspanタグに変えリンク無効にするか、
aタグのままで表示してしまうか、悩みますよね。
「pointer-events:none;」を指定することで、タグのリンクを無効にしてる。
「pointer-events」の導入方法とメリット・デメリット
リンクを非表示にしたい項目の親要素にidを付けcssで装飾を変更する
メリット
    ・各ページのcssをbodyタグで制御できる。
デメリット
    ・cssのコードが増えてしまうので、読み込みに時間がかかる可能性がある。
各ページ毎に読み込むcssを分け装飾を変更する
メリット
    ・各ページの読み込み時間の短縮が可能。
デメリット
    ・cssを作成していくと共有と各ページで重複するソースが増えてしまう。
    ・作成に時間がかかります。
ポイント
時間があったり、綺麗なソースにしたい場合のみcssを分けた方がいいと思います。
それ以外は親要素にidを付けて使用しましょう。
ページ数が膨大になる場合、ページロード時間を短くする為に共通のcssと各ページ毎のcssの2種類をlinkさせるサイトが多いです。
「pointer-events」ソースコード例
//html
//css
#list a.about
{
pointer-events:none;/*リンクを非リンクに変える*/
cursor:default;/*マウスカーソルを矢印のまま変えない*/
text-decoration:none;/*下線を消す*/
color:#000000;/*非リンクの文字色と同じにする*/
}
補足
非リンクになっても、他のリンクと装飾は変わらないので、装飾を変えて一目で非リンクだと分かるようにした方がいいでしょう。
対応ブラウザが少ないので、過信は禁物です。

株式会社 カナメン
https://canamen.co.jp/css/css-pointer-eventsnone/

Google feed API

ブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能
2/3/2012
こんにちは。WEBコンテンツ･プランナーの中島です。
今回、自分の備忘録としてのメモも含め、サイト制作に便利な機能を紹介していくシリーズ展開していきたいと思います。
今回は、ブログ等を展開している人が、自分のホームページにブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能についてご案内します。
RSSのURLを入れこむだけでJavaScriptを書きでしてくれる便利な機能のモノもいろいろありますが、
カスタマイズできない物が多く見られます、と言うか、全てがパッケージ化されているものなので自由なデザインにすることが出来ません。
（誰でも簡単に使用できるようにしているため仕方のないことだと思います）
かなり高機能なものがありますが、
デザイン的な部分に目をつぶらなければならない場合が多いです。
せっかくデザインを自分自身で制作しているならデザイン的に自由に使えるRSSフィードを導入したいって思いますよね。
ただし、自由にデザインを設定できるとなると、やはりHTML,CSSを組める知識は必要になります。
WeeblyやJimdoなどの簡単サイト作成CMSサイトでもカスタムHTMLの記述ボックスを組み込めるサイトならもちろん、
自分でコーディングしているオリジナルのサイトでも使用可能な方法を紹介したいと思います。
【Google feed APIという便利な機能を利用します】
google feed apiのjavascriptを使って、ブログの更新情報を表示させたい画像サイズでサムネイル画像を表示させて、
タイトルと本文がリスト表示される。
さらに、外部へのリンクの場合、新規ウィンドウでリンク先を表示させたい、
そして、「続きを読む…」とかの誘導リンクも付ける。
こんな贅沢な設定を自分で、コーディングでやってしまおうという内容で進行していきます。

Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post













google.load("feeds", "1");
function initialize() {
  var feedurl = "http://creps-inc.weebly.com/2/feed"; //rssフィードのurlを指定。wordpressの場合はurl/feed/で取得できる。
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(8); //フィードの表示数を入れる
  feed.load(dispfeed);
  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += "

";

      for (var i = 0; i < result.feed.entries.length; i++) { //ループ処理
        var entry = result.feed.entries[i];
        var eimg = ""; //画像取得（初期値設定）
        var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG))/); //該当する拡張子のデータを画像として取得している
        if(imgCheck){
                 eimg += ''; //eimgにはimgタグを挿入するように設定、大きさは100ピクセル
      }
        htmlstr += '

'

        var strdate = createDateString(entry.publishedDate);
        htmlstr +=  '

' + eimg + '

';
        htmlstr +=  '

' + entry.title + '' + '' + entry.contentSnippet.substr(0,140) + '' + strdate + '

';
        htmlstr += "
"      }
      htmlstr += "
";       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  }
}
function createDateString(publishedDate){
  var pdate = new Date(publishedDate);
  var pday = pdate.getDate();
  var pmonth = pdate.getMonth() + 1;
  var pyear = pdate.getFullYear();
  var phour = pdate.getHours();
  var pminute = pdate.getMinutes();
  var psecond = pdate.getSeconds();
  var strdate = pyear + "/" + pmonth + "/" + pday ;
  return strdate;
}
google.setOnLoadCallback(initialize);

Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post

Font Awesome

Font Awesome
The iconic font and CSS toolkit
  Download
Version 4.7.0   ·    GitHub Project   ·
Old 3.2.1 Docs   ·   Created by Dave Gandy

Font Awesome
http://fontawesome.io






 One Font, 675 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
 No JavaScript Required
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
 Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.
 Free, as in Speech
Font Awesome is completely free for commercial use. Check out the license.
 CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.
 Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
 Plays Well with Others
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
 Desktop Friendly
To use on the desktop or for a complete set of vectors, check out the cheatsheet.
 Accessibility-minded
Font Awesome loves screen readers and helps make your icons accessible on the web.

Font Awesome
http://fontawesome.io









..........................
.fa-step-backward:before{content:"\f048"}
.fa-fast-backward:before{content:"\f049"}
.fa-backward:before{content:"\f04a"}
.fa-play:before{content:"\f04b"}
.fa-pause:before{content:"\f04c"}
.fa-stop:before{content:"\f04d"}
.fa-forward:before{content:"\f04e"}
.fa-fast-forward:before{content:"\f050"}
.fa-step-forward:before{content:"\f051"}
.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-plus-circle:before{content:"\f055"}
.fa-minus-circle:before{content:"\f056"}
.fa-times-circle:before{content:"\f057"}
..............................

fgdf pc

jQueryカレンダー

2015.02.23
超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker
あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？
希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、
入力しやすいよう改善しましょう！
フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。
ではどうすれば日付入力が簡単になるのでしょうか？
答えは「カレンダー」を使用して日付入力をしてもらうのです。
普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、
また1クリックするだけで選択出来ます。
今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！

Web Design Fan
http://www.webdesign-fan.com/jquery-ui-datepicker

jQuery
http://jquery.com/

http://jquery.com/download/

そもそも「jQuery ui Datepicker」とは？
jQuery ui Datepickerとは「jQuery UI」の中にある1つの機能です。
「jQuery UI」とは、jQueryをベースに構築されたユーザーインターフェースに関する機能をまとめたライブラリのことで、
その1つ1つの機能は「アクション」「ウィジェット」「エフェクト」などのカテゴリに分類されます。
「jQuery UI」の導入はとても簡単で、ライブラリにリンクするコードを記述するだけです。
導入することでドラッグ&ドロップなど複雑なユーザーインターフェースを簡単に導入することが出来ます。
そして「jQuery ui Datepicker」は「ウィジェット」カテゴリーにあるカレンダー機能のことで、
手間のかかる日付入力を直感的にすることができます。
導入方法
jQuery ui Datepickerはデザイン性と機能性に優れていますが、その導入方法はとても簡単です！以下が導入に関する主なステップです。
jQueryを導入する
jQuery UIを導入する
カレンダーのテーマを決める
実装用コードを記述する

Web Design Fan
http://www.webdesign-fan.com/jquery-ui-datepicker

jQuery
http://jquery.com/




Yahoo! UI
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.

YUI Library
http://yuilibrary.com/

Blogtrottr

Delicious news, fed to your inbox

Blogtrottr delivers updates from all of your favourite news, feeds, and blogs 

directly to your email inbox, giving you the flexibility to stay updated whilst on the go. Yummy!

Blogtrottr

http://blogtrottr.com/

これは便利！　 GmailをGoogleリーダー化する方法(2013年06月30日)

 - 今日のサムシング：バックナンバー

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226

Blogtrottr

http://blogtrottr.com/

Blogtrottr

この方法の前提として、Gmail を利用していることが必要です。

もし、Gmailのアカウントを持っていないという方は、まずは、Gmailのアカウント（アドレス）を取得してくださいね。

Step1：Blogtrottr にGmailのアドレスを登録する

Blogtrottrのトップページに「Getting Started」と書いたところがあります。

ここに、ウェブサイトのURIを入力するところがありますが、そこは空欄にしたまま、e-mail 欄にGmail アドレスを入力し、Realtime を選択して、「Feed Me」と書かれたボタンを押します。

すると、Gmailに「Confirm your Blogtrottr account」というタイトルの英語メールが届きます。

そのメールに記載されているリンクをクリックし、パスワードを入力すれば登録完了です。

Step2:Blogtrottr にログインし、RSSを登録する

登録したGmailのアドレスと、パスワードでログインします。

「OPML import」を選択して、Google リーダーに登録していたRSS情報をアップロードすれば、RSSフィードがメールで届くようになります。

Step3:Gmailでフィルタリングを行う

つぎに、Gmailで、振り分け（フィルタリング）設定を行います。

私の場合、登録しているRSSフィードは、1日に1,000通を超えてしまいます。

これでは、受信箱がRSSフィードだらけになってしまい、メールを見落とすことにもなりかねません。

そこで、フィルタリングという機能を用います。

Gmailの右上にある歯車のようなアイコンをクリックし、「設定」を選択します。

上部に「フィルタ」と表示されているリンクをクリックします。

画面の一番したにある「新しいフィルタを作成 」というリンクをクリックします。

ここで、From欄に、以下のアドレスを入力し、「この検索条件でフィルタを作成 」というリンクをクリックします。

　busybee@blogtrottr.com

そこで、「アクション」が出てくるので、次のように設定します。

　・受信箱をスキップ

　・ラベル「RSS[Blog]」を付ける

　・迷惑メールにしない

最後に「フィルタを作成」ボタンをクリックすればOKです。

これによって、RSS情報が「RSS[Blog]」というタグに集約されるようになります。

あとは、検索の窓で

is:unread label:RSS[Blog] (東京)(ウエディング OR ブライダル)

のように、検索条件を入れてあげれば、欲しい検索語を含むRSSだけが一覧で表示されます。

上記の例を少し解説しておきます。

is:unread　　　　 これは未読のもののみ表示するという意味です

label:RSS[Blog]　 これは、先ほど作成したラベル「RSS[Blog]」のついたものだけを表示するという意味です。

(東京)　　　　　　「東京」という検索用語を含んだもの

(ウエディング OR ブライダル)　　検索用語として、「ウエディング」または、「ブライダル」という言葉を含むもの

これで、「東京」という検索用語を含み、且つ、ウエディング・ブライダルという用語を含んだRSS（未読のみ）を表示させることができます。

検索条件を組み合わせることで、とても便利に使えるため本当に便利です。

この方法を見つけてから、Googleリーダーとほぼ同じ使い方ができるため、助かっています。

情報収集の方法としてオススメです。

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226

ここで、From欄に、以下のアドレスを入力し、「この検索条件でフィルタを作成 」というリンクをクリックします。

　busybee@blogtrottr.com

そこで、「アクション」が出てくるので、次のように設定します。

　・受信箱をスキップ

　・ラベル「RSS[Blog]」を付ける

　・迷惑メールにしない

最後に「フィルタを作成」ボタンをクリックすればOKです。

これによって、RSS情報が「RSS[Blog]」というタグに集約されるようになります。

あとは、検索の窓で

is:unread label:RSS[Blog] (東京)(ウエディング OR ブライダル)

is:unread　　　　 これは未読のもののみ表示するという意味です

label:RSS[Blog]　 これは、先ほど作成したラベル「RSS[Blog]」のついたものだけを表示するという意味です。

これで、「東京」という検索用語を含み、且つ、ウエディング・ブライダルという用語を含んだRSS（未読のみ）

を表示させることができます。

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226

先週、Google Reader のサービス提供停止に伴う代替サービスとして、Feedly と The Old Readerをご紹介しました。

Google リーダーサービス終了まであと1週間

ついに、Xデーがやってきました。

先週お伝えしたばかりで大変気が引けるのですが、「検索」機能にこだわった移行方法として、新しい方法をみつけました。

これが、とっても快適で・・・

私のRSSリーダーの使い方の一つは、特定のキーワードにヒットする新着情報のみをみたいというもの。

＃　 ちょっと特殊な事情になるかもしれませんが・・

例えば、競合他社の情報を常にチェックしたいという場合、

候補となる会社のホームページをいちいちチェックするというのは大変です。

そこで、競合他社のホームページのRSSを登録しておき、更新情報があればチェックをしたい。

ところが、会社のホームページというものは、必ずしもこちらの欲しい情報が必ず配信されるというわけではありません。

本当は自社サイトに、常に最新情報が掲載されていることが、マスコミに取り上げてもらう確率を上げますし、

自社ホームページからの来館や問い合わせの確率を上げるうえで有効なのですが、

自社のホームページの更新をせずに、マスコミへのプレスリリースのみを配信しているなんてこともこの業界では珍しくありません。

＃　これは、実にもったいないのですが、本当に多いんですよ・・・。

そこで、競合他社のサイトだけでなく、プレスリリース配信サイトや、結婚式場検索サイトなどのRSSを登録しておくと

「会社のホームページには載っていないけれども、最新の情報」という情報をピックアップできます。

ところが、プレスリリース配信サイトや、結婚式場検索サイトの場合、

情報が欲しい式場のネタだけが配信されているわけではありません。

いわば、欲しい情報以外の、「ノイズ」となる情報が大量に届くことになります。

ノイズが多いと、本当に欲しい情報を見落としてしまう可能性があり、

多くのサイトを登録して、情報収集の漏れを防ぎたいと思っても、無駄な情報ばかりが増えて、

肝心の情報を見過ごしてしまう・・なんてことになりかねません。

また、大量に届く新着情報を、いちいち目視して確認、要・不要を分けていく作業はとても煩雑ですから、

なんのためにRSSリーダーを使っているのかわからなくなります。

そのため、収集したRSS情報（＝新着情報）の中から、自分が収集したいキーワードのみを含む情報を「検索」によって抽出したいというニーズが生まれるわけです。

Google リーダーは、世界最大の検索エンジンサービス会社のGoogleが提供していたサービスだけあり、

この「検索」機能が秀逸で、ばっちり欲しい情報を瞬時にピックアップしてくれました。

ところが、Googleリーダーの代替サービスとして候補にあがる様々なRSSリーダーサービスは、

この「検索」機能がついていないものが大半で、

私のようなニーズに応えてくれるもので、無料のものはThe Old Reader くらいしか見つけることができませんでした。

2週間ほどThe Old Reader を使ってみたところ、確かに検索機能が提供されているのですが、

検索結果がどうしても納得のいかないものが多数含まれているのです。

検索キーワードに近いものを推測しているのか、検索キーワードそのものが含まれていないのに、

検索結果の中に表示される新着情報が多数まぎれています。

検索によって、ある程度の絞り込みはできますが、それでも、明らかに不要な情報が混じっており、

それを目視で閲覧対象から外していく必要があり、記事を探す上で、とてもムダな作業が発生してしまいます。

そこで、なんとか、Google の検索機能を使うことができないか？と考えて、いろいろネットを探してみると、ありました！！

ぴったりの方法が！！

それは、RSS情報をGmail へ送付させるという方法です。

この方法を実現させるためには、RSSをmailに変換して送付してくれるサービス「Blogtrottr」を用います。

今日のサムシング

http://www.something4.jp/magazine/backno/?p=8226