PlusOne Blog

「日常」に関する記事

【JavaScript】IE判定

先日、IEの記事を書いたので、ついでにJavaScriptでのIE判定について

 
今まで、IE判定も含めてjsでのブラウザ判定には、useragentを使っていたが
IE判定だけなら、次の記述でもいけるようだ。
シンプルでとても使いやすいので、おススメです。

  const ieVersion = document.documentMode
  const isIEieVersion = !!ieVersion

 
ieVersion は、IEだと true を、それ以外だと false を返します。
document.documentMode で、IEのバージョンを返します。

この記事を読む

【HTML,CSS】IEでflex-boxが効かないとき

昨今、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】投稿ページにiframeタグを挿入する

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】使い方4~表示される画像を固定する~

Zoomの画面について

Zoomの画面には、スピーカービュー、ギャラリービュー、ミニの3種類のビデオレイアウトがあります。
Zoomミーティングを開催したとき、最初はスピーカービューのビデオレイアウトになります。
 
スピーカービュー
デフォルトのビデオレイアウトです。発言している人が大きなビデオ画面を切り替わるようになっています。
1対1のミーティングの場合は、上段に自分のビデオが表示され、下段に他の参加者のビデオが表示されます。

 
ギャラリービュー
参加者を一斉に表示できます。一度に最大49人の参加者を表示できます。矢印をスクロールすると、残りの参加者が表示されます。

 
スピーカービューとギャラリービューの切り替えは、画面右上の をクリックして切り替えます。
 
ミニ画面
Zoomビデオを最小化し、コンピューター上の開いているアプリケーションの最前面に表示されます。ミニ画面をを移動したり、ビデオを非表示にすることができます。

 
ミニ画面への切り替えは、Zoomウインドウの右上の「-」をクリックします。

通常の画面に戻すには、ミニ画面の右下の をクリックして切り替えます。

 

表示されるビデオ(相手)を固定する方法

人数が多い会議やセミナー形式の会議など、壇上の発言者や講師のビデオに固定したい場合があると思います。
そういった場合のビデオ(相手)を固定する方法を紹介します。
 
ビデオを固定する方法には、次の2通りの方法があります。
・ホスト(主催者)が設定して会議出席者全員の画面を固定する方法
 ※3人以上の会議のみ設定できます。
・会議出席者が自分の画面のみ固定する方法

ホスト(主催者)が設定して会議出席者全員の画面を固定する方法
固定したいビデオにカーソルを重ねると、右上に「・・・」アイコンが表示されるので、そのアイコンをクリック

 
「全員のスポットライト」をクリック

 
ビデオが固定されます。会議の出席者全員の画面も選択したビデオに固定されます。

 
ビデオの固定を解除する場合は、画面左の「スポットライトを削除」をクリックします。
 
会議出席者が自分の画面のみ固定する方法
固定したいビデオにカーソルを重ねると、右上に「・・・」アイコンが表示されるので、そのアイコンをクリック

 
「ピン」をクリック

 
ビデオが固定されます。自分の画面のみ、選択したビデオが固定されます。他の出席者の画面には影響ありません。

 
ビデオの固定を解除する場合は、画面左の「ピンを削除」をクリックします。
 

この記事を読む

【Zoom】使い方3~実際にミーテングに参加・開催してみよう!~

前回までに
 ・zoomアプリのインストール方法とアカウント登録方法
 ・パーソナルミーティングID(ミーティングのURL)の固定方法
について紹介してきました。
 
今回は、ミーテングに参加・開催する方法を紹介していきたいと思います。
ここでは定期的なミーティングを想定して、ミーティングごとにミーティングURLが発行される方法ではなく、パーソナルミーティングID(ミーティングのURL)を固定して使う方法について紹介していきます。
ミーティングに開催する方法からみたい人はこちら
 

ミーティングに参加する方法

・ミーティングへの参加は、zoomにアカウントがなくても参加できます。ここでは、zoomのアカウントを使わず参加する方法を紹介します。
 

PCの場合

・スマホ・タブレットの場合はこちら
 

