賢威のサイドバーにプロフィールを作成する方法

※当サイトにはプロモーションが含まれています。

ブログなどのサイドバーに、よく表示されているプロフィール欄。

にゃのらいと

賢威のウィジェットには「プロフィール」が作成できるものがないにゃ･･･

ワードプレスのテーマによっては、プロフィールが作成できるウィジェットがあるのですが、残念ながら賢威には用意されていません。

そんな悩みを解決するHTMLとCSSを紹介します。

なお、これを適用すると、このサイトのサイドバーにあるようなプロフィールが作成できます。

この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

サイドバーにプロフィールを作成するHTMLとCSS

賢威のサイドバーにプロフィールを作成するHTMLとCSSです。

なお、これらは、ウィジェット機能の「カスタムHTML」を使用することを想定して作成されています。

HTML

<div class="nya-profile-section">
<img src="（画像のURLをコピペで貼り付け）" alt="プロフィール画像" class="nya-profile-photo"> 
<div class="profile-title">（名前を入力）</div>
<p>自己紹介文を入力します。自己紹介文を入力します。自己紹介文を入力します。</p>
<p>２段落目です。２段落目です。２段落目です。</p>
<p>３段落目です。３段落目です。３段落目です。</p>
<p class="social-links">リンク等の説明<br />リンク等の説明</span></p>
<p class="social-links"><a href="URLのリンク">URLのリンク等を貼る</a></p>
</div>

CSS

.nya-profile-section {
padding: 0;
margin: 0;
}

.nya-profile-photo {
width: 160px;
height: 160px;
border-radius: 50%;
margin: 0 auto;
display: block;
}

.nya-profile-section div.profile-title {
text-align: center;
margin: 10px auto;
font-size: 1.6rem;
font-weight: 800;
}

.nya-profile-section p {
font-size: 13px;
line-height: 1.45;
}

.nya-profile-section p.social-links {
font-size: 12px;
text-align: center;
}

上記のコードについて少し説明します。

クラスnya-profile-photoで、プロフィール画像の設定をおこなっています。

widthとheightの数値を変更すると、円の大きさが変わります。

border-radius: 50%;を適用して画像を円の形にマスクして（隠して）います。

では、具体的な設定方法について説明していきます。

①プロフィールで使用する画像をアップロードする

まずは、プロフィールで使用する画像を「メディア > ライブラリ」にアップロードします。

なお、アップロードする画像サイズは、正方形サイズ（240×240）などがおすすめです。

実際にプロフィールで使用している画像です

②画像のURLをコピーする

画像のURLをコピーして、メモ帳などに貼り付けておきます。

③CSSを「追加CSS」に記載する

左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

.nya-profile-section {
 padding: 0;
margin: 0;
}

.nya-profile-photo {
 width: 160px;
height: 160px;
border-radius: 50%;
margin: 0 auto;
display: block;
}

.nya-profile-section div.profile-title {
text-align: center;
margin: 10px auto;
font-size: 1.6rem;
font-weight: 800;
}

.nya-profile-section p {
font-size: 13px;
line-height: 1.45;
}

.nya-profile-section p.social-links {
font-size: 12px;
text-align: center;
}

④HTMLを編集する

HTMLを編集します。

先程、コピーしたURLを、（画像のURLをコピペで貼り付け）の箇所に上書きします。

その他、適宜、自己紹介文などの文章を記載していきましょう。

下記は、実際のコードの記載例です。

※紹介していたコードを修正したので、画像のコードと少し違います

⑤ウィジェットの「カスタムHTML」にHTMLを貼り付ける

左メニューにある、

外観 > ウィジェット

を選択。

カスタムHTMLをサイドバーに追加します

カスタムHTMLに、先程、作成したHTMLを貼り付けて保存すれば完了です。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。

ご支援のお願い
この記事が役に立ったと感じたら･･･

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下のリンクからお買い物をしていただけると幸いです。

ご購入いただいた金額の一部（1～3％程度）が私に入り、より多くの有益な記事を作るための励みになります。

下記のリンクを通じて、Amazonや楽天でお買い物いただけると嬉しいです。

楽天でのお買物はこちら

Amazonでのお買物はこちら