超★初心者さん必見！ブログカスタマイズＣＳＳは張り付け位置がとっても大切
初心者 カスタマイズで詰む
本当ですか、コレ
ブログ開設してから もう１か月！ 記事もまだオマケ程度の５記事です。
決してオサボリではないのですが、月日が経つのは早いですね。
世の中は平成から令和へ
今年も半年が過ぎようとしています。
そんな中 何をしていたかといいますと、
ずっとブログのカスタマイズ！です！！ どんだけぇ～～
はてなブログの公式テーマは初心者には優しい
まったくの初心者でも、
いきなりブログ開設が出来てしまう「はてなブログ」
アカウントを取れば無料で３つまでブログ作成ＯＫ。
公式から出ているデザインの種類も豊富で好みのものを見つけられます。
私もまずは公式が用意してくれているテーマから選びました。
内容にあっていたので気に入ってたのですが、
出てきてしまうんですね。
こういうのがあると良いなとか、もうちょっとこうしたいなとか。
メインはもちろん記事内容ですが、
今後書いていくのに何処かでデザインが気になったままでは
もやもやしてしまいます。 そんな性格です。
記事の訂正箇所が少ないうちにと、軽い気持ちで変更してみることにしました。
公式テーマからテーマストアへ
テーマストアにあるのは、
はてなブログユーザーさんが作成してくれた無償で利用出来るテーマです ありがたや～
http://blog.hatena.ne.jp/-/store/theme/
ユーザーさんと言ってもプロの方もいらっしゃいます。
またこれらのテーマに対して
長年培ってきた情報や知識を沢山持った方々が、
痒いところに手が届くよう解説付きで教えてくれているサイトもあります。
公式テーマだと細かい部分でカスタマイズしにくいようで、
このようにユーザーさんが作ってくれたテーマを利用した方が
オリジナルの幅が広がるんですね。
そして基本的なデザイン部分はコピー&ペーストでいけます。
コピー&ペースト！
初心者にはこれ以上ないステキな響きコピペです。
カスタマイズで抜け出せなくなる
テーマストアで好みのテーマを選び、指示通りにコピペをします。
基本部分の変更はスムーズに出来ます。
色を変えるのもあら簡単、ご機嫌です。
調子に乗ってさらに細かい部分を変更・追加するまでは…。
まさにこの何も知らない初心者にとってはちょっとしたミス(？)によって
永遠に思い通りにカスタマイズが出来ないという事態に陥ってしまったのです。
なぜ自分のブログではできないのダー
テーマごとに作者様が違うので、
基本設定によりカスタマイズの向き不向きな相性もあるようです。
それが悪いのだろうか？
それとも何か、何かが違っているのだろうか…。
ちなみに、この時反映されずに頭を悩ませていたのは
記事を少しでも読みやすくするため
見出し背景のデザインや画像に影を付けること、
文字間隔の変更、長い記事の時に右下辺りに出てくる上に戻るボタン、
小洒落た目次のデザイン等でした。
数多くのサイトを調べてみても皆あんなに簡単そうに、
これをここに張り付ければほら出来た♪ とてもスムーズに作業がはかどっています。
何故ダー 何度やってみても出来ないよ～
コピペし忘れてるとこないかな？
スペル間違ってる？ とか
もしかしたらその情報古くなっているんじゃないの？ とか
しまいには勝手に疑いの目を向けはじめます。
この時点でかなり疲労していますスレてきています。
プレビューには出ているのに更新しても反映されていない…。
ぬか喜びです。
時間だけが過ぎていき何処かから声が聞こえてきます。
パトラッシュ…もう疲れたよ。
ああそうだ、
カスタマイズのし過ぎは良くないんだった。
ページが重くなっていくこともあるし
記事が私のようにおろそかになっていきます。
なにより大切なのは記事です、そお記事。
少しずつ変えていくのが好ましい
大まかな変更は出来たのだから、
後は時間をかけてゆっくりと方法を探していこう。
そう決めた矢先でした。
一筋の光が差し込む
ブログは当然スマートフォンでも閲覧出来ます。
ですがそのままではＰＣ画面とはサイズが違うため
記事や画像の位置がずれたり、読みにくい状態になるんですね。
多くのテーマはとても親切で
ＰＣで見える画面をスマホで見た時に読みやすいよう
自動変換してくれるレスポンシブデザインというのに対応しています。
選んだテーマも対応していたので
中途半端なカスタマイズをスマホで確認してみました。
・・・あれ？ちゃんとデザイン反映してる
ふ～ん スマホだと見えるんだ。
サイトを見に来てくれる人はスマホからの方が多いって聞いたし、
これならこのままでいいか。
などと呑気に考え、
終わった終わったデザイン終～わった。
半ば強引に終わらせ、お風呂にゆっくり浸かることにしました。
リラックスはとても大切ですね。
あまりに思い通りにいかなく半分ヤサグレていた時は
まったく思いつかなかったこと。
スマホでは反映されている でもＰＣ画面だと反映されていない
何かの指示が足りないのでは？？
同じような事例がないか検索してみました。
あ、ありました！ ありましたよ！！
こちらの かたせうみ様の記事に（Ｔ▽Ｔ）そう、これです私が求めていたことは！
デザインＣＳＳは貼り付け位置も大切
そうなのです。
ご存じの方には疑問にすら出てこないことかもしれませんが
ＣＳＳ？何それ？レベルの初心者にとって
このちょっとしたことでも全てに影響するような事態が起きてしまうのです。
ＣＳＳとは簡単に言うとブログのデザイン、
見た目に関する指示を出すところ。
その部分に今回問題があったのです。
スマホデザインと連携して指示をだしているのでＣＳＳ内をよく見ると
@media screen and (max-width:1141px)という記載が混ざっていました。
どうやらこれは1141px以下の画面の場合は、以下のＣＳＳを使うという指示
上記の指示後に張り付けられていた数多くのデザイン達。
「君達、パソコン画面サイズの時は気にしなくていいから、スマホとか〇〇px以下の画面の時だけちゃんと表示してね」
律儀にも素人な私の指示を忠実に聞いてくれています。
ということでＰＣ画面では表示されず
スマホ画面では表示されるという現象が起きていたのでした☆
そうして表示されなかった部分を
得意のコピペでＣＳＳ上部に張り替え
今までの時間は何だったの？？
というくらいの速さで全て反映し現在に至っています。
ＣＳＳ内にある「media」とは
ざっくり説明すると、今はメディアと言えば
ＴＶのディスプレイも含め、ＰＣ画面やスマホ画面
プロジェクター、プリンターにも付いています。
それらでWebページを見ることが出来ています。
そういう媒体をひっくるめたもの。
それぞれのサイズに合わせて表示する必要が出てきますね。
その部分をCSSで指示しているのが「media～」です。
まとめ
コピペＯｋと書かれていても、
次々と張り付けていくと反映していない…。
そんな時は1度ＣＳＳに書かれているコードの並びを確認してみる。
「media~」とあったら注意
詳しく知りたい方はメディアクエリと調べてみるのもお勧め。
きっと小さな壁に大きくつまずく事も
まだまだ出てくると思います。
基本中の基本でも
私のようにさ迷ってしまう方もいるかもしれない。
そう思い記録に残すことにしました。
今回、記事を記しておいてくれた、
かたせ様とアドバイスをしてくれていたご友人にも
この場を借りてお礼申し上げます。
そして まだ足並みも遅く
読みにくいブログであるにも関わらず
読者様になってくれたり、はてなブログでいうところの
イイネのようなスターを付けて下さっている方々にも
感謝の気持ちで一杯です。ありがとうございます (*^▽^*)
後の細かいカスタマイズはゆっくりと♪