1、ZOOMアプリを起動する


 

2、「ミーティングに参加」をクリックする


 
・参加するパーソナルミーティングID またはミーティングのURL、ミーティングで表示される名前を入力して、「参加」をクリック

【パーソナルミーティングIDを履歴から入力】
パーソナルミーティングID の入力欄の右側のアイコンをクリックすると、今まで参加したミーテングが表示されます。表示されたミーテングを選択すると、そのミーティングのパーソナルミーティングIDが入力されます。

・ミーティングパスコード入力画面が表示されます。ミーティングパスコードを入力して「ミーティングに参加する」をクリック

・「コンピューターでオーディオに参加」をクリック

【ホスト(主催者)がミーテングを開いてない場合】
下記画面が表示されます。ミーテングが開くまで、そのままでお待ちください。ホスト(主催者)がミーテングを始めると、上記画面が表示されます。

・ミーティングに参加します。

 

スマホ・タブレットの場合

例として、android端末を使用した場合について、紹介します。他の端末でも、操作内容はほぼ同じなので、参考にしながら操作してください。
 

1、ZOOMアプリを起動する


 

2、「ミーティングに参加」をタップする


 
・参加するパーソナルミーティングID またはミーティングのURL、ミーティングで表示される名前を入力して、「参加」をタップ

【パーソナルミーティングIDを履歴から入力】
パーソナルミーティングID の入力欄の右側のアイコンをタップすると、今まで参加したミーテングが表示されます。表示されたミーテングを選択すると、そのミーティングのパーソナルミーティングIDが入力されます。

・ミーティングパスコード入力画面が表示されます。ミーティングパスコードを入力して「OK」をタップ

・「ビデオ付きで参加」をタップ
 (自分のビデオを表示させたくない場合は「ビデオなしで参加」をタップします。)

【ホスト(主催者)がミーテングを開いてない場合】
下記画面が表示されます。ミーテングが開くまで、そのままでお待ちください。ホスト(主催者)がミーテングを始めると、ミーティングに参加できます。

【参加にホスト(主催者)の承諾が必要な場合】
下記画面が表示されます。ミホスト(主催者)が承諾すると、ミーティングに参加できます。

・ミーティングに参加します。

 
 

ミーティングを開催する方法

・ミーティングを開催するには、zoomのアカウントが必要です。zoomのアカウントでサインインして操作してください。
 

PCの場合

・スマホ・タブレットの場合はこちら
 

1、ZOOMアプリを起動する


 

2、「サインイン」をクリックする

・サインイン画面が表示されます。

 

3、登録しているメールアドレス、パスワードを入力して、「サイン イン」をクリックする

・zoomアプリのホーム画面が表示されます。

 

4、「新規ミーティング」アイコンをクリックする

・接続するオーディオの選択画面が表示されます。

 

5、「コンピューターでオーディオに参加」をクリックする

・ミーティングが開催されます。

 

スマホ・タブレットの場合

例として、android端末を使用した場合について、紹介します。他の端末でも、操作内容はほぼ同じなので、参考にしながら操作してください。
 

1、ZOOMアプリを起動する


 

2、「サインイン」をタップする

・サインイン画面が表示されますので、登録しているメールアドレス、パスワードを入力して、「サイン イン」をタップ
 

3、「新規ミーティング」アイコンをタップする

・ミーティング開始画面が表示されます。

 

4、「ビデオオン」、「個人ミーティングID(PMI)の使用」を有効にして、「ミーティングの開始」をタップする

・ミーティングが開催されます。

この記事を読む

【Zoom】使い方2~ミーティングのURLを固定する・パスコードを変更する方法~

ZOOMで会議を行うとき、ミーティングのURLを参加者に送り、ミーティングに参加してもらいます。
しかし、ミーティングの都度に、このミーティングのURLを参加者に送るのが手間かかります。特に週一回等の定例会議を開催する場合など、都度ミーティングのURLを送るのは本当に手間ですよね。

 
実は、ZOOMにはこのミーティングのURLを固定する方法があります。
この方法を利用すれば、会議の度に招待URLを送付する必要はなく、会議参加者は会議の時間になれば固定されたミーティングのURLで接続すればOKになります。
更にURLでも長くて覚えにくいので、2~9の数字10桁のパーソナルミーティングIDを使用して固定することができます。

