stingerのカスタマイズ 背景の変更

スポンサーリンク

stinger記事タイトル背景修正

WordPressテーマ「Stinger」は無料でありながら、手軽にSEO対策が出来るテンプレートです。言うまでもなく、いわしブログのテーマもStingerです。

その良さが広まるにつれ、Stingerをテーマにしたブログを目にする機会が増えてきました。

人とテーマが被ってしまうと、何となく気まずい感じがするのですが(いわしだけ?)、背景を変えるだけでブログのイメージはガラッと変わります。

というわけで、「Stinger3」をカスタマイズして、背景を変更してみました。

カスタマイズしたのは、畏友竹内氏のブログ「台湾茶販売 京都 亮茶房ブログ」です。「Stinger3」をテーマに使用しています。

メインコンテンツは台湾茶にまつわるお話や茶会の案内、京都の行事などで、背景もそのイメージに合わせて、モスグリーンの渋い紙を背景に使いました。

Stinger 背景素材の選択

では、背景素材を選びましょう。素材はColissさんのこの記事を参考にして選びました。

http://coliss.com/articles/freebies/freebies-seamless-patterns-by-webdesignerlab.html

紙・布・デニム・皮・草・木などシームレスなパターン素材のまとめ | コリス

使用した背景はこちらの素材を利用します。

http://webdesignerlab.com/resources/free-paper-seamless-patterns

Free Paper Seamless Patterns | Webdesigner Lab

ダウンロードした素材は「.pat」というPhotoshop用のパターン素材です。

いわしはあまりPhotoshopを使わないので、扱い方がよくわからなかったのですが、こちらのサイトを参考にしてパターン素材から背景用の画像を作りました。

http://www.furimuke.com/2013/01/photoshop-pat.html

Photoshopパターン素材 patファイルの使い方 | ふりむけばコウホウ

出来あがったのがこの背景画像です。なかなか渋いでしょ。

stinger用背景素材

あと、背景ならこんなところもぜひ参考に・・・上記のColissさんといい、PhotoshopVIPさんといい、いつもいい仕事されてます。

http://photoshopvip.net/archives/58234

Webサイトの背景デザインに活用したい、無料Photoshopパターン素材まとめ 2013年度PhotoshopVIP |

Stinger 背景の変更

では、この画像を背景に使ってみましょう。まずはブログのダッシュボード、左メニューから「外観」→「背景」を選択します。

stinger背景変更 外観から背景

「ファイルを選択」を押して、使用する画像を選んでから「開く」をクリック。

stinger背景変更 背景画像を選択

「アップロード」を押すと、背景画像が表示されます。

「表示オプション」の設定ですが、「位置」は中央に、「繰り返し」はタイルに、「スクロールの有無」はお好みでどうぞ。

スクロールにすれば、背景も合わせてスクロール、固定にすればスクロールしても背景は固定されたままになります。「背景色」は設定しなくても大丈夫です。最後に「変更を保存」を押すのをお忘れなく。

stinger背景変更 表示設定

背景用の画像がなくても、背景色だけを変えるという手もあります。

左メニューの「外観」→「背景」から、表示オプション「背景色」をさわれば、背景画像を表示させたのと同じように背景色が変更されます。

見出しとの色の兼ね合いなど、いくつか気になる点もありますが、手軽に全体のイメージを変更することができますよ。

Stinger3の公式サイトに、背景の変更方法が掲載されています。

http://stinger3.com/mokuzi/hakei/

背景画像を変更しよう

Stinger サイドバーの修正

さて、背景を変更するとこんな感じになりました。なかなかよい感じですが、サイドバーの文章が背景と被って少し見づらいので、本文と同様の白地に変更します。

stinger背景変更 プレビュー

CSS コード修正

まずはダッシュボードの左メニューから「外観」→「テーマ編集」を選択して、右に表示されたメニューから「スタイルシート」を選択します。

stinger背景変更 CSS修正

style.cssの430行目にある下記のコードを・・・

#wrap #wrap-in #side {
    float: right;
    width: 336px;
}

このように修正します。

#wrap #wrap-in #side {
    float: right;
    width: 336px;
    border: 1px solid #ccc;
    background-color: #FFF;
    border-radius: 4px 4px 4px 4px;
    padding-bottom: 20px;
    padding-top: 10px;
}

