BloggerのページでTwitterCardの画像を表示する方法。

-

どうも、ケーサンヨーシです。

今回はBloggerのページ機能でTwitterCardを設定する方法を紹介します。

Bloggerにはブログとは別にページという機能があります。

ブログは、日々起きた内容を記載する名前通りログなので、例えば自分のやっている別サービスの紹介など、固定で表示したい内容には向いていません。

このような場合に使用するのがページです。

以前このブログてもBloggerにTwitterCardの設定をする方法を紹介しました。

https://boukyakulog.blogspot.com/2020/02/bloggertwittercard.html

この方法ではブログ内の画像をイメージとして表示することができますが、ページ機能の場合にはデフォルトの画像がイメージとして表示されます。

これを改善して、ページのTwitterCardを表示した場合にはページ内の画像がイメージとして表示されるようにしました。

詳しくは前のブログを見て欲しいですが、レイアウトタブでHTMLを編集します。

このHTML無いの<head>ダグの中に以下を挿入します。

<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@kesanyoshi' name='twitter:site'/>
<meta content='@kesanyoshi' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:else/>
      <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:elseif cond='data:view.featuredImage'/>
      <meta expr:content='data:view.featuredImage' name='twitter:image'/>
    <b:else/>
      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6YJluXAxp-Xzi2sLGxGoEm7XM8g-mGlS3-DaU8hWpkktC_s0B-PydfszxfTBBfEyxHIADGWHVItuxy3kx2CbTwExXHevk6H3TlEjnYWSCbXSaNiCDkV0QnzKWGb82RK2LE7722c0viM/s113/icon%25E8%2583%25B8%25E5%2583%258F.png' name='twitter:image'/>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>
<!--END Twitter Card -->

赤い部分は表示するTwitterのアカウントIDを挿入して下さい。

橙色の部分は、ブログやページの記事の中に画像がない場合に表示するデフォルトの画像のURLを入れて下さい。

試す際は以下のTwitterCardテストツールで行うことが多いかと思いますが、ブラウザのキャッシュが残っていると上手く表示されないので、シークレットモードを使うなどしてキャッシュが残らないようにしてください。

https://cards-dev.twitter.com/validator

以上、ケーサンヨーシでした。

このブログの人気の投稿

動画編集ソフト「Shotcut」で縦向きの動画を横向きにする方法。

-
イメージ
 どうも、ケーサンヨーシです。 今回は私が普段使用している動画編集ソフトの「Shotcut」で、動画の向きを変える方法を紹介します。 この記事は、Shotcutを開いて動画を出力することができるくらいの人向けの内容になります。 Shotcutを開くとこのような画面が出てきます。 今回は実験の材料としてスマホの画面録画動画を用意しました。 この動画を横向きにします。 まずは動画をタイムラインに並べます。 タイムラインに並べたら、上部メニューの「表示」の中から「フイルター」を選択します。 左側に表示されたフィルター画面の中の「＋」ボタンを押します。 追加するフィルターの一覧の中から「サイズ・位置・回転」を選択します。 サイズ・位置・回転フィルターの中の回転の角度の数字を「0」から「90」または「 -90 」にします。 90と-90では回転する向きが逆になるので、自分の動画の向きに合わせて選んで下さい。 次に「縮小拡大」の数字を変更します。 この数字を大きくすると画面に表示される動画がデカくなるので、丁度いいところまで大きくしてください。 この２つを調整することで、動画の向きを変えることができます。 動画の編集中に素材の向きが間違っていても編集の過程でなんとかできるので、ぜひやってみて下さい。 以上、解散！
続きを読む

Audacityで音声部分のみを自動カットする方法

-
イメージ
どうも、ケーサンヨーシです。 私は普段、Youtubeの投稿用の自分の音声を「Audacity」というソフトで録音しています。 このAudacityというソフト、結構色々できるみたいで、たとえば自動で音声部分のみを切り取るなんてこともできます。 しかし、少し前にAudacityがアップデートした時にそのやり方が変わりました。 今回は、その具体的な方法を解説します。 なお、このやり方はAudacityの「3.0.2」のバージョンを元に説明しています。 □■□■□ まずは、いつも通り音声を録音します。 録音するとこのように、録音内容がタイムラインに並びます。 この録音した内容のうち、音声部分のみを切り取る予定の部分を選択します。 選択できたら、上部のメニューの解析をクリックします。 その中に「音声から自動ラベル付け」という項目が下の方に出てくるため、それを選択します。 「音声から自動ラベル付け」を選択すると、専用のウィンドウが出てきます。 このうち私は、一番上の「閾値のレベル(dB)」の部分を「-10」にしています。 名前からして、この数字より小さい音声を無音、大きな音を有音として判断する基準かと思われます。ですので、自身の環境にあわせてこの部分の数字を変更して試行錯誤してください。 変更したら、OKを押します。 そうすると、先程の条件を元に音声の部分のみを選択したラベルが出てきます。 自分で微調整を行うこともできます。 自身での微調整を終えたら、左上のメニューのファイルから複数ファイルの書き出しを選択します。 この部分は、Audacityを常用している方はいつも使っている項目かと思います。 後は出力先のフォルダーを選んで「書き出し」をクリックします。 複数のファイルを出力しているため、音声ファイルのラベルについてのウィンドウが出てくるかもしれませんが、そのままOKで大丈夫です。 これで、書き出し先のフォルダーに音声のみが切り出されたファイルが複数出力されていれば成功です。 後は煮るなり焼くなり好きに使うことができます。 □■□■□ というわけで、Audacityのちょっと凝った使い方を解説しました。 私は、この出力した音声を動画編集ソフトに放り投げて、隙間なく喋る動画に仕上げています。 自分で切り取らない分楽なので良かったらやってみてください。 以上、また会いましょう
続きを読む

Android Studioでの動的なLayoutの幅と高さの変更方法

-
イメージ
 Androidアプリを開発していると結構躓きます。 今回は、後からレイアウトの幅と高さを変更する方法を紹介します。 言語はKotlinです。 まず、私が書いた失敗例がこれです。 #失敗例 findViewById<View>(R.id.testID).layoutParam.height = 100 固定で最初から数字を入れれば一応画面に反映されるんですが、2回目以降反映されません。 どうもheightに値を入れた後でViewを描写し直す必要があるようです。 なので、強制的に描写し直すことで反映させることができます。 #一応動く findViewById<View>(R.id.testID).layoutParam.height = 100 findViewById<View>(R.id.testID).visibility = View.GONE findViewById<View>(R.id.testID).visibility = View.VISIBLE visibilityは、そのレイアウトを表示するかどうかのパラメーターで、GONEは非表示、VISIBLEは表示を表しています。 なので、一度消してもう一度表示しています。 以前作ったアプリで失敗例の書き方を使って動いてしまったので、なぜなのか調べてみたらこのパターンでした。 実際は以下のような書き方をするのが一般的だと思います。 #ちゃんと動く val lp = findViewById<View>(R.id.testID).layoutParams lp.height = 100 findViewById<View>(R.id.testID).layoutParams = lp どうも、layoutParamを入れ直すと反映されるようです。 Viewのパラメーターによってはこんなことしなくてもちゃんと反映されるので、もし反映されないようだったら試してみてください。 以上！
続きを読む