【コピペ】はてなブログテーマ「Primeiro」のサイドバーデザイン全12種類のご紹介

はてなブログテーマ「Primeiro」のポイントはサイドバーです。
このサイドバーのデザインでブログの印象が変わるといってもいいでしょう！

今回は、サイドバーのグラデーションデザインとシンプルな単色デザインの全12種類のデザイン例をご紹介します。

cssをコピーして使ってください。

サイドバーカラーデザイン

色彩心理学的に「ライト系」はソフトで軽い印象、爽やかで清潔なイメージを、「ダーク系」なら落ち着いた印象、大人っぽく重厚なイメージを与えます。

カラーというのは大事ですのでブログにあった色を選んでみてくださいね。

cssを記述する場所

デザイン　>　スパナアイコン(カスタマイズ)　>　デザインCSS

シンプル・単色

シンプルだからこそよい、単色デザインの例をご紹介していきます。

ダーク系

gray

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #6b7377;
}

Bleu Nuit

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #0E4352;
}

Cardinal

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #AD362C;
}

ライト系

Bleu Myosotis

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #74A5CF;
}

SafeColor

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #79CA9A;
}

Siro

#box2-inner .hatena-module-profile .profile-description p {
    color: #666;
    margin-top: 10px;
}

.hatena-module-title a {
    text-decoration: none;
    padding: 14px 0;
    color: #666;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #666;
}

.id span.user-name-nickname {
    color: #666;
}

.hatena-module-title {
    color: #666;
}

#box2 {
    background-color: #FBF9F4;
}

グラデーション

最近のウェブデザインでよく見かける、鮮やかなグラデーションカラーを使ったデザイン例をご紹介します。

グラデーションの配色に迷ったら配色ツールを使用してみてください。

・WebGradients
・Uigradients

ここではWebGradientsから取得したグラデーションカラーを使用します。
試してみていいな！と思うもの6種類をご紹介します。

ダーク系

Morpheus Den

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

#box2 {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}
#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

Premium Dark

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

#box2 {
    background-image: linear-gradient(to right, #434343 0%, black 100%);
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}
#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

Aqua Splash

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

#box2 {
   background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}
#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

ライト系

Fly High

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}

Strong Bliss

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

Over Sun

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
  background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}

さいごに

いかがだったでしょうか？
色を変えるだけでガラッと印象が変わりましたね。

配色ツールなどを使って自分だけのオリジナルのブログを作っていきましょう。

はてなブログPerfect　Guidebook

posted with ヨメレバ

JOE　AOTO ソーテック社 2016年07月21日

楽天ブックス

Amazon

Kindle

サイドバーデザイン以外にもカスタマイズ指南記事を用意していますのでぜひ見ていってください。