初めてのはてなブログ！準備することPart1
無料でブログをはじめる
ガイドにしたがい登録するだけです。詳しいことは下記のサイト様が図解入りでわかりやすく説明されています。私も大変お世話になりました。
ブログデザインのカスタマイズ
ブログのカスタマイズにあたり、先輩の方々に色々とお世話になりました。はてなブログのブログカード等を使い紹介させていただきたいと思います。何もわからないところから始め色々勉強させていただき感謝しております。これからもよろしくお願い致します。
テーマのインストール
「Innocent」はレスポンシブに対応しています。レスポンシブとは画面サイズを最適化することでスマホでもＰＣと同じデザインにすることができるので、ＰＣのみでカスタマイズができてしまうんです。ちなみにスマホ側でカスタマイズするには「はてなブログPRO」にする必要があります。素晴らしいテーマをありがとうございます！
最初の記事を書く
私の場合、はてなブログの基本機能を出来るだけ使い書きました。内容は後で書きなおせるので適当です(汗）見出し（大見出し、中見出し、小見出し）・引用・目次は使っておきましょう。後でデザインをカスタマイズする時にこの記事を見ながら進めていくためです。
背景色または画像を選ぶ
「Innocent」はシンプルでおしゃれなデザインですが、ブログのイメージにによっては背景色など変更する必要もあります。はてなブログでも選べる画像や背景色は用意されていますが私は花のイメージに合わせた画像を用意しました。
著作権？引用？法律のあれこれ
私が数年前にホームページをやっていたころも著作権に関しては色々ありました。主にゲーム関連だったので製作元で画像の使用等の条件があったりと...しかし今はもっと厳しくなっていますね（汗）はてなブログに引用という機能があってどのように使うのか調べたところ下記のとおりでした。
（引用）第三十二条 公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。
背景・記事・アイキャッチ等に使わせていただいた画像について
商用利用無料
帰属表示は必要ありません
下記のサイトさんより使わせていただきました。写真については全くわかりませんが色合いとか構図とか何よりミモザの花が大好きなので...。色んなジャンルの写真が掲載されているのでこれからもお世話になると思います。素敵な写真をありがとうございました。法律を守ってブログライフを楽しみましょう！
はてなブログのグローバルヘッダー＆フッター調整
タイトル画像が決まったら、それに合わせてヘッダー＆フッターの色を調整する必要があります。私は初期設定：黒から下記のサイト様を参考にさせていただきヘッダーは好きな色へ変更しフッターは消去しました。ここまでくると自分のブログのイメージが出来上がってうれしくなるものですね。
カラーコードを調べる
下記のサイト様を利用させていただいております。
グローバルナビゲーションバーを設置する
ブログタイトルの下にある横長のメニューのことです。ブログは記事から検索される場合多いので「このブログのトップはどこだろう？」と思うこともあるはずです。常に玄関に戻れるようにしておけばわかりやすいですよね。カテゴリーやアーカイブも表示出来るしとても便利です。下記のサイト様で色々勉強させていただきました。
グローバルナビゲーションバーの背景色を変更
初期設定は黒なので上記のグローバルヘッダーと同色にしておきまししょう。参考サイト様がわからなくなってしまいましたので書いてみましたうまくいかなかったらすみません。
- 「デザイン」→「カスタマイズ」→「デザインＣＳＳ」に貼付
/*グローバルナビゲーションバー*/
.main-navigation,
.main-navigation ul ul {
background-color: #deb887;/*背景色変更*/
}
見出しのカスタマイズ
見出しの使い方
見出しの規則性について詳しく説明されています。私も読ませていただき本当に勉強になりました。この記事を書いてみて守れているのか？全く自身がありません（汗）記事を構成する上で大切なことなので少しずつ勉強していきたいと思います。
見出しのデザインを変更
はてなブログの初期設定は黒の太文字で表示され、大中小文字の大きさが違うだけの色のない見出しになっております。記事を書く人読む人もわかりやすくするために、下記のサイト様のお力のもとカスタマイズに挑戦してみました。いろんなジャンルのデザインがＣＳＳのコピペだけでできるそうです。おしゃれで素敵なデザインばかりでどれにしようか迷うばかりです。初心者の私でもわかりやすくカスタマイズすることができ、記事のみかけだけは何とか見られる程度？になったと自己満足しております（笑）本当に感謝です！
目次のデザインをカスタマイズする
はてなブログの初期は"目次"という文字がないので下記サイト様のお力を借りてカスタマイズしてみました。記事のトップに目次を設定するだけで見やすくまとまりがある記事に思えてくるから不思議です。背景色などつけるとメリハリも出来るし、読みたい記事の見出しにすぐ飛ぶことも出来るのもいいですね。
サイドバーのカスタマイズ
ブログの右側にある、デフォルトではプロフィールとか検索とか色々メニューが表示されているところです。表示したいメニューは設定画面で選べるので好きなように選びましょう。
サイドバーのデザインを変更する
サイドバーをグローバルヘッダーやナビゲーションバーと同色でまとめてみました。参考にしたサイト様がまたまたわからなくなったので下記のとおり書いてみました。
- 「デザイン」→「カスタマイズ」→「デザインＣＳＳ」に貼付
/*サイドバー・タイトルデザイン*/
.hatena-module-title{
color: #ffffff; /*文字色*/
background: #deb887; /*背景色*/
border-radius: 0px; /*バーの角丸*/
padding: 5px 5px; /*バーと文字間スペース*/
font-size: 14px; /*文字サイズ*/
}
「初めてのはてなブログ！準備することPart1」です。次回はトップページのカスタマイズについてまとめてみたいと思います。お世話になった先輩サイトの皆様ありがとうございました。本当はブログカードで紹介したかったのですがページ表示が重すぎてリンクのみとなっております。速度については改善出来る良い方法があれば勉強していきたいと思っています。これ以上書くと益々重くなると思われるのでこのあたりで。
