はてなブログのデザインを初めていじってみた！
カスタマイズって面白いですよね。
スタバで飲み物をカスタマイズ、ゲームのキャラをカスタマイズ、自慢のバイクをカスタマイズ…。
カスタマイズはその人の個性や愛情が現れていて、見ているだけでも楽しいです。
さて、今回私はお恥ずかしながら、初めて自分のブログのデザインをいじりました。
ある人の記事に「まずはとにかく記事を書け！デザインなんか後回しや！」と書いてあったので今まで全くやってませんでした。
しかし、ブログ始めてから１ヶ月以上経ったし、そろそろ何もしていないのはちょっと恥ずかしくなってきました。
今回はこれからブログをいじろうという方への情報共有も兼ねて、私がやったカスタマイズの内容をまとめました。
参考になれば幸いです。
目次
アクセントカラーを変える
スマホではてなブログを開くと、上の方に文字が出ますよね。
この文字の色は変えることができます。
はてなブログのサイトを開いて、「ダッシュボード」の「デザイン」を選択。
スマホのマークをクリックして、「アクセントカラー」から好きな色を選ぶ。
変更をしたら必ず「変更を保存する」ボタンを押して、変更を確定させて下さい。
ブログの最初にくる色を変えるだけでも、自分らしさが出せました。
私はハンドルネームがブルーなのでもちろん青を選びましたw
見出しのデザインを変える
初期設定の「見出し」だと非常にシンプルですよね。
でも、この見出しは自分だけの形にカスタマイズできるのです。
はい、太文字だけだった見出しに、ちょっとしたデザイン性が出てきました。
見出しはまだまだたくさん種類があり、色などもカスタマイズできるので、あなたのオリジナリティを爆発させるにはもってこいです。
今回は以下のサイトから情報を得て設定を行いました。
「NO TITLE」さんありがとうございましたm(_ _)m
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ | NO TITLE
こちらのサイトには、様々なタイプの見出しが紹介されています。私もこちらから見出しを編集するためのコードを拝借しました。
カスタマイズの設定をする場所はこちら↓
ダッシュボードの「デザイン」を選択し、次にスパナのマークを選択、「デザインCSS」を選択する。
クリックすると窓が開かれまして、ここに見出しを編集するためのコードを記入します。
コードとはシステムやコンピューターにどう動いて欲しいかを示す命令書のようなものです。
難しそうですが、決まった場所に決まったルールにのっとったコードが書いてあればokなので、他所のものをコピーするだけで大丈夫です。
今回ははてなブログに自分だけの見出しを出して貰うためのコードを記入します。
赤い線から下の位置に見出しのコードを記入しましょう。コピペでokです。
コードは「NO TITLE」さんからもらってきましょうw
ただ、デザインCSSの中に最初から書かれているコードは設定によって異なります。
そのため、「NO TITLE」さんにもざっくりとしか書かれていません。
作業前に最初から書かれているものをコピーして、メモ帳に貼り付けてからコードの追加を行った方がいいかも知れません。
コードを記入してみて上手くいかない場合は、あらかじめ保存した状態に戻して再チャレンジしましょう。
繰り返しになりますが、難しくはないです。書いてあるコードを適切な場所にコピペするだけですから。
テーマを変える
テーマとは、それを選ぶとブログ全体のデザインが変わる便利でオシャレな機能です。
パレットのマークから選択できます。
最初から色々なテーマが選べますし、よそからダウンロードすることも可能のようです。
ここまでくると、かなりブログらしくなってきますね。
こんなのもありました。(寿司の下にトイレの画像で申し訳ない。)
お好きなテーマをどうぞ。
変更が反映されない！スマホユーザーへの注意
いじってみて分かったのですが、これらの設定はPCでブログを見た場合にしか反映されません。
スマホとPCでの画面表示が切り分けられていて、それによって設定も分けられているようです。
ただし、この問題はもう1つ設定をすれば解消されます。
「レスポンシブデザイン」にチェックを入れて確定させるだけです。
私はこれで見出しとテーマがスマホ画面に反映されました。
自分だけのカスタマイズブログを作ろう！
今日はちょっとだけブログのデザインをいじりました。
しかし、まだまだ出来ることはたくさんあるようです。
はてなPROにもアップグレードしましたし、色々と試したいと思います。
ブログはコンテンツが命と聞きますが、人間と同じで身だしなみも多少は整えたいものです。
自分の試行錯誤の結果や、いい情報が入ったらどんどん記事にしていきたいと思います。
