どうも、こんにちは！橋尾渡（@hashio_wataru）です！
さて今回はワードプレスでとっても簡単に作れる、サイドバーにウィジェットを追加するプロフィールの作り方を紹介したいと思います！
今は個人を尊重するべき時代になっています、そんな時代の中でプロフィールという要素は個人を知るためには必要不可欠です。なのでサイドバーに簡易的なプロフィールとガッツリ個人をアピールする固定ページを作っちゃいましょう！
まずは、サイドバーのプロフィールから説明していきますね。
サイドバーにプロフィール項目を作る方法
ではまず、ワードプレスの管理画面を開いてください。そして、外観という項目がありますので「ウィジェット」をクリックしましょう。
そしたら利用できるウィジェットという文字の下にズラーっと使えるウィジェットが揃っていると思います。その中から「テキスト」のウィジェットを探してください。
それからテキストのウィジェットをクリックすると追加できる位置の項目がでてきますので、「サイドバーウィジェット」を選択して「ウィジェットを追加」を押します。
そうするとようやくサイドバーウィジェットにテキストを追加することができましたね。
追加されたテキストをクリックすると、「タイトル」「内容」という入力欄がでてきました。まずはタイトルの部分に「プロフィール」と書きましょう。
※タイトルはなんでもいいです。なるべくわかりやすいものにしましょう。
そしてここが重要な箇所、個人を知るための内容となります、最初に写真を付けましょう。
※写真がないよ！と困っている方はこちらの似顔絵ジェネレーターであなたのキャラクターを作ってみてください。
こちらのコードをコピーしてテキストに貼り付けます。
|
1 2 3 4 |
<center> <img src="ここにアップロードした画像のURLを入力" align="center" width="220" height="210"> </center> |
img src=””の部分にアップロードした写真のURLを入力してください。そうするとこのように画像が表示されるようになります。それから下に個人の簡易的なプロフィールを書いていきましょう。
プロフィールを書き終えたら「自動的に段落追加する」にチェックを入れて保存を押します。
保存を押しましたね？一度ブログを確認しに行きましょう、そうすればサイドバーにプロフィールが表示されているはずです。
どうですか？簡単にプロフィールが作れましたね。
次は詳しいプロフィールを固定ページに作っていきましょう！
固定ページに詳細プロフィールを作る方法
固定ページを作る方法も簡単です。いつも通り記事を作っている感覚でプロフィールを作れちゃいます。
では、固定ページの項目の中にある新規追加を押してください。
すると見覚えのある記事を書くページに移りましたね。タイトルは「自己紹介」でいいと思います。そして内容に血液型や趣味などを書いていきましょう。
僕の詳細プロフィールのページがありますので参考にしてみてください。
自己紹介
固定ページに詳細プロフィールを作ることができたら先程のテキストウィジェットに戻り、固定ページのURLを追加してやります。
追加する際にHTMLのリンクタグを使います。コードのサンプルを貼っておきますのでこれをコピーしてウィジェットに貼り付けましょう。
|
1 2 3 |
<a href="固定ページのURLを入力"> もっと詳しく見る //ここに任意の文字を入力しましょう。 </a> |
リンクタグを貼り付けたらプロフィールの下に固定ページへのリンクが表示されるようになります。
これで簡易プロフィールと詳細プロフィールの連携が完了しました。更新を続けていくと投稿者に興味を持ってくれる人が現れると思います。そういう時にこういった詳細プロフィールがあるとファンになってくれたりします。
そしてファンを増やすには個人を知ってもらうのが一番いい方法だと思っています。ブログを定期的に読んでくれる人というのはとても貴重な存在です。なのでより多くのファンを作りブログを盛り上げていきましょう！
次はファンをより多く増やすための小技を紹介します。
プロフィール欄にSNSボタンを追加してファンになってもらう
既にプロフィールの作り方もウィジェットの使い方もだいたいわかってきたと思われます。そこで応用術としてSNSボタンを追加してみましょう。
ではここでSNSの代表格ツイッターを使ってご紹介いたします、まずはツイッターの公式サイトでフォローボタンのコードを配信していますので移動しましょう。
するとボタンを選択という文字の下に４つのチェック項目がでると思います。「フォローする」のところにチェックを入れたら「コードのプレビューを見る」の下にコードがあるのでそれをコピーしてテキストの下に貼り付けましょう。
そしてテキストにコードを貼り付けます。
テキストにコードを貼り付けて保存したらまたブログを確認してみましょう。そうするとツイッターのフォローボタンが設置されましたね。
以上でSNSボタンの追加方法は終わりです。
まとめ
これでファンを増やせる確率がグッっと上がると予想されます。他にもFeedlyのボタンやFaceBookのボタンなどもあるので探してみてください。
それから、試しに記事内にフォローボタンを入れてみました。良かったらフォローしてみてくださいｗ↓
では、そろそろ記事を終わりたいと思います。ありがとうございました。
コメント
はじめまして。こちらの記事を参考にして自分の作りたてのブログにプロフィールを作ることができました！とてもわかりやすく解説して頂いてありがとうございますm(_ _)m
ここに書いたコメントは他の人にも見えてしまうのでしょうか？
Super beginnerさん、ご来場ありがとうございます。
コメントの承認をすれば、他のユーザー様にもコメントが見えてしまいますね。
はじめまして！
突然の質問で申し訳ないのですが
この記事にあるようにサイドバーのプロフィールに写真を張ろうとしても画像が表示されません。
試しに他の画像でやってみてもだめです。
HTMLも合っているにでどうしたらいいのか、、
気が向いたら答えてください！よろしくお願いします
ざわさん、こんにちは。
画像はメディアからではなく、画像のみのURLにしてみてはいかがでしょうか。
すばやい対応ありがとうございます。
無事貼れました！
本当にありがとうございます！！
ブログを始めたばかりの初心者です。
こちらのサイトを参考にさせていただいており、有難うございます。
1点うまくいかないことがあり相談のご連絡でした。
プロフィール下の「もっと詳しく見る」ですが、
パソコン画面では表示されるものの、モバイル画面にはなぜか表示されません。
これは、何かプラスの設定が必要なんでしょうか・・
もし思い当たることなどあれば教えてください。
よろしくお願いします。
蔵のまちさん、こんにちは。
僕の場合、あのコードのままでスマホ表示されました。
もしかしたら、記入漏れなどが無いか、今一度ご確認ください。
途中の「//」の一行が消しても大丈夫です。
初めまして、橋尾さん。
この記事とても参考になり、プロフィールを作ることができました！
ただ1点、質問があるのですが「もっと詳しく見る」の文字サイズを大きくすることはできるのでしょうか？
よろしくお願いいたします。
星さん、コメントありがとうございます。
文字サイズを変更したい場合、CSSのfont-sizeで調整してみるのがオススメです。
橋尾さん。
お返事ありがとうございます。
無事解決致しました。
わかりやすくとてもタメになりました。ありがとうございました。
きむこさん、コメントありがとうございます。
わかりやすいと言ってもらると励みになります。
これからも、読みやすい記事をどんどん作っていくので応援よろしくお願いします。＾＾