CSSに関する知識のある方は、好みの背景色や数値に変更してください。

さて、結果は・・・この通り、サイドバーも見やすくなりました。

stinger背景変更 サイドバー白地修正

モバイル用CSS コード修正

最後に、モバイル向けCSSも修正します。右のメニューからsmart.cssを選択します。

stinger背景変更 モバイル用CSS修正

372行目に下記のコードがあるので、ここを修正します。

 #side {
	padding: 10px;	
}

#side に、「background-color: #ffffff;」を追記しました。これでスマホでもサイドバーの部分が白地に変わります。

 #side {
	background-color: #ffffff;
	padding: 10px;	
}

Stinger 背景を白半透明に

さらにもうひと捻りということで、背景を白半透明にしてみましょう。

参考にしたのはこちらの記事です。Sakiさん、ありがとうございます。

http://sakihaya.com/2013/12/16/wrap-background/

STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする―

CSS コード修正

まずはCSSにこのコードを追記して、background-color: #FFF;の部分を置き換えます。

background: rgba(255,255,255,0.5);

末尾の「0.5」は透明度の指定で、0が透明、1が不透明です。0.5はちょうど半分ですね。背景との兼ね合いもあるので、見栄えがよくなるように各自調整してください。

追記はメインとサイドの2か所です。こんな感じで置き換わります。

#wrap #wrap-in #side {
	float: right;
	width: 336px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
	padding-top: 10px;
}
#wrap #wrap-in #side {
	float: right;
	width: 336px;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.5);
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
	padding-top: 10px;
}

こちらも同様に置き換え。

#wrap #wrap-in #main {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}
#wrap #wrap-in #main {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.5);
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

これで背景が半透明になりました・・・が、記事タイトルの背景は白いままですね。

stinger背景の変更 記事タイトル周囲

記事タイトル CSSコード修正

再度CSSを修正します。下記CSSにある、background-color: #FFF;を消去します。

#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-weight: bold;
	font-size: 24px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	background-color: #FFF;
}

background-color: #FFF;を消すとこうなります。

#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-weight: bold;
	font-size: 24px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}

関連記事・新着記事 CSSコード修正

関連記事・新着記事のタイトルも白いままなので、上記と同様にCSSを修正します。

こちらはbackground-color: #f3f3f3;を消去。

.post h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f3f3f3;
	line-height: 28px;
}
.post h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	line-height: 28px;
}

あとはここのbackground-color: #FFF;を消去します。

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
}
#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
	margin: 0px;
	padding: 0px;
}

この通り、記事タイトルも半透明になりました。めでたしめでたし・・・

stinger記事タイトル背景修正

モバイルは半透明にせず、白地のままにしてありますが、smart.cssを変更すれば半透明になります。修正箇所は多少変わりますが、一度チャレンジしてみてくださいね。

一つだけ注意点ですが、古いIEだとメインとサイドの背景をCSSで半透明にしても反映されません。確認してみたところ、IE8ではメインとサイドの背景が消えてしまいました。

この記事ではCSSに記載されているbackground-colorを消していますが、古いIE対策として消さずに残しておくのも手かと。

今回使った背景は少し濃いめの色合いなので、サイドバーも見やすいように白地に変更しましたが、薄地の背景ならサイドバーはそのままにしても面白いかもしれませんね。

また、Stingerは今回解説した方法以外でも、ダッシュボードの「外観」→「カスタマイズ」でブログの外観を簡単に変更できます。

Stingerは背景を変更するだけでもイメージが変わるので、一度チャレンジしてみてください。

スポンサーリンク
PC用
PC用

フォローする

