スクールすると背景をフェードアウトさせる方法を紹介します。
ホームページに使うと、動的な変化でアクセントになり、なかなかクールな雰囲気になります。
　

　
　
まず、CSSでbody要素に背景画像を設定します。

　　body {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        background-position: center top;
        color: #fff;
    }

• 「background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);」で、画像の上に色のフィルターを重ねることができます。（この色のフィルターは、グラデーションをかけることもできますが、今回はグラデーションはなしにしています。）　フィルターの透明度は０にします。
• 「background-attachment: fixed;」で、背景画像を固定します。
• 「background-size」「background-position」で、背景画像の大きさ、位置を設定します。

　
次にJSで、この背景画像の上の色フィルターの透明度を、スクロールにあわせて上げていきます。

　　var nystories = document.querySelector("p").offsetTop;
    window.onscroll = function() {
        if (window.pageYOffset > 0) {
            var opac = (window.pageYOffset / nystories);
            document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), rgba(255, 255, 255, " + opac + ")), url(./img/src/image.png) no-repeat";
        }
    }

• ここでは、一番最初のp要素がウインドウの一番上にきた時に背景画像が消えるように（画像の上の色フィルターの透明度が１になるように）しています。

　
　
これで、クールなサイトを作ってみてはいかがでしょうか？
　

　

wordpressの投稿ページなどに、個別に meta データの description を挿入できるように、
ダッシュボードの投稿ページにカスタムフィールドを設けて、そこで個別に設定できるようにする方法を紹介します。

　
■functions.php

add_action('admin_menu', 'add_custom_fields');
add_action('save_post', 'save_custom_fields');

function add_custom_fields() {
    add_meta_box( 'my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'post');
    add_meta_box( 'my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'page');
}

function my_custom_fields() {
    global $post;
    $description = get_post_meta($post->ID,'description',true);

    echo "<p>ページの説明（description）160文字以内<br>";
    echo "<input type='text' style='width: 600px;height: 40px;' name='description' value='" . esc_html($description) . "' maxlength='160' /></p>";
}

// カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {

    if(!empty($_POST['description']))
        update_post_meta($post_id, 'description', $_POST['description'] );
    else delete_post_meta($post_id, 'description');

}

function my_description() {

// カスタムフィールドの値を読み込む
    $custom = get_post_custom();
    if(!empty( $custom['keywords'][0])) {
        $keywords = $custom['keywords'][0];
    }
    if(!empty( $custom['description'][0])) {
        $description = $custom['description'][0];
    }

    ?>
    <?php if(is_home()): // トップページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='トップページに表示させるdescription' />
    <?php elseif(is_single()): // 記事ページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='<?php echo $description ?>'>
    <?php elseif(is_page()): // 固定ページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='<?php echo $description ?>'>
    <?php elseif (is_category()): // カテゴリーページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='<?php single_cat_title(); ?>の記事一覧' />
    <?php elseif (is_tag()): // タグページ ?>
        <meta name='robots' content='noindex, follow' />
        <meta name='description' content='<?php single_tag_title(“”, true); ?>の記事一覧' />
    <?php elseif(is_404()): // 404ページ ?>
        <meta name='robots' content='noindex, follow' />
        <title><?php echo 'お探しのページが見つかりませんでした'; ?></title>
    <?php else: // その他ページ ?>
        <meta name='robots' content='noindex, follow' />
    <?php endif; ?>
<?php
}

各ページのテンプレートの head内、あるいは、header.php に下記記述を記載する。

　　<?php my_description() ?>

やはり、ホームページを作成するとファビコンがあると本格的な感じがしますね。
ファビコンって何？と思う方がいると思いますが、ファビコンとはホームページを開いたときにタブのタイトル名の横にあるアイコンのことです。

　
このファビコンを簡単に作成できるサイトがありましたので、紹介します。
そのサイトは、favicon.io というサイトになります。

　
こちらのサイトでは、iPhone,iPadやAndroidでサイトをホーム画面に追加した時に表示されるアイコン（apple-touch-icon(アップルタッチアイコン)）を同時に作成することができます。
少ない手数で、デスクトップ・タブレット・スマホ用の複数のファビコンを一瞬で作ることができる、オンラインツールです。
　

作成する材料

次の3種類のいずれかから、ファビコンを生成することができます。
・テキストから
・画像から
・絵文字から
　

作成できるフォーマットとサイズ

次のフォーマットとサイズのものがまとめて作成されてダウンロードすることができます。
・android-chrome-192×192.png
・android-chrome-512×512.png
・apple-touch-icon.png
・favicon-16×16.png
・favicon-32×32.png
・favicon.ico
　

ファビコンの実装コード

ファビコンの実装コードもサイト内に記載されており、そのまま head 内にコピーすればOKです。

　　<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
　　<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
　　<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
　　<link rel="manifest" href="/site.webmanifest">

　
　
このサイトを使えば、簡単にファビコンが実装できますね。
　

　

やはり、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 でないと判定できないため、「！！」を使って二重否定で変換する必要があるみたいですね。