そらより

おもしろいと、かわいいと、おいしいと、うれしい。

WordPress初心者がSTINGER6の文字・タイトルを子テーマでカスタマイズ!

      2016/09/28

SEO対策に効果があると人気のWordPress無料テーマSTINGER。このたび新バージョンがお目見えということで、さっそく話題のSTINGER6を導入してみました。文字まわりをそらより好みにカスタマイズしたので、子テーマのstyle.cssに記述した内容を公開します。

「おいおい子テーマかよ。作り方なんてわからないよ」と思われる方がいらっしゃると思います。ご安心ください。じつはこのSTINGER6、最初から子テーマを併せてダウンロード・インストールすることができるのです。後程詳しくご説明しますが、これからご紹介するコードをそこにコピー&ペーストするだけでカスタマイズできます。子テーマはWordPressを活用していく上でとても便利なアイテムです。ぜひこの機会にチャレンジしてみてください。

 

スポンサーリンク

 

無料テーマをカスタマイズするのは、いくら事例がたくさんあるといっても、ぴったりの方法にたどりつけくまで大変です。プログラマーじゃないのでコードには詳しくない、フォーラムでいまさらこんなこと聞いたら怒られそう、とお困りの方にお役立ていただければ幸いです。

そらより自身初心者なので、もしかしたら「ココ違うよ」という部分があるかもしれません。お気付きの点はぜひお教えいただけると助かります。今回ご紹介する内容は「とりあえず問題なく動いている」程度の精度であることを予めご承知おきください。

 

STINGER6は子テーマ付

まずSTINGER6のインストールからご説明しておきましょう。もう使い始めているよ、という方はこの章は飛ばして、次をご覧ください。

 

【01】STINGER6はこちらからダウンロード

トップページからダウンロードできます。①と②を両方とも選択してください。

STINGER6_01

出典:WordPress無料テーマ STINGER6

 

【02】WordPressにアップロード

WordPressに管理者権限でログイン。「ダッシュボード」の「テーマ 新規入力」>「テーマを追加 テーマアップロード」をクリックしていくと次の画面となります。ここにダウンロードしたZipファイルをそのままドラッグ&ドロップしてください。

STINGER6_02

 

【03】子テーマを有効化

「ダッシュボード」>「外観」>「テーマ」を開くと、次の画面となります。ここで子テーマである“stinger6child”を「有効」にします。

 

STINGER6_03

 


 

[ところでなぜ子テーマなの]

WordPressで作られるサイトのおよそのデザインはstyle.cssに記述してあります。これを変更することで、さまざまにカスタマイズすることができます。しかしコードの変更には細心の注意が必要。半角一つのあるなしでデザインが台無しになる恐れがあるのです。またせっかく快適に変更しても、バージョンアップで元通りになってしまうということも。セキュリティの面からバージョンアップは必須ですから、頭の痛い問題です。

しかし子テーマを活用すればスッキリ解決します。

子テーマは親テーマに入っているstyle.cssを読み込み、変更部分だけを上書きします。親テーマがバージョンアップしても、子テーマの記述はリセットされません。だから使い勝手や見栄えをそのままに安心して更新することができるのです。そして簡単な記述で済むので気軽に変更を加えられるようになります。

WordPressをやるならぜひ子テーマを、とあちこちで喧伝されているのには大きな理由があったのです。


 

 

【04】子テーマのstyle.cssをコピー保存

子テーマのstyle.cssへの書き込みは必ずコピーを作って手元で行うようにしましょう。簡単な記述とはいえ、万が一の不具合を回避するためです。コピーなら、いろいろチャレンジできます。

またstyle.cssの編集には次の二つのアイテムが必要です。今後も役に立つものなのでぜひ導入してください。

 

1.「FFFTP」などのFTPクライアントソフト

子テーマをサーバにアップするときに必要です。筆者が加入しているレンタルサーバLoliPop(ロリポップ)ではログイン後に専用のページが用意されています。

2.「サクラエディタ」などの日本語テキストエディタ

子テーマのファイルを作るのに必要です。従来、Windowsなどのメモ帳で代用していた人も、これを機会に正式な日本語テキストエディタを使うようにしましょう。

