WordPressプロフィール背景色をグラデーションさせる【Cocoon】

WordPressプロフィール背景色をグラデーションさせる【Cocoon】ブログカスタマイズ

WordPressでブログをしている方の多くは著者の紹介をプロフィール欄を使っています。

プロフィール欄はブロガーの個性を表す大事なパーツです。

できるだけ自分好みにカスタマイズしたいと思う方もいるのではないでしょうか。

カスタマイズするならCSSで背景色の変更をすることが手っ取り早いです。

今回はひと手間を加えて、背景色がグラデーションを描くようにするCSSを紹介します。

色を試すことができるフォームも用意してみました。最適な色探しも合わせてどうぞ!

なお、当ページで紹介する方法はCocoon基準です。WordPressテーマによって設定ページや操作が異なる場合があります。

広告
そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

プロフィール欄とは

プロフィール欄とは

プロフィールの説明は本題ではないのですが、長くなってしまったので読みたい方は+を押してください。

ブログを運営している著者の紹介をするパーツです。

表示されるのはWordPressの管理画面から設定された内容です。

画面遷移

WordPress管理画面→ユーザー→プロフィール

WordPress管理画面→ユーザー→プロフィール
表示されたプロフィールを選択

固定ページを使ったプロフィールを掲載しているサイトも多いですが、今回のカスタマイズ対象はウィジェットのプロフィールです。

ちなみに当サイトのプロフィール欄はこちら。(ウィジェットではなくショートコードで表示しています。)

そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

このようにウィジェットだけでなくショートコードで表示した場合もカスタマイズの反映対象になります。

プロフィール欄を表示する方法

ウィジェットとショートコードから表示することができます。

ウィジェットの場合は次の手順で設定できます。

  1. WordPress管理画面→外観→カスタマイズを選択
  2. ウィジェットを選択
  3. 表示したい場所を選択し、プロフィールを選択([C]はCocoonのウィジェットを表します。)
  4. 適宜設定し、「公開」を押すと反映される
WordPress管理画面→外観→カスタマイズを選択
カスタマイズを選択
ウィジェットを選択
ウィジェットを選択
表示したい場所を選択し、プロフィールを選択
表示したい場所を選択し、プロフィールを選択
適宜設定
適宜設定

WordPress管理画面→外観→ウィジェットからも編集できますが、カスタマイズから編集した方がプレビューを見ることができるのでおすすめです。

ウィジェットの場所がどこを指しているか分からない場合はウィジェットエリアのデモページが分かりやすいです。

完成イメージ

完成イメージ

下の図のような感じになります。青から白にグラデーションして空っぽさをイメージしてます。

プロフィールをグラデーションにする完成イメージ

もちろん赤から青など色は好きなものに変更可能です。

カスタマイズ手順

カスタマイズ手順

カスタマイズの手順は次の4ステップです。

カスタマイズ手順
  • WordPress管理画面でstyle.cssエディタを開く

  • CSSをコピーする
  • style.cssに貼り付ける
  • 保存を押す

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

WordPress管理画面でstyle.cssエディタを開く

まず普段通りにWordPressにログインしてください。

次の順番で画面を移動してください。

画面遷移

外観→テーマエディタ→style.css

外観にマウスを当てるとサブメニューが出ます。テーマエディタを選択してください。

子テーマ(Cocoon-child)のstyle.cssを開いてください。(画像付きの手順

CSSをコピーする

以下のCSSをコピーしてください。Copyボタンを押すと簡単にコピーできます。

また、色を調整できるお試しフォームがあります。色を変えたい場合はこちらを利用すると便利です。

/* プロフィールの背景色を変える 開始 */
.author-box {
  background: -moz-linear-gradient(top, #8ED1E0, #FFF); 
  background: -webkit-linear-gradient(top, #8ED1E0, #FFF); 
  background: linear-gradient(to bottom, #8ED1E0, #FFF);
}
/* プロフィールの背景色を変える 終了 */
Copy

style.cssに貼り付ける

先ほど開いたテーマエディタのstyle.cssに貼り付けます。

貼り付ける場所はファイル内の任意の場所ですが、他のコードの間に貼り付けないように注意してください。(画像付きの貼り付け箇所例

保存する

画面下部にあるファイルを更新ボタンを押してください。

緑色の枠で「ファイルの編集に成功しました。」と表示されたら完了です。

ファイルの編集に成功しました。

プロフィール欄を置いたページで動作を確認してください。

CSS解説

解説する人

今回紹介したCSSを簡単に解説します。

アレンジなどの参考にしてください。

/* プロフィールの背景色を変える 開始 */

/* プロフィールの背景色を変える 終了 */

コメントアウトといいます。コードとして認識されません。メモやバックアップに使います。自分の分かりやすいように変更してかまいません。

「/*」と「*/」の間にあるコードが該当します。改行にも対応しています。

.author-box {

}

.author-boxはクラス名といい、CSSを適用する対象を指定します。今回はプロフィール欄を指定しています。この名前はCocoonで設定された名前です。

  background: -moz-linear-gradient(top, #8ED1E0, #FFF); 
  background: -webkit-linear-gradient(top, #8ED1E0, #FFF); 
  background: linear-gradient(to bottom, #8ED1E0, #FFF);

backgroundは背景を指定します。色以外にも画像などを指定することもできます。

linear-gradientは色をグラデーションにするコードです。(to 方向, 開始色, 終了色)

1,2行目はベンダープレフィックスといい、色んなブラウザやバージョンに対応させるために書くコードです。(開始位置, 開始色, 終了色)

3行目がグラデーションをかける方向を指定するのに対して、1,2行目はグラデーションの開始位置を指定します。

今回紹介したグラデーションは上から下ですが、左から右など方向を変えることもできます。

また使用する色も2色ですが、3色以上のグラデーションも可能です。

カスタマイズお試しフォーム

カスタマイズお試しフォーム

色のイメージは実際にCSSを当ててみないと分かりにくいため、簡単なお試しフォームを用意しました。

色を変えて反映ボタンを押すと下にあるプロフィールとコードに反映されます。

閲覧しているブラウザによってはカラーピッカーではなくテキスト入力欄が表示されます。その場合は原色大辞典などから色を取得するのがおすすめです。

そらしど

本業はWebプログラマー
Cocoonのデザインをカスタマイズしたり、有料テーマの再現をしたりします。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー
/* プロフィールの背景色を変える 開始 */
.author-box {
  background: -moz-linear-gradient(top, #8ED1E0, #FFF); 
  background: -webkit-linear-gradient(top, #8ED1E0, #FFF); 
  background: linear-gradient(to bottom, #8ED1E0, #FFF);
}
/* プロフィールの背景色を変える 終了 */
Copy

CSSコピペ後の手順へ

当サイトで掲載しているソースコードについて

この記載はプライバシーポリシーからの抜粋です。

著作権およびライセンス

ブログに掲載されている、ブログ管理者(そらしど)が本来権利を有するソースコードについては、ライセンスをCC0とします。

商用・非商用を問わず自由に利用していただいて構いません。その際の連絡も不要です。

免責事項

当サイトに掲載しているカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についても当サイトその責任を負いかねます。何卒ご理解、ご了承の上、当サイトをご活用いただきますようお願い申し上げます。

まとめ

プロフィール欄の背景色をグラデーションさせるカスタマイズ方法を紹介しました。

お試しフォームを使って、自分好みのカスタマイズの助けになれば幸いです。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど
そらしど

最後まで読んでいただきありがとうございました。


1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

関連のおすすめ記事

コメント

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