ワードプレスの
プロフィール画像を丸くして
サイドバーに設置する方法です。
プロフィール画像は
四角よりもやっぱり丸い形の方が
優しさが出ますよね。
では、プロフィール画像を
丸くする方法を
解説します。
プロフィール画像を準備しよう。
サイトで使いたいプロフィール用の画像を
準備しましょう。
画像のサイズは、240×240pxが
推奨されています。(※これ大事)
「イラスト無料 動物」
「イラスト無料 女の子」
「イラスト無料 男の子」と
検索すれば、かわいいイラストが
たくさん出てきます。
もちろん、ご自分の写真でもOKです。
![プロフィール画像丸くする](https://patora35.com/wp-content/uploads/2022/01/7749371e57f786b9737052c4e4f8179c.jpg)
![](https://patora35.com/wp-content/uploads/2022/01/ea649ec985b77765a2215e9c2db548b6-1.png)
プロフィール画像の枠を準備する手順。
まず、画像を
パソコンに保存しておきましょう。
画像をどこに保存したかを
覚えておきましょうね。
(メモ用紙に書いておくと安心ですね)
保存したら
「メディア」
「新規追加」
![](https://patora35.com/wp-content/uploads/2022/01/0c95dc33d5159cf58a4c672904160983-1.png)
「メディアのアップロード」
「ファイルを選択」クリック
![](https://patora35.com/wp-content/uploads/2022/01/f2c0fc1852dd38aa9a7509eda9b4d78a-1024x370.png)
「ファイルを選択」をクリックしたら
右下の「編集」をクリック
![](https://patora35.com/wp-content/uploads/2022/01/c40b9e0d22dd9da9db5146f0db6a1979-1024x340.jpg)
右下の「編集」をクリックすると
自分が選んだ画像が出てきます。
「ファイルのURL」を
後で使いますので、
「メモ帳」か「ワード」に
コピーしておいてくださいね。
![](https://patora35.com/wp-content/uploads/2022/01/daf703a6843a43c97ee9791cc9be482b-1024x576.jpg)
プロフィールの枠をサイドバーに設定しよう。
プロフィール画像が
準備できたので、
これからは、
プロフィールの枠を
自分のサイトの右側に
設定していきます。
(設定する場所は、
後で変更できます。)
「ウィジェット」と言う
項目を使って設定します。
設定の順番
まず
「外観」
「ウィジェット」
「プロフィール」で
設定します。
![ウィジェットプロフィール](https://patora35.com/wp-content/uploads/2022/01/64df5e7054edf9eb2f2b88a09fc5c74c-1.jpg)
「プロフィール」右の▼ボタンをクリック
「サイドバー」に
チェックがついていると思います。
(ついていなければチェックします)
「ウィジェットを追加」をクリック。
![](https://patora35.com/wp-content/uploads/2022/01/43a74bb362889af71553cfbc9442fd87.jpg)
「タイトル」の所に
「プロフィール」又は
「自己紹介」・・・。
ご自分の好きな表記で書いてください。
私は「プロフィール」にしました。
これで
プロフィールの枠は準備できましたね。
![](https://patora35.com/wp-content/uploads/2022/01/fd0348872d4771115eb1251b9bce89f3-1024x423.jpg)
いよいよ
「画像」と「プロフィール内容」を
入れますよ。
(2つ一緒に設定ができます。)
先ほど保存した
プロフィール用の画像を
入れていきます。
「ユーザー」
「プロフィール」
![](https://patora35.com/wp-content/uploads/2022/01/5ab42bfe02ae40bfe2fd5260ca061e46.jpg)
「プロフィール画像のアップロード」の
所に(下までスクロール)
先ほど
画像のURLをコピーしたものを
貼り付けます。
![](https://patora35.com/wp-content/uploads/2022/01/913c0cf85cad5bfd7b3eae0715e98289-1024x638.jpg)
次は
プロフィールに
自己紹介記事を書きます。
(簡単に書いてください。)
「プロフィール情報」に
自己紹介を書きましょう。
![](https://patora35.com/wp-content/uploads/2022/01/a9f6d8169e7a83e8d12391a5df53acbe-1024x395.jpg)
プロフィールを書いたら、
ひとまずここで保存をします。
せっかく書いたのが
水の泡になる前に先に保存をしましょう。笑
ずーと下の方に
「プロフィールを更新」クリック
![](https://patora35.com/wp-content/uploads/2022/01/7d4fdec3f13f204ba9c6a6dfa44ef5e8.jpg)
とりあえずは、
保存したので安心ですね。
プロフィール画像を丸くする(CSS使用)
さて、ここからが本題ですね。
画像を丸くする
CSSという言語を
コピー貼り付けします。
安心してください。さっと終わります。
「外観」
「カスタマイズ」
![](https://patora35.com/wp-content/uploads/2022/01/0e3ee3af7b3d20776659d700be12441f.jpg)
「追加CSS」の>ボタンをクリック
![](https://patora35.com/wp-content/uploads/2022/01/1ae558c3c87a8d4912445a2d16068a73.jpg)
![](https://patora35.com/wp-content/uploads/2022/01/cb4742c61e93b0687bf5d75164f40846-1.jpg)
みなさんは、ここは空っぽだと思います。
私は、他のCSSが入っていますので
13行目にコピー、貼り付けしてあります。
それでは、スタートです。
①下記3行を「コピー」
(1文字目にはドットがあります。
忘れずにね)
.profileimg {
border-radius: 50%;
}
②追加CSSの1行目の所を「クリック」
カーソルが来たのを確認してください。
③「貼り付け」
「プロフィールを更新」
「下書き保存」
ここまでしてくださいね。
プレビューで確認をしてみてください。
プロフィール画像が
丸いきれいな円に
なっていますか?
OKであれば「公開」してくださいね。
※「PATOLALOG」では、プロフィールの背景を
白にしているため、画像を丸くしているのが
わかりません。
まとめ
画像のサイズは、240×240pxが推奨
画像を丸くするのは、
CSSをコピー、貼り付けで簡単にできる。
いかがでしたでしょうか?
意外とスムーズに
いけたのではないでしょうか?
CSSにも挑戦できましたね。
すばらしいですよ。
「にほんブログ村」ランキング
参加しています。
よろしくお願いします。