前回、ウインドウに表示する位置をナビメニュー考慮して下げる方法を紹介したが、それでは padding で隠れてた（下に配置された）要素のクリックイベントが効かなくなったので、それを解決した備忘録。
A要素に「pointer-events: none;」を設定すればOK。
elementA {
pointer-events: none;
}
ただし、今度は逆にA要素に包括されている要素のクリックイベントが発生しなくなるので、A要素内でクリックイベントが必要な要素に「pointer-events: auto;」を設定する必要がある。
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 のテーマ設定などで紹介している画面とデザインなどが異なる場合があります。。
・画面は Windows で説明しています。Macでも、同様の手順で確認・更新できます。
」を選択
・最新バージョンがある場合は、自動的に最新バージョンに更新してくれます。
■バージョンの確認方法
・Chrome アプリを起動します。
■バージョンアップの方法
・Google Play アプリを起動します。
・Edge 画面は、テーマの設定などで紹介している画面とデザインなどが異なる場合があります。
・Windowsでご利用の場合は、Windowsアップデートは最新にしておいてください。
・画面は Windows で説明しています。Macでも、同様の手順で確認・更新できます。
」を選択
・最新バージョンがある場合は、自動的に最新バージョンに更新してくれます。
・Sfari 画面は、テーマの設定などで紹介している画面とデザインなどが異なる場合があります。
・Windows,Android の Safari は、サポートを終了しています。Windows,Android をご使用の方は、Chrome をご利用ください。
■バージョンアップの方法
・MacOSを最新にバージョンアップすることにより、Safari も最新にバージョンアップされます。
Outlookでのメールの送りかたを説明します。
・メール作成画面が表示されます。
・メール作成画面で「ファイルの添付」を選択します。
・最近使用したファイルの一覧が表示されます。添付ファイルを選択します。
・最近使用したファイルに該当ファイルがない場合は、「この PC を参照」を選択してファイルを選択します。
・添付ファイルの横の「∨」⇒「添付ファイルを削除」を選択します。
・または、添付ファイルを選択して「Delete」キーを押します。
ソフトが会社のPCにインストールしてあって、自宅からそのソフトを使用したいときなど、自分のパソコンから会社のパソコンにアクセスして、会社のパソコンを遠隔操作（リモート）することでそのソフトを使用することができます。
今回は、Google の Chromeリモートデスクトップを利用して、遠隔操作（リモート）する方法を紹介します。ChromeリモートデスクトップはGoogleアカウント（無料）さえあれば、誰でも無料で使えます。また、ブラウザChromeさえあれば、WindowsでもMacでもOSを選ばないので、とてもおすすめです。
注意
外部から遠隔操作（リモート）するようになることで情報漏洩などのリスクもあがります。システム管理者などに確認をとって許可を得てから利用するようにしましょう。また、使い終わったらツールの削除も忘れずに行うことをおすすめします。
会社のパソコンと自宅のパソコンとの遠隔操作という例で、。操作される側の会社のパソコンを「ホストPC」と呼び、操作する側の自宅のパソコンを「クライアントPC」と呼んで説明していきます。
・会社のパソコン（ホストPC）
・自宅のパソコン（クライアントPC）
・会社のパソコンと自宅のパソコンの両方に「Chrome」のインストール
・Googleアカウント（会社のパソコン（ホストPC）と自宅のパソコン（クライアントPC）の両方で、同じGoogleアカウントでログインします。）
・アドレスバーに「remotedesktop.google.com/access」を入力して、Enterキーを押す。
・Googleへのログイン画面が表示されますので、既存のGoogleアカウントでログインしてください。
・「オンにする」を押します。
・「
」を押して Chrome Remote Desktop をダウンロードします。
・「Chromeに追加」を押すと、ダウンロードします。
・「「Chrome Remote Desktop」を追加しますか？」と表示されたら、「拡張機能を追加」を押してください。
・自宅のパソコン（クライアントPC）から呼び出すときのパソコンの名前になります。任意の名前を入力できます。
・PIN番号とは、他のパソコンからアクセスするときの暗証番号のようなものです。６桁以上の数字を入力してください。
・他のPCからアクセスするときに必要になります。忘れないようにしておきます。
・アプリがアクセスすることを許可するかどうかの表示があれば、「OK」または「許可する」を押してください。
・リモート（接続）での作業が終了するまで、このままにしておきます。
・アドレスバーに「remotedesktop.google.com/access」を入力して、Enterキーを押す。
・Googleには、会社のパソコン（ホストPC）と同じGoogleアカウントでログインしておいてください。
・左上のアイコンを押して、ログインしているGoogleアカウントを確認できます。「＋追加」を押すと新しくGoogleアカウントにログインできます。
・前述の操作で、会社のパソコン（ホストPC）に付けた名前が表示されています。
」を押します。
・このブラウザ上の画像を操作して、会社のパソコン（ホストPC）を操作することができます。
Google検索結果に表示させたくないコンテンツの対処法を紹介します。
・<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等と表示されてしまう場合があります。
ホストや参加者に、自分をはっきりと分かってもらうのはもちろんのこと、ホストから色々なアクションをするのに名前で判断することが多いので。
・スマホ・タブレットの場合は、ミーティングに参加するときに名前を設定できます。→こちら
・操作を方法についてはこちら
・Zoomに表示される名前が変更されます。
・Zoomに表示される文字数は、７文字程度なので、あまり長い名前を付けても表示されませんので、適当な長さにするのが良いです。
windows10でのショートカットアイコンのつくり方を紹介します。
・デスクトップで作成した場合は、ショートカットアイコンはデスクトップにできます。
・作成したショートカットアイコンは自由に移動できます。また、コピーして使うこともできます。
・ショートカットアイコンで右クリック→「プロパティ」をクリック
・プロパティ画面が表示されます。
・「リンク先」にリンク元のファイルが表示されています。
・「ファイルの場所を開く」をクリックすると、リンク元のファイルが表示されます。
Windows10で画面キャプチャを撮る方法について紹介しましたが、ショートカットを利用して、お手軽に画面キャプチャを撮る方法を紹介します。
」+「Shift」+「s」キーを同時に押す
・そのまま、キャプチャしたい範囲をマウスでドラッグしてください。（キャプチャ範囲が、明るく表示されます）
・
をクリックすると、四角形に切り取った範囲をキャプチャできます。
クリックした後に、キャプチャする範囲をマウスでドラッグします。
・画面右上の
をクリックすると、自由に切り抜いた形に画面をキャプチャできます。
クリックした後に、キャプチャする範囲をマウスでドラッグします。
・画面右上の
をクリックすると、複数のウインドウを開いているとき、選択したウインドウキャプチャできます。
クリックした後に、キャプチャするウインドウをクリックします。
・画面右上の
をクリックすると、全画面をキャプチャできます。
・キャプチャした画像は、クリップボードにコピーされます。メール作成画面などで、ペースト(「Ctrl」+「v」）して使うことができます。ファイルに保存する場合は、手順５に進みます。
・画面右下にお知らせウインドウが表示されます。
・画面右上の
をクリックすると、キャプチャ画像をファイルに保存することができます。
・画面右上の
をクリックすると、キャプチャ画像をクリップボードにコピーすることができます。メール作成画面等にコピペすることができます。
Windows10で画面キャプチャを撮る方法について紹介します。
・画面キャプチャを撮る前に、タスクバーにアイコンを表示させましょう。
（一度、設定すれば、設定を変更するまでタスクバーに表示されていますので、次回から画面キャプチャを撮るときに便利です。）
・前準備で表示させたアイコンをクリックして、画面キャプチャを撮ります。
・画面右上のをクリックすると、キャプチャ画像をファイルに保存することができます。
・画面右上のをクリックすると、キャプチャ画像をクリップボードにコピーすることができます。メール作成画面等にコピペすることができます。