ブログに彩りを。サイドバーにもプロフィールを設定してみよう!

2018年9月21日ブログ管理Luxeritas, サイドバー, ブログ管理, プロフィール, 初心者

サイドバーにプロフィール?

トリ師匠
トリ師匠
まだまだ全然必要なもんが足りてないの、このブログ。
ぐず夫
ぐず夫
ま、マジで言ってるんか。
こんな素晴らしいに…
トリ師匠
トリ師匠
ペラッペラじゃ、ペラッペラ。
せっかくじゃし、サイドバーにもプロフィール足してみたらどうじゃ?

ということで、今回はサイドバーにもプロフィールを設定してみます。

サイドバーにもプロフィールは必要なの?

プロフィールの意味は?

トリ師匠
トリ師匠
親しみやすさってのは意外に重要での、ぐず夫みたいなもんでも興味を持つもんは少なからずおるもんじゃ
ぐず夫
ぐず夫
失礼なトリやで、ホンマ
トリ師匠
トリ師匠
だけども、わざわざプロフィールまで確認してくれるもんは少ないわな。じゃったらいつものページに、ちぃとばかし気になるプロフィールを貼ってみるとどうじゃろ。
ぐず夫
ぐず夫
……癪やけど見てまうかも。
トリ師匠
トリ師匠
これからちょくちょく出てくる思うけど、ブログを始めとするサイト運営には「直帰率(※)」っちゅうもんが重要での、せっかくブログに足を運んでくれても、あんまりオモロなかったらすぐ帰ってまう。それじゃつまらんじゃろ?
ぐず夫
ぐず夫
せやな。しゃーないから設置してみるか。

※ 直帰率:訪問したページのみを見てサイトから離れる率

 

プロフィール用の画像を用意してみよう!

画像を準備するぞ!

ぐず夫
ぐず夫
でもワシ、世間の頭がええ人みたいに大したもんは作れんで。なんや調べてみても全然分からへん。
トリ師匠
トリ師匠
確かにHTMLやCSS(Webページを構成する言語)をいじくり回すのは初心者のぐず夫には難しいかもしれんな。
そこでオススメしたいんが、画像一枚で済ませるお手軽な方法じゃ!
ぐず夫
ぐず夫
それはタダの手抜ーー
トリ師匠
トリ師匠
それ以上言ったらブログ乗っ取って海の藻屑にするで…
ぐず夫
ぐず夫
それだけはやめてくれ、堪忍や…

仕切り直して…

トリ師匠
トリ師匠
まずは絵の準備や。今はありがたいことにフリーのイラストやお絵かき用のソフトが充実してるでの、誰でも簡単に画像が用意できる時代じゃ。
ぐず夫
ぐず夫
そんなん言うても、絵なんて書けへんて。無謀やん。
トリ師匠
トリ師匠
大丈夫や。さすがに絵の描き方まではサポートできへんけど、簡単なプロフィール画像くらいどうにでも用意できるわ。せっかくじゃし、絵や写真の編集も勉強するとおもろいで。参考に乗っけとくわ。

[ 世の中には便利なページが沢山あります ]

● フリーイラスト素材サイトのまとめ(外部リンク)
● プロフィール画像作成まとめ(外部リンク)
● 画像の作り方(外部リンク)

ぐず夫
ぐず夫
むむむ、それでも難しいのう。
トリ師匠
トリ師匠
そのうち慣れるやろ。画像編集ソフトもGIMPなんかが自由自在やとブログの画像編集で困ることはなくなるかもの。とまあ、そんなこんなでこんな画像が出来上がったわ。

プロフィール

ぐず夫
ぐず夫
えへへ
トリ師匠
トリ師匠
…お前はいっつも寝とるの。
まあええ、どうせ前に作ったプロフィールページにリンクを貼るだけやで。

◆プロフィールページの作成はコチラを参照!

 

画像を登録してみよう!

メディアを新規追加

トリ師匠
トリ師匠
そしたら次は画像を登録じゃ。管理画面から「メディア」を選択し「新規追加」をクリックじゃ。

ファイルの選択

トリ師匠
トリ師匠
「ファイルの選択」から作成した画像を選択してアップロードじゃ。

メディア一覧

トリ師匠
トリ師匠
管理画面から「メディア」へ戻るとアップした画像が一覧に表示されるでの。そいつを選択して見てみるで。

メディア表示例

トリ師匠
トリ師匠
すると画像の基本情報が表示されるでの。ひとまず「保存」の項目に表示された「ファイルのURL」をコピーじゃ。このURLは後でサイドバーに貼る時使うでの、覚えといてや

 

サイドバーにプロフィールを貼ってみよう!

ウィジェット起動

トリ師匠
トリ師匠
まず管理画面の「外観」から「ウィジェット」を選択じゃ

カスタムHTML選択

カスタムHTMLを選択し…

ウィジェットの種類を選択

トリ師匠
トリ師匠
次に「利用できるウィジェット」の項目の中から「カスタムHTML」を選択じゃ。すると場所を示すサイドバーの種類がズラッと表示されるでの、今回は「汎用サイドバー(タイトルH4タイプ)」を選択してみるぞ。「ウィジェットを追加」で決定じゃ。

ウィジェット編集

トリ師匠
トリ師匠
するとサイドバーウィジェットの編集画面に移動するからの。「内容」に以下の画像リンクコードをコピーして貼り付けや!

★ 以下を編集して貼り付け

<a href="(自分のプロフィールページのURL)"><img src="(上で登録した画像のURL)" alt="プロフィール" /></a>
トリ師匠
トリ師匠
「自分のプロフィールページのURL」と「上で登録した画像のURL」の部分は自分のページの内容に修正するんじゃぞ。もちろん()は不要じゃ。「保存」を押したら作成は完了じゃ!

◆その他ウィジェットの細かな設定はコチラ!

出来栄えを確認してみよう!

見栄えの確認

ぐず夫
ぐず夫
ほ~。ちゃんと表示されてるやん。
トリ師匠
トリ師匠
こんな感じでプロフィールへのリンクは意外に簡単に作れるでの。画像にちょっとした工夫をすると動くようにもできるで。オススメじゃ!

 

プロフィール作成を終えて…

ぐず夫
ぐず夫
なあ、ずっと前になんぞ横文字のツール導入する言うてなかったか。
トリ師匠
トリ師匠
ああ、すまんの。
全然時間がなくてそのままじゃ。近いうちに紹介するで、もうちょい待っちょれ。
ぐず夫
ぐず夫
(ええ加減なトリやで…)

ということで、サイドバーにプロフィール設定は以上です。

また次回をお楽しみに!