いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

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

      2015/08/20

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

http://stinger3.com/

WordPressテーマのSTINGER3公式サイト

その良さが広まるにつれ、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行目にある下記のコードを・・・

このように修正します。

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

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

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

モバイル用CSS コード修正

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

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

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

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

Stinger 背景を白半透明に

さらにもうひと捻りということで、背景を白半透明にしてみましょう。
参考にしたのはこちらの記事です。Sakiさん、ありがとうございます。

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

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

CSS コード修正

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

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

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

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

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

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

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

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

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

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

関連記事・新着記事のタイトルも白いままなので、上記と同様にCSSを修正します。
こちらはbackground-color: #f3f3f3;を消去。

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

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

stinger記事タイトル背景修正

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

一つだけ注意点ですが、古いIEだとメインとサイドの背景をCSSで半透明にしても反映されません。確認してみたところ、IE8ではメインとサイドの背景が消えてしまいました。
この記事ではCSSに記載されているbackground-colorを消していますが、古いIE対策として消さずに残しておくのも手かと。

今回使った背景は少し濃いめの色合いなので、サイドバーも見やすいように白地に変更しましたが、薄地の背景ならサイドバーはそのままにしても面白いかもしれませんね。
また、Stingerは今回解説した方法以外でも、ダッシュボードの「外観」→「カスタマイズ」でブログの外観を簡単に変更できます。Stingerは背景を変更するだけでもイメージが変わるので、一度チャレンジしてみてください。

 - Stinger