ブログ運営

【WordPress】サイドコンテンツのプロフィールを作ろう!簡単なプロフィール用HTMLとCSSを公開

こんにちは! イチヒラ(@ichihira_tw)です!

あなたは、ブログのサイドコンテンツにプロフィールを表示させていますか?

サイドコンテンツにプロフィールを表示させるには、テーマによっては自分でHTMLやCSSを組み込む必要があるので結構敬遠している人も多いです。

いざやってみても、「なんかダサいな・・・」と思って、結局消してしまうなんて人もいるのではないでしょうか?

今回は、サイドコンテンツのプロフィールをそれなりにオシャレする簡単なプロフィール用HTMLとCSSを公開を紹介します。

※さっさとプロフィールを完成させたい方は最後の「完成コード」の項目だけを見てください。

プロフィール用HTMLの作り方

まずは今回の目標のデザインを確認

今回は次のようなプロフィールを作ります。

丸いプロフ画像にボーダーを付けて、各SNS用リンクを作ります。

シンプルですが、それなりにオシャレでのちのちカスタマイズもしやすいデザインにしました。

ボクはWordpressのテーマにStorkを使っていますが、ほかのテーマでも使えるはずです。

まずはベースとなるHTMLを作る

まずはベースとなるHTMLを作ります。

ちなみにプロフィール用HTMLは、ウィジェットのカスタムHTMLに記述することを想定しています。

表示を確認してみます。
以下のように表示されていたらOKです。

今回はこちらのHTMLをベースにしてサイドコンテンツのプロフィールを作っていきます。

画像を少し小さくして丸くして、ボーダーも付ける

プロフィール画像を囲っているdivタグをHTMLを修正します。

divタグにclass「side_profile_img」を記述。

続いてCSSを修正します。

class:side_profile_imgに囲まれているimgに対して、画像を丸くするように記述します。
画像を丸くするには、border-radiusを利用します。

border-radiusは角を丸くするときなどに利用される記述です。

以下のような表示のなればOKです。

ちなみに50%の部分を20pxなどピクセル単位にして、画像の角を丸くすることもできます。

画像を丸にするとき、必ず正方形の画像を用意してください。
長方形の画像を使うと真円ではなく、横長や縦長の円になってしまいます。

SNSアイコンを並べる

SNSアイコンを並べます。

SNSアイコンを並べるにはfontawesomeというCSSを利用します。

WordPressのテーマでStorkを使っていればfontawesomeはすでに入っていますが、fontawesomeを使っていない方は、以下のHTMLをコピーして<header></header>内に張り付けてください。

※ボクのWordpressは4.6のfontawesomeを使っています。公式サイトは現在5.2を使っているので、最新版を使うとアイコンが表示されない可能性があるので注意してください。
 最新版のfontawesomeを使いたい場合は、アイコンの記述を少し変えなければいけない可能性があります。

SNSアイコン用のHTMLを修正します。

リンクを囲っているdivタグにclass:sns-boxを記述します。
各リンクタグ(aタグ)のclassを記述し、さらにリンクタグ内に各SNSのアイコン用HTMLを追加します。

以下のような表示になれば完成です。

完成コード

下記のコードをそのままコピーして、画像やリンク・プロフィールテキストを変更すればOKです。

注意

WordPressテーマStorkの場合のHTMLとCSSです。
ほかのテーマでも使えると思いますが、テーマによってはClass名などがかぶる場合があります。
かぶってしまった場合は、適当なclass名に変えてください。

さいごに

ステップアップするなら最低限のHTMLとCSSの知識を付けよう!

ブロガーとしてステップアップしたいなら最低限のHTMLとCSSの知識を身につけましょう。

HTMLとCSSの知識を身につければ、ブログのカスタマイズも思いのままです。

同じテーマを使っていても、カスタマイズするだけでほかのブロガーとはデザインを差別化することが出来ます。

オンライン上でHTML+CSSの学習ができるサイトもあるので、ぜひとも活用して知識を身に着けてみてください!

オススメの学習用書籍

ABOUT ME
イチヒラ
イチヒラ
名古屋在住のシステムエンジニアで愛犬家。 おススメ本や 片付け方法、ペットに関する情報、趣味探し、ダイエットの経過などをブログで発信しています。 ドッグレシピプランナー★★を取得しました。