108円古本せどり専門!主婦せどらーのせどりで楽しく豊かな生活♪

ヤフオク&アマゾンの「108円古本せどり」で生活するアラフォー主婦の「せどりで豊かな生活」実録ブログ♪せどりの収益で購入した商品などをご紹介しています。

ウィジェット設置

STINGER PLUS+画像付きプロフィールをサイドバーに設置する方法【主婦ブログカスタマイズ(4)】

2018/03/30

「03_STINGER フリーボックス」を使います

こんにちは。四足ワラジ主婦せどらーのmanoです。

今回は、前回の記事で作った「アバター画像をサイトに載せたい!」ということで、

STINGER PLUS+でのプロフィール設置方法

について、書きたいと思います。

 

[スポンサーリンク]

 

ウィジェットとはなんぞや?

「サイドバー」(PCで見た時のサイト右側部分)に何かを表示させるには、WordPressダッシュボードの中にある

「外観」⇒「ウィジェット」

で設定をかけます。

 

「またカタカナが出てきたよ~」

と思ってしまいますが、

「ウィジェット」って何のことなのか?

と言いますと、e-word さんで調べたところ、こんな説明が出てきました。

ウィジェットとは、パソコンのデスクトップ画面やWebブラウザのスタートページなどの中の好きな場所に表示できる単機能の小さなアプリケーションソフトのこと。「ガジェット」(gadget)と呼ばれる場合もある。

 

つまり、無料ブログなどでもよくある、

更新履歴

カレンダー

検索窓

カテゴリー表示

などの、

あらかじめ設定してあって、選択するだけで使える

表示項目のことですね。

 

あれを

「プログラミングして、動きを確認して…」

なんてワザは、シロウトの私たちには到底出来ません(^^;)

 

あらかじめ作ってあるものを選ぶだけでOK(^^♪

にしてくれているウィジェット。

私たちブロガーにとっては、大変助かる「なくてはならない便利グッズ」のようなものですね♪

 

ではでは、実際にプロフィール用のウィジェットを設置してみましょう!

 

実際の手順

とは言っても、残念ながら「プロフィール」という、そのものズバリな名前のウィジェットはSTINGERにはありません。

その代わりに、

03_STINGER フリーボックス

を使います。

「テキスト」ウィジェットでも出来るかもしれないのですが、画像の掲載がうまくいかなかったので、私はこちらでやりました。

 

【事前準備】

※プロフィール用の似顔絵画像を用意しておく

おススメの似顔絵作成サイトは、前回記事をご覧ください♪

 

【操作手順】

1. 「スタートボタン(Windowsマーク)」から、Windows純正のテキスト入力アプリ、「メモ帳」を起動します。

Win10より前のバージョンでは、「アクセサリ」の中に入っています。

Win10の場合は、「Cortana」で検索してください。

 

2. 下記のタグをメモ帳に入力します。

<img src="あとでここに画像のURLを入れます" width="180" height="180">

WEB上に表示するため、「<>」大文字表記してあります。実際に使う時は、半角の「<>」に変換してください。

 

3. ダッシュボードメニューの「メディア」から「ライブラリ」を開き、使いたいプロフィール画像を表示させる。

 

4. 右側の「URL」に表示されているアドレスをコピーして、先ほどメモ帳に入力したタグの中の

”あとでここに画像のURLを入れます”

 

の部分に貼り付けしておく。

 

♥下記画像はファビコンのものですが、URLコピーの操作は同じです。

favicon-3

URLをコピーするときは、以下の操作でできます。

1. URLの上で一回クリックする

2. ⇒URLフィールドの周りが青くなって、選択状態になる

[スポンサーリンク]

3.  ⇒「Ctrl」+「A」キーを同時に押して「全選択」

4.  ⇒「Ctrl」+「C」キーを同時に押して「コピー」

5.  ⇒メモ帳に移動して、「Ctrl」+「V」キーを同時に押して「ペースト(貼り付け)」

 

※例として、タグ記述はこのような↓感じです。

これはダミーなのでURL先に行っても何も表示されませんよー!

<img src="http://108sedori.net/wp-content/uploads/2022/07/prof.png" width="180" height="180">

WEB上に表示するため、「<>」大文字表記してあります。実際に使う時は、半角の「<>」に変換してください。

 

5. ダッシュボードに戻り、「外観」⇒「ウィジェット」を表示する

 

6.  左側の「03_STINGER フリーボックス」を、右側にある「サイドバートップ」の中へ引っ張って入れる。

prof-3

「サイドバートップ」の中には、デフォルトでいくつかウィジェットが入ってるので、いらない物は左側に引っ張って削っておきます。

 

7. 「03_STINGER フリーボックス」の入力ボックスの一番上に、先ほどメモ帳に入力したタグをコピーして、前に<center>、後ろに</center>タグを入れる。

 

8. その後につづけて、タイトルボックスプロフィール文を入力⇒右下の保存ボタンを押せば完了!

prof-4

 

【ちょこっと解説します】

2. の手順で入れたタグの「width="180" height="180"」部分は、画像の縦横サイズを指定しています。サイズが最初から180×180の場合は、入れる必要はありません。

 

7. の手順で入れた「<center> </center>」タグは、画像を中央に配置するためのタグです。

 

♥改行も反映されますので、入れすぎないよう、表示を確認しながら調整してください。

 

以上で操作は終わりです。

 

うまく画像が表示されない場合は…

入力フィールドに画像のURLを入れたのに、プレビューしてみると壊れた画像の表示になってしまう場合は、

「画像URLアドレス」が間違っている

「タグ記述」が間違っている

いずれかが原因です。

 

「画像URLアドレス」「タグ記述」は、

途中で改行が入ってしまうと機能しない

ことがありますので、改行が入らないように気を付けて作業しましょう。

 

ここで注意したいのは、ウィジェットの枠は横幅がないので、自動的に文章が折り返し表示されるということ。

つまり、

見た目どこで改行が入っているか分かりづらく、確認できない

のです。

 

なので、「03_STINGER フリーボックス」にタグを入力をするときには、ボックスに直接入力しないで、一度

メモ帳に改行ナシで入力⇒コピーペースト

するのが一番安心です。

 

この時点で改行が入っていなければ、ウィジェット上で文字が折り返されて表示していても問題ありません。

あとは操作的に特に難しいところはないと思います。

お疲れさまでした(^^♪

 

次回お題はファビコン

次の更新記事についてですが、ブラウザのタブ↓の左側についているお花のマーク

 

tab ファビコン

と言いますが、この

ファビコンのSTINGER PLUS+での設置方法

について、解説してみたいと思います。

 

それでは、この記事がお読みくださった方のお役に立てば嬉しいです。

最後まで読んで頂きありがとうございました。manoでした!

 

 

★おススメ無料電子書籍★記事下

 

 

▼▼▼【Amazonベストセラーランキング1位】を獲得した

電子書籍を無料プレゼント中!

だいぽん-自由な人生を手に入れる教科書

せどりを含め、ネットビジネスで稼ぐための大事な考え方が身につきます。
そして、「なぜ今まで稼げなかったのか、稼ぐためにはどうしたら良いのか」が分かるようになりますよ!(^^)/

ランキング


【人気ブログランキング】
この記事がお役に立ちましたら、ポチっと押して頂けると励みになります♪

問い合わせ


★記事を読んでの疑問や質問、せどりに関するお悩みなどがありましたら、
「問い合わせフォーム」よりお気軽にご連絡ください!
24時間以内に100%お返事致します(^^♪

-ウィジェット設置
-, ,