• HOME
  • WEBデザイン
  • ブログのサイドバーにプロフィール表示する方法まとめ-コピペOK

ブログのサイドバーにプロフィール表示する方法まとめ-コピペOK

WEBデザイン

「パソコンでブログを表示したときに、サイドバーにプロフィールを表示したい!!」って疑問を、解決していきます。

ブログを書いている人のプロフィールが、サイドバーに掲載されていると、安心しますよね。生産者のみえる野菜のように、温かみを感じるんですよ。

ただプロフィール画像や文章を、サイドバーに掲載しようと思っても...HTML・CSS を書く必要があるので、初心者にはむずかしいかもしれません。

助手くん
助手くん
背景画像のうえに、どうやって顔の画像をのせるの?
助手ちゃん
助手ちゃん
スペースの少ないプロフィール欄にしたい!
それなら、わたしがコピペ OK なプロフィール例を、作ってあげましょう!!
サウンドオルビス
サウンドオルビス

というわけで今回は、ブログのサイドバーに、プロフィールを表示させる方法を、まとめてみました。

【まとめ】ブログのサイドバーに、プロフィール表示する方法【コピペOK!!】

Blogsidevar profileadd

ブログのサイドバーにプロフィール表示する方法を、ご紹介いたします。

FC2 でブログをはじめて、Seesaa・Blogger・WordPress とわたりあるいてきました。

そんなプロブロガーのわたしが、独学で学んできた知識全開で、ブログのサイドバーにおすすめのデザインをまとめていきます。

サウンドオルビス
サウンドオルビス
もしあなたのブログで動かなかったら...そんときは、ゴメンちゃい!!笑

パターン1:背景画像の上に、プロフィール画像

プロフィール背景画像
プロフィール画像
ここに、プロフィールの文章を書いてください。300px の幅で、フォントサイズを 13px に CSS で設定してあります。100文字ぐらいの文章量だと、こんな感じの見た目。参考にしてみてくださいね!
HTML
<div class="profile-wrapped">

<div class="profile-image">
  <img src="背景画像URL.jpg" alt="プロフィール背景画像" />
  <img src="顔画像URL.jpg" alt="プロフィール画像" class="profile-face" />
</div>

<div class="profile-box">
<div class="profile-name">
名前:<a href="プロフィール詳細URL">あなたの名前を入力</a>
</div>

<div class="profile-text">
プロフィールの文章
</div>
</div>

<div class="profile-sns">
<a href="Twitter の URL">Twitter</a>
<a href="Instagram の URL">Instagram</a>
<a href="YouTube の URL">YouTube</a>
</div>
</div>
CSS
.profile-wrapped {
  border: 1px solid #333;
  margin-bottom: 20px;
  width: 300px;
}
.profile-image {
  position: relative;
  height: 210px;
}
.profile-face {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 40%;
  border-radius: 50%;
}
.profile-name {
  font-size: 18px;
  font-weight: 700;
}
.profile-text {
  font-size: 13px;
  line-height: 1.8;
}
.profile-sns a {
  display: block;
  padding: 5px 15px;
  border-top: #dddddd 1px solid;
  color: #666666;
  font-size: 15px;
}
.profile-box {padding: 15px;}
コメント

背景画像に、プロフィール画像のアイコンを重ねるタイプですね。もっともシンプルに、サイドバーのデザインにマッチするでしょう。

サイドバーは、300px を想定しています。環境に合わせて、数値をカスタマイズしてみましょう!!いじるのも、勉強になりますよ。

パターン2:省スペースのプロフィール

ここに、プロフィールの文章を書いてください。300px の幅で、フォントサイズを 13px に CSS で設定してあります。100文字ぐらいの文章量だと、こんな感じの見た目。参考にしてみてくださいね!
HTML
<div class="eprofile-wrapped">

<div class="eprofile-set">
<div class="eprofile-image">
<img src="プロフィール画像URL.jpg" alt="プロフィール画像" class="eprofile-face" />
</div>

<div class="eprofile-name">
<a href="プロフィール詳細URL">あなたの名前を入力</a>
</div>
</div>

<div class="eprofile-text">
プロフィールの文章
</div>

<div class="eprofile-sns">
<a href="TwitterのURL" class="etwitter">Twitter</a>
<a href="InstagramのURL" class="eInstagram">Instagram</a>
<a href="YouTube の URL" class="eYouTube">YouTube</a>
</div>

</div>
</div>
CSS
.eprofile-wrapped {
  border: 2px dashed #333;
  padding: 15px;
  width: 100%;
  max-width: 300px;
}
.eprofile-set {
  display: flex;
}
.eprofile-image {
  width: 30%;
}
.eprofile-face {
  border-radius: 50%;
}
.eprofile-name {
  font-weight: 700;
  font-size: 18px;
  line-height:80px;
  text-align:left;
}
.eprofile-text {
  line-height: 1.8;
  font-size: 13px;
}
.eprofile-sns a {
  display: inline-flex;
  color: #666666;
  font-size: 15px;
}
.etwitter:before{
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  content: '\f099';
}
.eInstagram:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  content: '\f16d';
}
.eYouTube:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  content: '\f167';
}
コメント

