僕のホームページ見てくれましたか?(圧)
そのホームページのデザインにこだわったのでテンプレートとして配布したいと思います(そこまでキレイではない)
下がホームページのスクショです。
結構こだわりました。
アイコンはルート直下に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フォローお願いします。(「ショボ！」と思わなくても...)