今回はプロフィール欄のカスタマイズを紹介したいと思います。
htmlとcssを両方いじる必要が出てきますので、その辺りをいじれる方向けのエントリーです。
でも、そんなに難しくないので興味の有る方は是非挑戦してみてください。
完成品
こちらがボタン部分の完成品です。ちょっとカーソルを持って行きたくなる動きをしてくれますよね。
「読者になるボタン」のコードをはったら表示がおかしくなったので、以下画像で紹介。
モジュールの「プロフィール」と入れ替えるため、最終的にはこれで完成となります。
参考元
アニメーションはこちらで紹介されていた↓を改変。
CSS
まずはCSS、その貼り付け場所はこちら。
デザイン→カスタマイズ→デザインCSSです。
以下コードです。コードをただ貼り付けるだけではなく、使用する画像のurlを挿入する必要があります。
.profile-circle { display: block; position: relative; width: 180px; height: 180px; border: solid 1px #ccc; /* 枠がいらない人はこの行を消す */ cursor: pointer; background: url(画像のurlを挿入する); background-size: 101%; background-position: top left; border-radius: 100%; margin: 10px auto; -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); } .profile-circle:hover { background-size: 115%; border:1px solid #ccc; /* 枠がいらない人はこの行を消す */ } .profile-circle:hover .outside { color: #222222; /* カーソルが重なった時の文字の色 */ -webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg); transform: rotate(-45deg) translate(0px) rotate(-315deg); background: rgba(255, 255, 255, 0.5); /* 重なった円の色と透過度 */ width: 180px; letter-spacing: 10px; padding-left: 10px; line-height: 180px; height: 180px; margin-top: -70px; margin-left: -90px; -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out; transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out; } .profile-circle .outside { display: block; position: absolute; line-height: 100px; text-align: center; letter-spacing: 4px; font-family: serif, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E"; padding-left: 4px; box-sizing: border-box; font-weight: 800; color: #fff; /* 文字の色 */ border-radius: 100%; width: 100px; height: 100px; background: #5d5d5d; /* 外側の円の色 */ left: 50%; top: 40%; margin-top: -50px; margin-left: -50px; -webkit-transform: rotate(-135deg) translate(-100px) rotate(135deg); transform: rotate(-135deg) translate(-100px) rotate(135deg); -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); }
以上のコードを貼り付けていただくのですが、先ほども述べた通り、必ず記述が必要な部分が画像のurlです。
画像は正方形のものを用意してくださいね。
必要に応じてfont-familyなんかも変更してください。デフォルト状態では明朝っぽいのを指定してありますよ。
htmlの張り方
ブラウザから現在の「プロフィール」部分のhtmlを抜き出して、適当なメモ帳に貼り付けて下さい。
必要な値はそこから取ると作業がしやすいかと思います。
htmlを参照するには、chromeだと「表示」→「開発/管理」→「ソースを表示」ですよ。
そしてサイドバーからモジュールの「プロフィール」を消して、モジュール「html」を代わりに入れます。
この一番下。「モジュールを追加をクリック」
この枠内に以下のhtmlをコピーして、任意の数値や文章を入力してカスタマイズして下さい。
タイトルには「プロフィール」と入力されると良いと思います。
html
<center><a href="aboutページのurlを挿入" target="blank"><b>名前</b>（id:アカウントid）</a></center> <div class="profile-circle"> <a href="aboutページのurlを挿入" target="blank"><div class="outside">about</div></a> </div><div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box"> <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div>
<div class="profile-description"> <p>ここに説明文を挿入</p> </div>
divタグをaタグで囲うのはhtml5ではアリということなので、ズボラしてそのまま実装しました。気になる方は作り込んでみて下さいね。
カスタマイズの方法
上のhtmlの入力が必要な部分を順にみていきます。
<p align="center"><a href="aboutページのurlを挿入" target="blank"><b>名前</b>（id:アカウントid）</a></p> <div class="profile-circle"> <a href="aboutページのurlを挿入" target="blank"><div class="outside">about</div></a> </div>
まずはここ。指定の通り、ご自分のaboutページのurlを挿入してください。アカウントidと書いてあるところにも、アカウントidを。aboutページのurlを挿入する場所は二箇所あるので下の方もお忘れなく。
<div class="profile-description">
<p>ここに説明文を挿入</p>
</div>
一番下にあります。サイトの説明文を書いてください。
作業が完了したら、元々の「プロフィール」をサイドバーから消してくださいね。
まとめ
少しわかりにくいかも知れませんが、作業としてはこんな感じ終了です。
分かりやすい説明をするって難しいですね。
ではでは…
