*

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

stinger3

ワードプレスを使い続けて早○年。いろいろなテーマを使いながらカスタマイズしてみたり、自分で子テーマを作成してカスタマイズしてみたり。そんな私が先日たまたま見つけた素晴らしいテーマ「STINGER」。作成者は、ENJILOGのENJIさん。

・・・すごーい!使ってみたーい!

ところが私の運営しているサイトは情報系が多く、しかもブログ形式ではないので、ブロガー向けのワードプレスのテーマSTINGERは、使わないだろうなーと思っていました。

・・・でも、使ってみたいなー。
・・・使わせてもらうとしたら、ブロガーになる時かなー。

そんな訳で、このサイト「えけこのくるる」を始めたのは、STINGERを使ってみたかったから!と言っても過言ではありません。(あとは、ふなっしーとスープカレーねっ)

でもさー、ちょっと漢(おとこ)らしいのよー、STINGERはー。色使いとか、フォントとか、装飾とか。

じゃ、女子にも使えるようにカスタマイズ法を書いてみようかな?そしたら女子ブロガーさん達にも、普及するかもね~♪

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

ヘッダーの画像を可愛いくしよう

ヘッダーの画像を変えるだけで、サイトの雰囲気はがらりと変わります。画像は1個でもいいけど、いくつか登録してランダムに表示させることもできます。アイキャッチ画像とも言います。

管理画面の「外観」→「ヘッダー」で、使いたい画像をアップロードするか、メディアライブラリーから選んで設定してください。ヘッダー画像の推奨の大きさは、986×150pxです。

デフォルト画像はこれ。

st1

ヘッダー画像を可愛いイラストにしてみました。いいでしょー♪

st2
注)後ほど、背景色(壁紙)を変更する予定なので、背景に色を入れてあります。

ヘッダー画像の高さを変えたい時は

画像の高さは、150pxより高くすることも低くすることもできます。高さを変更したい時は、管理画面の「外観」→「テーマの編集」のテンプレート内、テーマのための関数(functions.php)ファイルの114行目あたりに書いてある数値「150」をお好みの高さに変更してください。幅の変更はしない方がいいです。

//カスタムヘッダー
$args = array(
‘width’ => 986,
‘height’ => 150,

functions.phpは大切なファイルなので、間違えると画面が真っ白になったりします。念のため、バックアップを取ってから挑みましょう。数字の前後にある半角とコンマに気をつければ、きっと大丈夫!

ヘッダー画像にリンクを入れたい?

私が今まで作ってきたサイトは、タイトルの文字部分ではなく、ヘッダー部分の画像をクリックしてトップページに戻っていました。

ヘッダー画像をクリックしてサイトのトップページに戻りたい方のために、画像にサイトリンクを入れておくと、ちょっと便利で親切です。

管理画面の「外観」→「テーマの編集」でテンプレート内、ヘッダー(header.php)ファイルのカスタムヘッダー画像についての記述。

トップページの時に表示されるヘッダー画像と、それ以外のページの時に表示されるヘッダー画像について、指示をしています。この2カ所の記述に、それぞれリンクタグを追加します。場所を間違えないよう、以下のコードに貼り替えて下さい。

リンクタグを追加することで、ヘッダーにある画像をクリックすると、トップページに戻るようになります。

詳しく解説しますと、画像を表示させるタグ部分を

サイトURLへリンクするタグで囲むと、トップページにリンクするようになります。

ヘッダー画像にマウスをのせると色が薄くなり、さらにヘッダー画像をクリックしてサイトトップに移動する事が出来れば、成功です!

ヘッダー画像におすすめ

私がよく利用させてもらっている、無料で使える素敵な写真素材や、可愛いイラストのサイトをご紹介します。

サイトタイトルを可愛くしよう

さあ、スマホで表示確認をしてみましょう。あらー、せっかくヘッダー画像を可愛くしたのに、スマホで見た時は、ヘッダー画像が表示されないようです。普通にタイトルだけが表示されています。ここも可愛くしたいよね?(PCとスマホ、共通で表示される部分です)

IMG_0812

スマホで表示した時も可愛いサイトにするために、2つの方法を考えました。1つ目はタイトルの前後にアイコンを入れる方法。2つ目は、タイトルをロゴ画像にしてしまう方法です。

タイトルの前後に画像を入れてみよう

タイトルの前にアイコンを入れました。

IMG_0814

タイトルの後ろにアイコンを入れました。

IMG_0813

画像の大きさは、35×35pxです。少し大きいかもしれません。30×30pxぐらいがぴったりかも?可愛いので、回してみました。

equekuru

使いたいアイコンが決まったら、メディアライブラリーに新規追加(アップロード)して、画像のアドレスをコピーしておいて下さい。アイコン画像のアドレスは、管理画面の「メディア」→画像にマウスをのせて→「編集」を押すと、右側に画像のURLが表示されます。

では、入れる場所です。管理画面の「外観」→「テーマ編集」のテンプレート内、ヘッダー(header.php)ファイルの143行目ぐらいにタイトルを表示させるタグがあります。

このタグの前か後ろに、アイコン画像を表示させる以下のタグを入れます。思い切って前後、両方というのもいいかもしれませんね。

タイトルとのバランスを見て、タグとタグの間に半角スペースを入れてもいいと思います。ちなみに私は、半角を入れる派です。

タイトルの文字の色を変えよう

サイトタイトルの文字の色を変更するのも、いいですよね。例えば、以下の設定をスタイルシート(style.css)に追記すると、サイトタイトルの文字の色が紫色になります。16進数で記入する場合は、purpleの代わりに、#800080としてください。

st-tsuika

#container #header #header-in #h-l .sitename a {
color: purple;
}