SNS のアイコンに、Font Awesome を使用しました。無料で使えるのに、種類も豊富にあって便利なんですよね。導入方法は「Font Awesome5の使い方を徹底解説!」を、参照してください。

パターン3:詳しいことは、リンク先で!!レスポンシブ対応

プロフィール背景画像
プロフィール画像
あなたの名前を入力
ここに、プロフィールの文章を書いてください。300px の幅で、フォントサイズを 13px に CSS で設定してあります。100文字ぐらいの文章量だと、こんな感じの見た目。参考にしてみてくださいね!
HTML
<div class="lprofile-wrapped">

<div class="lprofile-image">
  <img src="https://soundorbis.com/wp-content/uploads/2020/07/prof-background-monopiano.jpg" class="lprofile-back" alt="プロフィール背景画像" />
  <img src="https://soundorbis.com/wp-content/uploads/2020/06/shiro-kao.jpg" alt="プロフィール画像" class="lprofile-face" />
</div>

<div class="lprofile-box">

<div class="lprofile-name">あなたの名前を入力</div>

<div class="lprofile-text">
ここに、プロフィールの文章を書いてください。300px の幅で、フォントサイズを 13px に CSS で設定してあります。100文字ぐらいの文章量だと、こんな感じの見た目。参考にしてみてくださいね!
</div>

</div>

<div class="lprofile-sns">
<a href="プロフィール詳細URL">詳しいことは、こちら</a>
</div>

</div>
CSS
.lprofile-wrapped {
  margin-bottom: 20px;
  width: 100%;
}
.lprofile-image {
  position: relative;
  border: 3px solid #333;
  margin-bottom: 20px;
}
.lprofile-back {
  width: 100%;
}
.lprofile-face {
  position: absolute;
  border: 3px solid #333;
  left: 30%;
  top: 40%;
  width: 40%;
  border-radius: 50%;
}
.lprofile-name {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.lprofile-text {
  font-size: 13px;
  line-height: 1.8;
  margin: 10px 0;
}
.lprofile-sns {
  text-align: center;
}
.lprofile-sns a {
  display: inline-block;
  padding: 5px 15px;
  border: #666666 1px solid;
  background: #333333;
  color: #ffffff;
  position: relative;
  border-radius: 3px;
  color: #ffffff;
  font-size: 15px;
}
.lprofile-sns a:after {
  content: "\025b6";
  position: absolute;
  font-size: 10px;
  top: 30%;
}
.lprofile-box {
  padding: 15px;
}

コメント

レスポンシブでも、デザインが崩れないパターンです。シンプルかつ、ちょっとおしゃれな印象なので、どんなデザインのブログにでも合いそうですね。

SNS ボタンがなく、詳しいことはすべてリンク先に任せるパターン。個人的に、好きなんですよ。ミニマリストっぽくて、よくないですか?

モバイルファーストだけど、デスクトップデザインもこだわろう!!

時代はモバイルファーストですが、デスクトップデザインもこだわりましょう!!

その理由は、ズバリ...ブログへの愛いですよ、愛!!

モバイル版では、読み込み速度や意味もなく長くなってしまうなどの理由から、サイドバーを表示させない場合が多いですよね。

ですがこれからは、在宅での仕事が増えていくことが予想され、パソコンでウェブサイトを閲覧する人の需要も、しばらく続くと予想できます。

そんなタイミングで、デスクトップ版のサイトのデザインにこだわらないのは、機会損失になりかねません。サイドバーにも、こだわりのプロフィールウィジェットをつくって、読者にアピールしていきましょう。

今回紹介したサイドバープロフィールの HTML は、参考にしていただいて問題ありません。あなただけのオリジナルなサイドバーウィジェットを作ってみましょう!!

【関連】【まとめ】ブログのサイドバーに、プロフィール表示する方法【コピペOK!!】

ブログのサイドバーにプロフィール表示する方法まとめのあとがき

ブログのサイドバーにプロフィール表示する方法を、まとめてみました。

こういうのがあったらいいなぁ〜ってデザインを、MarsEdit 4 のリアリタイムプレビュー機能を使いながら、作成してみました。まとめると、こんな感じです↓

ブログのサイドバーにプロフィール表示する方法まとめ

とりあえず3つの HTML&CSS の例を掲載してみました。随時、思いついたものを追加していきますので、おたのしみに!!

そのほか、ブログのカスタマイズなど、WEBデザインに関する記事はこちら↓

サウンドオルビス

3,755,580 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事