今回は、そのパーソナルミーティングIDを固定する設定方法について紹介します。
(スマホ・タブレットのアプリの場合は、ミーティング開催ごとに、固定のパーソナルミーティングIDを利用するかどうかを選択する仕様になりますので、ここではPCでの設定方法のみの紹介になります。)

 
また、ミーティングパスコードも参加者が忘れにくいパスコードに変更できるよう、ミーティングパスコードの変更方法も紹介します。
 
 

パーソナルミーティングIDを固定する方法

 

1、ZOOMアプリを起動する

・zoomアプリをインストールしてない人は、インストールしてください。アプリのインストール方法はこちら (うまくインストールできていると、DeskTop上にzoomアプリのアイコンがあると思うので、それをダブルクリック)
 
・zoomアプリの起動画面が表示されるので、「サインイン」をクリック

 

2、サインインをする

・登録したメールアドレスとパスワードを入力して、「サインイン」をクリック
※次回から、メールアドレスとパスワードを入力を省略したい場合は「次でのサインインを維持」をチェックしておいてください。

・zoomアプリのホーム画面が表示されます。

 

3、設定画面を開いて、設定する

・zoomアプリのホーム画面の右上の歯車アイコンをクリック

・設定画面が表示されます。「プロフィール」→「高度な機能を表示」をクリック

・ブラウザが起動して、ブラウザ上でzoomページのサインイン画面が表示されます。登録しているメールアドレスとパスワードを入力して、サインインしてください。
 ※ブラウザ側で自動サインインの設定している場合は、サインイン画面は表示されません。次の手順から操作してください。
 ※zoomアプリの設定画面が邪魔になる場合は、適当な箇所に移動して、ブラウザ画面が見えるようにして操作してください。

・ブラウザ側の設定画面が表示されます。

・「ミーティングをスケジュールする」内の「個人ミーティングIDを有効化」「ミーティングスケジューリング時に個人ミーティングID (PMI)を使用」「インスタントミーティング開始時に個人ミーティングID (PMI)を使用」を有効にする。(すでに有効になっている項目は、そのままでOKです)


・一番左のメニューの「プロフィール」をクリック

・プロフィール設定画面が表示されます。「パーソナルミーティングID」の右側の「編集」をクリック

・「即時ミーティングにパーソナルミーティングIDを使用する」にチェックを入れて、「変更を保存」をクリック


★以上で設定は完了です。
 
 

固定されたパーソナルミーティングIDを確認する

 

1、プロフィール設定画面で、「パーソナルミーティングID」の「*** *** *○○○」横の「表示」をクリック



 
 

ミーティング パスコードを変更する方法

 

1、ブラウザ側の設定画面を表示します。

・ブラウザ側の設定画面の表示の方法は、上記「パーソナルミーティングIDを固定する方法」を参照してください。

 

2、「Security」→「Personal Meeting ID (PMI) Passcode」内に記載の「Passcode:」横の「編集」をクリック


 

3、Passcodeを変更して、「保存」をクリックするとパスコードが変更されます。

 
 

Zoomアプリに戻る

 

1、ブラウザで開いたzoomのページを閉じる

2、Zoomアプリの設定画面の右上の「×」をクリック

3、Zoomアプリのホーム画面が表示される

・Zoomアプリのホーム画面が表示されない場合は、windowsのステータスバーのzoomアイコンをクリックしてください

この記事を読む

【Zoom】使い方1~zoomアカウントの登録方法とzoomアプリのインストール方法~

ソーシャルディスタンスを考え、会議等は電子会議を使用する機会も多くなっていると思います。

電子会議システムの「ZOOM」について、使用方法を紹介したいと思います。
まず、今回は、はじめてzoomを使用するときの準備として、zoomアカウントの登録方法とzoomアプリのインストール方法について紹介します。

 