コメント

  1. […] stingerのカスタマイズ 背景の変更|ウィンドミル いわしブログ […]

  2. […] stingerのカスタマイズ 背景の変更 […]

  3. WordPress Stinger3 カスタマイズ ネズミデザイン! より:

    […] ウィンドミル いわしブログ stingerのカスタマイズ 背景の変更 […]

  4. 背景にフルスクリーン画像等 サイトデザインを大幅変更 備忘録 より:

    […] Stingerカスタマイズ 背景の変更 […]

  5. べに より:

    いわしさん、こんばんわ。
    スティンガーのカスタマイズからいわしさんのブログにたどり着きました、べにといいます。
    はじめまして。

    いわしさんのブログに書いてあるように私も背景画像を変えたらサイドバーの文字が読みにくくなり何とかしたいと思っていました。
    それでいわしさんの記事にあるように

    #wrap #wrap-in #side {
    float: right;
    width: 336px;
    }
    こちらのコードを

    #wrap #wrap-in #side {
    float: right;
    width: 336px;
    border: 1px solid #ccc;
    background-color: #FFF;
    border-radius: 4px 4px 4px 4px;
    padding-bottom: 20px;
    padding-top: 10px;
    }

    にコピペで貼り直してみましたが変化がありませんでした。

    確認のため
    #wrap #wrap-in #main {

    の部分を削除してみても何も変化はありませんでした。
    私はCSSの事はほぼ初心者に近いためこれ以上解らないのですが原因としては何があるのでしょうか?

    • wind-mill_iwashiblog より:

      いわしです。記事をご覧いただきありがとうございます。

      さて、背景の修正が記事の通りでうまくできなかったとのことですが、
      #wrap #wrap-in #side {
      はともかく、
      #wrap #wrap-in #main {
      を削除してもメインに何も変化がなかったのなら、css自体がきちんと機能していないのではないかと思われます。

      それ以外にも原因はいろいろ考えられますので、
      差支えなければ、該当するサイトのアドレスをお送りください。

  6. べに より:

    いわし様

    本日のお昼ごろにヤフーメールで送った内容ですが手違いにより送れていない可能性があるためこちらにも残します。
    キチンと送られており現在調査中の場合はお見苦しくなりますがご容赦ください。

    昨日ブログにコメントを残したべにです。
    迅速な対応有難うございます。
    まだまだ作りかけのブログのため非常にお見苦しいサイトですがお願いします。

    http://kurenai-hot-news.com/

    また質問の件とは別なのですが、できましたらこちらもお願いしたいと思います。
    (ブログの記事に書いてもらうのでも構いません。)

    ①キャッチフレーズの下にグーグルアドセンスのバナー広告を出したいです。
    ②上記のバナー広告の横にグーグルアドセンスのリンクユニットを付けたいです。

    では、よろしくお願い致します。

    べに

  7. べに より:

    いわし様

    先程、再チャレンジしてみたところ成功しました。
    お騒がせして申し訳ありませんでした。

    バナー広告とリンクユニットも教えていただいた記事を参考にやってみます。
    また解らないことがあったら質問しますので教えていただけると助かります。

    べに

    • wind-mill_iwashiblog より:

      お役に立てたのなら何よりです・・・(^^)
      わからないことがあれば、また質問してくださいね。

  8. stinger 背景の変更をやってみて思ったこと より:

    […] ってことでいろいろとググってみました。 参考にさせてもらったサイト ウィンドミル代表いわしのブログ 背景の半透明化は大変勉強になりました Stinger3カスタマイズ記録―Backgro […]

  9. […] サイドの背景の色を白にするのはウィンドミル いわしブログさまを参考にしました。 […]

  10. […] stingerのカスタマイズ 背景の変更 | ウィンドミル いわしブログ […]

  11. Stinger タイトル グローバルナビ 色変更方法 より:

    […] こうやって忘備録をつけておくとたすかります。 基本はstingerのカスタマイズ 背景の変更 の記事通りにやっていけば問題ないです。 […]

  12. とっとこ より:

    いわしさん、はじめまして。とっとこと申します♪
    新しくブログをつくる際にwordpressのstingerに挑戦してみようと思い、カスタムで検索してこちらにたどり着きました!
    今まで無料ブログしかやったことがなかったので、カスタム方法がさっぱりわからなかったのですが、いわしさんの記事のおかげで少しカスタム出来ました(*´∀`*)ありがとうございました♪
    これからも参考にさせていただきます(◎´∀`)ノ.。.:*

    • wind-mill_iwashiblog より:

      おお、そりゃよかったです。
      そのお言葉を励みにして私もがんばります・・・(^^)