ニートブログむらくもの野望

13歳で働いた元少年労働兵がアラサーニートで人生を生ききる為に『やれたらやる』ブログ。「もしかしたらこれやったら違う日になるかも」

STINGER-WPテーマ 世界貢献的おやくだち情報

STINGER7(スティンガー7)をちょいとカスタマイズ。

投稿日:2016年3月3日 更新日:

STINGER7カスタム2
なんだかしらないけどアクセス数が増量する不思議なSEOオバケ無料ワードプレステーマ【STINGER7】(スティンガー7)。そんなテーマのカスタム備忘録。

 

アドセンス表示関係(H2タグ前に自動でアドセンス表示)もある!

 

あくまで小ネタカスタム集。

といってもそれなりの初心者さん以外であればなんのこともないささやか小ネタカスタム集。親テーマ【STINGER7】の側のスタイルシートを見てそれなりに区切りの良いところで抜粋して子テーマ【STINGER7child:】に記載していじってやれば可能な小ネタカスタム集。

全て自己責任の上でね。

 

子テーマに記載

※子テーマ【STINGER7child】の「スタイルシート(style.css)」に記載していくことが基本になる。たまに「テーマのための関数(functions.php)」にも記載する。
赤ちゃんのフリーアイコン20龍やあ~~龍の子がお産まれになったでえぇ~~!!!!
(▽Д▼@ )
※子テーマシステム誕生の喜びをあらわした様子

親子のアイコンワードプレステーマは親子をつくれる。
※そうすることでアップデート(改良)に対応しやすくなる
始皇帝のイラスト素材2親テーマ【STINGER7】(スティンガー7)
※SEO帝といえる親分のメインテーマ。このままカスタムしてもよいのだがアップデートなどをした場合すべてやり直さなくてはならないので面倒なのだ。
赤ちゃんのフリーアイコン20子テーマ【STINGER7child】(スティンガー7チャイルド)
※その庇護下にあるといっていいサブテーマ。要は上書きしてくれるので、親テーマをアップデートしても子テーマにカスタム記載があればなにも問題はないという話。
・「スタイルシート(style.css)」
・「テーマのための関数(functions.php)」
などをもつ。
子テーマもダウンロードできる!
(作ることもできるが既に用意されているので初心者にありがたい)
【STINGER7】ダウンロード及び規約 
STINGER公式サイト(作者ENJI さん
「Stinger7親テーマと子テーマのダウンロードとインストールのやり方」
ゆういちのノートブック さま

こんな感じに子テーマのスタイルシートにコピペでできるものばかり書いていくぞ
(管理画面→外観→テーマの編集→stinger7child)

bandicam 2016-03-03 09-58-18-7562

 

 

それじゃ小ネタ集です。

※記述してから反映されるのに時間がかかることがあるみたいですよ。リロードするのが良いのか、時間経過なのか、そこら辺のところは未だよくわからないけれど。

 

 

フォントサイズ変更

/* 基本の文字 */
p {
font-size: 16px;
line-height: 25px;
margin-bottom: 20px;
}

子テーマに上記を記載する。font-size: 16px;の部分が基本的に文字のサイズ。17pxや18pxなどにも変更できる。line-height: 25px;の部分の数字を変えると行間を調整できる)

変えた由来
STINGER7のフォントは16pxが標準なのだが、なぜかSTINGER7のものは小さい。ぎっしり情報系のページやスマホ画面ならばあまり気にもならないが自分でPCからページをみるとキツかった為に変更。同じ16pxの指定でも子テーマで上書き(?)すると思った通りの16pxに。

 

テーマの幅(記事の幅)を変える。

/* テーマの幅(記事の幅) */
#wrapper {
max-width: 1160px;
padding: 0 10px;
margin: 0 auto;
}

子テーマに上記を記載する。max-width: 1060px;が標準となっているのでこの部分の数字を任意で変更。今回は1160pxで100px増幅。

ヘッダー画像の幅も合わせて変更。

しかしこのままではヘッダー画像の幅が変更されていない状態になってしまう。テーマのための関数 (functions.php)をいじって幅を合わせる必要がある。

テーマのための関数 (functions.php)の場所

STINGER7テーマのための関数

// カスタムヘッダー
$custom_header = array(
'random-default' => false,
'width' => 1160,
'height' => 400,
'flex-height' => true,
'flex-width' => false,
'default-text-color' => '',
'header-text' => false,
'uploads' => true,
'default-image' => get_stylesheet_directory_uri() . '/images/af.png',
);
add_theme_support( 'custom-header', $custom_header );

if (!function_exists('st_custom_excerpt_length')) {
/**
* 抜粋の長さを変更する
*/
function st_custom_excerpt_length($length) {
return 40;
}
}
add_filter( 'excerpt_length', 'st_custom_excerpt_length', 999 );

'width' => 1160,という様に、変えた値に合わせて変更。

由来
なんとなく広げたくなる生意気な時期があるのさっ。
※今はブログでは広げてないよ ※広げている時もあるよ

 

フォントを流行りの”游ゴシック”に。

/* フォント */
* {
font-family: PT Sans Caption,Josefin Sans,"游ゴシック", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
margin: 0px;
padding: 0px;
}

子テーマに上記を記載する。"游ゴシック", YuGothic, Verdana,の部分が変更箇所になる。

由来
バズ部さんのテーマ「Xeory」を別ブログで使ってみるとなんか透明感と格調を感じてなおかつ読みやすかったのでテーマの中から我流でチョイスしたらできた。(と思う)このブログのSTINGER7では使用してないけどね。気分転換にでも。※使用している時もあるよ

 

