Cocoonの吹き出しアイコンサイズの変え方!コピペで簡単に解決

目安時間 15分
ブログ初心者
ブログ初心者

・Cocoonの吹き出しアイコンが、スマホだと小さい

・スマホだと、アイコンの名前が2段に分かれてしまう

この記事では、このような悩みを解決します。

 

 

私もCocoonを使っていて、先日この問題を解決しました。
岩永
岩永

 

 

ワードプレスの無料テーマCocoonは、無料でありながら有料級の機能を有しており、私も2020年1月にSimplisity2から変更しました。

 

 

どちらのテーマも、わいひらさん(@MrYhira)が作成されたものです。

 

シンプルながらも多機能であり更にカスタムも豊富で、とても人気の高いテーマになります。

 

 

そんなCocoonの便利な機能の中に、吹き出しがあります。

 

 

私は今までプラグインで吹き出しを使用していましたが、これがテーマに実装されていることに驚きました!

 

そして使っていく内に、吹き出しアイコンの大きさがPCとスマホで違うことに気が付いたんです。

 

 

それと「じろーパパ」という5文字だとPCでは問題ありません。

 

しかしスマホ表示だと、アイコンの名前が2段に分かれてしまうので何とかしたいと思い調べてみました。

本記事の内容

  • 吹き出しのアイコンサイズを変える
  • 吹き出しの文字サイズを変える


本記事のCSSコードをコピペ(コピー&ペースト)するだけで、アイコンも吹き出しの文字の大きさも変えることが出来ます。

 

そしてCSS内の数値を変えることで、好みの大きさに調整できます。

 

本記事の信頼性

  • ワードプレスでブログを、約1年4カ月続けています
  • Cocoonのテーマを使用していて、少しずつカスタマイズしています


今回はブログ初心者の方にも分かりやすいように、画像付きで解説していきます。

 

CSSと聞いてちょっと怖いなって思うかもしれませんが、手順通りに進めていけば簡単に出来ますのでチャレンジしてみて下さい。

 

 

では早速、アイコンの大きさを変える方法から見ていきましょう。

 

 

ポイント

CSSのカスタマイズする時は、バックアップを取ってから作業するようにしましょう。尚、Xサーバーなら毎日自動でバックアップを取ってくれています。手動でバックアップしたい時は、コチラを参考にバックアップを取りましょう。
⇒Xサーバー手動バックアップそれ以外のサーバーの場合は「サーバー名 手動バックアップ」で検索して下さい。

目次、表示、非表示

アイコンの大きさを変える方法

Cocoonアイコンサイズ

PCだと丁度良い大きさのアイコンですが、デフォルト(標準)サイズだとスマホ画面では少し小さく感じます。

 

【 デフォルトのアイコンサイズ 】

  • P C   : 12%
  • スマホ:16%

 

この%表記というのは、メインカラム(本文記事の横幅)に対して何%で表示するかの数値です。

 

一見するとスマホの方が大きいアイコンなのかな?と思われるかもしれませんが、PCの画面の方がはるかに大きいのでこの数値になっています。

 

 

ここの数値を変えるだけで、アイコンサイズを変えることが出来ます。

 

 

しかし今回は、パーセントだと分かりにくいので、px数で調整してみました。

 

もちろんpxの所を%に変えてもサイズ変更出来ますので、そこはお好みでどうぞ!

 

では早速やってみましょう!

  1. 【 外観 】⇒【 テーマエディター 】
  2. 【 テーマの編集 】Cocoon Child:Stylesheet(style.css)
  3. 本記事からCSSをコピー&ペースト
  4. 【 ファイルを更新 】

では順番に説明しますね。

 

1.【 外観 】⇒【 テーマエディター 】

テーマエディター

 

まずワードプレスの管理画面の左側にある【 外観 】をクリックします。

 

そうすると右側に選択肢が出てきますので一番したにある【 テーマエディター 】を選択して下さい。

 

2.テーマの編集 Cocoon Child:Stylesheet(style.css)

テーマの編集

 

そうすると画像のような【 テーマの編集 】画面に切り替わります。

 

Cocoon Child:stylesheet (style.css)という表記になっていますが、これはCocoonの子テーマのスタイルシートという意味です。

 

間違えて親テーマにしないよう注意して下さいね。

 

CSSをいじる時は、必ず子テーマのスタイルシートで行いましょう。

 

(子テーマ用のスタイルを書く)という欄の下の空いている所に、今回のCSSをペーストします。

 

 

すでに何かCSSコードを入れている場合は、下にスクロールして、最後の方に入れるようにしましょう。
岩永
岩永

 

3.本記事からCSSコードをコピー&ペースト

/*吹き出しアイコンサイズPC*/
.speech-person {
    width: 90px;
}
/*吹き出しアイコンサイズスマホ*/
@media screen and (max-width: 480px){
  .speech-person {
    width: 60px;
    min-width: 60px;
  }
}

このCSSコードを全てコピーして、ペースト(貼り付け)して下さい。

 

CSS貼り付け

 

PC用とスマホ用に分けてあります。

@media screenと書いてある方がスマホ用です。

 

PCが不要の場合は、スマホ用だけ張り付けても大丈夫です。
岩永
岩永

 

4.【 ファイルを更新 】

ファイルの更新

 

エラー等が出なければ、【 ファイルを更新 】して完了です。

