よく使う機能 | TKDタワー個人商店 https://tkd-tower.com Thu, 23 Jan 2025 04:36:27 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://tkd-tower.com/wp-content/uploads/2023/06/cropped-tkd-tower-icon-32x32.jpg よく使う機能 | TKDタワー個人商店 https://tkd-tower.com 32 32 Twitterカードを使ってブログ記事を効果的に紹介する方法：Cocoonテーマを活用した手順ガイド https://tkd-tower.com/twitter-bloginfomation/ Mon, 23 Oct 2023 06:45:02 +0000 https://tkd-tower.com/?p=1324 ブログのアクセス数を増やすために、Twitter（現X）アカウントを開設しました。X開設の記事はこちらをご覧ください。この記事では、WordPressのテーマCocoonを使用してブログ記事のアイキャッチ画像を含むTwitterカードを投稿する手順を詳しく説明します。この方法を使って、次のような投稿を目指します。

Twitterカードを使った投稿方法として、「All in One SEO」プラグインを検討しましたが、Cocoonの機能と重複するため、共存は推奨されていません。また、セットアップもやや複雑だったため、Cocoonの機能を使用することにしました。

2025年1月には、アイキャッチ画像が表示されなくて困った事例もありましたが、無事に復旧できた手順も掲載しています。

この記事でわかること
  • Twitterカードを使ってブログ記事を効果的に紹介する方法
  • Cocoonテーマを活用したTwitterカードの設定手順

条件

  • WordPressを使用し、外観のテーマに「Cocoon」を採用しています
  • PCからChromeを使ったポストを基本とします
  • Xアカウントは無料サービスの範疇でひとまず利用してます
    いわゆる未認証アカウントとなりバッチがないアカウントです。

準備編

CocoonのOGP設定

OGPとはOpen Graph Protocolのことで、WepページがSNSでシェアされた際に、そのページのタイトル・URL・画像・説明文などの情報を正確に表示するための仕組みで、これによりシェアされたコンテンツが視覚的に魅力的に見えます。

CocoonのOGP設定手順
  • Step１
    WordPressの管理画面にアクセスして、①[Cocoon設定]➡②[OGP] を選択します。
  • Step２
    設定画面で、「OGP設定」と「Twitterカード設定」が下記であることを確認します。
  • Step3
    続いてホームイメージを変更します。
    デフォルトの「ホームイメージ」は、Cocoonテーマのデフォルトイメージになっています。これを「TKDタワー個人商店について」で設定したアイキャッチ画像に変更します。最後に「変更をまとめて保存」をクリックして終了です。

動作確認　-　Card Validator

以前はTwitterの Card Validator(カード バリデーター) のサイトで、プレビュー画像を確認することができましたが、2022年8月にはプレビュー機能が廃止されました。現在は「Card preview has moved to Tweet Composer」のメッセージが表示されます。
画面下のLOG欄に「INFO:  Card loaded successfully」と表示されれば問題ありません。実際の動作確認は、ポストの下書き中に行えます。

運用編（ブログ記事の投稿）

ポスト(ツイート)の手順

ブログ記事作成して公開したらポストします。ポスト方法は2パターン考えられます。

  1. ブログ記事のURLをコピーして、Twitterのポストに貼り付けます
  2. ブログ記事にSNSシェアボタン設定している場合（本ブログではCocoon設定でボトム表示しています）、「Twitter」ボタンをクリックしてポストします

簡単な方法である2の手順で進めます。

ポスト(ツイート)手順
  • Step１
    公開した記事のボトムに配置した「Twitter」ボタンを押します

    ChromeでX(旧Twitter)にログイン済なので下記画面となります。ただし、想定していたポスト画像ではない場合があります。

  • Step２
    画像が表示されなかった場合の対処です

    Twitterの Card Validator(カード バリデーター) のサイトで公開記事のURLを「Preview card」で一度実行してから、再度「Twitter」ボタンを押すと、想定画像が表示されます。

    ■2025年1月追記

    それでも事象が改善されない場合は、WordPressで設定したアイキャッチ画像を異なるファイル名（例：「original-image.jpg」→「original-image-v2.jpg」）に変更して、アイキャッチ画像を再設定します。これにより、画像が正しく表示されました。

    注意点
    残念ながら、今回の事象の具体的な原因は不明であり、この方法はあくまで対処療法です。同様の問題が発生した場合は、上記手順をお試しください。

  • Step3
    投稿内容を編集してポストします
  • Step4
    ポスト結果を確認します

    「ポストする」を押すと、次のようにポストできました。

