やはり、webコンテンツに動きがあると、人の目を引きますよね。
今回は、そんなwebコンテンツ上でのcssで動かすアニメーションについて
まとめてみました。
　

　
上記 iframe では見つらいので、こちらからどうぞ
別ページで開きます。アニメーション後、画面下の ENTER を押してください。（ENTER が見えつらくて、すみません）
　

前回、ウインドウに表示する位置をナビメニュー考慮して下げる方法を紹介したが、それでは padding で隠れてた（下に配置された）要素のクリックイベントが効かなくなったので、それを解決した備忘録。

　
A要素に「pointer-events: none;」を設定すればOK。

elementA {
　pointer-events: none;
}

ただし、今度は逆にA要素に包括されている要素のクリックイベントが発生しなくなるので、A要素内でクリックイベントが必要な要素に「pointer-events: auto;」を設定する必要がある。
　

pointer-events

auto：
要素は、 pointer-events プロパティが指定されていないときと同様にふるまいます。
none：
要素がポインターイベントの対象になることはありません。
　

　

投稿ページに iframe で YouTube を埋め込んだときに、全画面表示ができなかったので、それを解決した備忘録。
　
YouTube動画をフルスクリーンにしようとして、フルスクリーンボタンを押すと、下記のように表示されフルスクリーンが表示されない。

　
まず、YouTube の埋め込み動画を全画面表示を許可するためには、埋め込み iframe の属性に「allowfullscreen」属性が必要で、「allowfullscreen」属性がないと全画面表示は許可されないみたい。
　
そこで、コードを改めて見てみると「allowfullscreen」属性がないので、コレが原因かなと。（しかし、YouTubeで埋め込みコードを取得するとき、確か全画面表示を許可したんだけど…と思いつつ）
　
早速、コードを修正して iframe に「allowfullscreen」属性を追加してみる。
、、、が、やはり、全画面表示できない。。。　もう一度、コードを確認してみると、先ほど追加した「allowfullscreen」属性が消えている！
　
そういえば、WordPress の投稿は、登録してある属性しかダメということを思い出し、iframe の「allowfullscreen」属性を許可するように、下記コードを functions.php に記載する。
（投稿ページで iframe を書けるようにしたコード（こちらの投稿記事）に追加した。）

add_filter('content_save_pre','test_save_pre');

function test_save_pre($content){
	global $allowedposttags;

	// iframeとiframeで使える属性を指定する
        $allowedposttags['iframe']=array('class'=>array(),'src'=>array(),
            'width'=>array(),'height'=>array(),'frameborder'=>array(),
            'scrolling'=>array(),'marginheight'=>array(),
            'marginwidth'=>array(),'allowfullscreen' => array());

	return $content;
}

　
確認してみると、無事に全画面表示できるようになった。解決、解決。

画面トップにナビメニューを固定する方法をよくみますね。
ナビメニューを画面トップに固定すると、ページ内リンクなどでページ遷移したとき、リンク先を表示したときナビメニュー部分に隠れてしまいますね。
　

　
これを回避するには、ナビメニューの高さ分、リンク先の表示位置を下げてあげる必要があります。
js でも css でも可能ですが、今回は css での方法をご紹介いたします。
　
説明と言っても、設定はいたって簡単で、
リンクさせる要素に対して、padding-left と margin-left を次のように設定してあげるだけです。
（ここでは、画面トップから下げたい長さ（ナビメニューの高さ）を 120px とします。）

　　elementSelector {
　　　　padding-top:120px;
　　　　margin-top:-120px;
　　}

　
padding で、上部高さ部分をかせいで、margin で実際の高さに戻してあげています。
　
ここで、注意がいるのは、padding-top を指定しているので、背景などが必要な場合は、もう一つ親の wrap を作成して、そこにリンクを貼るなどのひと手間が必要になります。
　
　
※この方法で対応したら、padding-top下の要素のクリックイベントが発生しなくなる不具合で生じたので、その解決法はこちら