初めてZOOMを使用する場合は、アカウント登録してアプリをインストールします

 

PCの場合

・スマホ・タブレットの場合はこちら
 

1、「ZOOM」のサイトにアクセスします

下記zoomのサイトにアクセスします。
ZOOM
・次のようなサイトが表示されます。

 

2、画面右上の「サインアップは無料です」をクリック


・生年月日確認画面が表示されます。生年月日を入力して「続ける」をクリック

・無料サインアップ画面が表示されます。登録するメールアドレスを入力して「サインアップ」をクリック

・入力したメールアドレスに確認メールを送信した旨の画面が表示されます。
 

3、入力したメールアドレスの、zoomからのメールを確認します

万が一、メールが届いてない場合は、「入力したメールアドレスに確認メールを送信した旨の画面」で「別のメールを再送信」をクリックしてメールを再送してみてください。
 
・次のようなzoomアカウントのアクティベート認証用メールが届きます。「アクティブなアカウント」ボタンをクリックします。

・zoomのサイトに繋がり、学校関係者かどうかの確認画面が表示されます。「いいえ」を選択して「続ける」をクリック

・zoomのアカウントが作成されます。引き続き、名前、パスワード等を入力してログインします。
 

4、名前、パスワード等を入力してログイン

・次の画面が表示されますので、名/性/パスワード/パスワード(確認用)を入力して「続ける」をクリック
・最初は、パスワードは任意で入力します。(今後、入力したパスワードでログインできます)
・ただし、パスワードは次の通りでなければなりません。
文字は8字以上
1つ以上の文字(a、b、c…)
1つ以上の数字(1、2、3…)
大文字と小文字の両方を含む

・仲間の追加画面が表示されますが、手順をスキップします。
 友達メールアドレスは入力せず、ロボット認証し「手順をスキップ」をクリックします。

・以上で、zoomのアカウント登録は完了です。次回からは、登録したメールアドレスとパスワードでログインできます。

 

5、引き続き、zoomのアプリをインストールします。

一度、登録したアカウントでミーティングを開催することにより、zoomアプリをダウンロード/インストールすることができます。
・アカウント登録完了画面で「Zoomミーティングを今すぐ開始」をクリックします。

・Zoom Meetingsを開く画面が表示されますので、「Zoomをダウンロードして実行してください。」をクリックします。アプリがダウンロードされます。

・ダウンロードしたアプリをダブルクリックすると、zoomアプリがPCにインストールされます。インストールが完了するとzoomアプリが起動して次の画面が表示されます。

・「コンピューターでオーディオに参加」をクリックするとミーティングに接続します。
・コンピューターにマイクがない、またはスピーカがミュートの場合は、エラーが表示されます。
zoomを使用するのに必要な機器(PC)
・スピーカ ※PCに内蔵されている場合は不要。ほとんどのPCに内蔵されている。
・マイク ※PCに内蔵されている場合は不要。内蔵されてないPCが多い
マイクが必要な場合は、スマホ等のヘッドホンはほぼマイク付きなので、スマホ用のヘッドホンを使用すればたいていはOK
・カメラ ※PCに内蔵されている場合は不要。映像を利用しない場合は、カメラは無くてもOK
・ウインドウ下の「ミーティングへの接続時に、自動的にコンピューターでオーディオに接続」にチェックをすると、次回からこちらのウインドウは表示されずに自動的に接続されます。

・zoomアプリのインストールが完了したので、今回のミーティングは終了します。「終了」→「全員対してミーティングを終了」をクリックするとミーティング終了します。
 

スマホ・タブレットの場合

例として、android端末を使用した場合について、紹介します。他の端末でも、操作内容はほぼ同じなので、参考にしながら操作してください。
 

1、ZOOMアプリをダウンロードする

・google play または Apple store からアプリをインストールしてください。
(スマホ・タブレットでご覧の方は、下のアイコンをタップしてください)

(PCでご覧の方は、下のQRコードを読み込んでください)

 

2、ZOOMアプリを起動する

・TOP画面が表示されます。

 

3、サインアップをする