出典:sketch

 

子テーマのstyle.cssは次のフォルダに格納されています。

WordPressをインストールしたフォルダを開き“wp-content”をさらに開きます。

 

STINGER6_05

▲FTPクライアントソフト“FFFTP”の画面

 

wp-content/themes/stinger6child と階層を入っていくと次の画面にたどり着きます。

 

STINGER6_04

▲FTPクライアントソフト“FFFTP”の画面

 

ここにある“style.css”をパソコン上にダウンロードしておきます。そしてそのコピーを作り、記述に変更を加えた後、サーバ上で上書きしていきます。常に変更前のstyle.cssを保存しておくことが重要です。

さて、大変お待たせしました。次に今回の具体的な変更部分をご説明します。

 

スポンサーリンク

 

 

この部分を変更しました

 

メインメニューの背景色

ヘッダー部分にあるメインメニューのバックにわずかだけ色をつけました。画像を入れない分、サイトの説明文と文字デザインが被り、視覚的にうるさくなっていたからです。ページ全体のバックグラウンドカラーとわずかな変化さえ与えられれば十分なので薄めの色にしました。(その後、さらに変更を加え、見栄えが異なっている場合があります。ご了承ください)

なおWebカラーの選択にそらよりは「原色大辞典」を活用しています。ブックマークしておくと便利ですよ。

 

STINGER6_06

 

記述内容は以下となります。グレーで書かれた最初の5行はstyle.cssに予め記述されていたものです。1行空けてその下が新たな記述です。黄色地で示した部分を変えるとお好みの色に変更できます。

「/*~*/」の部分は機能とは関係ありません。後で変更した部分を確認するためのメモ書きです。「960行目」とあるのは親テーマのstyle.cssに記述されているおよその位置を示してあります。なおくれぐれも親テーマのstyle.cssにこの記述を加えないでください。あくまで子テーマ用であり、上書きしたい部分のみを記述しています。

 

/*
Theme Name: stinger6child
Template: stinger6
*/
@import url('../stinger6/style.css');

 

/*メニューのバック色追加960行目)
------------------------------------*/
nav li {
background-color: #fdf5e6;
}

 

本文の文字の大きさ

デフォルトよりも少し大きくしました。併せて行間“line-height”も広めにとってあります。

なおこの記述は先の記述と1行空けて記入しています。

 

/*基本の文字サイズ等の変更136行目)
------------------------------------*/
/* 基本の文字 */
p {
font-size: 20px;
letter-spacing: 1px;
line-height: 1.8;
}

 

トップと一覧表示の見出しの文字

トップ(ホーム)画面とカテゴリーなどでの一覧表示の際の見出し(タイトル)の文字を細く、大きくしました。全体的にそらよりのブログはこのテイストです。「文字は細め、見出しは大きめ」。そして後述となりますが「見出しをさらに目立たせたいときはアンダーラインで」。このようにデザインの方針を予め決めておくと選択肢をジャッジしやすいですよ。

 

STINGER6_07

 

文字の太さ“font-weight”は“normal”としました。太いのはここが“bold”となっています。

 

/*トップと一覧表示の見出し文字サイズとウェイトの変更262行目)
------------------------------------*/
dd h3 a {
font-size:24px;
line-height: 29px;
font-weight: normal;
}

 

投稿記事の見出しの文字

見出し(タイトル)の文字を大きく、そして細くしました。このブログで最も大きな文字です。嫌らしくない程度のインパクトとメリハリを醸しだしたい狙いがあります。

 

STINGER6_08

 

/*記事タイトル文字サイズとウェイトの変更1812行目)
------------------------------------*/
/*記事タイトル*/
.entry-title {
font-size: 40px;
line-height: 48px;
font-weight: normal;
}

 

中見出しの背景色と文字

文字の背景色がデザインの方針と一致しないので消すこととしました。代わりに文字を大きくしアンダーラインを付けることで目立たせます。

 

STINGER6_09

 

“background”を“none”にすることで背景色が消せると踏んでいたのですが、なぜか三角の吹き出しのようなものが残ってしまいました。そこで後の“h2:after”と“h2:before”をすべて“none”にすると消すことができました。ここはちょっと自信がありません。なぜ“after”と“before”があるのか実はわかっていないのです。結果オーライで、とりあえず進みます。

