綺麗なプロフィールを作成しよう！

はじめに

ブログサイトには必須と言える、プロフィール欄を今回は作成したいと思います！
綺麗にレイアウトを整えて、表示することによりブログの信用性なども向上すると思うので気合を入れて作っていきましょう！

完成プロフィール

私のプロフィール画像ですが、構成を簡単に下記にまとめます。

• 画像
• 名前
• 自己紹介
• ツイッター、github、Qiitaのリンク

では作っていきましょう！

Profileを作成

import { FaGithub, FaTwitter } from "react-icons/fa";
import { SiQiita } from "react-icons/si";

const profile = () => {
  return (
    <section className="shadow border border-blue-500 rounded-lg p-2 flex flex-col gap-6">
      <div>
        <div className="flex items-center justify-center">
          <img src="/next.svg" alt="井ノ口 孝輝" className="w-24 h-24 " />
        </div>
        <h2 className="flex items-center justify-center pt-2 pb-2 text-xl font-semibold">
          井ノ口 孝輝
        </h2>
        <p className="text-sm leading-relaxed mt-2">
          UI Lab Studioを運営中。Next.jsやTailwind
          CSSを中心に、モダンなUI/UX設計を探求しています。皆さんと成長していきたいと考えております。
        </p>

        <div className="flex justify-center items-center gap-4 mt-4">
          <a
            href="https://x.com/yourhandle"
            target="_blank"
            className="text-blue-500 hover:text-blue-800 transition"
          >
            <FaTwitter className="w-8 h-8 hover:text-black" />
          </a>
          <a
            href="https://github.com/takaki-inokuchi"
            target="_blank"
            className="text-gray-500 hover:text-gray-800 transition"
          >
            <FaGithub className="w-8 h-8" />
          </a>
          <a
            href="https://qiita.com/takaki-inokuchi"
            target="_blank"
            className="text-green-500 hover:text-green-800 transition"
          >
            <SiQiita className="w-8 h-8" />
          </a>
        </div>
      </div>
    </section>
  );
};

export default profile;

コードのポイントを説明していきます。ここではp-1,w-1,h-1などは割愛させていただきます。

ポイント

border border-blue-500

ボーダーを作成しています。next.jsではtailwindCssを使用して簡単に記述できるのが利点ですね。

rounded-lg

角丸を付けるクラスになります。md,lg,xl,2xlと大きくすることで角の丸さを調節できるので、試してみてください！

font-semibold

フォントの太さを変えることができるCSSです。よく使用されるのはfont-boldがあります。微調整をして整えたい方は調べてみましょう！

leading-relaxed

こちらは文章の行間を調節クラスです。長い文章でも読みやすく自動で行間を整えてくれるので文章を記述する際は必須になります。こちらも指定する方法がいくつかあり、relaxedはよく使われる行間の取り方の一つです。

アイコン設定

今回、Twitter、github、Qiitaのアイコンを作成するために「react-icons」を使用しています。
インストールは簡単で下記を使用してください。

npm install react-icons

react-icons使用方法

react-iconsを使用すると簡単にアイコンを使用することができます。下記がリストになるので参考にしてください。
https://react-icons.github.io/react-icons/?utm_source=chatgpt.com

URLをクリックし、自分好みのURLがあればクリックしてみましょう。そちらにimport方法が記載されており、インストールすることで使用が可能になります。

hover:text-gray-800

マウスを乗せることにより、色を変更するクラスになります。指定方法はテキストと一緒なので覚えやすくて助かりますね。

target="_blank"

これは aタグの属性でリンクを新しいブラウザタグまたはウインドウで開くための指定になります。ユーザーが元のページから離れずにリンクを見ることができるので、場合によって指定しましょう。

おわりに

アイコンやマウスをあてた際に色が変わったりするのは、私は結構感動して自分のブログを作る際は入れてみようとずっと考えておりましたので、今回は実装ついでに記事を書かせていただきました。

まだまだCSSの使用方法には無限の可能性があると思うのでオシャレで読みやすいブログサイトを作成していきたいと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