こんにちは、しゃも(@ShamoEi_Shamo)です。
- 「WordPressで共同ブログをやっていて、同時にプロフィールを2つ以上載せたいなぁ」
と考えている方はこれを読むことで解決します。 - プロフィールページではなく、サイドバーにプロフィールを載せることを想定しています。
- ウィジェットとテキスト(HTML)を使います。
- 初心者ブロガーなので、僕のように困っている人向けの記事です。
共同ブログのWordPressでプロフィールを2つ以上載せる方法
結論は「外観→ウィジェット→テキストをサイドバーにドラッグ&ドロップ→テキストをいじる」
となります。
テキストがかなり柔軟性があるもので個人的に驚きました。HTMLを記述できるので便利です。
例となる簡単なHTMLもあとで紹介します。
外観→ウィジェット へ移動
ウィジェットはこちらにあります。
ウィジェットをクリックすると移動できます。
ウィジェットでは、表示したいものを(左側にある項目)、表示したいところ(右側にある項目)へとドラッグ&ドロップをすることで、ブログの画面に表示することができます。
テキスト(PC用)をサイドバーにドラッグ&ドロップしましょう。
また、左側の項目をクリックすると「ウィジェットを追加」とできるので、それをクリックすることで表示させることができます。
間違って追加してしまった場合は、右側の項目からウィジェットを選択し、「削除」を選ぶことで表示させなくすることができます。「削除」を選んでも左側のウィジェットは消えないので安心してください。
「プロフィール」ウィジェットを使おうとしたら問題が。。
1人でブログを運営する分には問題ありませんが、「しゃもえいブログ」では2人で運営しています。したがって、トップページで2人のプロフィールを掲載したいのです。
しかしながら、「プロフィール」ウィジェットでは著者のプロフィール情報のみが表示されて、著者以外のプロフィールを提示できません。
「テキスト」ウィジェットを使う
困ったなぁと思い色々探して見つかったのが「テキスト」ウィジェットです。
PC用とモバイル用がありますが、PC環境ならまずPC用で試してみましょう。
HTMLを書く
HTMLを使って簡単なプロフィールを作成します。
<center> <h1>名前1</h1> <img src="画像のURL" width="220" height="220"> </center> 自己紹介文1を書く。 <hr> <center> <h1>名前2</h1> <img src="画像のURL" width="220" height="220"> </center> 自己紹介文2を書く。 <hr>
このコードをコピペして、「画像のURL」をコピペすると。。
名前1
自己紹介文1を書く。
名前2
自己紹介文2を書く。
このようになります。これを目指します。
コードを書いたことがない人は、うじゃうじゃしててよくわからないと思うので、ゆっくり説明します。簡単なので一緒にやりましょう。
画像を中央寄せで表示
次のコードをコピペしてください。
<center> <img src="画像のURL" width="220" height="220"> </center>
画像のURLは「メディア→ライブラリ」で載せたい画像をクリックすれば右側に「ファイルのURL」とあるのでそれをコピペします。
画像のURLをコピペすると上のようになります。しゃもの画像はHTMLで記述しています。
<center></center>
<center>の間に含まれる部分は中央寄せされます。
width="220" height="220"
widthとheightは幅と高さのピクセルを表します。適切な大きさに調整しましょう。
もしモバイル用のテキストウィジェットであればもう少し小さめの方が良いかもしれません。
文字を加える
<center> <h1>名前</h1> <img src="画像のURL" width="220" height="220"> </center> 自己紹介文を書く。 <hr>
これを記述すると。。
名前
自己紹介文を書く。
これで1人分のプロフィールの完成です。
自己紹介文は、直書きすれば問題ないです。
<h1>名前</h1>
<h1>はブログを書くときに目にすると思いますが見出しです。文字が大きくなります。
大きくなくてもよければ、「名前」を直書きすれば良いです。他にもh2、h3と調整ができます。
<hr>
<hr>は水平(horizontal)を意味していて、水平な線を引けます。これを書くことによって人を分ける線が書けます。他にも区切り方などがあると思うので調べてみてください。
あとは複製するだけ
あとは「文字を加える」で書いたコードを下に貼り付ければ何人でもプロフィールを作ることができます。画像のURLをコピペするのを忘れないでください。
<center> <h1>名前1</h1> <img src="画像のURL" width="220" height="220"> </center> 自己紹介文1を書く。 <hr> <center> <h1>名前2</h1> <img src="画像のURL" width="220" height="220"> </center> 自己紹介文2を書く。 <hr>
名前1
自己紹介文1を書く。
名前2
自己紹介文2を書く。
上で述べたように、このようになります。
同じ要領で追加していけば、何人でもプロフィールを表示させることができます。
モバイル用のテキストウィジェットも使う
使用したのがPC用だったのでモバイル用のウィジェットも同じようにすることで、スマホでも同様のプロフィールを見ることができます。
モバイル用では画像が大きく感じると思うので、widthとheightは小さくすると良いかもしれません。
ホームでは運営者、記事では著者ごとに表示したい
このような場合は、ウィジェットの機能として表示設定を行えます。
例えば今までやった複数名を表示するテキストウィジェットをホームだけ表示にして、個人テキストウィジェットを著者の書いたものだけに設定をすれば可能です。
色々とカスタマイズが可能なので、色々と使ってみてください。
使っているHTMLタグ
こちらは番外編ですが、プロフィールで使っているHTMLタグを紹介します。
<b>文字</b>
文字
<b>タグで太文字になります。
<a href="URLリンク" target="_blank">@ツイッターIDなど</a>
<a>タグでリンクをつけることができます。僕はツイッターのリンクを設置しています。
「target=”_blank”」とすることによって、別タブで開かれます。いらなければ外しましょう。
まとめ
テキストウィジェットを使って、2人以上のプロフィールを載せることをしました。
またHTMLの基礎的な説明もしました。
ウィジェットでは色々とカスタマイズが可能なので、試していくともっといい方法があるかもしれません。テキストウィジェットはプロフィール以外にも使い勝手が良いと思います。
HTMLも様々なものがあるのでプロフィールなどを充実させましょう。
コメント