難しいことは、さておき、とりあえず自分の使ってるブラウザのバージョン番号を知りたい方は、↓を見てください。

　
アプリやオンライン申請なのでは、ブラウザの最新バージョンを推奨していることが多いですね。通常の設定では、バージョンアップは自動的に行われるようになっていますので、何も操作しなくても最新のバージョンになっていますので、心配はいらないのですが、webアプリやオンライン申請がうまくいかない時などは、一度確認してみるといいと思います。
　
そんな時に役にたつ、バージョンの確認方法と更新方法を紹介いたします。
（弊社製品は、いずれも Chrome を推奨しておりますので、Chrome を中心に紹介させていただいております。）

　
※ AdroidやiPhone、iPadなどでは、OSのバージョンによっては、ブラウザの最新バージョンが適用できないことがあります。
※ 通常の設定では、バージョンアップは自動的に行われるようになっていますので、何も操作しなくても最新のバージョンになっています。管理者などがこの設定を意図的に変更していることも考えられますので、最新バージョンにする前に管理者などに確認することをおすすめします。
　
参考
Chromeのサイト
　

Chrome のバージョンの確認と更新方法

・Chrome 画面は、Chrome のテーマ設定などで紹介している画面とデザインなどが異なる場合があります。。
　

Windows,Mac の場合

・画面は Windows で説明しています。Macでも、同様の手順で確認・更新できます。
　

１、ブラウザの右上の「」を選択

２、「ヘルプ」⇒「Google Chrome について」の順に選択

３、バージョン確認を始めます。

４、バージョン確認が完了します。

・最新バージョンがある場合は、自動的に最新バージョンに更新してくれます。

　

Android の場合

■バージョンの確認方法
・Chrome アプリを起動します。

　
■バージョンアップの方法
・Google Play アプリを起動します。

Edge のバージョンの確認と更新方法

・Edge 画面は、テーマの設定などで紹介している画面とデザインなどが異なる場合があります。
　

Windows,Mac の場合

・Windowsでご利用の場合は、Windowsアップデートは最新にしておいてください。
・画面は Windows で説明しています。Macでも、同様の手順で確認・更新できます。
　

１、ブラウザの右上の「」を選択

２、「ヘルプとフィードバック」⇒「Microsoft Edge について」の順に選択

３、バージョン確認を始めます。

４、バージョン確認が完了します。

・最新バージョンがある場合は、自動的に最新バージョンに更新してくれます。

　
　

Sfari のバージョンの確認と更新方法

・Sfari 画面は、テーマの設定などで紹介している画面とデザインなどが異なる場合があります。
・Windows,Android の Safari は、サポートを終了しています。Windows,Android をご使用の方は、Chrome をご利用ください。
　

Mac の場合

■バージョンアップの方法
・MacOSを最新にバージョンアップすることにより、Safari も最新にバージョンアップされます。

Outlookでのメールの送りかたを説明します。

Outlook でのメールの送りかた

１、次の動画のとおり、メール作成画面を表示します。

・メール作成画面が表示されます。
　

２、次の動画のとおり、メールを作成し送信します。

ファイルを添付する

・メール作成画面で「ファイルの添付」を選択します。


・最近使用したファイルの一覧が表示されます。添付ファイルを選択します。
・最近使用したファイルに該当ファイルがない場合は、「この PC を参照」を選択してファイルを選択します。
　

添付ファイルを削除する

・添付ファイルの横の「∨」⇒「添付ファイルを削除」を選択します。

・または、添付ファイルを選択して「Delete」キーを押します。

　

ソフトが会社のPCにインストールしてあって、自宅からそのソフトを使用したいときなど、自分のパソコンから会社のパソコンにアクセスして、会社のパソコンを遠隔操作（リモート）することでそのソフトを使用することができます。
　
今回は、Google の Chromeリモートデスクトップを利用して、遠隔操作（リモート）する方法を紹介します。ChromeリモートデスクトップはGoogleアカウント（無料）さえあれば、誰でも無料で使えます。また、ブラウザChromeさえあれば、WindowsでもMacでもOSを選ばないので、とてもおすすめです。

注意
外部から遠隔操作（リモート）するようになることで情報漏洩などのリスクもあがります。システム管理者などに確認をとって許可を得てから利用するようにしましょう。また、使い終わったらツールの削除も忘れずに行うことをおすすめします。
　

