【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法

埋め込みツイートのいいね数と日付を非表示にするカスタマイズ

くるみ

埋め込みツイートの見栄えをよくするカスタマイズ、どっかに転がってないかな

ということで今回は

  • 埋め込みツイートのいいね数や日付を非表示にしたい
  • ツイートを埋め込むとどうしても記事を圧迫してるような感じになってしまう

という方に向けて「埋め込みツイートのいいね数と日付を非表示にするカスタマイズ」をご紹介します。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

埋め込みツイートの完成イメージ

before

カスタマイズ前の埋め込みツイート

after

カスタマイズ後の埋め込みツイート

実物はこんな感じ

カスタマイズ後の埋め込みツイートはこんな感じになります。こだわった点は以下の通り。

  • ツイートした日時やいいね数などを非表示に
  • 幅を狭めてコンパクトに。スマホでの見栄えも◎

完成イメージを押さえたところで、早速カスタマイズの方に移っていきましょう。

カスタマイズ手順

方法はいたってシンプルかつ簡単です。

手順
step1
ツイートをdivタグで囲む
step2
CSSコードをコピペする
すぐ終わりそうだね!

くるみ

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

埋め込みツイートをコンパクトにするカスタマイズ方法

ツイートをdivタグで囲む

<div class="twitter-box">
  <p>ツイートのURL</p>
</div>

上のようにエディタにてツイートのURLをtwitter-boxクラスで囲ってあげます。

pタグで囲むかどうかは自由ですが…
pタグが無いとWordPressの仕様上、ビジュアルエディタに切り替えた際に改行されずにURLがURLと認識されなくなって、ツイートが埋め込まれずURLだけがそのまま表示されてしまうのでご注意ください。

CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

.twitter-box .twitter-tweet iframe{
  padding-bottom:9.5vh!important; /*要調整*/
  margin-bottom: -7.8vh; /*要調整*/
  border-radius: 15px;
}
.twitter-box .twitter-tweet{
  margin:0 auto!important;
}
.twitter-box{
  margin:1rem auto 2rem;
  max-width:56%;
  width:100%;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
@media screen and (max-width:480px){
  .twitter-box{
    max-width:83%;
  }
}
.twitter-box .twitter-tweet iframe{
  padding-bottom:9.5vh!important; /*要調整*/
  margin-bottom: -7.8vh; /*要調整*/
  border-radius: 15px;
}
.twitter-box .twitter-tweet{
  margin:0 auto!important;
}
.twitter-box{
  margin:1rem auto 2rem;
  max-width:56%;
  width:100%;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
@media screen and (max-width:480px){
  .twitter-box{
    max-width:83%;
  }
}

「要調整」の箇所はお好みに合わせて調整してあげてください。

ここまで来ればカスタマイズは終了。お疲れ様です!

お疲れ様!

くるみ

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

上のショートカットキーで削除できます。

まとめ

以上、埋め込みツイートのいいね数と日付を非表示にするカスタマイズでした。
埋め込みツイートはこのぐらいの軽度な調整ならできますが、shadowDOMの影響で自由にカスタマイズできないのが痛いですね…

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す