プロフィールページのテンプレートを作ってみた！

2024年8月5日 20:27

僕のホームページ見てくれましたか?(圧)
そのホームページのデザインにこだわったのでテンプレートとして配布したいと思います(そこまでキレイではない)
下がホームページのスクショです。

アイコンはルート直下にprofile.jpgとしてアイコンを置いておけば一番上の丸アイコンが変えられます。また、拡張子がGifなどにしたい場合はソースコードから<img>からsrc属性変えてください。それから、このソースコードと全く同じ物を公開すると全員がウェブ完理になってしまうので少しテンプレートとして変えて公開します。

index.html

<!doctype html>

<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="robots" content="all">
		<link rel="stylesheet" href="style.css">
                <script src="script.js"></script>
		<title>[ペンネーム]</title>
                <link rel="icon" type="image/vnd.microsoft.icon" href="[favicon.icoのパス]">
	</head>

	<body>
        <a href="[アイコンをクリックしたときのリンク～SNSなどでも～]">
        <img src="[アイコン画像のパス]" id="icon" alt="アイコン画像">
        <div id="penname" style="color: []">[ペンネーム]</div>
        </a>
        <br>
        <div id="profile">
	<br>
        <h5 id="text">[プロフィール概要]</h5>
        <hr>
        <h5 id="text">
	<a href="https://example.com">リンク１</a>
	<br>
	<a href="https://example.com">リンク２</a>
    <!--この先はAタグとBRタグで自分で作ってください。-->
        </h5>
        </div>
        <!--この先は白の角丸プロフの次なので自分の作ったコンテンツでも...-->
        </body>
</html>

style.css

body{
    background-color: [背景色];
}

#icon{
    display: block;
    margin: 0 auto;
    border-radius: 100px;
    width: 10%;
    height: 10%;
}

#penname{
    display: flex;
    justify-content: center;
}

#small{
    width: 5%;
    height: 5%;
}

#profile{
    margin: 0 auto;
    background-color: white;
    width: 50%;
    border-radius: 30px;
}

#text{
    text-align: center;
}

a{
    text-decoration:none;
    color: [リンク文字の色];
}

script.js

/*テンプレートとしては使用していませんが編集して必要になった場合はどうぞ*/

と言った感じです。試しにAくん(仮想の人)を使用して作ってみます。
下が表示です。

これで終わりです(ショボ！)。
ソースコードはGitHubとCodePenにも公開しておきます。後、誰も使わないと思いますが、Aくんのソースコードも公開しておきます。

「ショボ！」と思ったら良いねと全SNSフォローお願いします。(「ショボ！」と思わなくても...)

【リンク等】
[テンプレート]
・GitHub
・CodePen

この記事が気に入ったらサポートをしてみませんか？