Apple In

Apple関連のネタやアプリなどを分かりやすく解説しています♪ Mac初心者さんもどうぞ御覧ください♪

MENU

はてなブログのカスタマイズ(1)ヘッダとヘッダ下

はてなブログのカスタマイズをいろいろと試してみたいと思います

自分自身,HTMLやCSSなどが詳しいわけではないので,他の方のサイトからハックしながら試行錯誤してみました

今回はヘッダとヘッダ下です

はてなブログを始めた方で,あまり詳しくない方への参考程度になればと思っています

デザインテーマ

数多くあるデザインテーマの中でもシンプルで使いやすそうなモノをチョイスしました

レスポンシブにも対応している方が良いと思い選んだのは「Written」です

派手系や濃い色系のブログサイトは自分の好みではないので,シンプルな2カラムレイアウトでカスタマイズしやすそうですからね

ヘッダ・タイトル変更

ヘッダは画像にしようか文字にしようかと少し迷いましたが,スマホでの見え方やシンプルにしたいということ,何よりも画像を使うことでスペースの無駄遣いに感じたので,文字で行くことにしました

フォントはGoogle Web Fontを使用しました

Google fontのページに行き,好きなフォントを探します

Google Fonts

今回sentenceフォントではなくposterフォントをチョイスしました

選択すると下にAdd to Collectionと出てきますのでクリックします すると,下の方にChoose | Review | Useと出てきますのでUseを選択します

開いたページの3と4ですね こちらをテキストにコピーしておきます

画像の「1」の記述をダッシュボード>設定>詳細設定>headに要素を追加の部分に貼り付けて「変更する」

画像の「2」の記述をダッシュボード>デザイン>カスタマイズ>CSSに記述します

下の記述はヘッダ文字の色も指定しています

オリジナルの「Written」テーマの文字は#333333でマウスオーバーすると#85C226になるのですが,ここは変化を付けたいと思い変更しています 通常は#4599edで,マウスオーバーすると#ed9945となります

ヘッダ文字の下のカスタマイズ

ヘッダー文字は要素としてh1要素を持っています

その下はh2の要素を持っています

この文はダッシュボード>設定>ブログの説明の部分です

装飾がない状態だとノッペリしてしまいますので少しカスタマイズしました

少し影をつけ,ラインを入れてみました

ラインの色はこのブログのリンクや他のh3,h4要素に使用している#BF0000を使用し,全体のカラーをまとめる役目を果たしています