自分力ブログ

糖質制限で加齢の食い止め、睡眠の短時間化、ビジネススキルの向上を目指します٩( ᐛ )و

【Stingerのカスタマイズ】プロフィール欄をつくろう

      2016/12/29



スティンガーのカスタマイズでお困りの方は

 

Stingerのカスタマイズ記事一覧をご覧ください(^ ^)

 

けっこう見ているプロフィール

 

他の人のブログに行くときプロフィール見てますか??

 

私はしっかり見てます。

 

だからあなたのブログにも早い段階でプロフィール欄を設置しましょう。

 

画像は必ず用意します。写真が一番いいけどそこまでの勇気はない。という人はアバター(自分に似せたキャラクター)を作ったり自分で似顔絵描いたりしましょう。

 

今すぐに用意できないよ~という人はアバター作成アプリでサクッと作ってしまいましょう。無料でかわいいのが手軽に作れます。便利!!

 

前は『アメーバピグ』でアバターを作りました。

 

ひーさん

このアバターは前のブログで5か月間お世話になったものなので思い入れもあるのですが、ワードプレスにお引越しを機に変えてみました。

 

今回は『say people』で作りました。作るのに3分とかかりませんでした。とっても気に入ってます。
ひーさん

自己紹介は詳しく書くほうがいいです。興味あることが自分と同じだったり年齢が近いと親近感湧きますから。

 

プロフィールをサイドバーの上部に設置!!

 

ウィジェットから設置するとサイドバーの真ん中あたりに表示されて目立ちません←私の失敗

 

トップ画面を開いたときに目に入る位置にするにはコードを直接編集する必要があります。

 

「sidebar.php」を編集します。

 

管理画面から→外観→テーマの編集→右端から サイドバー(sidebar.php)をクリック。

 

挿入場所は下図の赤い線のところです。

挿入場所

↓これを赤い線のところにコピペします。文字と画像のURLは変更して保存してください。

<!–プロフィール–>
<div class=”twibox”>
<h4 class=”menu_underh2″><i class=”fa fa-file-text-o”></i>&nbsp;ひーさんについて</h4>
<div class=”textwidget”><img src=”http://jibun.pw/wp-content/uploads/2015/02/image-150×150.jpg” width=”100″ height=”100″ class=”float-left” style=”margin-right:7px;”>
<ul><li>整体の仕事をしている38歳の主婦。<br>2015年夫と会社を立上げました。<br>2016年中に自分の会社とブログと絵で生計を立てる!!<br></li></ul>
</div></div>
<!–プロフィールここまで–>

 

もう一度サイトを表示させると右上に出てきました??うまくいかないときはコメントください。

【2016年12月追記】

もうひとつのブログstinger6でこれを見ながらやって見たらうまくいかず。。。画像も表示されず。。。

画像は普通の記事にメディアを追加から選んで表示させる。←ビジュアルタブ

テキストタブを開き、そのURLをコピペしたらうまく表示されました。

<!–プロフィール–>
<div><img class=”aligncenter size-full wp-image-655″ src=”http://tomy-blog.com/wp-content/uploads/2016/12/-e1483012595775.png” alt=”” width=”200″ height=”215″ />
<ul><li>管理人のひーさんです。2015年夫と起業。<br>零細企業の日常を記事にしています。<br>2018年中にブログ収入10万円を狙ってます。</li></ul>
</div>
<!–プロフィールここまで–>

シンプルにこのようにしたらうまくいきました。もうひとつのブログ のサイドバーで表示状態をご覧くださいm(_ _)m

 

プロフィールにちょっとしたアクセントをつける

 

しかーし!!ちょっと問題がある。お手本サイトにはいい感じに「ひーさんについて」の前にボタンが設置されてるのに私のにはない。。。

 

これがあるのとないのではおしゃれ度が違う(つд⊂)エーン

 

原因はstinger3とstinger5のCSSのテンプレートが微妙に違うため。ないものはつけるべし!!

 

追加する前に注意:アイコンはいろいろ選べます。フォントオーサムのサイトから赤枠のiconをクリックして好きな画像を選びます。iから始まるタグを黄色のところに追加するだけです。

 

フォントオーサム

<h4 class=”menu_underh2″><i class=”fa fa-file-text-o”></i>&nbsp;ひーさんについて</h4>

 

私はテキストファイルのアイコンにしてみました。なかなかいいでしょ?

 

パソコンで見るとこんな感じ。
プロフィール

 

タブレットで見るとこんな感じ。
プロフィール2

パーフェクトではありませんが、ベターなのでよしとします。そこは走りながら修正していくということで♪

 - stingerカスタマイズ

グーグルアドセンス 記事下

スポンサーリンク

グーグルアドセンス 記事下

スポンサーリンク

Comment

  1. 隊長 より:

    やっぱプロフは重要ですよね。

    どうも気に入ったのがなくて自作したりしてますが、やっぱなかなか上手くは描けないもんです。

    頼まれて描いたりもしますけど、
    やっぱ記事を書いたりでもそうですけど、なんでも数をこなして慣れるってことですね。

  2. 匿名 より:

    画像が表示されず、小さな□の中に✖が表示されたものしか出ないのですが原因はなんでしょうか??

    • ひーさん より:

      画像が読み込めてないのが原因です( ;´Д`) 画像のアドレスが私のアドレスなので匿名さんがこれをコピペするとエラーになります。
      管理画面のメディアライブラリ➡︎表示したい画像をクリック➡︎url欄にアドレスが出てますよね?それに差し替えてみてください^o^

Message

メールアドレスが公開されることはありません。

  関連記事

【Stingerのカスタマイズ】アイキャッチ画像を記事トップに表示させる

アイキャッチ画像を設定しよう   グーグルアドセンスの申請中だったので …

【Stingerのカスタマイズ】『WordPress Ping Optimizer』でPing送信をする

Ping送信ちゃんとしてますか?? ブログを始めたばかりで右も左もわからない。黙 …

スパムコメントを撃退する『Akismet』の設定でヒヤっとしました。。。

なんという間抜け野郎なんだ。。。   初めてスパムコメントを受け取った …

ワードプレスが全くわからない1年前の自分に読ませたい記事を書きました

去年の今頃私は焦ってました。   ワードプレスでブログを始めようとした …

【Stingerのカスタマイズ】記事に見出しをつけたい

見出しをつけて記事を読みやすくしよう 見出しをつけると、文章にメリハリがでてぐっ …

意外な盲点!!文字を大きくするだけで読まれるブログになる!!

既にある自分の強みをテーマに考えてました。   見つけました。私が人に …

ワードプレスの個人情報って簡単に流出しちゃうんですね(汗)今回私がした対策

とあるブログに助けられた。無知って怖い。。。   とあるブログとは、私 …

ブログの表示速度が遅くなっているですと!?原因は画像の重さ?『EWWW Image Optimizer』を設定

グーグルさんが表示速度遅いですよ!!と教えてくれた   いつものように …

やっと重い腰をあげて人気記事表示とヘッダーの改造をやってみた

アクセスアップしたいならやっといたほうがいいこといくつできました?   …

【Stingerのカスタマイズ】Googleアドセンスを初めてブログに貼ってみた

ブログを始めたらGoogleアドセンスに申し込み ブログを始めて記事を書いたらG …