STINGER3をあれこれカスタマイズした記録

公開日: : 最終更新日:2013/11/16 WORDPRESS , , , ,

このサイトはテーマ(テンプレート)としてSTINGER3を利用させていただいています。
シンプルで癖がなくデフォルトのままでも見栄えのするデザインなのですが、ちょこちょこ細かい部部分で変更を加えていますので自分用にここでメモしておきます。

テーマを編集する前に抑えておくこと

HTML構造やレイアウトはいじらない

STINGERのHTML(PHP)構造などは作者様が細部にわたるまで考え抜いた末このようになっているそうなので「見栄え(CSSでいじれる範囲)」以外を修正しないほうが良いそうです。

例えばレイアウトを今の左記事なのを右にしてしまうと、もうStingerではなくなります。アドセンスの位置を変えても、もうStingerでは無いのです。(中略)
まず、吐き出す「タイトル」などは全部残してほしいです。「ぱんクズ」がタイトルまで吐かないのは「わざと」です。下に表示される「関連記事」や「新着記事」も意味があります。記事下のアドセンスとアドセンスの間に「SNSボタン」があるのもわざとです。コメントが一番下なのもわざとです。サイドバーの見出しタグが[h4]なのもわざとです。そんな「わざと」が散りばめてあります。
http://rentalhomepage.com/stinger/

テーマの編集は子テーマをいじる

これはSTINGERというよりは、ワードプレスそのものでテーマをいじる際の鉄則だそうです。

■子テーマとは?
※参考サイト:Webourgeonさん

注意:function.phpは子テーマにしない

テーマのための関数(function.php)は少し特殊なファイルです。そのため他のファイルと同じようにfunction.phpを子テーマからいじってしまうと、重大なエラーに繋がりかねません。内容を修正したい場合は子テーマで修正するのではなく「親テーマ」側をいじる必要があります。※子テーマでも、親テーマにない記述を追記することは可能だが、親テーマに記述された内容を修正(上書き)することはできない。

注意:smart.cssを子テーマから修正する際の注意点

STINGERはスマートフォン用に独自のCSS(smart.css)が用意されています。ただしこちらはデフォルトの状態だと、子テーマを作成しても修正が反映されません。
STINGERはデフォルト状態だとsmart.cssの親テーマを読み込みにいく設定で記述されているからです。

header.php内の以下の部分を修正することで、smart.cssの子テーマが読み込まれるようになります。

[変更前]

[変更後]

以上で、smart.cssの子テーマが利用できるようになります。

参考:「最近,気になったこと…」さん
http://azur256.com/archives/9492

カスタマイズをする際に修正する部分のメモ

エントリー一覧部分の画像とタイトル文字の位置を頭合わせにしたい

エントリーが一覧表示されるページ(このブログでいうとTOPを表示させた際に表示されるページ)のサムネールとタイトル文字の位置が微妙にずれていた(下記画像参照)ので修正しました。
stinger3_design_1

子テーマに以下を記述(追記)しています。

また、サイドメニューのNEW ENTORY部分も同様に微妙にずれていたので以下を記述(追記)しています。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

WordPressで記事の公開/更新ボタンがグレーアウトしてしまう問題の対処方法

当ブログはWordPressで作成しているのですが、記事の作成中(編集中)、たまに 公開(更新)ボタ

ShareHtmlメーカーで作成したタグのCSSを調整できるように設定する方法

リンク先のサムネール画像を自動取得してくれる便利なツール「ShareHtmlメーカー」。当サイトでも

QuickAdsenseで挿入するアドセンスコードをPCとスマホで切り替える方法

WordPressの記事内に自動でGoogleアドセンスのコードを挿入してくれる便利プラグイン「Qu

自分的に便利だから入れておきたいWordPressのプラグインのメモ

photo credit: zetson via photopin cc 自分的に便利だから入

STINGER3でアドセンスのPC版表示を横並びのレクタングルにする設定

※注意:2014年4月現在、当ブログのアドセンス配置は必ずしもこの記事の内容と一致していませんが、同

Table of Contents Plusが表示されない時の対処方法! WordPress(ワードプレス)のプラグイン情報

WordPress(ワードプレス)のプラグインで、投稿記事内に自動的に目次を生成してくれるプラグイン

WordPressで画像挿入時にリンク先の設定をデフォルトで「なし」にする方法

WordPress(ワードプレス)で文章内に画像を入れ込む場合は「メディアを挿入」ウィンドウで対象の

STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり幅を調整したりする際のCSS設定

STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり、幅を調整したりす

STINGER5-ユーザのピンチ操作で記事や画像を拡大できるように設定する

現在製作している別のブログで STINGER5を使わせてもらうことにしました(この場を借りて作者様に

WordPress4.xでPreserve Editor Scroll Positionがうまく機能しない問題の解決方法

※2016年6月追記:下記の方法を行ってもFireFox(ファイアフォックス)ではPreserve

Comment

  1. […] STINGER3をあれこれカスタマイズした記録 […]

Message

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

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先

足元の冷え解消!足温グッズレビュー(3) ホットマルチヒーター

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(2) 山形電気あんか*参考

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(1) デュアルヒータースリッパ

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

掃除機にペットボトルの蓋が詰まってしまった場合の対処方法

部屋を掃除していたところ、掃除機でペットボトルのフタを吸い込んでしまい

→もっと見る

PAGE TOP ↑