STINGER3のカスタマイズしたい場所を、CSSの中から見つける方法

公開日: : 最終更新日:2014/02/26 ワードプレス

コード0003(通称ステ子さん)

WordPress の無料テーマ STINGER3 を、子テーマでカスタマイズする方法を身につけた“コゴロー”。

しかし、STINGER3 を子テーマでカスタマイズするには、まだまだ知識が足りなかったのである。

STINGER マスター達のブログで情報収集だ!

とおおおおおぉぉぉぉぉーーーーっ!!

“ステ子”さんの部屋を可愛くするゾ!後編」の巻き

前編はこちら
“ステ子”さんの部屋を可愛くするゾ!前編

Present by ガジェとろ 絵師:@suzucut

スポンサーリンク

子テーマの動作チェック

※カスタマイズは、必ずバックアップをしてから作業してください。

子テーマの CSS の中身を削除してみる

“コゴロー”は、STINGER マスター“Qtaro”さんのブログ記事を、何度も読み返していた。

document WordPressの子テーマの仕組みを理解するために押さえておきたい2つのポイント

  • 理解していなかった基本的な部分
    • CSS は、一番最後に指定したプロパティが適用される
  • よりハッキリと理解できた部分
    • 子テーマは、親テーマの CSS を上書きする

ということは、上書きする子テーマの CSS に内容がなければ、本来の STINGER3 で表示されるはず。

と同時に、子テーマの動作チェックもできるのでは?

document style.css(パソコン用)

試しに、13行目以降をすべて削除して、上記の12行だけの style.css をアップしてみると…。

document 本来の STINGER3 出現!
STINGER3 本来のテーマで表示(パソコン)
(少しカスタマイズしてしまった後ですが…)

やっぱりそうか!

オリジナルと子テーマの CSS を比較してみる

次に“コゴロー”は、STINGER3 オリジナルの CSS と、“Qtaro”さんの子テーマ「CANDY CRAZY」の CSS比較してみた。

カスタマイズしたい部分だけを CSS に書くということが、一体どういうことなのか、本当によくわかるのであった。

ここで“コゴロー”は、あることに気がつく。

style.css の12行目を、smart.css に追加したら、モバイルでも同じことができる?!

document smart.css(スマホ用)

スマホ用なので、/style.css/smart.css に変更して16行目に追加。

そして、17行目以降をすべて削除して、上記の16行だけの smart.css をアップしてみると…。

document 本来のスマホ用 STINGER3 が出現!
STINGER3 本来のテーマで表示(スマホ)

だんだんわかってきたゾ!
“ステ子”さん!!

さらに、16行目を追加したまま、削除した smart.css の内容を元に戻し…。

STINGER3 オリジナルの smart.css と比較しながら、同じ内容を削除してアップしてみると…。(少し時間はかかるけど、とても勉強になります)

document レイアウトが崩れることなく、モバイル用 CANDY CRAZY が表示された!
子テーマでカスタマイズされたテーマで表示(スマホ)

“ステ子”さん!!
少しずつフォースを操れるようになってきたゾ!!

とおおおおおぉぉぉぉぉーーーーっ!!

子テーマの動作チェックをする方法

  • 子テーマの動作チェック方法
    • 子テーマを有効化した後、カスタマイズ内容を削除してアップする。
    • STINGER3 本来のテーマでブログが表示されればOK。

“コゴロー”は、この方法で子テーマの動作チェックをしています。(もっと簡単で確実な方法があるかもです)

もし、STINGER3 本来のテーマが表示されなかったら、こちらをご確認くださいませ。
document CSS を STINGER3 のバージョンと一致させる

a little break
photo credit: visualpanic via photopin cc

カスタマイズしたい場所をCSSの中から見つける方法

HTML CSS の中身を確認できるアドオン Firebug

子テーマで STINGER3 のカスタマイズができる環境を整えた“コゴロー”。しかし、カスタマイズしたい部分が、CSS のどこなのかがよくわからない。

見つけたゾ!
STINGER マスター!!

“コゴロー”が見つけたのは、「Ryun’s Web Note」というブログを運営する STINGER マスターの一人“@RyunNote”さん。