フォントの英数字のエッジ感を変える。

ワードプレス管理画面の「STINGER管理」から変えられた。
※英数字のGoogleフォント→「なにも設定しない」

/* フォント */
* {
font-family: “Lucida Grande”, “segoe UI”,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
margin: 0px;
padding: 0px;
}

子テーマに上記を記載する。“Lucida Grande”, “segoe UI”,の部分が変更箇所になる。

由来
STINGER7の英数字の斜めに鋭いエッジ感がカッコイイような怖いようなで恐れおののいていたので。と言っても探し出せたわけではなくてフォントサイズを変更するやり方を調べていたらフォントの変え方も載っているサイト様を発見。その記述をみると何やら変な変更があったのでその部分だけググるとどうやらそれが英数字に関わるものと判明。
「おっさんの挑戦状」さま

 

リンクの色とマウスオーバー時のリンクの色を変更

/* リンクの色 */
a {
color: #4682b4;
}

子テーマに(色を変更した上で)上記を記載する。#4682b4の部分を変えるとリンクの色が変更できる。※記事のなかで直接色を付けることもできるが毎回面倒だろうしマウスオーバー時に色が変わらないので気づかれにくいだろう。※数字あとの「;」はのこすぞ

/* リンクにマウスオーバーした時の色 */
a:hover {
color: #b22222;
}

子テーマに(色を変更した上で)上記を記載する#b22222の部分を変えるとリンクの色が変更できる。※数字あとの「;」はのこすぞ

ウェブ色参考
「世界の伝統色の名前とカラーコードが一目でわかるWEB色見本」
ここに色がいろいろあるよ。いろいろね。

 

H2タグやH3タグの見出しフォントサイズ変更。

/* 中見出し */

h2 {
position: relative;
background: #f3f3f3;
color: #1a1a1a;
font-size: 24px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

子テーマに上記を記載する。font-size: 24px;が変更箇所。元は20px

/*小見出し*/

.post h3 {
font-size: 20px;
margin-bottom: 20px;
margin-top: 10px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #1a1a1a;
line-height: 27px;
background-repeat: no-repeat;
background-position: left center;
margin-left: 0px;
border-bottom: 1px #999999 dotted;
}

子テーマに上記を記載する。font-size: 20px;が変更箇所。元は20px。

つまり変更していない。

h2より少し小さいのが好みなのでh2をデカくすればh3はそのままで個人的には満足。

深謀遠慮
これらの見出しはPCでみる場合には大きければインパクトがあるが、スマホでみると少々長い文面は見づらくなる。もともとテーマの作者さんがしっかり考えてくれている基本設計はあまり変えない方が良いだろう。

 

 

 

 

ステ子おおおおおお!!!!!

(▽Д▼  )

 

 

テーマをいじる際に気をつけた方がいいこと

1144e84d99518f86bd95b8181fa7256732150d

「FTPソフトからフォルダをダウンロードバックアップをしてからローカル環境で変更してアップしよう」と言われることがあると思うが、これはワードプレス画面から直接いじってバグを起こしてしまうと画面が表示されなくなることもあって危険なのだ。こうなると間違った記載を直そうとしてもやり直すこともできない。

FTPソフト繋げ方参考に「テーマカスタマイズに!FTPソフトの設定方法」

 

 

【STINGER7】のカスタム情報があるサイトさま

 

H2タグ前に自動でアドセンス表示

STINGER7カスタマイズ。スマホ。アドセンス。h2タグ前ウィジェット。

【STINGER7】で、

①H2タグ前にアドセンスが貼れるウィジェットをつくり、
②スマホだけで表示し、
③アドセンスNG記事には表示させない事もできる。

 

やり方

H2見出しの前にアドセンスのウィジェット作成

↑作成法は上記URL

h2見出しタグ前に配置するのがナウいらしいぞ。そしてそのやり方は多数紹介されているが、ウィジェットをつくれるものが管理しやすいと思うのでこれを利用させていただく。

 

条件分岐タグ wp_is_mobile() でスマホ表示だけ

↑条件分岐タグ説明は上記URL

【STINGER7】でアドセンスを貼るウィジェットの特性のために1つ空きが出る。しかしそのまま追加するとPCでは4つ表示されてしまう。よってスマホのみ表示させる必要がある。(ココらへんの事象は自分でスマホ確認するのが早い)

 

WordPressプラグイン「ウィジェットロジック」に条件を記載

↑プラグイン使い方説明は上記URL

プラグインで行えれば簡単ということでプラグイン「Widget Logic(ウィジェットロジック)」でおこなう。

ウィジェットで管理できればこっちのもの!

とばかりにあの便利プラグインで簡単に条件分岐させてしまえる。

もう一度言おう。

超カンタンにできてしまう。

(内容さえ理解すれば)

上の記事の内容通りに「アドセンスNGカテゴリ」などを指定しているなら、

そこに

&&wp_is_mobile()

と付け加えればいいだけ。

bandicam 2016-03-05 11-00-26-886

wp_is_mobile()はスマホのみ表示。
&&は「であるか」で連続性を。

スポンサーリンク

スポンサーリンク

関連記事/広告もある(テスト)

ニートに感謝したい場合はここにクリックを受け付ける用意がありますよ。


ニートに感謝したい場合はここにクリックを受け付ける用意がありますよ。 にほんブログ村 その他日記ブログ ニート日記へ
にほんブログ村

-STINGER-WPテーマ, 世界貢献的おやくだち情報
-,

Copyright© ニートブログむらくもの野望 , 2017 All Rights Reserved Powered by STINGER.