まとめ

この記事では、Twitterカードを使用してブログ記事を効果的に紹介する手順を説明しました。これにより、ブログ記事の作成と更新時にポストすることで、読者をブログに誘導しやすくなり、より多くのアクセスが期待できます。

]]> アイキャッチ画像の作り方 https://tkd-tower.com/blog-setting-eyechatch/ Sat, 05 Aug 2023 05:42:42 +0000 https://tkd-tower.com/?p=843 本記事内の画面キャプチャは、Canva公式サイトの内容を引用し、手順説明を目的として利用しています。権利は各提供元に帰属します。

アイキャッチ画像は、ユーザの目(Eye)を惹きつける(Catch)ための画像のことで、ブログ記事のサムネイルとして読者の目を引くための画像です。ブログを始めたばかりの頃は記事の量を優先していて、アイキャッチ画像の設定は後回しにしていました。しかし、クリック率を向上させるためには重要な設定なので、この記事ではその制作方法を紹介します。制作にはオンラインのグラフィックデザインツールであるCanvaをFreeプランで利用します。

この記事でわかること

・CanvaのFreeプランを使用して、アイキャッチ画像を制作します

条件

  • Canva サービスを利用します
    無料で使えるオンラインのグラフィックデザインツールです。Freeプランで利用します。
  • ブラウザはChromeを使用します
  • アイコン画像は、横 1200px × 縦 675px で作ります
    Twitterで表示される最大サイズとなります

Canvaにログインします

　ログイン方法は複数ありますが、今回はメールアドレスの登録でログインしました。

Canvaにログイン
  • 手順１
    ログインします

    Canvaのサイトから、右上の「ログイン」か「登録」をクリックします。

  • 手順２
    ログイン方法を選択します

    今回は「メールアドレスで続行」を選択しました。

  • 手順３
    登録メールアドレスを入力します

    メールアドレス入力後、「続行」を押下します。

  • 手順４
    名前を入力します

    任意の名前を入力して、「アカウントを作成」を押します。

  • 手順５
    認証します

    登録したメールアドレスにCanvaコードの数字が送られてくるので、その数字をコピーして認証します（画像は取り損ねたのでありません）。

    補足：一度ログアウトして、再度メールアドレスで認証する場合、都度メールアドレスに送られてくるCanvaコードの数字を入力してログインします。

  • 手順６
    ログイン完了

    途中、利用目的（個人としました）を選択する画面がありましたが、最終的に下記画面となります。左上に「デザインを作成」と出てくれば、ログイン完了です。

アイキャッチのサイズ設定～準備

これから作成するアイキャッチのサイズ（横 1200px × 縦 675px）をまず設定します。

アイキャッチのサイズ設定
  • 手順１
    カスタムサイズ設定

    画面右上の「デザインを作成」→「カスタムサイズ」をクリックします。

  • 手順２
    サイズ設定

    幅「1200」高さ「675」、単位が”ｐｘ”を確認して、「新しいデザインを作成」をクリックします。

  • 手順３
    デザインの作成準備完了

    新しいウィンドウとして「名称未設定のデザイン」が開かれます。次の項目に進みます。

アイキャッチのテンプレート

使用するテンプレートを探します。

テンプレートの選択
  • 手順１
    テンプレートにスターを付けます

    キーワード欄に適当な文字（今回は「アイキャッチ」）を入力して、下に表示されるテンプレートから、使いたいと思う画像の「…」をクリック→「スターを付ける」をクリックします。
    気になるテンプレートがあれば同様にスターを付けていきます。

  • 手順２
    ホームに戻り使用するテンプレートを選択します

    「ホーム」に戻ります。

    「プロジェクト」をクリックします。

    「スター付き」をクリックすると、先ほど選んだテンプレートが表示されます。

    今回使用するテンプレートをクリックします。続いて「このテンプレートを使用する」を押下すれば、文字の編集に進みます。

アイキャッチの編集

選んだテンプレートを編集して、ブログ記事のアイキャッチとして適切な文言・画像に修正します。

