Wordpress

【WordPress】サイドバーにプロフィールを設置する方法。(リンク・枠つき)

投稿日:2016-06-18 更新日:

るしる(@646blog)です。

 

前回、ブログでのプロフィールページのお話をしました。

 

今日はサイドバーでのプロフィール表示について、具体的にもう少し細かく書いてみようと思います。

スポンサーリンク

サイドバーへのプロフィール表示(基本編)

 

  • WordPress「外観」→「ウィジェット」をクリックします。
  • 赤枠の「テキスト」を左側の「サイドバーウィジェット」にドラッグします。

 

1

 

  • ドラッグした「テキスト」を開くと入力出来ますので、タイトルと内容(プロフィールを書く部分)を入力して保存をクリックします。プロフィール文に段落を付けたい時は「自動的に段落追加する」にチェックを入れましょう。

 

サイトを確認してみると

 

2

 

表示はされましたが、アイコンなどの色味に負けて、なんだか目立ちませんな。テキスト感満載。

ということで、もう少しいじってみます。

 

テキストにリンク・枠を追加してみた!▼

リンク

固定ページでプロフィールを作ったので、サイドバーから誘導出来るようにリンクを貼ります。記事を書く投稿ページでコードを作って貼りつけるだけの作業です。

 

3

 

投稿の「リンクを挿入/編集」をクリックし、固定ページで作った赤枠の「プロフィール」の固定ページを選択するとURLが表示されます。リンク文字列はお好きな言葉を入力してください。最後に「リンク追加」をクリック

 

4

文字入力画面をテキスト(青枠)に切り替えると、先程のリンクが表示されるのでコピーして、ヴィジェットのテキストに貼り付けます。

 

プロフィールを枠で囲ってみることにしました。枠の作り方はいろいろあるのですが、今回は以下のコードで枠を付けました。

 

 

枠の色は [solid #333333;]

色の変更はこの部分を変えてください。(#と;は必ず付ける)

色の番号はこちらでチェックするのが便利です。→ color-sample.com

枠の角に丸みがいらないときは、[border-radius: 10px;]を削除してください。

 

ヴィジェットのテキストにリンクと枠ソースコードを加えると

 

リンクのコピーと、枠のソースコードを付け加えました(赤線の部分)

5

 

ページで確認するとこのようになりました。

 

6

 

まとめ

 

今回は、ブログ開始準備として、シンプルですが最低限のベースとして作ってみました。

画像は一番最初に作ったサイドバーのプロフィールです。

 

どんどん変化させて行って、見比べるのも楽しいかなと。

もう少し、記事作成にのめり込んで、落ち着いたらカスタマイズして行こうと思います。

最後まで、ありがとうございました。

アディオス!

 

この記事が気に入ったら
いいね ! しよう

Twitter で

    関連記事    


-Wordpress
-

Copyright© るしるし , 2017 All Rights Reserved Powered by AFFINGER4.