準備するもの

会社のパソコンと自宅のパソコンとの遠隔操作という例で、。操作される側の会社のパソコンを「ホストPC」と呼び、操作する側の自宅のパソコンを「クライアントPC」と呼んで説明していきます。
　
・会社のパソコン（ホストPC）
・自宅のパソコン（クライアントPC）
・会社のパソコンと自宅のパソコンの両方に「Chrome」のインストール
・Googleアカウント（会社のパソコン（ホストPC）と自宅のパソコン（クライアントPC）の両方で、同じGoogleアカウントでログインします。）
　

操作される側の会社のパソコン（ホストPC）

１、chromeを起動する

・アドレスバーに「remotedesktop.google.com/access」を入力して、Enterキーを押す。

　

Googleアカウントにログインしていない場合

・Googleへのログイン画面が表示されますので、既存のGoogleアカウントでログインしてください。
　

２、下記の画面が表示されます。

Chrome Remote Desktop を使用した（ダウンロード済）ことがある場合

・「オンにする」を押します。
　

Chrome Remote Desktop を使用したことがない場合

・「」を押して Chrome Remote Desktop をダウンロードします。

・「Chromeに追加」を押すと、ダウンロードします。
・「「Chrome Remote Desktop」を追加しますか？」と表示されたら、「拡張機能を追加」を押してください。
　

３、パソコンの名前を入力して「次へ」を押します。

・自宅のパソコン（クライアントPC）から呼び出すときのパソコンの名前になります。任意の名前を入力できます。

　

４、任意のPIN番号を入力して「起動」を押します。

・PIN番号とは、他のパソコンからアクセスするときの暗証番号のようなものです。６桁以上の数字を入力してください。
・他のPCからアクセスするときに必要になります。忘れないようにしておきます。

・アプリがアクセスすることを許可するかどうかの表示があれば、「OK」または「許可する」を押してください。
　

５、下記画面が表示され、リモートの準備ができました。

・リモート（接続）での作業が終了するまで、このままにしておきます。

　

操作する側の自宅のパソコン（クライアントPC）

１、chromeを起動する

・アドレスバーに「remotedesktop.google.com/access」を入力して、Enterキーを押す。
・Googleには、会社のパソコン（ホストPC）と同じGoogleアカウントでログインしておいてください。
・左上のアイコンを押して、ログインしているGoogleアカウントを確認できます。「＋追加」を押すと新しくGoogleアカウントにログインできます。

　

２、下記画面が表示されますので、会社のパソコン（ホストPC）を選択します。

・前述の操作で、会社のパソコン（ホストPC）に付けた名前が表示されています。

　

３、PIN入力画面が表示されますので、前述の操作で決めたPIN番号を入力して「」を押します。

４、ブラウザ上に会社のパソコン（ホストPC）が表示されます。

・このブラウザ上の画像を操作して、会社のパソコン（ホストPC）を操作することができます。

　

Google検索結果に表示させたくないコンテンツの対処法を紹介します。

　

<a>タグのリンク先を表示させない

・<a>タグのリンクをGoogle結果に表示させたくない場合（メニューなどのリンク先を表示させたくない場合）は、 <a>タグ内に rel=”nofollow” を追加します。

　　<a href=”URL” rel=”nofollow”>テキスト</a>

・そのコンテンツの<a>タグのリンクをGoogle結果に表示させたくない場合は、次の <meta> を記載すればOKです。

　　<meta name=”robots” content=”nofollow”>

コンテンツ自体を表示させない

・コンテンツ自体をGoogle結果に表示させたくない場合は、次の <meta> を記載すればOKです。

　　<meta name=”robots” content=”noindex”>

サイトで、色々と人のコードを見ていたら勉強になるなぁ～。

　
そんな中、ある記述に「何だこれは？」というのがありました。
それは「！」（ビックリマーク）２つ並んで使われているものでした。

　　const isIEieVersion = !!ieVersion

　
興味津々で、調べてみました。
　
「!」は通常よく使いますが、否定の論理演算子です。

　　var boo = true
　　console.log !boo

とすれば、コンソールには false が表示されます。
　
では、「！！」は、否定の否定になります。すなわち二重否定の論理演算子なのです。

