stinger3 備忘録 １２
最近になってスマホの表示が崩れているのに気づいた。
最初の頃は、娘のスマホで確認していたが、カスタマイズしていく
うちに表示がくずれてた見たいです。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。
バックアップは忘れずに！！！
スマホ表示のくずれた症状は
１．ブログタイトルが全て表示されていない。
２．トップページのインフォメーションも全て表示されていない。
３．トップページメイン記事の表示がずれていた。
４．記事タイトルをクリックすると、PC表示の状態でサイドカラム
まで表示されていた。
５．フッターは３カラムにカスタマイズしていたが、スマホでは表
示位置が崩れていた。
原因を特定するにも、どの地点でカスタマイズした事が原因かを調
べるにしても膨大な時間と労力が掛かる。
そこでプラグインをを疑った。
ひとつずつプラグインを停止していきながら、調べた結果
プラグイン 「Browser Specific CSS」が一部影響してた。
このプラグインを削除してもすべて解決したわけではない。
現状を打開すべくいろいろ手立てを打ったが、なんせカスタマイズ
に素人なので、思い切って最初からブログを作り直そうと決断。
とはいえ１からカスタマイズすると、時間が掛かる。
ある程度自分の理想のブログに近いものがないか？
いろいろ検索して模索中あるサイトに
出くわした。
ワードプレスstinger 3 用に子テーマを配布
そのサイトの名は
Qtaro 様 「room9」
そのメニューに「子テーマ一覧」
があったので読んで見ると、なんかインスピ
レーションが「きた～」か「これだ～」。
この作品の中で、子テーマタイトル「かしわもち」にビビット来た。
僕が求めているカスタマイズに近い子テーマが揃ってる！！！
後は部分的にカスタマイズすれば理想に届くな～。と思い
早速ダウンロード開始。
今までカスタマイズした項目を追記して、早速
グーグルクロームでサイトを表示した。
スバラシイ！！！
次にIE Ver１０で表示してみた。
なんか 変？
各メインおよびサイドの背景の透過の仕方が、IEでは透過しない。
CSSの「rgba」コードはIEでは通用しないようです。
作者に問い合わせたところ
「配布中の子テーマに関しては作成時点の最新主要ブラウザ（Chro
me、FireFox、Safari）あたりでの確認は行いますが
他の旧バージョンやIEに関しては「表示されていれば良し」として
います。
また表示に関してはENJILOGさんが作成されているSTINGERのマイ
ナーチェンジに依存するところもありますが配布済みの子テーマに
関してはそれを追ってメンテナンスを都度入れるような予定もあり
ません。
あくまでSTINGER一利用者が配布しているものだということをご理
解いただければと思います。
よろしくお願い致します。」
との事でした。
いろいろ考えた末、現状ではこの子テーマを利用したほうがいいと
考えたので、「かしわもち」を利用してカスタマイズしていきます。
なのでIE １０でご覧になられている方は、チョットお見苦しい所
はあるとは思いますが、ご勘弁してください。
尚、これで今現在スマホ表示は、ほぼ正常に表示されています。
前回使用していた子テーマでは、CSSで変更しても反映されない
コードが有り、仕方なく親テーマに記述しましたが、今のところ子
テーマで記述してもちゃんと反映されています。（カスタマイズが
親テーマでするカスタマイズは別です。）
なんか日記みたいになってしまったが、備忘録としての記録です。
次回からは、以前のカスタマイズを含めて行ったカスタマイズを備
忘録として、書き下ろしていきます。
コメント