【Cocoon】プロフィールボックスの文字とボタンのサイズをカスタマイズ

プロフィールボックス（スキンなし）に表示される文字とSNSボタンのサイズが小さくて読み辛い＆押しにくい気がしました。

ということで、文字とボタンを見やすい＆押しやすいように少し大きくしてみました。

基本情報

Cocoonの「プロフィールボックス」は、投稿者のプロフィール情報をウィジェットや投稿内に表示することができる機能。

WordPress管理画面の「ユーザー」→「プロフィール」に入力した名前と概要文（管理画面での項目名は「プロフィール情報」）、SNSへのリンクボタンなどが表示される。

以下のようなもの。

どんぱっぱ

当サイト管理人｜Windowsソフト・Androidアプリ・WordPressプラグインの使い方、読書感想、暮らしアイテムのレビュー・体験談など書いてます｜2014~2020年まで艦これ甲提督｜SF・本格推理小説、映画、アニメ、ビーグルがわりと好き

このプロフィールボックスの概要文部分やSNSボタンのサイズが、カスタマイズ前は小さかったので、少し大きくして見やすい＆押しやすいようにした。

プロフィールボックスを表示するショートコードの利用方法

ショートコードを用いてプロフィールボックスを記事本文中に表示する方法です。

wp-cocoon.com

プロフィール画像やプロフィール情報、SNSページを設定する方法

Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、...

wp-cocoon.com

大体こんな感じになる

概要文の文字サイズと、SNSボタンを大きくした。

その他、行ボックスの高さ（line-height）を少し高くしています。
また、サイドバー表示の方は、コンテンツ内の左右の余白（padding）を小さくしています。

設定方法

『Cocoon』の子テーマ『Cocoon Child』のスタイルシート「style.css」に設定を書き込んで文字やボタンのサイズを変更する。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページ...

wp-cocoon.com

GitHub - xserver-inc/cocoon-child

Contribute to xserver-inc/cocoon-child d...

github.com

スタイルシートの編集方法

スタイルシートの記述例

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* プロフィールボックス 余白 */
.nwa .author-box .author-content {
  padding: 0; /* 1em */
}

/* プロフィールボックス 行ボックス高さ */
.author-box p {
  line-height: 1.5; /* 1.3 */
}

/* プロフィールボックス ボタンサイズ */
.author-box .sns-follow-buttons a.follow-button {
  font-size: 36px; /* 18px */
  width: 48px; /* 24px */
  height: 48px; /* 24px */
  margin-bottom: 6px; /* 4px */
  margin-right: 6px; /* 4px */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

  /* プロフィールボックス 名前文字サイズ */
  .author-box .author-name {
    font-size: 17px; /* .9em; */
  }

  /* プロフィールボックス 概要文字サイズ */
  .author-box .author-description {
    font-size: 16px; /* .9em; */
  }

}

各コード

名前（ユーザー名）

/* プロフィールボックス 名前文字サイズ */
.author-box .author-name {
  font-size: 17px; /* .9em; */
}

概要（プロフィール情報）

/* プロフィールボックス 概要文字サイズ */
.author-box .author-description {
  font-size: 16px; /* .9em; */
}

行ボックス高さ

/* プロフィールボックス 行ボックス高さ */
.author-box p {
  line-height: 1.5; /* 1.3 */
}

SNSボタン

/* プロフィールボックス ボタンサイズ */
.author-box .sns-follow-buttons a.follow-button {
  font-size: 36px; /* 18px */
  width: 48px; /* 24px */
  height: 48px; /* 24px */
  margin-bottom: 6px; /* 4px */
  margin-right: 6px; /* 4px */
}

サイドバーでの余白

/* プロフィールボックス 余白 */
.nwa .author-box .author-content {
  padding: 0; /* 1em */
}