初心者向け【WordPress】サイドバーにプロフィールを設置する

WordPress サイドバーにプロフィールを設置 ブログ

こんにちは、ikuzo(いくぞう)です。

今回はWordPressのサイドバーにプロフィールを設置する方法を紹介します。

少しだけHTMLもいじりますので、HTMLの入門にもよろしいかと思います。

初心者の方にも分かりやすいように解説していきますよ!

スポンサーリンク

プロフィール用のイラストや写真を用意する

まずはプロフィール用のイラスト、または写真を準備しましょう。

イラストを使う場合、上手な人は自分で描いてもいいですし、

そうでない方は、ココナライラストレーターの方にお願いするという手もあります。

依頼する人にもよりますが、プロフィール用のイラストであれば2~5千円程度で描いてもらえます。

ココナラの「イラスト作成」のページ出典:ココナラ

値段はもちろんのこと、作風や評価を見て、お願いする人を決めましょう。

 

そして用意する画像は、サイドバーで使うものなので、それほど大きくなくても大丈夫です。

画像が大きい場合は、「PhotoScape X」(無料)などの画像編集ソフトを使ってあらかじめリサイズするか、

WordPressにアップロード後、小さく表示させることもできます。

私は「PhotoScape X」で150×150pxにリサイズした画像を使ってます。

 PhotoScape Xの使い方はこちら

【PhotoScape X】の基本的な使い方

 

今回は解説用にこちらのイラスト(250×250px)を使っていきます。

PCで見ている方は、これが原寸大です。

プロフィール用に準備した画像

サイドバーのプロフィール作成方法

サイドバーにプロフィール欄を作るには、

WordPressの「外観」→「ウィジェット」を選択します。

「外観」→「ウィジェット」を選択

数多くあるウィジェットの中から、ビジュアルを確認しながら編集できる「テキスト」を探してクリックして下さい。

ウィジェットの「テキスト」を選択

テーマによって表示は若干違いますが、「サイドバー」と書かれたものを選んで「ウィジェットを追加」を押します。

「サイドバー」を選択して「ウィジェットを追加」を押す

これでサイドバーにプロフィールを作る場所が設置されました。

ここからは、「テキスト」を編集してプロフィールを仕上げていきます。

タイトル

タイトルを入れるかはお好みで。タイトルを入れるとプロフィールに見出しがつきます。

プロフィールにタイトルをつけるかどうか

プロフィールのタイトルありとタイトルなし

プロフィール画像をアップロード

画像のアップロードは「メディアを追加」を押します。

エディタは「ビジュアル」を選択しておいて下さい。

「メディアを追加」を押す

さきほどの画像をアップロード。

プロフィール用の画像をアップロード

これで画像が入りました。

プロフィールに画像の挿入成功

スポンサーリンク

プロフィール画像を中央に配置

画像が左に寄っているので、画像をクリックして「中央揃え」を押します。

画像をクリックして「中央揃え」を押す

プロフィール画像が中央に配置された

「テキストエディタ」に切り替えて、画像のコードを<center>と</center>で挟んでも、画像は真ん中に表示されます。よかったら、試してみて下さい。

画像の大きさを変更する

画像の大きさを変えるには、「テキスト」エディタを使って“250”の数字部分を変更します。

プロフィール画像の大きさを変えるコード

“200”や“150”など数字を少なくするほど、画像も小さくなります。

「width」は横幅、「height」は高さです。

正方形の画像なら「width」と「height」は同じ数値にしましょう。

(「width」の数字を変えれば、「height」は変更しなくても、比率を保持して画像は表示されます。)

 

画像の大きさは、プロフィールの設置が終わってから調整してもいいと思います。

プロフィールに名前を入れる

名前も中央に配置するには、次のコードを使います。

<p style="text-align: center;">ここに名前を入れる</p>

名前を中央に配置するコード

プロフイ-ルに名前を入れた

名前を大きくしたり、画像と名前の間隔を調整したいようでしたら、上のコードの代わりにこちらのコードを使って下さい。

<p style="font-size: 20px; margin: 0px 0 20px; text-align: center;"><strong>ここに名前を入れる</strong></p>

文字を大きくしたり、画像と文字を近づけるコード

数字部分はお好みで変えて下さい。

余白は、数字を大きくすると間隔が広がり、小さくすると狭くなります。

「-5px」のように数字の前にマイナスをつけると、さらに間隔が狭くなります。

マイナスや英数字は必ず「半角」を使いましょう。全角を使うとコードが効かなくなります。

文字をドラッグして「ビジュアル」エディタの「B」ボタンを押せば、文字が太字になります。

文字を太字にする

プロフィール文を入れる

あとは「ビジュアル」エディタで、自己紹介文を入れましょう。

プロフィールに自己紹介文を入れる

こちらも文字の大きさを変えるには、次のコードを使って下さい。

<p style="font-size: 16px;">ここに文章を入れる</p>

最後に右下の「保存」→左下の「完了」を押せば完成です。

完成したプロフィール

最後に

おつかれさまでした。

うまい具合にプロフィールは完成しましたか?

私も最初はHTMLなんてチンプンカンプンでしたが、こちらのサルワカさんのサイトで勉強しました。

Webデザイン入門:HTMLとCSSの書き方をゼロから学ぼう
サルでも分かるHTMLとCSSの勉強講座です。 初心者の方でも分かるように丁寧に1つずつ解説していきます。

とても役にたって、今でも何か疑問が出るたびに利用させてもらってます。

これからHTMLやCSSを覚えたい方は、ぜひ覗いてみて下さい。

本日は最後まで読んでいただき、ありがとうございました。

コメント