KASABUTA-ENDLESS

*

STINGER5でサイドバー上部にプロフィール欄を設置する方法

      2014/09/26

スポンサーリンク

ワードプレステーマSTINGER5でサイドバーの最上部にプロフィール欄を設置する方法

以前、プロフィールを作成してブログのサイドバーに設置しました。

人気ブログになるためのプロフィールの書き方 | KASABUTA-ENDLESS
KASABUTA-ENDLESS(かさぶたエンドレス)について | KASABUTA-ENDLESS

設置したのは良いのですが、、、

トップページはこんな感じで、

2014-09-25_220217

プロフィールはこの位置にあります。

2014-09-25_220236

分かりにくいかもしれませんが、とても変な場所にあります。

あれ?一番上に設置したはずなんだけどなぁと思いました。

STINGER5では「外観」→「カスタマイズ」→「ウィジェット」→「サイドバーウィジェット」で

2014-09-25_221212

サイドバーの編集画面になります。

ここでサイドバーに設置するコンテンツの新規追加や順番入れ替えなどが出来ます。

ここで一番上にプロフィールを設定していたため安心していたのですが、なぜが「NEW POST」の下になってしまっています。

ページ開いてすぐ見えるところでプロフィール、運営者情報が見えるほうがページ閲覧者からしたら安心できますよね。

どうにかしてプロフィールを上に持って行きたい!

ということで作業を始めたいと思います。

STINGER5のサイドバーをいじってしまうよ

こちらの記事を参考にします。yutasanoさんありがとう!

STINGER3カスタマイズ!NEW ENTRYの上に運営者情報を入れる。

意外と簡単そうですよ!

ちゃちゃっとやっちゃいましょ。

参考にした記事では「検索ボタン」の下に設置していますが、私は一番上に設置します。

まず、「外観」→「テーマ編集」から右側の「サイドバー」へ。

2014-09-25_223219

赤線を引いているトコロに、

<div class="twibox">
<h4 class="menu_underh2">about</h4>
<div class="textwidget">
<ul><li>詳しいプロフィール</li></ul>
</div></div>

上記のコードを入れます。

すると、

2014-09-25_225501

こんな感じでちゃんと表示されてますね!

あとは文字を替えたり、プロフィール画像を入れていくだけです。

上のコードの「about」には「ブログ運営者」とか「筆者」とか「管理人」とか、まぁそのまま「about」でもいいと思います。

「詳しいプロフィール」の部分に自分のプロフィールを書きましょう。リンクタグも使えるので詳しいプロフィールに誘導リンクをつけてもいいと思います。

<div class=”textwidget”>の後ろにimg src=~のタグを使ってプロフィール画像を持ってくることが出来ます。大きさは150×150あたりが一般的かと思われます。

<div class="twibox">
<h4 class="menu_underh2">運営者プロフィール</h4>
<div class="textwidget"><img src="http://kasabuta-endless.net/wp-content/uploads/2014/09/108901r1-e1411653992236.png" class="alignnone"/>
<ul><li>男25歳熊本在住。
挑戦してケガしてカサブタできて。
その繰り返し。
そして、その度、皮膚は強くなる。
<a href="http://kasabuta-endless.net/kasabuta-endlessについて" target="_blank">→詳しいプロフィール</a></li></ul>
</div></div>

こんな感じでどうかなッ!?

2014-09-25_231642

あ~うん。微妙だ。

微調整が必要ですね。

画像にはfloat-left、margin入れたがいいかな?

  <div class="twibox">
   <h4 class="menu_underh2">運営者プロフィール</h4>
   <div class="textwidget"><img src="http://kasabuta-endless.net/wp-content/uploads/2014/09/108901r1-e1411653992236.png" class="float-left" style="margin:0px 5px 0px 5px;"/>
   <ul><li>男25歳。<br>ブログの運営、ネットショップやYoutubeチャンネル収益、ゲームやアニメ、有象無象に興味がある。         
<a href="http://kasabuta-endless.net/kasabuta-endlessについて" target="_blank">→詳しいプロフィール</a></li></ul>
   </div>
   </div>

これでッ、どうだッ!?

2014-09-25_234159

うん。及第点。

フォントのサイズとか文章の内容とか色々気になりますけど、早く投稿しないと一日一回記事投稿という掟を破ってしまうので(笑)

あと10分くらいで明日になってしまう…。

お前らまとめて、まとめてやる~!

とにかく、STINGER5でプロフィールをサイドバーの一番上に持ってきたい場合は、

テーマ編集の「サイドバー」から、追加してしまえばいいわけです。

ただ重要で繊細なphpでもありますからバックアップとかはしておいたほうが身のためです。

私は危険を顧みずやってますけど…

さて今回の記事は誰かのタメになりましたでしょうか?

私は今回の記事の内容で満足しました(笑)

ここまでお付き合いいただき誠にありがとうございました。

またお見えできる機会を楽しみにしています。

 - WordPress, 問題解決

336adosensu

336adosensu

Comment

  1. […] 今日のこの設置方法はKASABUTA-ENDLESSの記事を参考にさせていただきました。 […]

  2. […] 。満足です♪ トップページにプロフィールを載せる方法はこちらSTINGER5でサイドバー上部にプロフィール欄を設置する方法 を参考にさせていただきました。 プロフィール画像は先ほどフ […]

  3. […] 満足です♪ トップページにプロフィールを載せる方法はこちらSTINGER5でサイドバー上部にプロフィール欄を設置する方法 を参考にさせていただきました。 プロフィール画像は先ほどフ […]

  4. おとや より:

    助かりました!!本当にありがとうございます!

Message

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

  関連記事

By: Waiting For The Word
WordPressインデックスされない!原因と理由は?

スポンサーリンク WordPressブログがインデックスされない原因と理由を調査 …

By: Piotr Drabik
ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …

By: Angie Garrett
[WordPress]記事の終わりにプロフィール・著者情報を自動挿入してくれるプラグインですって

スポンサーリンク [WordPress]記事の終わりにプロフィール・著者情報を自 …

By: maaco
ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

スポンサーリンク ワードプレスの記事中で他のサイトをスクリーンショット画像とタイ …

By: JD Hancock
人気ブログになるためのプロフィールの書き方

スポンサーリンク 人気ブログになるためにアルファブロガーのブログのプロフィール欄 …

By: Chris Potter
画面のキャプチャ後に編集まで出来ちゃう拡張機能(アドオン)が便利らしいゾ♪

スポンサーリンク クロームやインターネットエクスプローラー、ファイアフォックス等 …

2015-02-05_224359
アキネイター:アナタの考えは見透かされてますよ。

アキネイターってサイト、もしくはアプリ知ってます? なんとなくは知ってたんですけ …

dnserror
エラー105「DNS ルックアップでエラーが発生したため…」の解決方法

DNS ルックアップでエラーが発生したため、kasabuta-endless.n …

By: Linus Bohman
[WordPress]プロフィールをサイドバーに載せるプラグイン4つを試してみた

スポンサーリンク [WordPress]プロフィールをサイドバーに載せるプラグイ …

By: Shannon Kringen
[WordPress]子テーマ作成の一番手軽で簡単な方法!プラグイン『Duplicate Theme』

ブログの文字サイズを大きくしようかと思い、子テーマのCSSをいじろうかとしたら、 …