Udemyセール開催中! 対象コースが1,220円から

【SWELL】プロフィールのフォントサイズ・余白・行間を変更するCSS

本記事では「CSS」が分からなくてもコードをコピペするだけでOKです!

今回はワードプレステーマ「SWELL」のプロフィールウィジェットのフォントサイズや余白などを変更するCSSコードを紹介します。

SWELLのプロフィール文章はデフォルトだと文字が大きく、余白が少なかったので「マナブログ」のプロフィール文章をイメージしながら自分なりにアレンジしてみました。

目次

マナブログ風のプロフィール文章にするCSS

.p-profileBox__text{
  color: grey;
  font-size: 12px;
  line-height: 30px;
  margin: 20px 10px;
}

当ブログと同じカスタマイズにしたい場合は上記のCSSコードを使用します。

「外観 > カスタマイズ > 追加 CSS」または「外観 > テーマファイルエディタ > スタイルシート」にコピペすればOKです!

自分でデザイン・アニメーションをカスタマイズする

上記のCSSコードを自分でカスタマイズしたい人はこちらを参考にしてみてください。

文字色を指定

.p-profileBox__text{
  color: grey; /* 文字の色 */
  font-size: 12px;
  line-height: 30px;
  margin: 20px 10px;
}

「color」でプロフィール文章の色を指定できます。

今回は「grey(灰色)」にしていますが、カラーコード(#○○○○○○)を使用するのが一般的です。おしゃれなカラーコードは「Color Hunt」から入手できます!

フォントサイズ(文字の大きさ)を指定

.p-profileBox__text{
  color: grey; 
  font-size: 12px; /* 文字の大きさ */
  line-height: 30px;
  margin: 20px 10px;
}

「font-size」でプロフィール文章のフォントサイズ(大きさ)を指定できます。

文字の行間の高さを指定

.p-profileBox__text{
  color: grey; 
  font-size: 12px;
  line-height: 30px; /* 文字の行間の高さ */
  margin: 20px 10px;
}

「line-height」でプロフィール文章の行間の高さを指定できます。

文章外側の余白を指定

.p-profileBox__text{
  color: grey; 
  font-size: 12px;
  line-height: 30px; 
  margin: 20px 10px; /* 文章外側の余白 */
}

「margin」でプロフィール文章外側の余白を指定できます。

「margin: ○px」で上下左右全体に同じピクセル値だけ余白を作れ、「margin: ○px ○px」で上下、左右の余白を別で指定できます。

ブロガー必見!ブログ×プログラミングは相性抜群

ブログ運営しているとプログラミングに興味が湧いてくる方が多いはずです!

けど、プログラミングに一度も触れたことがない方にとって「難しいから自分にはどうせプログラミング無理」と思ってしまっている方がほとんどだと思いますが、実際は違います。

3日あればブログ運営に必要なプログラミングスキルは身につきます!

「嘘でしょ!」と思うかもしれませんが、私を含め一般的なブロガーに必要なプログラミングスキルとは、本記事でも紹介した「CSS」だけでなので早い人なら1日、長くても3日あれば基本的なCSSのスキルは習得できます。

また、プログラミングを知ることで「高単価案件」プログラミングスクールのアフィリエイト記事が書けるようになるのでブログネタを作るのにも役立ち「一石二鳥」です!

こんな感じのアフィリエイト記事が書ける↓

読者の方で「プログラミングとは何か?」「効率的な学習方法は?」など気になる方はプログラミングスクールの無料カウンセリングで相談してみるのがオススメです!

私は現時点で8つのプログラミングスクールの無料カウンセリングで話を聞いてきましたが、優良プログラミングスクールではカウンセラーさんの対応が丁寧で何度も質問できるので情報収集をするのにとても重宝しました。

未経験者で教養(ブログのため)でプログラミングを学ぶことに興味がある方は「侍エンジニア塾」または「テックアカデミー」の無料カウンセリングで話を聞いてみるのがオススメです!

  • URLをコピーしました!
目次
閉じる