プロフィール文内にリンクを表示させる方法を解説します！
リンクのデザインを変えてボタンのように表示する方法も併せて紹介するのでぜひ参考にしてください。
サイドバーにプロフィールカードを設置
サイドバーにプロフィールカードを表示させるように設定します。
外観＞ウィジェット 画面へ移ります。
「利用できるウィジェット」内にある「STINGERプロフィールカード」をサイドバートップへ移動します。
これでサイトにプロフィールカードが表示されるようになりました。
プロフィール情報を編集
プロフィールカード内に表示させる内容を書いていきます。
プロフィール情報にHTMLタグを許可する
プロフィール情報にリンクを表示させたい場合はHTMLタグを書く必要がありますが、デフォルトではプロフィール情報にHTMLタグを書いてもそのまま表示されてしまいます。
まずはプロフィール情報にHTMLタグを使えるようにします。
AFFINGER管理＞投稿・固定記事＞この記事を書いた人 から「プロフィール情報にhtmlタグを許可する」にチェックを入れる
プロフィール情報を編集する
プロフィール情報に入力した内容がプロフィールカードとしてサイトに表示されます。
簡潔に100字～150字で入力すると読みやすく、見た目も綺麗になります。
1.プロフィール情報を入力
ユーザー＞プロフィール から「プロフィール情報」を編集します。
自己紹介文を入力して画面の一番下にある「プロフィールを更新」をクリックします。
ここで一度サイトを確認します。
このままだと改行されず読みづらくなってしまうので改行するHTMLタグを追加します。
2.プロフィール情報にHTMLタグを追加
改行してくれる <br> タグを改行を入れたい位置に入れます。
再度サイトを確認します。
改行が反映されていることが確認できました。
読みやすい位置で改行できるよう、改行したい位置に<br>タグを入れましょう。
3.リンク先のURLをHTMLタグを使って入力
続いてプロフィールカード内に表示させたいリンク先を入力します。
リンクを入れるHTMLタグは以下ように書きます。
HTMLタグ
これを自己紹介文の一番下に入力します。
サイトの表示はこんな感じです。
一番下にリンクが表示されました。
これでリンク表示は完了です。
デザインの変更
カスタマイズからCSSを追加し、デザインを変えていきます。
外観＞カスタマイズ＞追加CSS を開いて編集していきます。
文字を左寄せにするCSS
プロフィールカードはデフォルトで文字が中央寄せになっています。これでは読みづらいと思う方は左に寄せるのがおすすめです。
左寄せにするCSS
.st-author-description{
text-align:left;
}
リンクをボタン表示にするCSS
リンク表示がこのままでは味気ないのでボタン表示にします。
ボタン表示にするCSS
.st-author-description a{
display: inline-block;
width: 100%;
margin-top:15px;
margin-bottom:15px;
padding:15px;
color:#fff;
background-color:#e53935;
border-width:1;
border-radius:5;
font-size:18px;
font-weight:bold;
box-shadow:0 4px #c62828;
border-radius:5px;
text-decoration:none;
text-align:center
}
ボタンをキランと光らせるCSS
プロフィールカードに設置したボタンにもCSSアニメーションを設定することができます。
ボタンイメージ
ボタンを光らせるCSS
.customize-unpreviewable{
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.customize-unpreviewable::before {
content: '';
animation: shiny-btn 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
background-color: #fff;
width: 140%;
height: 100%;
transform: skewX(-45deg);
top: 0;
left: -160%;
opacity: 0.5;
position: absolute;
}
@keyframes shiny-btn {
0% {
left: -160%;
opacity: 0;
}
70% {
left: -160%;
opacity: 0.5;
}
71% {
left: -160%;
opacity: 1;
}
100% {
left: -20%;
opacity: 0;
}
}
まとめ
今回紹介したリンクボタンは実際にこのサイトのプロフィールカードに使用しています。
ぜひ参考にしてみてください。