超初心者がはてなブログをカスタマイズしていく記録
2016.4/15(金)~2016.4/19(火)明け方
こんにちは、ありんこです。
先日から手を付け始めていたブログのカスタマイズ。試行錯誤で色々とやっています(現在進行形)。目次とか見出しとか、HTMLとかCSSとか・・・分からないことだらけ。たくさんのgoogle先生にお世話になっています。ブラウザを開きすぎたからかパソコン固まったりしてちょっと挫けそうになってます。その過程をときどき書いていくことにしました。
デザイン変更のキッカケは「見出し」の作成
他の方のサイトを見ていて見出しの存在に気づいたのがついこないだ。自分のブログにもこんなのを付けたい。でもきっと難しいのよね、面倒くさいのは嫌だな・・・調べることすら面倒だったんです。きっと専門用語ばかりで頭が痛くなるに違いない。
しかしちょっと気分が乗った時があり、重い腰を上げてgoogle先生に聞いてみました。するととても素敵な先生がいらっしゃったのです!
はてなブログの設定画面の画像入りで説明されているので、私のような初心者でも簡単に見出しを作ることが出来ました。
目標は、吹き出し風のデザインです。
こちらです。
「CSS」って何?とアレルギーが出そうになりましたが、「コピペで簡単!」の文字を信じることに。
書かれている通りにやってみると・・・
あれれ、出来ちゃった♪
PCのプレビューを見たらいい感じの見出しが出来てるー
でもスマホのプレビューを見てみたら・・・
え?スマホの表示がダサすぎるよ
カスタマイズされてない
なぜなのーーーー?
何度もプレビューし直すも、スマホでは見出しがただの大文字太字となっています。
そうです、私はレスポンシブデザインというものを知りませんでした。
レスポンシブデザインってなぁに?
「スマートフォンから閲覧したときにPCと同じデザインテーマで表示させることができるデザインのことです。」
やっと欲しかった見出しが手に入ったのに、トホホです。
私の選んでいたブログのデザインはレスポンシブデザインではなかったのです。
このままでは、いくらカスタマイズしてもPCにしか反映されない。何も考えずにブログデザインを選んでいた自分を責めつつ、デザイン変更をすることにしました。
これがキッカケです。
選んだデザイン
無料ブログでもそのレスポンシブデザインを選べるらしい、ということで選んでみました。「Brooklyn」です
どこで選ぶの?
一つずつクリックして説明文にレスポンシブデザイン対応の記述があればOKです。
見た目でいいなと思ったらクリックして確認してみるのがいいと思います。
気に入ったのが見つかったら、画面右側にある「プレビューしてインストール」をクリックで実際にプレビューしてみてください。
見た感じがOKだったらインストールして設定完了です。
あとで気づきましたが「Brooklyn」の制作者は「コピペで簡単!」で見出しの作り方を教えてくれた方でした。
目次についても書きたいのですが、疲れ果ててしまったのでまた次回!
更新が滞っているのでとりあえずこの記事を上げます。
この記事を見て下さった方はおそらく知っている情報かと思います。
超初心者なので見守っていただけるとありがたいです。