ネットと副業

副業が本業の収入を大きく超えたので会社やめました

WordPressでサイドバーウィジェットを使ってサイドバーにプロフィールをいれよう。

投稿日:


サイドバーにこんな感じで自己紹介をいれたいです。よく見ますよね。こういうやつ。

プラグインで実現できないかなぁといろいろ調べてみましたが、機能面でちょうどいいもので、かつ安心して使えそうなものがなかったので、ちょっとがんばってHTMLを使って実現させましょう!

まずはウィジェットを用意

サイドバーはウィジェット機能で簡単にいじくれますので、ウィジェットを使っていきましょう。

外観>ウィジェットを開きます。

 

左側の利用できるウィジェットからテキストを、右側にドラッグアンドドロップします。

 

右側にいれこんだテキストをクリックすると、タイトルと内容を編集できる画面がひらきます。


とにもかくにも、自己紹介を入力していきましょう。タイトル部分は表示されません。
入力できたら保存をお忘れなく。

こんな感じでツラツラと入力してみますた。
表示するとこんな感じ。

これだけでも悪くないすが、なんとも味気ないのでカスタマイズしていきましょう!!

 

HTMLを使ってカスタマイズ

ここでちょころびっと、HTMLが必要になってきます。サイドバーウィジェットのテキストは、なんと申しましょうか、ただのテキストです。記事投稿のときは入力した情報を、ある程度自動的にHTMLとして装飾してくれますが、サイドバーウィジェットのテキストはそれをしてくれません。

HTMLとか苦手だなーって方も、コピペでできちゃうのでチャレンジしてみましょう!

 

画像をいれてみる。

固定ページでプロフィールを作成したときに、自分のプロフィール画像をWordPressにアップロードしたかと思われます。その画像を使います。

メディアからプロフィール画像を開きます。
URLの箇所を全選択してコピー!

プロフィールを入力したウィジェットを開いて、↓こんな感じで入力します
<img src=コピーした画像のURL>
わたしの場合こうなります。
<img src=http://dafneta.com/wp-content/uploads/2017/04/profile.jpg>


保存してページを表示してみましょう。
どどーん。

 

改行をいれてみる。

プロフィール文章の中の、《部屋の管理人 自己紹介》とWordPressの間に改行がほしいところです。
ウィジェット上は改行されてますが、表示上はされておりません。なぜなのか….

ここもHTMLを入力して解決します。
改行したい箇所に
<br>
と入力します。
HTMLの改行指示です。

 

できました!!

 

プロフィールページへのリンクをいれてみる。

最後に前回作成したプロフィール詳細へのリンクをはっておきましょう。
まずは自分のプロフィールページを開いて、ページのURLをコピーしておきます。

 

ウィジェットにこんな感じで入力します。
WordPressサイドバーにプロフィールをいれる
<a href=”自分のプロフィールページのURL”>リンクを貼りたい文章</a>

深く考えずにコピペして使いましょう。

いい感じでリンクが表示されます!

 

プロフィールは読者にとっては大事な情報です。しっかりプロフィールを充実させておくと親切ですね!

-

執筆者:

関連記事

no image

Adobe CC2014 アップデートしたらIllustratorの起動画面がきもい

  Macを起動するたびに、画面右上のAdobeのCreativeCloudがアップデートしろと、メッセージを出してくる。 ので、いい加減うっとうしいのでアップデートしました。 マイナーアップデート? …

喫茶店というリアルリツイート空間で芸能ネタを仕入れる。

2016年もクリスマスイブです。 o<(ノ・ω・)ノ*:..。o○☆ メリークリスマス   テレビのニュースで、昨今はクリスマスだからって恋人・友達・家族と過ごさず、一人ですごすクリぼっちが …

no image

中国映画『薄氷の殺人』観てきましたが、タイトルは英題の『Black Coal, Thin ice』の方がいい。

中国映画『薄氷の殺人』観てきました。 『薄氷の殺人』を観る目的で映画館行ったわけじゃなくて、なにげなく入った映画館で、開演時間まで待ちがなくてすぐ観れそうな映画の中でタイトルとビジュアルが刺激だったの …

no image

《無料擬音素材》「擬音祭り」が便利!!eps、pngで使いやすい!!

フツーの企画書ってつまんないですよねo( ̄ー ̄)○ プレゼンテーションを見てる方は、プレゼンしてる方の数倍退屈ですよね。だらだらとつづく説明、退屈な企画書の内容、せまりくる眠気。苦痛でしかないです*1 …

no image

〈はてなブログ〉のmetaを設定するのを忘れてました。

  はてなブログはじめて、機能が豊富であまりの便利さに小躍りしてますが、metaタグを自分で設定しなくちゃいかんのを忘れてました。 “設定”の“詳細設定”から入力できます。 まずdescription …