　　var boo = true
　　console.log !!boo

とすれば、コンソールには true が表示されます。
　
それなら、最初から「！！」なんて書かなきゃいいと思ったのですが、
値が undefined（未定義）のものを、falseに変換するために使用するようです。
（実際、ほとんどのブラウザはundefined（未定義）を false として扱ってくれるみたいですが）
否定演算子を使うと true か false のどちらかで値が返ってくるので、それを更に否定演算子にかけると true か false で返してくるということです。
　
if文などでは、true か false でないと判定できないため、「！！」を使って二重否定で変換する必要があるみたいですね。

zoomに会議に参加するときに、zoomの画面上に表示される名前を自分だと分かるように設定（変更）しておきましょう。
何も設定（変更）してないと、PC名やiphone等と表示されてしまう場合があります。
ホストや参加者に、自分をはっきりと分かってもらうのはもちろんのこと、ホストから色々なアクションをするのに名前で判断することが多いので。


　

プロフィールから、名前を設定（変更）する方法

・スマホ・タブレットの場合は、ミーティングに参加するときに名前を設定できます。→こちら
　

PCの場合

１、Zoomアプリから、ブラウザのプロフィール設定画面を表示させる

・操作を方法についてはこちら

　

２、一番左のメニューの「プロフィール」をクリックする

３、名前の横の「編集」をクリックする

４、表示名を変更して、「変更を保存」をクリックする

・Zoomに表示される名前が変更されます。
・Zoomに表示される文字数は、７文字程度なので、あまり長い名前を付けても表示されませんので、適当な長さにするのが良いです。
　

windows10でのショートカットアイコンのつくり方を紹介します。

　

ショートカットアイコンのつくり方

１、ショートカットアイコンをつくりたいアイコンの上に、マウスを持っていき右クリック

２、「ショートカットの作成」をクリック

３、同一フォルダ内にショートカットアイコンができます。

・デスクトップで作成した場合は、ショートカットアイコンはデスクトップにできます。

・作成したショートカットアイコンは自由に移動できます。また、コピーして使うこともできます。

　

Tips

リンク元のファイルを探す

・ショートカットアイコンで右クリック→「プロパティ」をクリック
・プロパティ画面が表示されます。


・「リンク先」にリンク元のファイルが表示されています。
・「ファイルの場所を開く」をクリックすると、リンク元のファイルが表示されます。

Windows10で画面キャプチャを撮る方法について紹介しましたが、ショートカットを利用して、お手軽に画面キャプチャを撮る方法を紹介します。

　

ショートカットで画面キャプチャを撮る

１、キャプチャしたい画面を表示させます。

２、キーボードの「」+「Shift」+「s」キーを同時に押す

３、画面上部にキャプチャツールが表示されます。

・そのまま、キャプチャしたい範囲をマウスでドラッグしてください。（キャプチャ範囲が、明るく表示されます）


　
・をクリックすると、四角形に切り取った範囲をキャプチャできます。
      クリックした後に、キャプチャする範囲をマウスでドラッグします。
　
・画面右上のをクリックすると、自由に切り抜いた形に画面をキャプチャできます。
      クリックした後に、キャプチャする範囲をマウスでドラッグします。
　
・画面右上のをクリックすると、複数のウインドウを開いているとき、選択したウインドウキャプチャできます。
      クリックした後に、キャプチャするウインドウをクリックします。
　
・画面右上のをクリックすると、全画面をキャプチャできます。
　

４、キャプチャ範囲を指定すると、画面がキャプチャされます。

・キャプチャした画像は、クリップボードにコピーされます。メール作成画面などで、ペースト(「Ctrl」+「v」）して使うことができます。ファイルに保存する場合は、手順５に進みます。
・画面右下にお知らせウインドウが表示されます。

　

５、お知らせウインドウの「切り取り領域がクリップボードに保存されました」をクリックすると、切り取り＆スケッチ画面が表示されます。

　
・画面右上のをクリックすると、キャプチャ画像をファイルに保存することができます。
・画面右上のをクリックすると、キャプチャ画像をクリップボードにコピーすることができます。メール作成画面等にコピペすることができます。