Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
BEFORE
AFTER
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
横幅を小さくして、中央寄せにしています
FANBOX限定
背景プラス
![](https://for-men.jp/wp-content/uploads/2018/08/huki-wa-i.png)
うっすら背景を追加してみました
連続ver
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png)
色違いの背景を並べてみました!これだけでもちょっとおしゃれですね
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
![](https://for-men.jp/wp-content/uploads/2019/04/jikosekininn-160x160.png)
クラスックエディタとグーテンベルクでは、カスタマイズする流れが違います。
それぞれを別々に解説していきますので、迷わないようにしてくださいね( ˶ˆ꒳ˆ˵ )
準備 for クラシックエディタ
クラシックエディタでカスタマイズする流れを説明していきます。
投稿画面に記入するコードを細かく説明したあとに、カスタマイズするためのCSSコードを追加する3つの方法を紹介します。
投稿画面に書くコード
★
上のコードをコピーして、投稿画面のビジュアルエディタに貼り付けます。
![](https://for-men.jp/wp-content/uploads/2019/11/Image-12-1.png)
あとは、埋め込みたいTwitterのページを開いてURLをコピーしてきます。
![](https://for-men.jp/wp-content/uploads/2019/11/Image-11.png)
コピーしたURLを投稿画面の「★」部分に貼り付けます。
![](https://for-men.jp/wp-content/uploads/2019/11/twharituke.gif)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
ほほほい!これでショートコードで囲んだTwitterを埋め込みできたよ
注意TwitterのURLを貼り付ける場合は、前後に改行を入れましょう。
コードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
![カスタマイズを加速させる追加CSS](https://for-men.jp/wp-content/uploads/2018/09/カスタマイズを加速させる追加CSS-160x160.png)
追加方法 | 難しさ |
---|---|
追加CSS | |
テーマエディター | |
FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
CSSコードの追加 for クラシックエディタ
![ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«å㯠kopinosikata.png ã§ã](https://for-men.jp/wp-content/uploads/2018/08/kopinosikata.png)
コメントあり
/*--------------------------------------
Twitterカードの幅を調整、中央寄せ
--------------------------------------*/
.tw-box {
max-width: 400px;/*最大の横幅を調整*/
margin: 0 auto;/*中央寄せ*/
}
コメントなし
.tw-box { max-width: 400px; margin: 0 auto; }
確認する際は必ずキャッシュを削除してから見てください。
確認方法 |
---|
「Ctrl」+「F5」(キャッシュ削除) |
カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
![](https://for-men.jp/wp-content/uploads/2019/04/kyassyusakujo-160x160.png)
準備 for グーテンベルク
続いて、グーテンベルクを使っている人向けにカスタマイズの説明をしていきます。
「Twitterの埋め込みブロック」を追加して「高度な設定でクラス名」を追加します。その後、「CSSコード」を追加する流れです。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-wa-i.png)
クラシックエディタと比べると簡単ですよ
Twitterの埋め込みブロック
グーテンベルクでブロックの追加>埋め込み>Twitterを選択します。
![](https://for-men.jp/wp-content/uploads/2019/11/twburokkutuika.gif)
上の動画の流れでTwitterの埋め込みブロックが追加できます。
![](https://for-men.jp/wp-content/uploads/2019/11/Image-13.png)
ここに埋め込みしたいTwitterのURLをコピーして貼り付けます。
![](https://for-men.jp/wp-content/uploads/2019/11/Image-11-4.png)
![](https://for-men.jp/wp-content/uploads/2019/11/Image-14.png)
すると、Twitterカードが追加されます。
![](https://for-men.jp/wp-content/uploads/2019/11/Image-15.png)
高度な設定でクラス名を追加
Twitterの埋め込みブロックを選択すると、右のメニューに「高度な設定」が出てきます。
そこに今回のカスタマイズで使用するクラス名を追加します。
追加するクラス名tw-small
![](https://for-men.jp/wp-content/uploads/2019/11/Image-16-1024x410.png)
CSSコードの追加 for グーテンベルク
![ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«å㯠kopinosikata.png ã§ã](https://for-men.jp/wp-content/uploads/2018/08/kopinosikata.png)
コメントあり
/*--------------------------------------
Twitterの横幅調整と中央寄せ
--------------------------------------*/
.tw-small {
max-width: 400px;/*最大の横幅を400pxに指定*/
margin: 0 auto;/*中央寄せ*/
}
コメントなし
.tw-small {
max-width: 400px;
margin: 0 auto;
}
FANBOXの方限定
ファンボックスで応援してくれている方限定のカスタマイズになります。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
背景色がついておしゃれな感じになっています
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma3.png)
自分で言うな
くまからのお礼
本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)
もっとカスタマイズしたい人はこちらの記事を見てください。
![](https://for-men.jp/wp-content/uploads/2019/09/84c53e12efdc94956cb14977175bad0f-160x160.png)
まとめ・感想・雑談・こだわり
![](https://for-men.jp/wp-content/uploads/2018/08/huki-haa.png)
そう言えばぼく、あんまりTwitterの引用使ったことなかったよ
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma3.png)
いや、知らんし