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

※2017年現在、当ブログではWordPressテーマとして「STORK(ストーク)」を使用しています。以下の記事は参考資料として公開しております。


このサイトはテーマ(テンプレート)として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部分も同様に微妙にずれていたので以下を記述(追記)しています。

1 個のコメント

  • コメントを残す

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