Wordpress

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

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

 

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

 

今日はサイドバーでのプロフィール表示について、

具体的にもう少し細かく書いてみようと思います。

 

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

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

 

1

 

ドラッグした「テキスト」を開くと入力出来ますので、

タイトルと内容(プロフィールを書く部分)を入力して保存をクリックします。

 

プロフィール文に段落を付けたい時は

「自動的に段落追加する」にチェックを入れましょう。

 

サイトを確認してみると

 

2

 

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

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

 

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

リンク

固定ページでプロフィールを作ったので、サイドバーから誘導出来るようにリンクを貼ります。

記事を書く投稿ページでコードを作って貼りつけるだけの作業です。

 

3

 

投稿の「リンクを挿入/編集」をクリックし、

固定ページで作った赤枠の「プロフィール」の固定ページを選択するとURLが表示されます。

 

リンク文字列はお好きな言葉を入力してください。

最後に「リンク追加」をクリック

 

4

文字入力画面をテキスト(青枠)に切り替えると、

先程のリンクが表示されるのでコピーして、ヴィジェットのテキストに貼り付けます。

 

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

 

 

枠の色は [solid #333333;]

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

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

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

 

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

 

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

5

 

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

 

6

 

まとめ

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

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

 

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

もう少しカスタマイズしてみたい方はこちらをご覧ください。

 

【WordPress】サイドバーのプロフィールに画像と文字を並べて表示する方法

 

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

Twitter で

関連記事



  • この記事を書いた人
  • 最新記事
るしる(Lucir)

るしる(Lucir)

元バンドマンが10年のブランクを経て音楽活動をネットで再開し、DTMで楽曲制作したり、音楽ブログ運営してます。

-Wordpress
-

Copyright© るしるし , 2019 All Rights Reserved Powered by AFFINGER5.