初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

[STINGER3]トップページ・サイドバーのカスタマイズ

      2015/04/15

[STINGER3]トップページ・サイドバーのカスタマイズ

STINGER3の基本的なカスタマイズ第2弾です。

改めて新しいサイトを作るとき、「ここどうだっけ?」と思うこともしばしば。

きっとすごく単純なところだと思いますが、覚え書きしておきます!
(もし違っているところがあればご連絡下さい~)

スポンサーリンク

STINGER3 トップページのカスタマイズ

トップページの記事のタイトルのカスタマイズ

記事タイトルにマウスポインタをあてた時のリンクの色の変更

STINGER3記事タイトルにマウスポインタをあてた時のリンクの色の変更

 

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

h3 a:hover { ←を探します。

マーカーの部分の色を変更します。

 

記事タイトルの文字の大きさを変える

.entry-title-ac a {

4行目「font-size: 〇〇px;」を追加します。
お好きな大きさに変えて下さい。

 

スペースのカスタマイズ

ブログタイトルの上の謎の空欄を消す

ブログタイトルを画像に変更したら、なぜか謎な空白が・・・!

#container #header #header-in #h-l .sitename { ←を探します。

6行目に「margin-top: 0px;」を追加します。

多分ピッタリではないと思いますが、少しマシになりました(;´Д`)

 

STINGER3 メニュー(ナビゲーション)のカスタマイズ

STINGER3のメニューを太字で立体的にする

STINGER3メニュー(ナビゲーション)を太字で立体的にする

メニューを太字にする

太い方が見やすいかな~と思い、太字にしてみました。(この方法でいいのかどうか不明)

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

#navi-in li a { ←を探します。

4行目に「font-weight: bold;」を追加します。

 

メニューに影(立体的に)を付ける

このサイトは太字にしてあるだけなので上の画像で確認して下さい。

先程と同じく、#navi-in li a { ←を探します。

4行目「text-shadow: 1px 1px 1px #aaa;」を追加します。

ちなみに

text-shadow: 1px(横→方向にずらす) 1px(縦↓方向にずらす) 1px(ぼかし具合) #aaa(色);

です。

 

 

STINGER3 サイドバーのカスタマイズ

このサイトではないのですが、もうちょっとオリジナルっぽくしたくて、サイドバーを変えてみました。

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

サイドバーの見出しの色とアイコンを変える

STINGER3サイドバーの見出しの色とアイコンを変える

サイドバーの見出しアイコンの変え方

まずは、アイコンに使いたい画像をWordPressの「メディア」-「ライブラリ」にアップしておきます。

画像のURL

アイコンのURLをメモしておきましょう。

 

.menu_underh2 { ←この部分を探します。

10行目には見出しの前に付ける画像のURL(先程メモしたURL)を入れます。

 

サイドバーの見出しの色を変える

8行目に「color: #686661;」を加えてお好きな色に変更します。

 

サイドバーの見出しの下に点線を入れる

9行目に「border-bottom: 2px dotted #686661;」を加え、線種と色をお好きなものに変更します。

線の太さや形はお好みで。

線の種類
solid  (実線)
double  (二重線)
dotted (点線)
dashed  (破線)
none (線なし)

 

サイドバーに背景色を付ける

背景に色を付けた場合、サイドバーは白いままにしたいと思い、設定してみました。

STINGER3サイドバーに背景色を付ける

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

#wrap #wrap-in #side { ←この部分を探します。

マーカーの部分(5~8行目)を追加します。

お好きな色に変更して下さい。

 

 まとめ

以上が私がSTINGER3でカスタマイズしたところです。

もしかしてもっといい方法があるかもしれませんので、違っていたらすみません!

カスタマイズするときはバックアップをお忘れなく!

 

 - STINGER , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket

Message

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

  関連記事

STINGER5
STINER5インストールとカスタマイザーで色のカスタマイズ

とうとう、STINGER3からSTINGER5にバージョンアップを行いました。 …

STINGER3 ウィジェット広告の設置方法と配置は?
STINGER3 ウィジェット広告の設置方法とサイトの配置は?

前回のウィジェットの設定方法の続きで第2回目となります。 今回はワードプレスのテ …

STINGER3 基本的なカスタマイズ
[初心者]STINGER3の基本的なカスタマイズ

スポンサーリンク このページの目次1 STINGER3 テキスト色や装飾の変更1 …

[stinger3]ワードプレスヘッダー画像と背景色の変更
[STINGER3]ワードプレスのヘッダー画像と背景色の変更方法

今回は、いよいよワードプレスのテーマSTINGER3のカスタマイズです。 ◆今回 …

FeedlyボタンとRSSボタンを並べて設置する方法は?
FeedlyボタンとRSSボタンを並べて設置する方法は?

今回は、以前から付けたいと思っていたFeedlyとRSSのボタンの設置方法です。 …

snsボックス
【Stinger3】SNSボックスを縦に トップページ以外は非表示にする

お世話になっているStinger3で、少し気になるところと言えば、追尾してくるS …

[初心者]ワードプレスのテーマSTINGER3をインストールする
[初心者]ワードプレスのテーマSTINGER3をインストールする

今回は、ワードプレスにテーマを設定してみましょう。 スポンサーリンク このページ …