HTML、CSSってなに？超初心者でもスマホのデザインをカスタマイズできました。
こんばんは。
少しずつスマホでのブログ表示をカスタマイズしています。
今回は、簡単にスマホのデザイン変更の方法を説明していきます。
▼ 目次
・カスタマイズってどうやってやるんだろう？
・難しくてできないんでしょ？
・まずさ、CSSやHTMLってなに？
・可愛く表示させるようにするには？
これ、私がずっと心配していたことでした。
カスタマイズするためのコードなどは、様々なサイトで公開してくださっているので、それを参考に少しずつスマホの表示を変更していきました。
コードを指定部分にコピー張り付けする！
これをすることで、デザインが変更できます。
(私同様のネットハイパー初心者さんへ。最初羅列されまくった英語や数字を見たとき倒れそうになりましたが、コピーすればいいので、怖がらずに頑張りましょう。。)
※今回ははてなブログproの契約をしている前提で話します。スマホのデザインを大幅に変更するにはproじゃないとできません。
CSSやHTMLって？？
- HTML(HyperText Markup Language)とは？
HTMLとは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる
HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。
とのこと。(うん難しくてよくわからん。)
大まかにいって
WebページはHTML(文所構造)+CSS(見栄え)
で構成されているっぽい・・・。
つまりWebsiteを作るために必要なHTMLやCSSのコードを作成していけば、自分好みにサイトがデザインできるってことですね！
でも、コードを自分で作成することは、右も左もわからない初心者には至難の技です。。
そこで、コードを公表してくださっている先輩ブロガーさん達の記事を参考にデザインしていきました。
コードってどこに貼り付けるの？
さあ、実際にコードを貼り付けるのはいいが、どこに貼るんだよってお話。
携帯からじゃなくてパソコンからブログの編集画面にログインします。
ダッシュボードのデザインを選択。
↓
スマートフォンのヘッダを選択。
↓
タイトル下にコードを貼り付ける。
こんな感じ。
今回作成してた複合メニューバーはここに貼り付けました。
(何のデザインを変えるかによって、貼り付け場所が違うので、それは参考サイト様の指示に従い適切な場所に貼り付けていきましょう)
このように、指定された場所にコードをコピーして貼り付けていくとサイトがカスタマイズされていきます！！！！
複合メニューバーの設置
カテゴリ分けにテンパってた私は、とりあえず複合メニューバーを設置してみることにしました。
↓参考サイト様はこちらです
www.yukihy.com
複合メニューバーを設置してみたら、カテゴリ分けもされて、ブログも少し見やすくなりました。
これからゆっくりとリニューアルする予定です！
またどこのサイト様を参考にしたかを更新していきたいと思います。
まとめて一気にやるのは、多分初心者の方はキツイはず・・・。
(私は割とヘトヘトになったので、ゆっくりカスタマイズしていくことにしました。)
