ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑰サイト内にTwitterを埋め込むやり方と整えるCSS】

ブログ

こんにちわ
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回はサイトの中に自分のTwitterを
埋め込む方法を紹介していきます!

当ブログにはこのようにTwitterが
埋め込まれています。(フッター右側)

今回のカスタマイズ
  • Twitterを埋め込む設定
  • 埋め込んだTwitterを編集

サイト内に自身のTwitterを埋め込む方法

cocoonのスキンでは
Twitterを埋め込むことはできないため
Twitterは当然ながら表示されません。

今回のカスタマイズ
  • ウィジェットの設定
  • Twitterを埋め込む
  • 埋め込んだTwitterを
    編集する

ウィジェットの設定をする

やり方
  • wordpressメニュー
  • 外観
  • ウィジェット

  • テキスト横の▼
  • フッター右
  • ウィジェットを追加

ウィジェットに追加したら
https://publish.twitter.com/#を開きます。

中央の四角枠内に
Twitterの自分のユーザ名を入れます。

@toreblogが私のユーザ名なので
入力したらを押します。

ユーザ名を入力すると
画面が下へ移動します。(上の画像)

表示オプションを選択します。

左側の「埋め込まれたタイムライン」を選択。

「埋め込まれたタイムライン」選択後

カスタマイズオプションを設定する
を押します。

埋め込むサイズを設定します。

  • 570×400
  • 自動

そして更新を押します。

埋め込むサイズを設定し更新を押すと
またまた画面が上へ移動します。

「コードをコピーする」を押して
リンクをコピーします。

  • wordpressメニュー
  • 外観
  • ウィジェットに戻ります
  • 右のボックスのテキスト横の▼
  • テキストを押す
  • コピーしたTwitterコードを
    下のボックスに貼り付けます
  • 保存

■Twitterコードが取得できない場合
<a class=”twitter-timeline” data-width=”400″ data-height=”570″ href=”https://twitter.com/toreblog?ref_src=twsrc%5Etfw”>Tweets by yuji_lifechange</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

※黄色アンダーマーカー部を
 自身のユーザ名を入れてください
※data-width=”400″
 400の数字を変えて幅の変更ができます
 data-height=”570″
 570の数字を変えて縦の変更ができます

モバイル用のウィジェットを設定する

  • wordpressメニュー
  • 外観
  • ウィジェットに戻ります
  • 右のボックスの
    フッター(モバイル用)横の▼
  • テキスト横の▼
  • テキストを押す
  • コピーしたTwitterコードを
    下のボックスに貼り付けます
  • 保存

以上でウィジェットの設定は終わりだよ!

【コピペでOK!】埋め込んだTwitterのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

フッターメニューのCSSと同様になります。
フッターメニューのCSSを貼り付けてある
場合は追加CSSは不要になります。

フッターメニューのCSSを貼り付けていない場合は
以下のCSSをスタイルシートへコピペしてください。

スタイルシート用追加CSS

/************************************
**** フッター
************************************/
.footer-title{
color:#7b7b7b;
border-bottom:3px dotted;
border-color:#90C31F;
margin-bottom:1em;
}
#footer, #footer a{
color:#7b7b7b;
}
.widget-entry-cards .widget-entry-card-content {
color:#7b7b7b;
font-size:13px;
padding-left:.5em;
}
@media (max-width:1023px){
.footer {
margin-top: 0;
padding-top: 0;
}}
@media (max-width:880px){
.footer-title{
margin-top:2em;
}}
@media screen and (max-width: 480px){
h2, h3 {
font-size: 1.17em;
}
.widget-entry-cards .widget-entry-card-content {
line-height:1.3;
}
}
.footer-widgets, .footer-widgets-mobile {
margin: 0 auto;
}
.footer-left, .footer-center, .footer-right, .footer-mobile {
padding: 0 10px;
}
.widget.widget-footer-mobile{
padding:0;
}
aside#popular_entries-3.widget.widget-footer-mobile.widget_popular_entries div.popular-entry-cards.widget-entry-cards.no-icon.cf{
padding:0 .4em 0;
}
.widget-footer-mobile div.tagcloud,.widget-footer-mobile ul li a{
margin-right:.2em;
margin-left:.2em;
}
.source-org.copyright{/*Copyright文字色*/
color: #7b7b7b;
}

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

フッターメニューにTwitterが
スマホとPC画面の両方で
反映しているか確認をします。

フッターメニューに上の画像のように
Twitterが表示されていれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はTwitterの埋め込みについて
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

タイトルとURLをコピーしました