はじめてのWordPress(STINGER3のカスタマイズその1)

アフィリエイト 初心者のためのwordpress講座

超初心者による超初心者のためのWordPress講座第4回。
今までの記事は↓

はじめてのWordPress(レンタルサーバー契約&ドメイン取得編)
アフィリエイトに力を入れる宣言をした後、私はその前提としてWordPressの勉強を始めた。 ブログサービスと違い、WordPre...
はじめてのWordPress(独自ドメイン登録&WordPressインストール編)
webに疎い超初心者がWordPressを使いこなせるかどうか、検証記録の第2回。 前回記事はコチラ 今回は前回取得した...
はじめてのWordPress(記事の書き方・テーマの選択)
超初心者による超初心者のためのWordPress講座 第3回。 前回ようやくWordPressのインストールが終わり、今回からはい...

前回までで既に記事を書き始めることができ、特にこだわりがなければそのまま続けていただいてOK。
しかし、「テーマのここのところが気になる」とか「オリジナリティのあるブログにしたい」という方もいるだろう。

という訳で、今回はテーマのカスタマイズについて書いていこうと思う。
私が使っているテーマが「STIHGER3」というテーマなので、このテーマを元に話をしていくが、他のテーマでも使える話は多いはずだ。

STINGER3は見やすく使いやすくSEOにも強いテーマとして、利用している日本人ユーザーが多いが、その分そのままの状態で使っていると、他のブログとデザインが丸被りすることもしばしば・・・。
折角自分のブログなのだから、自分色を出していきたいと思うのが人情ってものである。
今までよりも少し苦労はするが、人情味溢れるデザインにしていこう!

スポンサーリンク

STINGER3のカスタマイズその1(ヘッダーをカスタマイズ)

ヘッダーというのはブログの一番上で、ブログの顔となる部分のこと。
このブログでいえばテーマカスタマイズ1
ここがヘッダーとなる。
まずはWordPressのメイン画面より、外観→カスタマイズをクリック。
すると以下のような画面が現れる。

テーマカスタマイズ2

」「背景画像」ではブログの本文以外の部分(上の例では青くなっている部分)の色や画像を設定することができる(デフォルトでは白の無地になっている)。
画像は「背景画像」をクリックすると下出てくる「画像なし▼」の▼をクリック。
新規追加画面が現れるので、アップロードしたい画像をドロップするか、選択し「開く」をクリックすると自動的に画像がアップロードされる。

ヘッダー画像」ではオレンジで囲っている部分に画像を設定することができる(デフォルトではSTINGERのロゴが入った画像が設定されている)。
986×150の画像でピッタリ入る大きさになっている。

ナビゲーション」ではヘッダー画像下に青で囲ったようなメニューを表示するかどうかを設定できる。
STINGER3ではメニューの種類はこのメニューのみしか選べない(デフィルトでは白い背景に黒字になっている)。

思った通りに設定できただろうか?
まだここまでは簡単。

続いては、タイトルを変更してみる。
デフォルトでは黒い太字でタイトルが書かれているが、面白味に欠ける部分がある。
なので、このタイトルをロゴに変更してみよう。
(注:WordPressのカスタマイズは子フォルダを作ってやるのが一般的なようですが、私は直接いじっています。CSSやhtmlのバックアップは必ず取っておいてください。)
私が参考にした記事:【Stinger3】ブログタイトルを画像に変更する方法。加えてスマホに最適化させる きちデン

まずはタイトルロゴを作成する。
タイトルロゴの作り方は様々あるが、私はほとんど使いこなせないIllustratorで頑張って作ってみた。
画像サイズは662×191
横長を意識したが、まぁ適当。
作ったロゴはpng形式で保存する。

画像ができたら、画像をWordPressにアップロード。
メイン画面からメディア → 新規追加をクリックする。
メディアのアップロード画面になったら、画面に画像をドロップするか、ファイルを選択して「開く」をクリックするとアップロードが完了。

テーマカスタマイズ3

アップロードが完了したら、上のような画面が現れる。
代替テキストというのは画像が表示されない時に、表示されるテキストのこと。
なのでここにはブログタイトルを記入しよう。

記入が終わったら画像のURLをコピーしてメイン画面に戻り、外観 → テーマ編集をクリック。

テーマカスタマイズ4

上のように文字列が並んだ画面になるので、右サイドにあるメニューの中からヘッダー(header.php)をクリック。
Ctrl+Gで以下のコードを探す。

<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php bloginfo('name'); ?>
</a></p>

その中の

 <?php bloginfo('name'); ?>

を下のように書き換える。

  <a href="<?php echo home_url(); ?>/"><img alt="ブログタイトル"
src="画像のURL" width="" height="高さ" /></a> 

ブログタイトルのところには、自分のブログの名前、画像のURLには先ほどコピーしたURL、幅、高さはロゴのサイズに合った数字を入れよう。
私の場合、幅は280高さは80に設定した。
このサイズならスマホでも綺麗に表示することができる。

最後に画面の一番下にある「ファイルを更新」をクリックすれば、更新が保存される。
タイトルがロゴに変わっているかどうか、ブログを確認してみよう!

今回やったことだけでも大分ブログの印象が変わったのではないだろうか。
次回も引き続き、STINGER3のカスタマイズをやっていく予定。
次回↓

はじめてのWordPress(セキュリティ対策編)
超初心者による超初心者のためのWordPress講座第2.5回。 今までの記事は↓ 前回...
ニトの話し相手サービス営業中!
ネットの隅の居酒屋さん バナー
にほんブログ村 その他日記ブログ 無職日記へ
スポンサーリンク

フォローする

コメント

  1. 僕もStinger使ってます。
    使いやすくていいですよね。^-^
    ただ、使ってる人が多いので、カスタマイズ参考にさせていただきます。
    応援ポチしていきますね~。

  2. ニト より:

    Sunday@無職半年さん
    ブログ拝見しました。
    見やすくて綺麗なブログですね~!
    STIGERでもぽさを感じないくらいカスタマイズもしっかりされてて、こちらがお手本にしたいくらいです。
    これだけちゃんとされていれば、私が教えることは何もないですねw
    応援ポチありがとうございます。
    私もお返しポチしておきました!

  3. カネヤン より:

    わかりやすいですね!
    ワードプレスはいずれはやらなければ!と思っているので、すごく参考になります。

  4. ニト より:

    カネヤンさん
    私もWordPress初心者なので、つまずきやすいところが逆に良く分かるのでは、と思い書き始めました。
    参考にしていただけたら嬉しいです。
    私も最初は難しそう・・・となかなか踏み出せなかったのですが、使ってみると意外と簡単ですよ!