はてなブログ初心者(?)による、ブログデザインカスタマイズ

はてな

　自分用の備忘録です。徐々に追記していきます。上手く出来るかな？

      1. テーマストアからデザインテーマをインストール
        Innocent - テーマ ストア
        選んだのはこちら。「カスタマイズ性の高いレスポンシブデザイン対応」という言葉に魅かれました。自分は同じPC同じブラウザからでしかはてなブログを見ないので、レスポンシブデザインについては重視していませんが…というか、よく分かってない笑。

      2. ページ全体の背景色を変える
        [デザイン] → [カスタマイズ] → [デザインcss]を開いて、タグを書き込みます。
        f:id:eraw8:20171020131912p:plain

        元々記入してあるものは消さずに5行目から入力。「ghostwhite」という色に指定。色の名前は「カラーチャート タグ」とかで検索すれば出てきます。

        body { background-color: ghostwhite; }　　背景色

        f:id:eraw8:20171020132817p:plain
        タイトルの周りしか変わらなかった。記事やサイドバーなどそれぞれ設定する必要があるみたいです。

      3. ページ全体のフォントサイズを変える

        先程のbodyタグの中に書き加えます。14pxに設定。

        body { background-color: ghostwhite;　　背景色
            font-size: 14px; }　　文字の大きさ
        ブログタイトルとエントリータイトル以外の文字の大きさが変わりました。絶対値の「px」指定よりも、環境によって拡大や縮小の出来る「%」や「em」の方がいいという向きもありますが、とりあえず自分の好みでpxにします。そのうち変えるかも。

      4. 記事とサイドバーの背景色を変える
        はてなブログって大きく分けて画面が3つのゾーンで構成されてるんですよね、たぶん。自信ないけど。
        • ヘッダー - ブログタイトル、ブログ紹介文
        • コンテンツ - 記事、サイドバー
        • フッター - 一番下の「ブログを報告する」等がある場所

        記事とサイドバーの設定を変えたいときは、真ん中の「コンテンツ」を設定すればいいんですね。bodyタグの下に書き加えます。

        #content { background-color: ghostwhite; }　　コンテンツの背景色
        「#content」は、はてな側で設定されているコンテンツのIDです。他にも「#globalheader-container」(一番上のHatene Blogのロゴ等が並んでる行)とかいっぱいあります。上手く説明できないので検索してみて下さい。

        f:id:eraw8:20171020150622p:plain
        わーい色が変わったよ～。

      5. 記事タイトルの文字の大きさと太さを変える

        一応写真がメインのブログなので記事タイトルは目立たなくてもいいんだ。

        .entry-title { font-size: 14px;　　文字の大きさ
        font-weight: normal; }　　文字の太さ

        「.entry-title」というのは上記のIDの更に下のクラスです。上手く説明できないので検索してくれ…。そういうものなんだ…。

      6. タイトルの文字の大きさとフォントを変える

        ブログタイトルは大きく。「Verdana」というフォントが好きなのでそれに設定。

        #title { font-size: 30px;　　文字の大きさ
        font-family: Verdana; }　　フォントの名前

        このフォントは太字の方がかっこいいので、文字の太さは変えませんでした。

      7. カテゴリーページの背景色を変える。

        f:id:eraw8:20171020162719p:plain

        白くなっているところを他と同じ背景色にします。

        #top-box { background-color: ghostwhite; }　　カテゴリーページの背景色

        f:id:eraw8:20171020163021p:plain

        変わりました。

      8. サイドバーのリンクの背景色を変える

        記事の方は変えずにサイドバーだけ。

        #box2 a { background-color: pink; }　　リンクの背景色
        #box2 a:hover { background-color: ghostwhite; }　　オンマウス時のリンクの背景色

        「#box2」はサイドバー全体のIDです。どの要素でも後ろに「a」をつけるとリンクの設定になります。

        f:id:eraw8:20171020172833p:plain

        こうなりました。カテゴリーの「NikonD5600」はオンマウスの状態です。スクショだとカーソルが消えちゃうんですね。

　説明するのって本当に難しいですね…。自分のための備忘録とはいえ一応記事として公開するんだし分かりやすくしよう！ とあがいてはみたんですが諦めました。cssやプログラミング講座をブログでやってる方々って本当にすごいんですね、頭が下がります。

body { background-color: ghostwhite;
font-size: 14px; }
#title { font-size: 30px;
font-family: Verdana; }
#top-box { background-color: ghostwhite; }
#content { background-color: ghostwhite; }
.entry-title { font-size: 14px;
font-weight: normal; }
#box2 a { background-color: pink; }
#box2 a:hover { background-color: ghostwhite; }

　同じデザインをインストールして上のタグを貼れば私とお揃いのブログデザインになります笑。

　このページは随時更新します。