*

続5)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

stinger3

日々進化を遂げているワードプレスの無料テーマStingerは、バージョンが3になりました。近頃、STINGER3の公式サイトも出来た模様です。これから記事がどんどん追加されるので、ぜひ公式サイトをよく読んで、多くのブロガーさんにSTINGER3を使って欲しいと思います。

実は、STINGER3の公式サイト内「カスタマイズ記事を書いているブログのページ」に、拙ブログを掲載して頂いた模様です。

ありがとうございます!!!

こんなに嬉しい事はありません。これからも、STINGER3を大切に使わせていただきます。

さて、前回はトップページのカスタマイズをしました。スマホ対応も万全ですね。今日は、サイドバーにメスを入れてみましょう。

女子ブロガー向けカスタマイズの手順その6

サイドバーをカスタマイズしよう

サイドバーはPCで見ると、本文コンテンツの右側にあります。サイドバーには、サイトを補足する情報を好きな順番に好きなだけ掲載することができます。スマホで表示した時、本文の下にずら~っと並ぶので、あまり長すぎないほうがいいでしょう。

Feedlyボタンを検索窓の下に設置しよう

このブログをスタートするにあたり、検索エンジンからの集客はもちろんですが、今までやっていなかったSNSによる拡散と、RSS配信なんかもしようと決めていました。

いくつか調べた結果、Feedlyにたどり着きました。というか、Feedlyを使ってる人多いですよね…。私も貼りたいので、さっそくFeedlyボタンを作りましょう。

↓ これのことです。
follow us in feedly

Feedlyのサイトにボタン作成ツールがあります。
Feedlyボタンの作成

英語で書いてありますが、簡単3ステップなのでご安心ください。

・ステップ1 デザインを選ぶ
・ステップ2 サイトのフィードアドレスを入力する
  ワードプレスの場合、これでOK→ http://サイトのURL/feed/
・ステップ3 出来たコードをコピーする

サイドバーの検索窓の下に表示させます。管理画面→外観→テーマ編集→サイドバー(sidebar.php)の8行目

この検索窓のコードの下に、feedlyボタンのコードを貼るだけです。もし、少し間隔を開けたい場合は、間に改行タグを挟んでください。

投稿記事にもFeedlyボタンを入れたい場合は、管理画面→外観→テーマ編集→単一記事の投稿(single.php)の任意の場所に貼ってください。私は、記事の下の方、日付・カテゴリーの下に入れています。

↓ これの下に

↓ これを入れてから、ボタンのコードを入れています。

※ツイッターボタンに関しては、ご要望があれば書きたいと思います。

運営者情報をNEW ENTRYの上に入れよう

サイト訪問者にとって「どんな人が記事を書いているのかな?」というのは気になるところです。そして、運営者情報を見てくれた人は、親近感が湧いて、また遊びに来てくれるかもしれません。

著者のプロフィールは、ブログに欠かせないもののひとつです。

運営者情報は、なるべく目に付きやすい場所に掲載したいので、記事の最後や、サイドバー上部に入れるといいでしょう。今回は、ENJILOGさんと同じように検索窓とNEW ENTRYの間に入れてみましょう。(まねてばかりでスミマセン)

通常、WPのサイドバーは、ウィジェットの並び順を変えるだけでいいのですが、STINGER3の場合、「アドセンス、検索窓、NEW ENTRY」がデフォルトで挿入されています。

STINGER3で、ウィジェットのサイドバー1に入れたものは、デフォルトの「アドセンス、検索窓、NEW ENTRY」の下に表示されることになります。

そこで私は、少々荒技ですが、テーマに直接書き込んでしまいました。子テーマにしている方は、子テーマのファイルに書いて下さい。

これが挿入するコードです。aboutを好きな言葉に直して、詳しいプロフィールのところに、自己紹介やプロフィールなどを記入します。

管理画面→外観→テーマ編集→サイドバー(sidebar.php)の、最近のエントリーの2行上に、先ほど作成したものを入れます。リスト表示(ulタグ)を使用しているのは、文字の大きさを揃えるためです。ulとliタグを外すと文字が大きくなります。

NEW ENTRYの表示数を変えよう

自動的に新着記事が表示されるNEW ENTRYですが、掲載数を増やしたり減らしたりすることもできます。最初は表示本数が5個になっているので、この数字を変更すると表示数も変わります。

数値は、お好みで変更して下さいね。

サイドバーのタイトルを可愛くしよう

side1

サイドバーの見出しに使われている画像の大きさは、30ピクセル×30ピクセルです。色もグレーで、形もシンプルで素敵ですが、同じテーマを使用している人が多いので、可愛い画像に変えてみましょう。

side2

嗚呼、また違う場所をキャプチャしてしまいましたー。

フリー素材*ヒバナさんのアイコン素材を使わせていただきました。私が選んだ花アイコンは、大きさが36ピクセル×35ピクセルなので、30ピクセルに縮小して、背景の色は自分のサイトと同じ色にしました。(あれ、透過したんだったかな?)

アップロードした画像のURLを追記するだけで、変更できます。デフォルト画像と同じ大きさの画像を使うと、画像のURLを変えるだけでいいので楽です。小さいアイコンの場合は、paddingで調節してください。

画像を使わずに、ラインを入れたり、背景色を変えたりしてもいいですね。

カテゴリーのカスタマイズ

カテゴリー欄は、子カテゴリーがちょっと親カテゴリーと近い(行間が狭い)ところが気になったので、少し広げました。

ついでに、全体の行間も少し縮めました。