・TOP画面で「サインアップ」をタップする

・誕生日を入力する

・登録するメールアドレスと名、性を入力して、「サインアップ」をタップする
 ※登録するメールアドレスは、操作しているスマホ・タブレットで受信できるメールアドレスにしてください。

・入力したメールアドレスに、zoomから確認メールを送信されます。

・送信されたメールの「アクティブなアカウント」ボタンをタップします。

・ブラウザが起動し、zoomのサイトが表示されます。「いいえ」をタップします。

・名・性、ログインパスワードを入力して、「続ける」をタップします。
・最初は、パスワードは任意で入力します。(今後、入力したパスワードでログインできます)
・ただし、パスワードは次の通りでなければなりません。
文字は8字以上
1つ以上の文字(a、b、c…)
1つ以上の数字(1、2、3…)
大文字と小文字の両方を含む

・仲間の追加画面が表示されますが、手順をスキップします。
 友達メールアドレスは入力せず、ロボット認証し「手順をスキップする」をクリックします。

・以上で、zoomのアカウント登録は完了です。次回からは、登録したメールアドレスとパスワードでログインできます。

 
 

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のサポート対象外になるので、あえてサポート対象にする必要はないだろう)
 
■デスクトップ・タブレット・スマートフォン総合 シャア推移

★僅か5年でもIEのシェアの低下が大きい。過去の感覚でIEがまだまだメジャーなブラウザという考えを持つ人が多いが、現実はIEのシェアは低い。これに惑わされずに、サポートターゲットを選定する必要がある。
 
 
参考にデバイスのシェアについても調べてみた。期間は同じく2019年9月~2020年8月
 
■国内:デバイスシェア(デスクトップ・タブレット・スマートフォン)

 
■全世界:デバイスシェア(デスクトップ・タブレット・スマートフォン)

 
■全世界:デバイスシェア(デスクトップ・タブレット・スマートフォン)期間/2020年6月~2020年8月

この記事を読む

【wordpress】twitterカード ~設定編2~

前回は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

この記事を読む

【wordpress】twitterカード ~設定編~

前回は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

この記事を読む

【wordpress】twitterカード

twitterでURLリンクをつけてツィートするとき、画像とリンク先ページの簡単な説明のカードが表示されることがあります。

このカードを「twitterカード」と呼びます。
 
「twitterカード」が表示されると、ユーザーは視覚的に興味を持ち、サイトの説明も表示されるので、クリックしやすくなりますので、ぜひ「twitterカード」を使用することをおすすめします。
 
なお、「twitterカード」は、リンク先のコンテンツで設定しておかないと表示されません。
 
 
■twitterカードの種類
twitterカードには4種類あります。うち、通常のwebコンテンツに関しては2種類あります。

・Summary Card

 
・Summary Card with Large Image

 
・他に「アプリ配布用」と「動画サイト用」の2種類があるが、今回は割愛
 
 
■どっちのタイプを使えばいい?
どっちのタイプが良いかという明確な線引きはありませんが、
一般的に、使用する画像を綺麗で見せたいものであれば、「Summary Card with Large Image」タイプを、
使用する画像が解像度等が悪く綺麗でなければ、ユーザーもクリックしたくなくなりますので、「Summary Card」タイプを、
使用します。
 
wordpressの投稿ページの場合は、アイキャッチ画像が表示されます。投稿する内容により、画像も色々なものになりますので、「Summary Card」タイプをおススメします。

この記事を読む

【Google】 トップローカルガイドに認定されました!


 
この8月に「Google認定フォトグラファー」の認定を受けましたが、早速Googleから「トップローカルガイド認定」を受けました。
在住の地域(プラスワンの場合は広島市)の認定フォトグラファーの中で、貢献度が高いフォトグラファーが「トップローカルガイド」として認定されます。
広島市で5%のポイントを獲得したということで、大変光栄に感じております。
 
これからも「トップローカルガイド」を取得し続けれるよう、技術を磨いていき、お客様に喜んでいただけるコンテンツを作成し続けます。

この記事を読む
記事一覧に戻る