この記事を読むことで最終的にはこの画面とまったく同じプロフィール画面がつくれます。
今回はワードプレスでプラグインを使わずにプロフィール画面を実装する方法を公開します(^^)/
手順通りに真似してもらえれば、まったくの初心者の方でも簡単にできます！
わかりやすいように、画像を使って順番に説明していきますので安心してください。
まずはプロフィールを作成して公開するまでの手順を理解しましょう。
1つずつ、順を追って丁寧に解説していきますので、ご安心ください！
プロフィールを作成して公開するまでには、以下の作業が必要になります。
1.プロフィール画像を準備する
2.ペイントで編集する
3.固定ページでプロフィールを作成する
4.ウィジェットを使ってプロフィールを公開する
1.プロフィール画像を準備する
基本的にはお好きな画像を使ってください！
いちばん良いのはあなたが撮った素敵な写真ですね(*‘ω‘ *)
もしサイトから拾いたい方がいたら以下の商用フリーサイトを紹介します✨
わたしのサイトのアイキャッチ画像はすべて無料のサイトから使用させてもらっています！
最初のころはどのサイトが商用フリーかわからない人も多いと思うので次のサイトからダウンロードしてください(^^)/
個人的にはダウンロードしやすい「ぱくたそさん」が多く次に一段階上のかっこいい画像がそろう「イラストAC」多く使っています♪
今回は村尾メンタルの素顔をプロフィール画面の素材とします✨
2.ペイントで編集する
次に画像をペイントで丸く編集します。
※丸く編集せずに四角いまま使いたい方は読み飛ばして「3.固定ページでプロフィールを作成する」へ進んでください
今回の記事の中でここがいちばん苦労したので皆さんにしっかりお伝えできる様に丁寧に説明していきたいと思います！
余談ですがペイント使えるショートカットキーです。
「Ctrl」キー+「Z」でひとつ前の作業に戻る
「Ctrl」キー+「Y」でひとつ先の作業に進む
-1「ペイント」を開く
突然ですが、ここがいちばんのポイントになりますΣ(･ω･ﾉ)ﾉ！
原理はよくわかりませんが、画像を選択して「ファイル」→「開く」から開いたのでは、丸く切り抜くことができません。
かならずペイントから開きましょう！！
-2ホームの「貼り付け」から「ファイルから貼り付け」を開きます。
-3貼り付けたい画像を選択します。
-4白い余白がないので、余白を作ります。
-5右下の〇を右下に引き伸ばすと次のように白い余白がうまれます。
-6メニューの「図形」の中から楕円を選択し、余白に切り抜きたい大きさの円を描きます。このとき「Shift」キーを押しながらドラッグすると正円になります。
-7右上の「色2」を黒にします。正円にカーソルを合わせ右クリックをして「単色」で正円を黒く塗りつぶします。
-8「選択」の▼をクリックして、「透明の選択」にチェックをつけ「四角形選択」をクリックします。
-9黒い正円を囲むようにドラッグします。
-10選択した四角形を画像にドラッグします。透明な正円の中に切り取りたい部分が収まるように調整します。
-11右下の〇を左上に持っていきプロフィール画像とした部分だけ残しましょう。画像の下の余白はギリギリにした方が後々きれいにできます。
-12最後に名前をつけて保存しましょう。
3.固定ページでプロフィールを作成する
固定ページを使ってビジュアルエディタで表示したい「ミニ記事」を作り、テキストでコピペして表示させる方法です。
この方法は「プロフィール画面作成」の他に「PRyC WP: Add custom content to post and page (top/bottom)」や「Ad Inserter」でも応用できます(^^)/
この機会にぜひ覚えてください✨
-1固定ページの「新規追加」を開きます。「タイトル」は「プロフィール画象」にしました。
-2挿入から「メディアを追加」します。
-3先ほど保存した「プロフィール写真」を挿入しましょう。
-4一段改行して「名前」と「プロフィール」を入力しましょう。
-5「プロフィール写真」と「名前」を中央揃えにしましょう。
-6エディターをビジュアルからテキストに変更します。変更したらすべてのコードをコピーして下さい。
以上が固定ページでプロフィールを作成する方法になります(^^)/
4.ウィジェットを使ってプロフィールを公開する
ここまで来たらあとは貼り付けるだけです！
もうひといきなので最後まで頑張りましょう✨✨
※2カラムを前提としています。1カラムの方はトップページに直接書き込むか、投稿設定になっている方は「PRyC WP: Add custom content to post and page (top/bottom)」や「Ad Inserter」でも同様の手順で表示させることができます。
-1ウィジェットを開きます。
-2「カスタムHTML」をサイドバーエリアにドラッグして持っていきます。
-3「カスタムHTML」の内容に先ほどコピーした内容を貼り付けます。「保存」や「完了」を忘れない様にしましょう。
-10トップページを見ると右側に「プロフィール」が作成されています。
5.プロフィールを実装する手順まとめ1.プロフィール画像を準備する
2.ペイントで編集する
3.固定ページでプロフィールを作成する
4.ウィジェットを使ってプロフィールを公開する
プロフィール作成の手順は、これにて完了です。
プロフィールがあることによって記事に共感してもらうのと同時に書き手にも興味を持ってもらえたり信頼が得られたりします。
この記事をヒントにぜひ素敵なプロフィールを作ってください✨
