1. TOP
  2. ブログ運営
  3. Twenty_Twelveでスマホ版はロゴを設定できなかった話

Twenty_Twelveでスマホ版はロゴを設定できなかった話

 

 

 

Twenty Twelveが初めからロゴを設定できるなら、あんなことにはならなかったでしょう。

 

 

 

こんにちは。ニシダです。

CSSをいじってwordpressの公式テンプレートtwentytwelveにロゴを表示させようとしたら、スマートホンでの表示が崩れました。

時期を同じくしてサイト全体のデザインを司るstyle.cssに修正を加えていたため、そこでやらかした可能性もありますが、CSS文法チェッカーにおいて修正箇所のエラーは検出されていません。

ググりまくって、たくさんのページを読んでも解決しなかったし、そもそも言及しているページ自体少なかったのでここで1度取り上げたいと思います。

修正の内容とロゴの表示

修正は、myplugin(自分のオリジナルプラグイン)を作ってその中にロゴのイメージを表示するCSSの内容を記述し、できあがったプラグインを有効化するというものでした。

これだと、パソコンではうまく表示されたし、スマホでも最初は変な余白ができながらも一応表示されていました。

しかし、どこかのタイミングで相性が悪い修正を加えてしまったのか、スマートホン側の画面が悲惨なことになってしまいました

一夜あけてクリアな頭でみると、スタイルシート自体がまともに読まれていないような…?

プラグインを入れすぎて脆弱性が心配だった私は、可能な限りプラグインに頼らないでスマホでの見た目を整える道を模索しました。

自作プラグインなど色々試すも、無理だった

mypluginで設定したパディングを変えたり、テーマの編集でヘッダー部分をいじったりしたのですが、そもそもロゴ画像は表示されず、テキストのタイトルが出てきてしまう状態でした。

カスタマイズでタイトルとキャッチフレーズの表示/非表示を制御できるチェックボックスがありましたが、これを非表示にしてしまうと文字の代わりにロゴを出す、という動き自体しなくなってしまうのか、メニューの上に何もなくなってしまうという寂しい自体に陥りました

ググると、ファイル名が日本語だからダメで、半角英数に変えると解決したという事例がいくつか出てきましたが、私の場合は初めから半角英数でした。

単純に、ヘッダーにイメージのパスを書き込んでもなぜかスマホでは表示されずじまいでした。

結局プラグインに頼ることになった

日付が変わる前からやっていて、午前2時ごろになってしまったのでさすがにマズイと考えた私は、スマホ表示用プラグイン(WPtouch)の導入を試みました。

いつまでもサイトが汚い状態でネット上に上げてるわけにもいかないですしね。

その結果、

超簡単に、めちゃくちゃ綺麗にできました…。

自分でやっていて分かりづらいと感じた箇所だけ紹介します。

基本的に設定はPC版と同様になるようですが、スマホで固定ページのメニューにするか、カテゴリーのメニューにするかは、カスタマイズから選べるようになっています。

もともとのテンプレートが設定できないようになっているロゴなどは、このアプリでも設定できないようでした。

カテゴリーが表示されるようになりました。

教訓: バックアップをしないと後で泣くことになる

先人の教えに従ってよかった!

プラグインを紹介している多くのサイトで、「バックアップを取るのだぞ」と親切にも書いてありますが、「めんどくさい」と思ってこれまでスルーしてきました。

しかし今回、たまたま気まぐれで取っておいたバックアップが大いに役に立ちました。

子テーマを作ろうとしたときに誤って元々のテーマの更新をかけてしまい、修正した箇所が全部パーになったのです。

時間をかけて悩みながら決めたデザインが、本当にパーになってしまったら泣くしかありません。

ズボラな復元法

で、バズ部では親切にもftpソフトの使い方まで紹介されていますが、パスワードなどを確認するのが「めんどくさい」と思った私は、バックアップのファイルの中身を全選択→今のファイルに貼り付け、という荒技で元に戻しました。

※素人の浅知恵ですから、真似したら大変なことにるかもしれません。自己責任でお願いします。

逆に面倒なんじゃないの?と思われるかもしれませんが、せいぜいスタイルシート、ヘッダー、フッター、アイキャッチを修正している記事の中身(content)のファイルくらいだったのでスグ終わりました。

テーマの編集をする方法について考えた

あと、こういうことになって、下手にそれぞれの元ファイルをいじるよりは、自分で子テーマとか別のファイルを作ってすぐに蘇らせることができるような形で修正するとより良いんだろうな、と思いました。(自分にはうまく子テーマを使えず、修正がパーになる事態を招きました。)

私の場合はサイトの細かい配置をテーマの編集ではなく、主にプラグインに依存して行っていたので、それも復元時にプラスに働いたと感じました。

とりあえずスマホではロゴはいいや

今の私の実力では、スマホでのロゴの表示のさせ方は分かりませんでした…。

しかし、プラグインを使うことで自分で小細工するよりも綺麗なページになったので、これはこれでよいかと思っています。

長々とお付き合い下さり、ありがとうございました。

Sponsored Link