わからないことだらけ
みなさん、こんにちは。
ブロガーのすい喬です。
今回はスマホで苦労した話です。
カスタマイズについてはご存知ですね。
ブログを始めると必ずここで躓きます。
誰でもおんなじ。
表紙の文字を大きくしたり、色を変えたり、位置をずらしたくなります。
自分だけはお仕着せのまんまでいいということはありません。
それだけなら簡単ですけどね。
最近のテーマは本当によくできているので、痒いところに手が届いちゃうのです。
でもちょっとだけ変えたい。
この1週間、毎日戦い続けました。
CSSを少しぐらいやったぐらいではなかなか追いつけません。
深い闇です。
しかし人間は現場で日々育つのです。
あちこちをいじっている間にどんどん詳しくなります。
ちょっとしたコードならすぐ書けるようになります。
ところが厄介なのはスマホのレスポンシブデザイン。
今の読者は60～70%がスマホからやってきます。
それにあわせて表紙、フォントの大きさ、色まで決めなくちゃなりません。
見にくいサイトからはすぐ離脱です。
以前ならパソコンでの見映えだけを気にしていればよかったのです。
今はいつも両方の画面を見ながら、デザインを決めていかなければダメ。
いろいろとやりました
今まではタイトルをフォントのまま使ってました。
でもちょっと小さいのです。
仕方がないのでロゴにすることにしました。
大きさが自由自在になりますからね。
イラストレーターを使い、フォトショップで加工しました。
周囲に影をつけるドロップシャドウも試みました。
さらに色や大きさまで決めないと。
フォントもどれにするかめちゃくちゃ悩みました。
以前から「メイリオ」が好きだったので、そこはなんとかなりましたけどね。
最近の活字はきれいです。
イラストレーターを使うと、拡大しても崩れません。
すごいソフトがあるもんです。
あまりタイトルのフォントを加工したりすると、かえって素人っぽくなるような気もします。
結局、ドロップシャドウもやめました。
問題は表示の位置です。
これも永遠の悩みですね。
ぼくが使わせてもらっているCocoonはタイトルが中央に集まるようになっています。
どちらかといえば、左下に持っていきたいので大変でした。
フォントや解像度、スマホの大きさなどによっても狂ってくるのです。
せっかくできたと思ってもタブレットでみると違っていたりして…。
右側に突然余白が
タイトルの下にある長めのコメントをスニペットと呼びます。
120字くらいが限界と言われています。
しかしどうやっても最後の1行が消えてしまうのです。
これにも隋分、苦労しました。
なんとかこれも解決。
大変だったのは、いつの間にかスマホの右側に余白ができてしまったことです。
画面が横にずれてしまうのです。
スマホのタイトルを調整したのがいけなかったようです。
元のままだと、PCにあわせてあるのか大きく見えるのです。
これを縮めるのも大変でした。
なんとかなったかなと一安心したら、次は画面の右側の余白です。
突然横に飛び出てきた時はなんのことかわかりません。
なんてこった。
あちこちのサイトを探し回りましたね。
そこに出ているサンプルのコードをいくら書き込んでみても、びくともしません。
とうとう観念しましたよ。
ロゴタイトルでなかった時の元の形に戻そうかと何度も考えました。
どうもあのロゴを入れて、それをスマホにあわせたのに問題がありそうなのです。
無理にフォントを小さくしているので、もしかすると、元の表紙が少し横に長いのかもしれません。
このあたりがレスポンシブデザインの難しいところです。
書き込むコードを条件分岐型にしています。
つまり表紙の長さがmax480pxだったらこのコードを使えといったようなプログラムを組んでます。
これは難しい。
PCとスマホは全然大きさが違いますのでね。
それでもHTMLとCSSをいじればなんとかなりそうだということがわかりました。
ただしWorsPressはHTMLの部分をPHPで書かなくてはいけないのです。
PHPとCSSの組み合わせだと気づいたのは数日前のことでした。
そんなのあたりまえといわれれば、それまでです。
しかしわかんないものはわかんない。
WRAPという考え方
文字通り包むというのがこのプログラムの元の意味です。
サイトを全部同じ大きさで包んでしまおうというコードなのです。
そうじゃないのは切り捨てるというのを付け加えれば、なんとかなるかも。
しかしなかなか先人の教えに辿り着けません。
こういう時はひたすらググるのみ。
ありました。
このコードを入れろというのがありました。
みなさんも試してみてください。
PHPを修正するため、子テーマを作ります。
header.phpとfooter.phpです。
これの作り方さえわかれば大丈夫。
子テーマにしておかないと、修正を間違えた時、リカバリーできません。
FFFTPなどのソフトでサイトの中をのぞき、自分が使っているテーマから1度外に取り出してあげます。
それをもう1度子テーマの中に入れてあげるところまでが第1段階です。
あとは簡単。
子テーマ「header.php」をFTPツールで開けて<body>を探してください。
その直下に「<div class=”wrap_original”>」と書いてあげます。
保存して終わり。
子テーマ「footer.php」をFTPツールで開けて、同じく<body>の直前に「</div>」の閉じタグを書いてあげます。
こちらも保存して終わり。
最後は子テーマ「style.css」に、
.wrap_original {
overflow: hidden;
}
と打ち込んで保存してあげれば完成です。
騙されたと思ってやってみてください。
子テーマまでつくれれば、なんとかなります。
最近のテーマはだいたい子テーマを持っていますからね。
だから移してあげればOKです。
やってみてください。
WordPressを自分でインストールできた人なら、なんでもありません。
試す価値はありますよ。
きっとうまくいきます。
最後までお読みいただきありがとうございました。
