WordPress

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

WordPressテーマ『Cocoon』のプロフィールボックスの文字とボタンのサイズを調節した際の設定・備忘録記事です。

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

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

スポンサーリンク
スポンサーリンク

基本情報

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

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

以下のようなもの。

どんぱっぱ

『となはざな』へようこそ!
アプリ、オンラインサービス、通販アイテムのレビュー、読書感想、備忘録記事など色々書いてる雑記ブログです。

どんぱっぱをフォローする

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

環境情報
  • WordPress:6.1.1
  • Cocoon:2.5.3
  • Cocoon設定
    • スキンなし
    • サイトフォント:17px
    • モバイルサイトフォント:16px

大体こんな感じになる

上段・左側が変更前、下段・右側が変更後。pxはメディアクエリの横幅(width)。

481px以上での投稿内表示
481px以上でのサイドバー表示
480px以下の投稿内表示
480px以下のサイドバー表示

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

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

設定方法

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

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

  • WordPressの管理画面
    「管理画面」→「外観」→「テーマファイルエディター」→「編集するテーマを選択:Cocoon Child」→「スタイルシート(style.css)」
  • 利用しているレンタルサーバーのファイルマネージャー
    当サイトで利用しているmixhostだとcPanelのファイルマネージャー
  • 適当なFTPクライアントソフトとHTMLエディタ
    お好みで(『FileZilla』と『サクラエディタ』など)

スタイルシートの記述例

Cocoon子テーマ(Cocoon Child)のstyle.cssに書き込む際の例です。

font-size行でコメントアウト(「/* */」)しているのは元の数値です。

font-sizeの「○○em」や「○○px」の数値を変更してお好みでカスタマイズ可。

@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; */
  }

}

各コード

名前(ユーザー名)

480px以下のみに適用した。

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

概要(プロフィール情報)

480px以下のみに適用した。
投稿内テキストのフォントサイズと同じ大きさに指定。

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

行ボックス高さ

プロフィールボックス内のpタグにのみ適用した。

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

SNSボタン

元の2倍の大きさ。

/* プロフィールボックス ボタンサイズ */
.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 */
}

サイドバーでの余白

サイドバーに設置した際の名前・概要・ボタンの親要素「author-content」領域のpadding。

サイドバーのプロフィールボックス全体の内側余白を変更するなら「.nwa .author-box」。

/* プロフィールボックス 余白 */
.nwa .author-box .author-content {
  padding: 0; /* 1em */
}
スポンサーリンク
スポンサーリンク
この記事をシェアする
どんぱっぱをフォローする
サイト支援
当サイトでは読者の方からの寄付・支援を募っています。 記事が「おもしろかった」「役に立った」という方は、よろしければ支援をお願いします。
スポンサーリンク
となはざな
コメントの通知/購読設定
受け取る通知
guest
0 Comments
Inline Feedbacks
View all comments
タイトルとURLをコピーしました