- 投稿日：2024/07/04
- 更新日：2025/11/11
記事をお読み頂きありがとうございます。猫アイコンでおなじみのカーキスです。簡単に自己紹介😸させてもらいます。ウェブデザインの学校を卒業後、現在は自分のブログを立上げ中です。
今回はみんな大好き「リベシティ」のプロフィール枠をグラデーションで装飾する方法について解説していきます。テンプレートのコードを少し変えるだけで、簡単にカスタマイズできるので、ぜひ最後までお付き合いください😄。
1. リベのプロフを輝かせてみないですか？
あなたのプロフィールは、他のユーザーとどう違いますか？文章だけのプロフィールは、せっかくの自己紹介やアピールの場で損をしているかもしれません😭。
とは言え、プロフにCSSを使うのは難しいと思っている方も多いのではないでしょうか：
❌CSSやHTMLの知識がないため、プロフの枠をデザインするのが難しい
❌グラデーションやメタリックのカスタマイズがよくわからない。
今回は簡単にできる解決策をご紹介します。
2. カスタマイズ後のプロフ、ここまで輝きます🌟
この方法を使ってプロフィール枠をカスタマイズするとこんな感じになります。
見ての通り金と銀のグラデーションを使うことでかなりゴージャス感を得ることが出来ます。
しかも他のコードを使えばアニメーションで動かすことも可能です。
（興味ある人は私のプロフをご欄ください）
プロフの装飾で次のようなメリットがあります🌞：
✅ プロフィールが他のユーザーより目立つ。
✅ 慣れると簡単に枠デザインをカスタマイズできる。
✅ 表現が豊かになり、魅力的なプロフィールが作成できる。
詳しく見て行きましょう😄。
2.1 プロフィールが他のユーザーより目立つ
グラデーションやメタリックなデザインは、シンプルな枠と比べて非常に目を引きます。あなたのプロフィールが一際目立ち、他のユーザーの興味を引くこと間違いなしです✨。
一期一会が多く、毎日大量の人と会っている人でも、一発で覚えてもらえるでしょう。
2.2 簡単に枠デザインをカスタマイズできる
コードの中身を変更するだけで、自由に枠のデザインをカスタマイズできます。難しいプログラムを覚える必要はなく、基本的なコードの理解もなくても大体大丈夫です。もちろん内容を覚えると色やスタイルを自由に変更する楽しみが広がります。
2.3 自己表現が豊かになり、魅力的なプロフィールが作成できる
枠内に好きな文章を入れることで、あなたの個性をより豊かに表現できます。プロフィールが単なる情報の羅列ではなく、あなた自身を映し出す鏡のようになります。
例えば私の場合、ストレングスファインダーの上位資質の色が見事に緑とオレンジだったため、その二色をベースカラーに設定して作りこんでみました。
3. グラデーションを使ったプロフ枠の作り方🔥
それでは、グラデーションを使ったプロフィール枠を作る方法を解説します。CSSを含むHTMLコードになりますが、以下のコードの中に文章を入れるだけなので、初めての方でも簡単にできるのでご安心ください🔰。
3.1 金のプレート
🔧 実際に金のプレートのコードを使ってみます。最初の<div class...>から最後の</div>までがひとくくりとなります。
テンプレート
<div style="border-radius:10px;box-shadow:3px 3px 6px -2px #555;background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);padding: 12px;"><div style="font-size:20px;color:#fff;font-weight:bold;text-align:left; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">※ここにテキストを入れてください</div></div>
🔑 ポイント
・linear-gradient関数の中で、グラデーションの方向と色を指定します。この例では、金色でグラデーションを設定しています。
・中身を解説します。コード内の太文字の部分に注目してください。135degは反射の角度、#で始まる6桁のコードは色コード、%はそれぞれ左から見てどの位置でどの色に変わるかを意味しています。色コードは以下のＷＥＢサイトで詳しく出てますので色んな色や角度、位置を変えてみて試してみてください。（※コードの一部が消えると正しく作動しないので変える部分は注意してください）。
3.2 色コードを調べるＷＥＢサイト
原色大辞典
グラデーションパターン
ゴールドとシルバーのコード
グラデーションジェネレーター
以上のサイトの他にも色んなサイトがあります。
3.3 プロフ枠内にテキストを追加する方法
💡 枠内にテキストを入れたい場合は、上のテンプレートの「※ここにテキストを入れてください」の部分を変更してください。
※両側の空白はそのままにしてください。これを外すとサイズ幅が縮まります。
※他の記号を消さないようにしてください。
※次の段落に被る用でしたら、最後の</div></div>の後に何行か改行を入れて見て確認してみてください。
4. 最後に：プロフはリベの金看板！！
ここまでお読みいただきありがとうございます。今回は「リベシティのプロフィールにグラデーション枠を作る方法」について書かせて頂きました。
この方法で、あなたのプロフィールはより目立つようになり、個性を表現するための良い手段になるでしょう🌟。
なお、私のプロフが動くのはノウハウ図書館の記事を参考にさせて作らせて頂きました。
色々な色やデザインに挑戦することでも、十分楽しむことができますので、ぜひ試してみてください。
もしもこの記事がきっかけでプロフィールがより魅力的に、そして他のSNSでの表現も豊かになれば私も大変うれしいです。
感想やご質問、もっと知りたい内容などリクエストがございましたらレビュー欄に書いてもらえると嬉しいです📝。
皆様から頂いているレビューを励みにこれからも良い記事を書き続けられるよう精進していきます。またのお越しをお待ちしております。
記事一覧リンク
※記事リストはリンクを開いた記事の一番下にあります。
⇒時短・効率化の記事リスト
⇒カテゴリー別記事一覧
※人気記事ランキングはこちらから
🛠 パソコンやスマホの「ちょっと困った」を、気軽に相談しませんか？
ノウハウ図書館で情報を得ても「自分の場合はどうしたらいい？」と感じること、あると思います。
「これって、どこをクリックすればいいの？」
「使い方は合ってる？」
マンツーマンで一緒に確認・解決しましょう！
✅ PC・スマホの基本操作
✅ 各種アプリ・サービスの初期設定
✅ Googleサービス、家計簿アプリや1Passwordの使い方
✅ トラブル時の対処法 など
あなたの操作画面を一緒に見ながら、
リラックスした雰囲気でサポートします😊
「まずは聞いてみようかな」そんな気軽さでどうぞ！
👉【家計・AI・1Passも！】PC・スマホ操作＆初期設定サポート
（オンライン・Meets）
