2019-05-20

ちょっと飽きてきた？簡単にはてなブログのデザインを変更する方法

f:id:ABP:20190520175006p:plain

こんにちは、セブツマです。

にほんブログ村

<セブ島を盛り上げたい！応援クリックお願い致します。>

このブログデザイン飽きたな・・・

そんな風に最近思っていたので、少しはてなブログのデザインを変えてみました。

まずはテーマを見直す

私はもともとZENO-TEALというデザインを使っていましたが、今回はHaruniというテーマにしてみました。

テーマストア

テーマストアは上記から飛んでみてください。

自分のブログのテーマや雰囲気に合ったものを選ぶことができます。

私の場合、ピンクが好きですが、ガーリー過ぎるのも苦手なので、セブ島の海もイメージした、水色×ピンクのデザインに調整してみました。

テーマが決まったら設定を見直す

テーマが決まったら、はてなブログの設定を見直します。

基本、テーマストアの各デザインにとてもわかりやすい説明がついていますので、そちらをチェックしてみてください。

例えば私の場合だと、ZENO-TEA→Haruniの変更により、はてなブログの表示形式を「一覧形式」に変更する必要がありました。

ここを変更しないとうまく反映されないということが起きるので、なにかが上手くいかない際は、書かれている手順を念入りにチェックします。

記事一覧表示（はてなブログPro向け）

はてなブログProの方はトップページを一覧形式にすると横長のカードレイアウトになります。はてなブログProで設定＞詳細設定からトップページの表示形式（PC版）を「一覧形式」します。
※記事には必ずアイキャッチ画像を設定して下さい。

説明はこんな感じ！わかりやすいですよね☺

テーマ設定が終わったらカラーを好きなものに変える

f:id:ABP:20190520174619p:plain

お気に入りのデザインテーマが決まったら、好きな色に変えることもできます。

初期設定の3色グラデーションも可愛いですが、よりこだわりたい方は自分でグラデーションを作ることができます。

まずHaruniのテーマ説明の中にある下記リンクへ飛びます。

着せ替え用CSS　水色・紫・黒系グラデーションサンプルコード【訂正あり】

そうすると他の例としていくつかのサンプルコードが載っています。

その中で気に入ったものがあれば、そのままコードをコピーして「デザイン→カスタマイズ→デザインCSS」に張り付けます。

そうするだけで、サンプルのデザインに早変わりです。

簡単に自分の好きな3色グラデーションを作る方法

f:id:ABP:20190520174737p:plain

簡単に自分のオリジナル3色カラーでグラデーションを作ることもできます。

その時に便利なのがShapyというサイトです。

自由に色の組み合わせができ、「Copy CSS」というボタンを押すだけでコードまで勝手に作ってくれます。しかもタダ。優れものです。

そして変更方法は、先ほどご紹介したのサイト

着せ替え用CSS　水色・紫・黒系グラデーションサンプルコード【訂正あり】

の下記コード、

/* 水色グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background: -webkit-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #8fd3f4;
}

.leave-comment-title {
    border: 1px solid #8fd3f4;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #8fd3f4;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-top: 1px solid #8fd3f4;
    border-bottom: 1px solid #8fd3f4;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-left: 4px solid #8fd3f4;
}

こちらの赤字部分のカラーコードを書き換えます。

例えば、先ほどご紹介したShapyでグラデーションを作る場合、お気に入りのカラーコードが(#00978d 0%, #f3b6c9 100%)だとします。

そのカラーコードをそのまま元のカラーコードと入れ替えるするだけです。

私の場合、

/* グラデーション着せ替え用グレー */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #5d4157 0%, #a8caba 100%);
    background: -webkit-linear-gradient(left,  #5d4157 0%, #a8caba 100%);
    background: linear-gradient(to right, #5d4157 0%, #a8caba 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #5d4157 0%, #a8caba 100%);
        background: -webkit-linear-gradient(30deg, #5d4157 0%, #a8caba 100%);
        background: linear-gradient(120deg, #5d4157 0%, #a8caba 100%);
        /* 背景グラデーション2 */
    }
}