また、私個人の好みで、カテゴリーメニューとページメニューにリストマークを画像で入れてみました。本当は、子リストに違うリストマークを入れたかったのですが、変え方がわからず、全て同じものになっています。出来るようになったら、追記します。

スクロール広告用のカスタマイズ

スクロール広告のデフォルトのセンタリングを解除したい方は、管理画面→外観→テーマ編集→サイドバー(sidebar.php)の一番下のセンタリング設定を変更してください。テーマファイルに直接、センタリング設定が書かれています。

2行目の、centerをleftに変更してください。

今回のまとめと次回の予告

サイドバーのPC表示のカスタマイズが終わりました。次回は、サイドバーのスマホ表示を検証したいと思います。お楽しみに。

スポンサードリンク

スポンサードリンク

この記事が少しでもあなたのお役に立ちますように
  • このエントリーをはてなブックマークに追加

2013/10/02 | WordPress


サイトの更新情報をお知らせしています

follow us in feedly follow me

関連記事

続4)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

ワードプレス使いのブロガーさんの中で、最強のテーマとまで言われ...

記事を読む

続3)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

前回は、記事タイトルとページタイトル、小見出し(h2とh3)の...

記事を読む

続2)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

私が現在カスタマイズしているSTINGER3のバージョンは、2...

記事を読む

続)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

前回の記事で、ヘッダー周辺を可愛くカスタマイズすることができま...

記事を読む

新着記事

無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

無料で化粧品がもらえるお得なモニター情報です。ノエビアの薬用ホワイトニ...

記事を読む

消えものギフトの最高峰!とろける幻の高級ふりかけ「口どけ」さん

ふなっしーとパンとスープカレーが大好きな私ですが、毎日そればか...

記事を読む

ポーズパンで人気のブッロ!バターの香りとフォアグラパテで幸せ~

2013年10月19日にオープンしたパン屋さん「ポーズパン」さ...

記事を読む

ふな ふな ふなっしー♪ふなっしーデビューCD、本日発売なっし~

ふなっしーの魂の叫び!激しくもポップな「ふなメタルロック」サウ...

記事を読む

ふなっしーの「恋するフォーチュンクッキー」みんなと踊ったなっしー

AKB48の「恋するフォーチュンクッキー」を、いろいろな人たち...

記事を読む

コメント/トラックバック (10件)

トラックバック用URL:

コメントフィード

  1. […] […]

  2. 凄く参考にさせてもらってます^^

    質問なのですが…
    サイドバーのタイトルを可愛くしたいのですが、
    なかなかできません(>_<)
    よかったらどの部分に貼り付ければいいのか
    詳しく教えて頂くことは可能ですか??
    よろしくおねがいします。

  3. コメントありがとうございます。
    サイドバーのタイトルは、
    .menu_underh2 {
    }
    の{ }内に装飾する記述を書きこみます。

    アイコンを変更する以外に、線を入れたり、背景の色を変えたりするといいと思います。頑張ってください。

  4. 男ですけれど、えけこさんのブログを参考にしながら、今、カスタマイズに取り組んでいます。

    少しずつ頑張ってきたのですが、「カテゴリー」のカスタマイズの所で行き詰まってます。。。

    そこで、質問があります!

    まさしく、やりたいことは、全く同じです。

    親と子の行間を少し広げること。
    全体の行間を少し縮めること。
    メニューに画像を入れることです。

    しかし、どこに貼り付ければいいのなどが、いろいろと調べてみても、よく分かりません。。。

    そのため、ちょっとお手数ですけれど、詳しく教えていただけたらうれしいです。

    頑張りますので、是非、よろしくお願いいたします。m(_ _)m

  5. お返事が遅くなり申し訳ありません。
    貼りつける場所は、ワードプレスの管理画面の左側「外観」→「テーマの編集」をクリック。するとスタイルシートが表示されているので、その一番下に変更したいコードを追記し、「ファイルを更新」ボタンをクリックします。
    頑張ってください。

  6. 非常にわかり易い記事で、とても参考になりました。ありがとうございます。拙いブログを運営していますが、今後も参考にさせてもらいながら頑張ろうと思います。

  7. コメントありがとうございます。私も頑張るので、zyuuzouさんも頑張ってくださいね。

  8. えけいこさん
    ありがとうございます!こんなわかりやすい記事ってなかなかないです!
    一つ質問させてください。運営者情報を追加することができたのですが、えけいこさんのべろんべろんのよっている犬?みたいな画像を入れたいんですが、どうやれば画像を入れることができますか?教えてください!よろしくお願いします。

  9. やはりできました!ありがとうございます!

  10. 松本さんへ
    良かったですね!これからも頑張ってください。




管理人にのみ公開されます

*

スポンサードリンク


follow us in feedly follow me
無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

無料で化粧品がもらえるお得なモニター情報です。ノエビアの薬用ホワイ...

消えものギフトの最高峰!とろける幻の高級ふりかけ「口どけ」さん

ふなっしーとパンとスープカレーが大好きな私ですが、毎日それ...

ポーズパンで人気のブッロ!バターの香りとフォアグラパテで幸せ~

2013年10月19日にオープンしたパン屋さん「ポーズパン...

ふな ふな ふなっしー♪ふなっしーデビューCD、本日発売なっし~

ふなっしーの魂の叫び!激しくもポップな「ふなメタルロック」...

→もっと見る

  •  
  •  

  • Amazonアソシエイト・プログラム規約による記載
    えけこのくるるはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
PAGE TOP ↑