“h2”の記述に戻ります。“padding-right”を“0”にすることで文字の先頭にアキが出ないようにしました。

“border-bottom”はアンダーラインの指定です。線の形は“solid”以外にもいろいろあるようです。こちらのサイトが詳しく説明してくれています。

 

/*中見出しの変更203行目)
------------------------------------*/
/* 中見出し */

h2 {
background: none;
font-size: 30px;
line-height: 34px;
padding-right: 0px;
padding-left: 0px;
font-weight: normal;
border-bottom: #1a1a1a solid 4px;
}

h2:after {
position: none;
border-top: none;
border-right: none;
border-left: none;
bottom: none;
left: none;
border-radius: none;
}

h2:before {
position: none;
border-top: none;
border-right: none;
border-left: none;
bottom: none;
left: none;
}

 

小見出しの文字

3番目の順位の見出し“h3”の指定です。まさにこの文章のすぐ上のタイトルがh3です。ここはデフォルトで点線のアンダーラインが指定されています。なので文字の大きさや太さのみを調整しました。

 

STINGER6_10

 

/*小見出しの文字サイズとウェイトの変更239行目)
------------------------------------*/
/*小見出し*/

.post h3 {
font-size: 25px;
line-height: 29px;
padding-right: 0px;
padding-left: 0px;
font-weight: normal;
}

 

サイドバーのリンク

ウィジェットで“WordPress Popular Posts”やコードクラウドを設定したところアンダーラインが入っていたので消しました。青色の文字でクリカブルであることは想像がつきます。よってアンダーラインは不要です。単に好みの問題ですけどね。

 

STINGER6_11

 

/*サイドバーのリンクのアンダーラインを消す38行目)
------------------------------------*/
/* リンクの色 */
a {
text-decoration: none;
}

 

サイドバーの人気の記事の文字

「人気の記事」の文字の大きさがいい感じになるように調整しました。併せて文字数もウィジェット上で“Shorten title”を“25”、“characters”を設定しています。好みの文字の大きさによって“Shorten title”の数字を変更するとよいでしょう。

 

/*サイドバー人気の記事タイトルの文字サイズ700行目)
------------------------------------*/
#side aside #mybox ul li ul li {
font-size: 17px;
line-height: 22px;
}

 

関連記事の文字

投稿記事の最下段に表示される関連記事一覧の文字を細く、大きくし、アンダーラインを消しました。

 

STINGER6_12

 

/*投稿記事最下段の関連記事の文字スタイル617行目)
------------------------------------*/
/* タイトル名 */
#kanren dd h5 {
font-size: 22px;
font-weight: normal;
text-decoration: none;
}

 

フッターの文字

最下段のフッターの文字がバックグラウンドカラーに対し、やや見えにくかったので、濃い目の色に変更しました。

 

STINGER6_13

 

/*フッターの文字カラー492行目)
------------------------------------*/
#footer a {
color: #696969;
}

/*フッターcopyright文字カラー501行目)
------------------------------------*/
#footer .copy {
color: #8a0070;
}

 

以上、そらよりがSTINGER6の文字まわりに変更を加えた部分でした。

今回、STINGERを初めて使ってみたのですが、本当によく考えられているテーマだと思いました。たとえばstyle.cssの記述など、海外のテーマはこんなに親切ではない。どんな機能に関する記述なのか一目でわかるようになっているので、初心者のそらよりでもカスタマイズが短時間で行えました。

そして噂のSEO対策。海外の無料テーマからSTINGER6に変えてページビューが約5倍になりました。もともと微々たるものだったので実数は少ないですが、この効果には驚きです。Googleの検索でも、これまで「そらより」では箸にも棒にも引っ掛からなかったものが、なんとトップ表示。なぜもっと早くSTINGERにしなかったのか。新たな希望を手にし、ますますブログに力が入るそらよりでありました。

 

スポンサーリンク

 

スポンサーリンク
【So-net 光 (auひかり)】

 

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - デジタル

Copy Protected by Chetan's WP-Copyprotect.