【Stork19】サイドバーにプロフィールを設置する方法

こんにちはユウスケです。

超悩む人
サイドバーにプロフィールを設置したいのだが、どうやってやればいいんだ?
名前
そんなの簡単ですよ。コピペでOKだからさっさとやってください。
この記事の内容
サイドバーにプロフィールを設置する方法

では、さっそく見ていきましょう。

【Stork19】サイドバーにプロフィールを設置する方法


Stork19にて、サイドバーにプロフィール欄を設置してみました。

Storkではデフォルトで記事下に「この記事を書いた人」を表示させる機能がついているのですが、どうしてもサイドバーに表示させたかったので自分で作ることにしました。

試行錯誤して完成したのが、次のプロフィール欄です。

至って普通のプロフィールですが、愛情はこもっています。では、順番にプロフィールのHTMLとCSSをみていきましょう。

プロフィールのHTML

HTMLは次の通りです。

  1. <div>
  2. <center>
  3. <img alt=“プロフィール” style=“border-radius:50%;” src=
  4. ここにプロフィール画像のURLを貼り付けてください。
  5. ” width=“180” height=“180”></center></div>
  6. <div class=“profile_name”>
  7.     <h4><span class=“under”>名前</span></h4>
  8. </div>
  9. <div class=“profile_p”>
  10. 自己紹介
  11. </div>

HTMLの貼り付け方法は「ダッシュボード」→「外観」→「ウィジット」と進んで「メインサイドバー」に「カスタムHTML」を追加してください。

そして、上でコピーしたコードを貼り付ければ大丈夫です。

※赤字の文を消し、「プロフィール画像URL」「お名前」「自己紹介文」を記入してください

プロフィールのCSS

プロフィールのCSSは次の通りです。

  1. /* プロフィール*/
  2. .profile_name{
  3. text-align:center;
  4. }
  5. /* 名前の下線*/
  6. .under{
  7.     text-decoration:none;
  8.     border-bottom:solid 3px black;
  9.     padding-bottom:15px;
  10. }
  11. /* 自己紹介文*/
  12. .profile_p{
  13.     font-weight:400;
  14.     width:80%;
  15.     margin-right:auto;
  16.     margin-left:auto;
  17. }

CSSの貼り付け方法は「ダッシュボード」→「外観」→「カスタマイズ」と進んでいき、1番下の「追加CSS」にコードを貼り付けてください。

まとめ

Stork19でサイドバーにプロフィールを設置する方法でした。Storkを使っている方なら、同じように表示されるはずなので試してみてください。

ここまで簡単な説明になってしまいましたが以上です。

>>>Stork19で使える『ボックスショートコード』を紹介【プラグインの使い方も解説】

>>>【Stork19】サイドバーにプロフィールを設置する方法

シェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です