どうもおはようポテト(@ohayoupoteto22)です。
埋め込みツイートをもっとオシャにしたいんだぞ
ということで今回は
「埋め込みツイートのいいね数や日付を非表示にしたい」
「埋め込みツイートをコンパクトにしたいンゴ…」
という方に向けて「埋め込みツイートのいいね数と日付を非表示にするカスタマイズ」をご紹介します。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
埋め込みツイートの完成イメージ
カスタマイズ後の埋め込みツイートはこんな感じになります。
ツイートした日時やいいね数などを非表示に
幅を狭めてコンパクトに。スマホでの見栄えも◎。
実物はこちら
検索順位
二軍の記事ほど
伸びまくるぽてを
— おはようポテト @サイト管理人 (@ohayoupoteto22) October 29, 2020
お次はそのカスタマイズ手順について。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【WordPress】CSSをカスタマイズする際のバックアップの取り方
ブログ主
埋め込みツイートのいいね数を非表示にするカスタマイズ方法
ツイートをdivタグで囲む
<div class="twitter-box">
<p>ツイートのURL</p>
</div>
上のようにエディタにてツイートのURLをtwitter-boxクラスで囲ってあげます。
pタグで囲むかどうかは自由ですが…
pタグが無いとWordPressの仕様上、ビジュアルエディタに切り替えた際に改行されずにURLがURLと認識されなくなって、ツイートが埋め込まれずURLだけがそのまま表示されてしまうのでご注意ください。
CSSコードをコピペする
「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
ブログ主

コードはこちら
.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の影響で自由にカスタマイズできないのが痛いですね…
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
プログラミング、楽しく学んでみない?
TechAcademy(テックアカデミー)
最短4週間で未経験からプロを育てるオンライン完結のスクール。受講生に1人ずつ現役のプロのパーソナルメンターがつき、チャットで質問すればすぐに回答が返ってくるのでサポート体制も万全です。
DMM WEBCAMP COMMIT
磨き上げられた「実践的なスキルが身につく」学習カリキュラムにより、どこよりも高い「継続率」「修了率」「転職率」で受講者満足度も90%以上。プログラミング未経験の方でも安心なスクールです。
CodeCamp(コードキャンプ)
- レッスン満足度94.6%、現役エンジニアから実践的なスキルを学べる
- 就職/転職やキャリアについての相談も無料でできる
評価 おすすめポイント 実績No.1のオンライン・プログラミングスクール(受講者20,000名以上) オンラインで365日/7時〜24時まで、時間と場所を選ばずに自分のペースで学習でき、PCとネット環境があればすぐに学習が始められます。更に無料体験レッスンを受講すると受講料が1万円引に。