先日、IEの記事を書いたので、ついでにJavaScriptでのIE判定について
今まで、IE判定も含めてjsでのブラウザ判定には、useragentを使っていたが
IE判定だけなら、次の記述でもいけるようだ。
シンプルでとても使いやすいので、おススメです。
const ieVersion = document.documentMode const isIEieVersion = !!ieVersion
ieVersion は、IEだと true を、それ以外だと false を返します。
document.documentMode で、IEのバージョンを返します。
昨今、IEをサポートしてないことが多いですが、
（プラスワンもIEについては非サポートです）
稀にIEを使用するケースがあります。
最近も久しぶりにIEを触る機会があり、その時に「display:flex」が効かなくてハマってあせったことがあったので、その時のことをメモ代わりに。
次のようなコードで、
<div class="logo_content"> <h3>■■■■■■■■■■■■■■■</h3> <div class="logo_dark"> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> </div> </div>
クラス.rs_news を横並びに配置したいので logo_dark に display:flex を設定したが…
.logo_dark {
display : flex;
flex-flow : row wrap;
justify-content : space-around;
align-items : flex-start;
}
chromeなどのモダンブラウザでは、想定どおり横並びで綺麗に配置されたが、
IEでは、うまく表示されない。
調べてみると、親要素である .logo_content の display が block でないと、
flex が、うまく効かないみたいなので、次のようにstyleを設定したら、
IEでも、うまくいった。
.logo_content{
display : block;
}
.logo_dark {
display : flex;
flex-flow : row wrap;
justify-content : space-around;
align-items : flex-start;
}
どうやらIEのバグらしいが、なかなか解決方法が分からず、あせった！
早く、完全にIEに対応しなくて良い日が訪れて欲しい！（笑）
wordpressの投稿ページに他のHTMLを埋め込むために <ifarme> タグを挿入しても、
タグが挿入できません。
これは、権限によって<ifarme> にフィルターをかけているため、管理者・編集者・寄稿者の投稿ページには<ifarme> タグを挿入できません。
これをどの権限者でもiframeのフィルターを外すために、下記記述をfunction.phpに追記します。
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());
return $content;
}
これで、管理者・編集者・寄稿者の投稿ページでも、 <ifarme> タグを挿入することができます。
Zoomの画面には、スピーカービュー、ギャラリービュー、ミニの3種類のビデオレイアウトがあります。
Zoomミーティングを開催したとき、最初はスピーカービューのビデオレイアウトになります。
スピーカービュー
デフォルトのビデオレイアウトです。発言している人が大きなビデオ画面を切り替わるようになっています。
1対1のミーティングの場合は、上段に自分のビデオが表示され、下段に他の参加者のビデオが表示されます。
ギャラリービュー
参加者を一斉に表示できます。一度に最大49人の参加者を表示できます。矢印をスクロールすると、残りの参加者が表示されます。
スピーカービューとギャラリービューの切り替えは、画面右上の 
をクリックして切り替えます。
ミニ画面
Zoomビデオを最小化し、コンピューター上の開いているアプリケーションの最前面に表示されます。ミニ画面をを移動したり、ビデオを非表示にすることができます。
ミニ画面への切り替えは、Zoomウインドウの右上の「－」をクリックします。
通常の画面に戻すには、ミニ画面の右下の 
をクリックして切り替えます。
人数が多い会議やセミナー形式の会議など、壇上の発言者や講師のビデオに固定したい場合があると思います。
そういった場合のビデオ（相手）を固定する方法を紹介します。
ビデオを固定する方法には、次の２通りの方法があります。
・ホスト（主催者）が設定して会議出席者全員の画面を固定する方法※
※３人以上の会議のみ設定できます。
・会議出席者が自分の画面のみ固定する方法
ホスト（主催者）が設定して会議出席者全員の画面を固定する方法
固定したいビデオにカーソルを重ねると、右上に「・・・」アイコンが表示されるので、そのアイコンをクリック
「全員のスポットライト」をクリック
ビデオが固定されます。会議の出席者全員の画面も選択したビデオに固定されます。
ビデオの固定を解除する場合は、画面左の「スポットライトを削除」をクリックします。
会議出席者が自分の画面のみ固定する方法
固定したいビデオにカーソルを重ねると、右上に「・・・」アイコンが表示されるので、そのアイコンをクリック
「ピン」をクリック
ビデオが固定されます。自分の画面のみ、選択したビデオが固定されます。他の出席者の画面には影響ありません。
ビデオの固定を解除する場合は、画面左の「ピンを削除」をクリックします。
前回までに
・zoomアプリのインストール方法とアカウント登録方法
・パーソナルミーティングID（ミーティングのURL）の固定方法
について紹介してきました。
今回は、ミーテングに参加・開催する方法を紹介していきたいと思います。
ここでは定期的なミーティングを想定して、ミーティングごとにミーティングURLが発行される方法ではなく、パーソナルミーティングID（ミーティングのURL）を固定して使う方法について紹介していきます。
ミーティングに開催する方法からみたい人はこちら
・ミーティングへの参加は、zoomにアカウントがなくても参加できます。ここでは、zoomのアカウントを使わず参加する方法を紹介します。
・スマホ・タブレットの場合はこちら
・参加するパーソナルミーティングID またはミーティングのURL、ミーティングで表示される名前を入力して、「参加」をクリック
【パーソナルミーティングIDを履歴から入力】
パーソナルミーティングID の入力欄の右側のアイコンをクリックすると、今まで参加したミーテングが表示されます。表示されたミーテングを選択すると、そのミーティングのパーソナルミーティングIDが入力されます。
・ミーティングパスコード入力画面が表示されます。ミーティングパスコードを入力して「ミーティングに参加する」をクリック
・「コンピューターでオーディオに参加」をクリック
【ホスト（主催者）がミーテングを開いてない場合】
下記画面が表示されます。ミーテングが開くまで、そのままでお待ちください。ホスト（主催者）がミーテングを始めると、上記画面が表示されます。
・ミーティングに参加します。
例として、android端末を使用した場合について、紹介します。他の端末でも、操作内容はほぼ同じなので、参考にしながら操作してください。
・参加するパーソナルミーティングID またはミーティングのURL、ミーティングで表示される名前を入力して、「参加」をタップ
【パーソナルミーティングIDを履歴から入力】
パーソナルミーティングID の入力欄の右側のアイコンをタップすると、今まで参加したミーテングが表示されます。表示されたミーテングを選択すると、そのミーティングのパーソナルミーティングIDが入力されます。
・ミーティングパスコード入力画面が表示されます。ミーティングパスコードを入力して「OK」をタップ
・「ビデオ付きで参加」をタップ
（自分のビデオを表示させたくない場合は「ビデオなしで参加」をタップします。）
【ホスト（主催者）がミーテングを開いてない場合】
下記画面が表示されます。ミーテングが開くまで、そのままでお待ちください。ホスト（主催者）がミーテングを始めると、ミーティングに参加できます。
【参加にホスト（主催者）の承諾が必要な場合】
下記画面が表示されます。ミホスト（主催者）が承諾すると、ミーティングに参加できます。
・ミーティングに参加します。
・ミーティングを開催するには、zoomのアカウントが必要です。zoomのアカウントでサインインして操作してください。
・スマホ・タブレットの場合はこちら
・サインイン画面が表示されます。
・zoomアプリのホーム画面が表示されます。
・接続するオーディオの選択画面が表示されます。
・ミーティングが開催されます。
例として、android端末を使用した場合について、紹介します。他の端末でも、操作内容はほぼ同じなので、参考にしながら操作してください。
・サインイン画面が表示されますので、登録しているメールアドレス、パスワードを入力して、「サイン イン」をタップ
・ミーティング開始画面が表示されます。
・ミーティングが開催されます。
弊社従業員研修のため、下記日程を臨時休業とさせていただきます。
臨時休業日：令和2年10月23日（金）
大変ご迷惑をおかけ致しますが、どうぞよろしくお願い致します。
ZOOMで会議を行うとき、ミーティングのURLを参加者に送り、ミーティングに参加してもらいます。
しかし、ミーティングの都度に、このミーティングのURLを参加者に送るのが手間かかります。特に週一回等の定例会議を開催する場合など、都度ミーティングのURLを送るのは本当に手間ですよね。
実は、ZOOMにはこのミーティングのURLを固定する方法があります。
この方法を利用すれば、会議の度に招待URLを送付する必要はなく、会議参加者は会議の時間になれば固定されたミーティングのURLで接続すればOKになります。
更にURLでも長くて覚えにくいので、2~9の数字10桁のパーソナルミーティングIDを使用して固定することができます。
今回は、そのパーソナルミーティングIDを固定する設定方法について紹介します。
（スマホ・タブレットのアプリの場合は、ミーティング開催ごとに、固定のパーソナルミーティングIDを利用するかどうかを選択する仕様になりますので、ここではPCでの設定方法のみの紹介になります。）
また、ミーティングパスコードも参加者が忘れにくいパスコードに変更できるよう、ミーティングパスコードの変更方法も紹介します。
・zoomアプリをインストールしてない人は、インストールしてください。アプリのインストール方法はこちら (うまくインストールできていると、DeskTop上にzoomアプリのアイコン
があると思うので、それをダブルクリック)
・zoomアプリの起動画面が表示されるので、「サインイン」をクリック
・登録したメールアドレスとパスワードを入力して、「サインイン」をクリック
※次回から、メールアドレスとパスワードを入力を省略したい場合は「次でのサインインを維持」をチェックしておいてください。
・zoomアプリのホーム画面が表示されます。
・zoomアプリのホーム画面の右上の歯車アイコンをクリック
・設定画面が表示されます。「プロフィール」→「高度な機能を表示」をクリック
・ブラウザが起動して、ブラウザ上でzoomページのサインイン画面が表示されます。登録しているメールアドレスとパスワードを入力して、サインインしてください。
※ブラウザ側で自動サインインの設定している場合は、サインイン画面は表示されません。次の手順から操作してください。
※zoomアプリの設定画面が邪魔になる場合は、適当な箇所に移動して、ブラウザ画面が見えるようにして操作してください。
・ブラウザ側の設定画面が表示されます。
・「ミーティングをスケジュールする」内の「個人ミーティングIDを有効化」「ミーティングスケジューリング時に個人ミーティングID (PMI)を使用」「インスタントミーティング開始時に個人ミーティングID (PMI)を使用」を有効にする。（すでに有効になっている項目は、そのままでOKです）
・一番左のメニューの「プロフィール」をクリック
・プロフィール設定画面が表示されます。「パーソナルミーティングID」の右側の「編集」をクリック
・「即時ミーティングにパーソナルミーティングIDを使用する」にチェックを入れて、「変更を保存」をクリック
★以上で設定は完了です。
・ブラウザ側の設定画面の表示の方法は、上記「パーソナルミーティングIDを固定する方法」を参照してください。
・Zoomアプリのホーム画面が表示されない場合は、windowsのステータスバーのzoomアイコンをクリックしてください
ソーシャルディスタンスを考え、会議等は電子会議を使用する機会も多くなっていると思います。
電子会議システムの「ZOOM」について、使用方法を紹介したいと思います。
まず、今回は、はじめてzoomを使用するときの準備として、zoomアカウントの登録方法とzoomアプリのインストール方法について紹介します。
・スマホ・タブレットの場合はこちら
下記zoomのサイトにアクセスします。
ZOOM
・次のようなサイトが表示されます。
・生年月日確認画面が表示されます。生年月日を入力して「続ける」をクリック
・無料サインアップ画面が表示されます。登録するメールアドレスを入力して「サインアップ」をクリック
・入力したメールアドレスに確認メールを送信した旨の画面が表示されます。
万が一、メールが届いてない場合は、「入力したメールアドレスに確認メールを送信した旨の画面」で「別のメールを再送信」をクリックしてメールを再送してみてください。
・次のようなzoomアカウントのアクティベート認証用メールが届きます。「アクティブなアカウント」ボタンをクリックします。
・zoomのサイトに繋がり、学校関係者かどうかの確認画面が表示されます。「いいえ」を選択して「続ける」をクリック
・zoomのアカウントが作成されます。引き続き、名前、パスワード等を入力してログインします。
・次の画面が表示されますので、名／性／パスワード／パスワード（確認用）を入力して「続ける」をクリック
・最初は、パスワードは任意で入力します。（今後、入力したパスワードでログインできます）
・ただし、パスワードは次の通りでなければなりません。
文字は8字以上
1つ以上の文字（a、b、c…）
1つ以上の数字（1、2、3…）
大文字と小文字の両方を含む
・仲間の追加画面が表示されますが、手順をスキップします。
友達メールアドレスは入力せず、ロボット認証し「手順をスキップ」をクリックします。
・以上で、zoomのアカウント登録は完了です。次回からは、登録したメールアドレスとパスワードでログインできます。
一度、登録したアカウントでミーティングを開催することにより、zoomアプリをダウンロード／インストールすることができます。
・アカウント登録完了画面で「Zoomミーティングを今すぐ開始」をクリックします。
・Zoom Meetingsを開く画面が表示されますので、「Zoomをダウンロードして実行してください。」をクリックします。アプリがダウンロードされます。
・ダウンロードしたアプリをダブルクリックすると、zoomアプリがPCにインストールされます。インストールが完了するとzoomアプリが起動して次の画面が表示されます。
・「コンピューターでオーディオに参加」をクリックするとミーティングに接続します。
・コンピューターにマイクがない、またはスピーカがミュートの場合は、エラーが表示されます。
zoomを使用するのに必要な機器（PC）
・スピーカ ※PCに内蔵されている場合は不要。ほとんどのPCに内蔵されている。
・マイク ※PCに内蔵されている場合は不要。内蔵されてないPCが多い
マイクが必要な場合は、スマホ等のヘッドホンはほぼマイク付きなので、スマホ用のヘッドホンを使用すればたいていはOK
・カメラ ※PCに内蔵されている場合は不要。映像を利用しない場合は、カメラは無くてもOK
・ウインドウ下の「ミーティングへの接続時に、自動的にコンピューターでオーディオに接続」にチェックをすると、次回からこちらのウインドウは表示されずに自動的に接続されます。
・zoomアプリのインストールが完了したので、今回のミーティングは終了します。「終了」→「全員対してミーティングを終了」をクリックするとミーティング終了します。
例として、android端末を使用した場合について、紹介します。他の端末でも、操作内容はほぼ同じなので、参考にしながら操作してください。
・google play または Apple store からアプリをインストールしてください。
（スマホ・タブレットでご覧の方は、下のアイコンをタップしてください）
（PCでご覧の方は、下のQRコードを読み込んでください）
・TOP画面が表示されます。
・TOP画面で「サインアップ」をタップする
・誕生日を入力する
・登録するメールアドレスと名、性を入力して、「サインアップ」をタップする
※登録するメールアドレスは、操作しているスマホ・タブレットで受信できるメールアドレスにしてください。
・入力したメールアドレスに、zoomから確認メールを送信されます。
・送信されたメールの「アクティブなアカウント」ボタンをタップします。
・ブラウザが起動し、zoomのサイトが表示されます。「いいえ」をタップします。
・名・性、ログインパスワードを入力して、「続ける」をタップします。
・最初は、パスワードは任意で入力します。（今後、入力したパスワードでログインできます）
・ただし、パスワードは次の通りでなければなりません。
文字は8字以上
1つ以上の文字（a、b、c…）
1つ以上の数字（1、2、3…）
大文字と小文字の両方を含む
・仲間の追加画面が表示されますが、手順をスキップします。
友達メールアドレスは入力せず、ロボット認証し「手順をスキップする」をクリックします。
・以上で、zoomのアカウント登録は完了です。次回からは、登録したメールアドレスとパスワードでログインできます。
今回は、日本国内におけるブラウザシェアを調べてみた。
データ参照したサイトはこちら
StatCounter
期間は2019年9月～2020年8月
■デスクトップ
★Chromeが57.65%と高いシェアを持っている。ついで、IE(12.93%)、Safari(9.43%)、Firefox(9.42%)と続いている。IEに関しては、前記事にあるようにMicroSoftがサポート終了を予定しており、今後ますますシェアが落ちていくことが予想される。
■タブレット
★Safariが73.88%と圧倒的なシェアを持っている。これは、タブレットといえばiPadというくらいの、タブレットのシェアがiPad非常に高いことに起因しているのだろう。ついで、Chrome(15.64%)、Android（系ブラウザ）(8.81%)となっている。
■スマートフォン
★Safariが64.64%と非常に高いシェアを持っている。これも、日本国内ではスマートフォンでのiPhoneのシェアが高いことに起因しているのだろう。ついで、Chrome(29.38%)となっており、chromeもある程度のシェアを持ってきている。
■デスクトップ・タブレット・スマートフォン総合
★開発をしていくのにあたり、chrome・Safariをメインに、FireFoxはできれば程度で、サポート対象に考えていけば良さそうである。（IEに関しては、今後MicroSoftのサポート対象外になるので、あえてサポート対象にする必要はないだろう）
■デスクトップ・タブレット・スマートフォン総合 シャア推移
★僅か５年でもIEのシェアの低下が大きい。過去の感覚でIEがまだまだメジャーなブラウザという考えを持つ人が多いが、現実はIEのシェアは低い。これに惑わされずに、サポートターゲットを選定する必要がある。
参考にデバイスのシェアについても調べてみた。期間は同じく2019年9月～2020年8月
■国内：デバイスシェア（デスクトップ・タブレット・スマートフォン）
■全世界：デバイスシェア（デスクトップ・タブレット・スマートフォン）
■全世界：デバイスシェア（デスクトップ・タブレット・スマートフォン）期間／2020年6月～2020年8月
（※）ゲーム画面は撮影用に作成したイメージです。
現代人の誰もが持ってるスマホには空いた時間で気軽に楽しめるゲームアプリの何か一つはダウンロードされているはず。移動中やランチタイム、はては睡眠前についつい起動させてしまうゲームアプリ。熱中して寝不足になったりしませんか？
（ここで質問）
あなたのスマホには、どんなジャンルのゲームアプリが入っていますか？
①先読みがキモ！ パズルゲーム
②自分好みに育てる、育成ゲーム
③挑戦者求む！ 対戦ゲーム
④冒険と謎解き、ＲＰＧゲーム
さて、あなたのお好みでダウンロードしたスマホのゲームアプリ。
もちろん、趣味や趣向でダウンロードなさって楽しんでいらっしゃる訳ですが、①～④それぞれのゲームアプリを楽しまれている方、それぞれの深層心理が隠されています！
それは『あなたが周囲にどのような迷惑を及ぼしているキャラクターなのか』でした！
それでは、①～④を１つずつ紐解いて参りましょう！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
①先読みがキモ！ パズルゲームで遊んでいる方は…
『自己中心的で迷惑なキャラクター』
1人で淡々とクリアしていくパズルゲーム。
このゲームを選んだ人は、自分本位で迷惑をかけてしまうタイプ。
常に自分が中心にいないと気がすまず、友人にわがままをいって困らせたり、グループの和を乱しがち。
自己主張がはっきりしているのはいいことですが、やりすぎはNG。ときには周囲の状況を客観的に見直して、身を引く、遠慮するといった気遣いを心掛けましょう。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
②自分好みに育てる、育成ゲームで遊んでいる方は…
『自信過剰で迷惑なキャラクター』
自分が作ったキャラクターを自分好みに育てていく育成ゲーム。
このゲームを選んだ人は、自分が持ち合わせている能力や力量がさほど優れても居ないにもかかわらず、自分自身過信しすぎて周囲に迷惑をかけてしまうタイプ。
自分はデキると思っているので、友達が危ないからと止めても振り切って、かき回すだけかき回して、面倒ごとだけが残ってしまうなんてざら。
自分よりも遥かに能力や経験が上の人は当たり前のように沢山います。
客観的に自分の力を判断することも肝要です。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
③挑戦者求む！ 対戦ゲームで遊んでいる方は…
『すぐに周囲の人をライバル視する迷惑なキャラクター』
誰かとバトルを繰り返す対戦ゲーム。
このゲームを選んだ人は、周りをライバル視しすぎて迷惑をかけてしまうタイプ。
友人たちとの楽しい遊びでも、何かにつけて勝敗や優越にこだわる上に、自分の勝ちを求めるあまり横暴な態度を取ったりしていませんか？
遊びはみんなで楽しんでこそおもしろいのです。
勝つか負けるかの2極の考えはやめましょう。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
④冒険と謎解き、ＲＰＧゲームで遊んでいる方は…
『誰にも頼らないのが災いして、何か問題が起きた時に大変な事態を招いてしまう迷惑なキャラクター』
冒険ストーリーを進めていくRPG。
このゲームをえらんだ人は、誰にも頼ろうとしないために、逆に迷惑をかけてしまうタイプ。
困ったことがあっても問題を1人で抱え込み、周りに相談すれば問題はスグに解決するはずなのに、最終的にどうにもならず、大惨事を招いてしまうのです。
人に頼ることは恥ではありません。素直に甘えましょう。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
何気に自分の趣味趣向で選んでダウンロードしたゲームアプリでしょうけれど、それを選んだ裏にこういった「深層心理」が隠されていました。
ドキッ！とされた方も多いのでは？
前回はtwitterカードを設定する方法を紹介しました。
これは、ますは基本ということで、固定ページの場合の設定方法を紹介しました。
今回は、投稿ページの場合の設定方法を紹介します。
twitterカードを利用するには、以下のmetaをhead内に記述するので、
これを投稿ページ用に変更していきます。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
①表示するtwitterカードの形式
★→これは、投稿内容に依存しないので、そのまま「summary」または「summary_large_image」を記述します。
=====================
（例）
<meta name=”twitter:card” content=”summary” />
=====================
②Twitterのユーザー名
★→これも、投稿内容に依存しないので、そのままtwitterにユーザー名を記述します。
=====================
（例）
<meta name=”twitter:site” content=”@p1tweet1″>
=====================
③Twitterカードに表示されるタイトル
★→投稿ページのタイトルを表示させたいので、テンプレートタグ「the_title()」を使って投稿ページのタイトルを取得して記述します。
=====================
（例）
<?php if ( have_posts() ) : ?>
<meta name=”twitter:title” content=”<?php the_title(); ?>” />
<?php endif; ?>
=====================
④Twitterカードに表示される説明文
★→投稿ページの内容を表示させたいので、テンプレートタグ「get_the_excerpt()」を使って投稿ページの内容を抜粋して取得して記述します。（テンプレートタグ「the_excerpt() 」を使用すると、pタグが付いてくるので、Pタグが付いてない「get_the_excerpt()」を使用します。）
★→テンプレートタグ「get_the_excerpt()」の使いかたに注意が必要です。
・ループの中で使用する必要があります。
・echo で取得内容を表示する必要があります。
=====================
（例）
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
<?php endwhile;?>
<?php endif; ?>
=====================
⑤Twitterカードに表示される画像
★→投稿ページのアイキャッチ画像を表示させたいので、次のように記述します。
★→アイキャッチ画像を設定したない場合は、指定の画像が表示されるようにします。
=====================
（例）
<?php if ( have_posts() ) : ?>
<meta name=”twitter:image” content=”<?php
if(has_post_thumbnail( $post->ID )):
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘thumbnail’ );
echo $thumbnail_img[0];
else:
echo bloginfo(‘template_url’) . “/img/noimage.png”;
endif;
?>” />
<?php endif; ?>
=====================
①~⑤をまとめると下記のようになります。
=====================
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@p1tweet1″>
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<meta name=”twitter:title” content=”<?php the_title(); ?>” />
<meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
<meta name=”twitter:image” content=”<?php
if(has_post_thumbnail( $post->ID )):
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘thumbnail’ );
echo $thumbnail_img[0];
else:
echo bloginfo(‘template_url’) . “/img/noimage.png”;
endif;
?>” />
<?php endwhile;?>
<?php endif; ?>
=====================
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認します。
Card validator
前回はtwitterカードについて紹介しました。
今回は、そのtwitterカードを設定する方法を紹介します。
head内にmetaタグとして、下記の記述を追加する。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
①
表示するtwitterカードの形式を設定します。
カードの種類ごとに下記値を入れます。
Summary Card（画像が小さいカード）は「summary」を、summary_large_image（画像が大きいカード）は「summary_large_image」を設定します。
=====================
（例）
<meta name=”twitter:card” content=”summary” />
=====================
②
Twitterのユーザー名を指定します。
=====================
（例）
<meta name=”twitter:site” content=”@p1tweet1″>
=====================
③
Twitterカードに表示されるタイトルを設定します。
=====================
（例）
<meta name=”twitter:title” content=”株式会社プラスワン”>
=====================
④
Twitterカードに表示される説明文を設定します。
文字数制限はありませんが、実際にtwitterカードに表示される文字数までしか表示されません。
=====================
（例）
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
=====================
⑤
Twitterカードに表示される画像を設定します。
=====================
（例）
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
①~⑤をまとめると下記のようになります。
=====================
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@p1tweet1″>
<meta name=”twitter:title” content=”株式会社プラスワン”>
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
★→これをhead内に記述します。
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認できます。
Card validator
