東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。!】Cocoonトップページをスッキリとサイト型へカスタマイズ!2019.08.042019.12.11【Cocoon】ヘッダーメニューをオシャレに!上部に固定追従!2019.06.262019.12.19どこよりも簡単にJINのトップページをサイト型にカスタマイズ!2019.08.072020.01.29【Cocoon】プロフィールをオシャレで可愛くしてみた!2019.06.242020.02.01【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK!2019.02.182019.06.11Twitterはこちら仕事依頼はこちらTwitter埋め込みツイートをカスタマイズ!CSSを変更する方法もTwitterFacebook0はてブ0Pocket2LINE2019.11.29第三者の声を載せるときに便利なTwitterの埋め込みツイート!今回はそのTwitterの埋め込みツイートのカスタマイズをします。完成イメージがこちらです。/もちろんタイトルは自由に変更可能です。全てコピペで簡単にできるようになっています。!難易度が上がるのと汎用性に難ありですがJavaScriptを使って埋め込みツイート自体のCSSを変更する方法も紹介します。このように背景色を変更したり、文字サイズの変更が可能になります。Twitterただ先ほど言った通り、このやり方は汎用性が低いので使い道はあまりないかもしれません。オススメは前者のコピペでできるカスタマイズです!注意:この記事はTwitterタイムライン埋め込みのカスタマイズではなく、ツイートの埋め込みカスタマイズになります。他にもコピペカスタマイズやってますTwitterの埋め込みツイートをコピペでカスタマイズ!手順は以下の通りです。手順STEP1CSSコピペstyle.cssにコードをコピペSTEP2HTMLコピペ投稿画面でHTMLコピペSTEP3Twitter埋め込みツイートを埋め込みますSTEP1:CSSをコピペ下記CSSをコピペしていきます。メモWordPress利用者は「外観→テーマエディター→style.css(子テーマ)」。「外観→カスタマイズ→追加CSS」に貼り付けてください。CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。.p-twitter-titleの中身を変更しました。HTMLとして編集)でHTMLを入力します。AddQuicktagなどに登録しておくと便利です。色によって若干HTMLが異なります。Twitter</div>ここにTwitter埋め込み</div>STEP3:ツイートを埋め込むあとはツイートを埋め込むだけです。Twitterを開き、埋め込みたいツイートにアクセスします。右上の矢印ボタンを選択し、メニューを開きます。メニューから「ツイートを埋め込む」を選択します。開かれたページから「CopyCode」を選択。先ほどのHTMLコードの「ここにTwitter埋め込み」の文字を消し、そこにペーストをします。charset="utf-8"></script></div>Twitterアイコンが表示されない場合サンプルコードのアイコンはFontAwesomeのバージョン5を使っています。fa-twitter"></i>表示されない場合、バージョンが異なっているかFontAwesomeが読み込まれていない可能性があります。バージョンが異なる場合は下記コードに差し替えてください。fa-twitter"></i>JINを利用してる人はオリジナルアイコンでもOKです。JINオリジナルアイコン[jin_icon_twitter]埋め込みツイートのメディアを非表示にするには埋め込みツイートでメディアを消すにはパラメータを設定します。埋め込み用のHTMLコードを貼り付けた後に少し細工をします。前にあるblockquoteのタグに「data-cards=”hidden”(これはコピペしないでね)」を追加すればOKです。data-cards="hidden">埋め込みツイートでリプライ先を非表示にするにはリプライを埋め込むとリプライ先のツイートも一緒に表示されてしまいます。リプライ先を非表示にしたい場合もパラメーターを設定します。前にあるblockquoteのタグに「data-conversation=”none”(これはコピペしないでね)」を追加すればOKです。data-conversation="none">埋め込みツイートのCSSを変更する方法ここからは上級者向けです。一部のブラウザでは非対応となっています。埋め込みツイートはShadowDOMといって基本的に外部からスタイルが変更できません。変更するにはJavaScriptで変更する必要があります。(他にやり方があったら教えてください!)まずはツイートを表示させたい場所にHTMLを入力します。id=”tweet”></div>がツイートを表示させる場所になります。ツイッターのライブラリを読み込ませます。src="https://platform.twitter.com/widgets.js"></script>次にJavaScriptを入力します。id=”tweet”></div>のid名にしてください。ツイートIDはURLから調べられます。align:”center”やlang:”ja”はパラメーターです。こちらのサイトにまとめてあります。8行目から11行目で埋め込みツイートの「EmbeddedTweet」クラスにCSSを適用させています。これで埋め込みツイート自体のCSSが変更可能になりました。Twitter他にもコピペカスタマイズやってます他にもコピペでできるカスタマイズをやっているので良かったらご覧ください。あわせて読むコピペでできるブログカスタマイズまとめコピペでできるブログカスタマイズまとめ【HTML&CSS】ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。コメントをキャンセルメールアドレスが公開されることはありません。東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。