お疲れさまでした。

 

ちなみにCSSの意味は以下の通りです。

 

width:アイコンのサイズ

min-width:画面サイズが小さい場合の最低表示サイズ

 

この数値がデフォルトだと50pxになっています。

50サイズ
そしてコチラが60pxにしたもの↓
60サイズ
これが70pxにしたものです↓
70サイズ
私は見比べてみて、widthとmin-widthを60pxに合わせました。

 

あまり大きくし過ぎると、吹き出しが小さくなってしまうので、バランスを見ながら調整しましょう。

 

 

次に文字サイズの変更のやり方をみてみましょう。

 

吹き出しの文字サイズの変え方

2段に分かれた名前
このように名前が5文字以上の時、文字サイズが小さいと2段に分かれてしまいます。

 

せめて1段目に「じろー」そして2段目に「パパ」ならまだ良いのですが、さすがにこれでは変なので変えました(;^_^A

 

これも先ほどと同じ手順で大丈夫なのですが、張り付けする場所が少し違います。

 

貼り付けするCSSコードはコチラです↓

/*吹き出しスマホ用文字サイズ*/
 .speech-wrap {
 font-size: 15px;
  }

これをテーマ編集の下の方にある「レスポンシブデザイン用メディアクエリ」の欄の480px以下の欄にペーストします。

 

レシポンシブデザイン用メディアクリエ

 

ここの下の方に各pxごとに貼るスペースが用意されています。

 

スマホの場合は「480px以下の欄」です。

 

スマホ用

 

ここの「font-size(フォントサイズ)」がデフォルトで14pxになっています。

 

それを15pxにすると、吹き出し内の文字とアイコン下の文字が少し大きくなって、2段に分かれていた問題が解決しました!

 

ついでなので、タブレット用のCSSコードも置いておきますね。

/*吹き出しタブレット用文字サイズ*/
.speech-wrap {
font-size: 17px;
}

このCSSコードを「834px以下の欄」に張り付けて下さい。

 

実際にタブレットで見ながら、font-sizeの数値を変えて調整して好みの大きさに変えましょう。

 

タブレット用

 

このようにCSSコードをコピペして数値を変えるだけで、吹き出しの文字の大きさも簡単に調整することが出来ます。

 

PC用の数値を変えた場合

あまり必要ではないかも知れませんが、PCでの表示サイズを変えた場合の比較画像だけ載せてますね。

 

PC画像サイズ90

 

これでアイコンサイズは90pxです。

 

PCサイズ100
これで100pxです。

 

あまり大きくするとバランスが悪くなりますので、私的には90pxくらいが丁度良いと考えています。

/*吹き出しアイコンサイズPC*/ 
.speech-person {
 width: 90px;
 }

この90pxという数値を変えるとサイズが変わります。

 

PCでどうしてもサイズを変えたい時は活用してみて下さい。


gaityu336.png

フルオートメーション戦略ブログ構築プログラム

 

まとめ

 

まとめ

いかがだったでしょうか?

 

Cocoonの吹き出しは気に入っているけど、アイコンや文字のサイズを変更したい!という方向けに書いてみました。

 

私自身この問題を解決しようと沢山の記事を読みましたが、どうもスッキリ解決しなかったので新たにシンプルで分かりやすいCSSコードにしました。

 

全てコピペで出来ますので、ぜひお試ししてみて下さいね!

 

ちなみに私はこのサイズにしてあります。

 

【 アイコンサイズ 】

  • P   C : 90px
  • スマホ:60px

【 吹き出し文字サイズ 】

  • タブレット:17px
  • スマホ  :15px

 

Cocoonというテーマは実に使いやすく、こうやって少し手を入れてやると更に使いやすくなります。

 

特にブログ初心者さんにオススメのテーマですよ!

 

⇒Cocoonテーマのダウンロード

この記事がお役に立てば幸いです(^^♪

 

 

 

毎日メルマガ好評配信中です!

 

ささやかながらプレゼントもご用意しております。

 

無料で登録できますので、ぜひご購読下さい。

 

 

 

以下にメールアドレスを入力しお申し込みください

お名前(必須)  
メールアドレス(必須)

※プロバイダーアドレスでは、メールが受け取れない場合がございますので、
Hotmail以外のYahoo、Gmailなどのフリーメールアドレスでの登録をお薦めいたします。

人気ブログランキング

ブログランキングに参加しています。

応援して頂けると嬉しいです!

 

この記事に関連する記事一覧

    コメントフォーム

    名前 

     

    メールアドレス 

     

    URL (空白でもOKです)

     

    コメント

    CAPTCHA


    トラックバックURL: 
    僕が実践中の教材L2はコチラ↓

    L2バナー

    プロフィール

    岩永ゆるアイコン
    長崎出身、静岡在住の岩永(@JIRO_PAPA_BLOG)と申します。

     

    グーグルアドセンスのブログを2018年10月より運営しております。

     

    2020年3月より、外注化を取り入れ作業の効率化を図っているところです。

     

    アドセンスブログで、月に1万円稼ぐ方法をお伝えしています。

    管理人の詳しいプロフィールはコチラ↓

    ⇒管理人の詳しいプロフィール

     

     

    カテゴリー
    アーカイブ
    最近の投稿
    人気ブログランキング

    ブログランキングに参加しています。

    応援して頂けると嬉しいです!

     

    固定ページ