アイキャッチの編集
  • 手順１
    文字の修正

    テンプレートの文字をダブルクリックすると、文字編集できます。

    適切な内容に修正します。

  • 手順２
    文字サイズ・フォントの変更

    編集画面上部の設定を変えて、文字を装飾します。

  • 手順３
    背景画像を変更と文字の見やすさ調整

    テンプレートがHTML入門なので、HTML言語の背景を別なものに変えます。
    [素材]をクリックして、検索ワード「ブログ」で出てきた画像を選びます。

    編集画面に出てきます。

    オリジナルの背景画像を削除、追加した画像のサイズ調整・レイヤーで最背面に移動・背景画像の透明度落とす、文字のエフェクト調整の結果が次の通りです。

アイキャッチの保存

Canvaで作成したアイキャッチ画像を、WordPressにアップロードするために保存します。

画像の保存
  • 手順１
    ダウンロード　その１

    [ファイル]を押下するとメニューが出てきます。ファイル名を編集してから、「ダウンロード」を押下します。

  • 手順２
    ダウンロード　その２

    デフォルト（ファイル種類PNG）のまま、「ダウンロード」を押下します。

  • 手順３
    プレミアム画像が含まれていた場合

    有料会員か都度支払うか、プレミアム画像を削除してフリー素材に変更します。
    今回は、フリー素材を検索して修正しました。

  • 手順４
    ダウンロード　その３

    プレミアム画像をなくしたのち、再度ダウンロードをクリックするとダウンロードできました。これでローカルPCに保存できました。

WordPressアイキャッチ画像の設定

WordPressでアイキャッチ画像設定
  • 手順１
    アイキャッチ画像設定

    WordPress投稿画面の右側メニューから[投稿]－[アイキャッチ画像を設定]を選択します。

  • 手順２
    アップロードと確認

    作成したアイキャッチ画像を選択したら下記となります。

  • 手順３
    下書き保存とプレビュー

    プレビューで問題ないことを確認します。

　以上で、初めてブログのアイキャッチ画像が設定できました。

まとめ

この記事では、Canvaを使用してブログのアイキャッチ画像を作成する手順を紹介しました。クリック率を向上させるために、未設定の記事には適したアイキャッチ画像を追加しましょう。ブログの見栄えを整えるためには、タイムラインでレイアウトを調整したり、記事を公開した後はTwitterカードを使用してXにポストすることもお勧めです。

]]> Cocoonでタイムラインを作る方法 https://tkd-tower.com/blog-timeline/ Fri, 04 Aug 2023 16:13:52 +0000 https://tkd-tower.com/?p=876 　ブログを書き方として、手順１ → 手順２ のように、順序立ててわかりやすく書く方法を「タイムライン」といいます。今後も使いたいツールなので、備忘録として掲載します。

この記事でわかること
  • Cocoonのタイムラインの使い方がわかり、手順の記事を書くことができます。

条件

  • WordPressで外観のテーマ「Cocoon」を利用します

タイムラインの追加

WordPress投稿画面から、
ブロック挿入の「＋」ボタンを押します。

COCOONブロックの中にある
「タイムライン」を選択します。

これでタイムラインが追加されます。

タイムラインのタイトル
  • ラベル
    タイトル

タイムラインのカスタマイズ

タイムラインの設定

タイムラインのブロック（タイトル付近）を選択して、右画面の「ブロック」を開きます。

アイテム数や色設定を記事内容に応じて変更します。

アイテム数「３」、色設定は「ポイント色：赤色」「背景色：黄色」「文字色：青色」「ボーダー色：橙色」にしたのが下記です。

タイムラインのタイトル
  • ラベル
    タイトル
  • ラベル
    タイトル
  • ラベル
    タイトル

タイムラインの文字編集

　追加したタイムラインのブロック内の文字「タイムラインのタイトル」「ラベル」「タイトル」を選択して、内容を書き換えます。
　「タイトル」を選択すると「ブロックを選択するには「/」を入力」と出ますので、通常の本文同様に、文字入力・画像入力ができます。

ここがタイトルです
  • STEP1
    STEP1のタイトルです

    内容を書きます。

    本文同様画像も入れられます

  • ラベル２
    STEP2のタイトルです

    内容を書きます。

  • 何でもいい
    STEP3のタイトルです

    内容を書きます。

以上、Cocoonでのタイムラインの使い方でした。

まとめ

この記事では、Cocoonのタイムラインを使って記事を書く手順を紹介しました。タイムラインを使った記事が完成したら、ブログのアイキャッチ画像を作成して、公開記事をTwitterカードを使用してXにポストしましょう。

]]>