色の名前や16進数は、WEB色味本 原色大辞典 -HTML Color Namesで、簡単に探せます。サイトのイメージカラーを決めておくと、見出しなどを装飾する際、色選びが楽になりますよ。

タイトル丸ごと画像にしよう

タイトル前後の画像も可愛いけど、好みのフォントを使ってタイトルロゴを作るのもおすすめです。イラストを入れてさらに可愛くすることもできます。

IMG_0815

画像の幅は、一番狭いiPhoneの画面にあわせて280pxぐらいまでだと、はみ出さずに原寸で表示されます。(それ以上、横幅が大きい画像を使いたい場合は、次の項目を参考にして下さい。)高さは、お好みで。SEOに大事なので、画像のaltにはサイトタイトルを入れてください。

管理画面の「外観」→「テーマ編集」のテンプレート内、ヘッダー(header.php)ファイルの143行目ぐらいにタイトルを表示させるタグがあります。

これを次のように変更します。

タイトル画像を最大幅で表示させよう

280pxよりも横幅のあるタイトル画像を使っても、スマホでは画面内に収まるようにできます。以下の指定をスマホ用のスタイルシート(smart.css)に追記してください。スマホの画面幅に合わせて、はみ出さないよう縮小表示されます。

.sitename img {
height: auto;
max-width: 100% !important;
width: 100%;
}

タイトル画像を最大幅にした時のPC表示例。

title-bana

スマホで見てみると、こんな感じで表示されます。

IMG_0949

PCでスマホの表示確認をする方法

STINGERの場合、PCやタブレットで表示されているヘッダー画像が、スマホでは表示されません。STINGERは、レスポンシブデザインのテーマではなく、PC&タブレット用のスタイルシート(style.css)と、スマホ用のスタイルシート(smart.css)の2種類で、表示を切り替えるタイプのテーマです。

スマホ経由のアクセスが大半となっている昨今、スマホで自分のサイトがどう見えているか、表示確認も大切ですね。

スマホを持っていない方は、Google Chrome(グーグルクローム)のデベロッパーツールを使うと、UA(ユーザーエージェント)を切り替えて、サイトの表示確認をすることができます。

