ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

【STINGER5カスタマイズ】サイドバーにプロフィール設置

       後で読む

今回はSTINGER5カスタマイズのお話です。サイドバープロフィールを追加してみましたのでそちらのやり方をメモしていきたいと思います。なぜ、プロフィールを追加したのかは一番下にでも書いておきますので興味があれば。

プロフィールを追加するにあたってsidebar.phpのファイルを編集します。子テーマ側のにコピーして作成しておくのがいいと思います。

SPONSORED LINKS

【STINGER5カスタマイズ】プロフィールをサイドバーに入れる

サイドバーに関してはデフォルトは上からAdSenseの広告枠・RSS・検索BOX・NEW POST・・・のような形になっているかと思います。今回はAdSenseとRSSの間にプロフィールを入れてみよう。ということでやっていきます。この部分はsidebar.phpで制御されています。そのうち該当する箇所は下記になります。

 <div class="ad">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : //アドセンス ?>
    <?php endif; ?>
  </div>
<?php } ?>

 <!-- ここにプロフィールを入れてみます。 -->

 <!-- RSSボタンです -->
  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>
  <!-- RSSボタンここまで -->

ちょうどRSSボタンの上の部分にコードを書けばいいだけですね。ということでコードとにらめっこをしながら今回は下記のようなコードを入れてみました。

<h4 class="menu_underh2">このブログを書いている人</h4>
<div id="kanren"><div>
<dl class="clearfix">
 <dt><img src="ここに画像のURL" ></dt>
 <dd><h5> ここに名前</h5>
<p>ここは簡単なコメント<br><a href="固定ページへのリンク" >→プロフィール</a></p></dd>
</dl>
</div></div>

特に難しいことは有りませんね。今回は、新着記事と同じ形式の見せ方をしたかったので下記のことを考えてコードを書いています。

  • サイドバーのタイトルにはh4の「”menu_underh2″」のクラスを設定
  • 名前の部分は記事名と同じ「h5」を設定
  • 抜粋文の部分は<p>で囲んであげる
  • imgに関してはaside部分は別途設定をしてある模様だったのでそのまま

そうするとこのような形の見た目になります。asideでサイドバー自体を定義していてくれているみたいだったので結構簡単にできますね。
scap上と下で合わせてみてもらうと分かりますが、しっかりと「NEW POST」の部分と同じ見た目になっているかと思います。一安心です。

大本のコードを見ているとちょうど抜粋文に当たる部分には「smanone」というスマホだけ非表示のclassがあたっています。これは、スマホで見た時に「タイトル」と「抜粋」が来ると間延びしてしまうために非表示にしているようでしたが、今回は文字数が不変でボリュームの調整ができるので削除しています。

プロフィールを入れた理由

何回か書いているかもしれませんが、今後の世の中を考えると個人がメディア化、ブランド化していかないとこのコモディティ化する世の中じゃ仕事がなくなる、色々辛い事になりそうという個人的な考えがあるので

  • 読者への安心感が増す
  • 個人のブランド力強化

という意味で今回はプロフィール欄の追加と、サイト・筆者紹介ページをざっくし作りました。

あんまし、深く考えてないよって人に関しても、個人のパーソルな部分を晒すことによってファンが付く可能性もあるのであったほうが良い要素かなと。顔が見えない人が書いているよりも、顔が見える人が書いていたほうが信頼感・安心感があるでしょ。

てな感じで。

 - STINGER5, WordPress , ,

  関連記事

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

icon_1r_192
【アクセス数報告】2015年6月のPVとアフィリエイトの収益とか

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です