STINGER マスター“りゅんた”さんのブログ「Ryun's Web Note」

ブログには、STINGER3 のカスタマイズ記事はもちろん、STINGER3 のカスタマイズに関する質問もお問い合わせからできるのだ。

“コゴロー”が知った HTML CSS の中身を簡単に確認できるアドオン Firebug の記事がこちら。
document [R]どんなサイトでもWebデザインが捗る!Firebugで簡単カスタマイズ

こ、これは、スカウター!
これで CSS のどこをカスタマイズすればいいのか簡単にわかるゾ!!

“りゅんた”さん、未来からのメッセージありがとうございます!

Firebug のインストール方法

“コゴロー”は Firefox を使用していたので、早速インストールするのだ。

document Firefox アドオン「Firebug」
Firebug のダウンロードページ

↑の「」印をクリックすると

Firebug インストール確認ダイアログ

インストールを確認するダイアログが表示されるので、クリックします。(キャプチャに失敗…本当は「今すぐインストール」と書かれています)

※ Firebug は、世界中のWEBデザイナーが使っている信頼できるアドオンです。

Firefox の右上に、「虫」マークが表示されていればインストール完了です。

Firebug の起動方法

」印(虫)をクリックするか F12 キーを押すと、Firebug が起動します。

左側には今表示されているページの HTML が、同じく右側には CSS が表示されています。

Firebug を起動させた画面

虫マークをプルダウンして「Firebug UI の位置」→「」を選択すると、右側に大きく表示することもできます。

Firebug をブラウザの右側に大きく表示

また、↓の「」印をクリックして、表示されているページの上でポインタを動かすと、CSS の表示がいろいろ変わります

Firebug で要素を調べる

カスタマイズしたい部分でクリックすると CSS の表示が固定されるので、じっくり確認することができますよ。

a little break
photo credit: [puamelia] via photopin cc

カスタマイズするポイント

STINGER3 を使用しているブログに限らず、いろんなサイトを見るようになった“コゴロー”が気づいたこと。

  • すごく見やすいブログがある
  • スラスラと読みやすい記事がある

document 見出し命!ブログに必要なデザイン

公式サイトで、一番最初に見た記事でした…。

ブログをカスタマイズするポイント。

見やすいこと!

とおおおおおぉぉぉぉぉーーーーっ!!

ガンガン集客したい人のかんたんWordPress入門
ネットでガンガン集客したい!そんな人のための、専門知識ゼロでもできるウェブサイト制作入門書です。ネットを使った集客といえば、TwitterやFacebookといったソーシャルメディア、アメブロなどのブログや…
口コミ・カスタマーレビュー
購入者の声 PC 感想 モバイル
スポンサーリンク
  • Pocket
  • follow us in feedly
  • “コゴロー”のツイッター

お役に立ちましたでしょうか?
最後までお読み頂き、ありがとうございました。

関連記事

コード0003(通称ステ子さん)

STINGER3のCSSを、子テーマでカスタマイズする方法

“コゴロー”は、公式サイトの STINGER3 の基本設定に従い、“STINGER コゴロー

記事を読む

スポンサーリンク

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

“コゴロー”のツイッター キジシロを購読する follow us in feedly
マダニ
マダニ(SFTS)情報まとめ、厚生労働省・都道府県庁別など一覧

マダニの感染症(SFTS)に関する厚生労働省と関連するホームペ

寝る猫
猫を長生きさせる秘訣!絶対にダメな4つの食べ物

猫を元気に長生きさせる秘訣は「食べ物」と「飼う環境」、そして愛

すやすや眠る生後1ヶ月半の“風太郎”
子猫のワクチン接種で気をつけたこと、失敗したこと

“風太郎”!これからワクチン接種に行くゾ!! さ、キャリ

“風太郎”の肉球
あっという間!子猫の歯が生え変わりはじめたらどんどん抜ける

噛みっ!噛みっ!むっふーーーー! (たーーーのしーーーー

コード0003(通称ステ子さん)
STINGER3のカスタマイズしたい場所を、CSSの中から見つける方法

WordPress の無料テーマ STINGER3 を、子テー

もっと見る

PAGE TOP ↑