スマホを持っている方も、iPhone、android、iPadなどで、自分のサイトがどのように表示されているか確認してみてください。

1)Google Chromeで、見たいページを開く
2)右上の設定ボタンから、ツール→デベロッパーツールを開く
 または、マウスを右クリックして「要素を検証」を押す
 または、キーボードの「F12」ボタンを押す
3)画面右下の歯車アイコンを押して、Settings画面を開く
4)Overrides→User Agentにチェックを入れ、表示確認してください。

UA(User Agent)の切り替え時には、画面のリロードが必要です。(F5ボタン押すといいよ♪)

今回のまとめと次回のお知らせ

はーい、お疲れさまでしたー。ヘッダー部分が可愛くなりましたね!
次回は、フォントと背景色の変更、記事の見出し部分の装飾などについて書く予定です。お楽しみにー。

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

スポンサードリンク

スポンサードリンク

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

2013/09/04 | WordPress


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

follow us in feedly follow me

関連記事

stinger3

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

日々進化を遂げているワードプレスの無料テーマStingerは、...

記事を読む

stinger3

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

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

記事を読む

stinger3

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

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

記事を読む

stinger3

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

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

記事を読む

stinger3

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

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

記事を読む

新着記事

ノエビアスタイル I 多機能コラーゲンゲル無料モニター

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

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

記事を読む

IMG_0064

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

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

記事を読む

IMG_1025

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

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

記事を読む

ふなっしー4

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

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

記事を読む

ふなっしーとご当地キャラのみんなで「恋するフォーチュンクッキー」踊ってみた - YouTube

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

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

記事を読む

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

トラックバック用URL:

コメントフィード

  1. […] えけこのくるる/女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう […]

  2. […] 女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう | えけこのくるる […]

  3. こんにちは、最近STINGER3を使い始めて、カスタマイズ記事を調べていたところ、貴方様のサイトを発見いたしました。

    私のような初心者でもわかりやすく書かれていますので参考になりそうです。参考にカスタマイズさせて頂こうと思います。

    不躾ですが、もし可能ならお教えいただきたいカスタマイズ方法がございます。

    スマホで見たきの記事のサムネイルが小さいのですが、これを大きくする方法をご存じないでしょうか?
    もしご存じならお教えいただけないでしょうか?よろしくお願いたします。

  4. お返事が遅くなって申し訳ありません。いろいろ試してみたのですが、私の力では解決できませんでした。enjiさんの回答を待ちたいと思います。http://stinger3.com/post-1103/

  5. えけこさんへ

    私はブログを作り始めたばっかりのかけだしの者です。
    いろいろ調べた結果、stinger3を使っています。

    わからないことがあるときに検索すると、かなりの確率で一番に表示されているのがえけこさんのサイトです。

    さすがは非常によくできた構成で、記事の内容や構成が非常に参考になります。
    またいろいろと使わせてもらいますのでよろしくお願いします。

  6. ドドリアさん
    コメントありがとうございます。見た目を少しカスタマイズするだけで、ブログ更新のテンションがあがりますよね♪これからも宜しくお願いします。

  7. スマホで見た時のサムネイルを大きくする方法がわかりました。
    home.phpのサムネイルを出力するコード

    < ?php $title= get_the_title(); the_post_thumbnail(array( 150,150 ), array( 'alt' =>$title, ‘title’ => $title)); ?>

    スマホ閲覧の時のみ、150,150の数値を変更します。
    これを条件分岐で表示させます。

    < ?php if (wp_is_mobile()) :?>
    スマホ用コードを記入
    < ?php else: ?>
    パソコン用コードを記入
    < ?php endif; ?>

    数値を変えるだけだと、長方形の画像が正方形に切り取られなくなるので、この方法を推奨します。数値は300,300ぐらいでいいと思います。




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

*

スポンサードリンク


follow us in feedly follow me
ノエビアスタイル I 多機能コラーゲンゲル無料モニター
無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

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

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

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

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

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

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

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

→もっと見る

  •  
  •  

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