【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

「コピペで簡単」はてなブログのサイトカラーを自分好みにカスタマイズする方法

 

※この記事は当サイトのテーマ「PLAIN」を元にカスタマイズを行います。皆さんの使われているテンプレートやカスタマイズ環境によってはうまくいかない場合もありますので、必ずバックアップをとるようにお願いします。

 

PLAIN公開からまだ10日足らずですが、72人の方々に使っていただけていること(2018/9/18現在)に感謝です。このまま数字を伸ばしていってほしいものです。

できればこの72人とみっちり面談させて頂きたいくらい光栄です。(迷惑か笑)

ででで、今までテーマを公開する度にカスタマイズ記事やらなんやらを書いていたのですが、PLAINに関しては紹介記事すらない始末。

いやもちろん書く予定ですよ、みんなに好きになってもらいたいし、、、。

でも今のところはちょっとめんどくさいので保留中です。

それよりも実用的なカスタマイズ記事書いた方がいいんじゃないかな~ってことでこの記事です。(需要あっても72人だけど汗)

もちろん「PLAIN」ユーザーでなくても参考にできるよう配慮はしていますが、サイトカラーのカスタマイズの場合はテンプレートによって差が出てしまうので、ある程度知識がある人向けということになりそうです。

まあやってみて上手くいかなかったら別の方法でやろうというスタンスだと有難いですね。ここら辺は仕方のないことなのでお許しください。(*^^)v

どうしてもうまくいかない場合はとっておきの解決策があります。それは「PLAIN」をダウンロ……

 

個人的にはテーマ使用者がもっと増えて、私のテーマを使用した別の人がカスタマイズ記事やらを書いてくださるとめちゃくちゃ嬉しいし助かりますね~。

まあ、そんなことを期待すべきはダウンロード数72のテーマ作者ではないことは心得ております。理想はの話ですから、、、(^^ゞ

これからPLAINユーザーが増えることを大いに期待してます。はい。

PLAIN – テーマ ストア

サイトカラーの変更方法

デザイン設定から、タイトル下の部分にコードを追加し行います。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に以下のコードをコピペしてください。

CSS

<style type="text/css">
#blog-title {
background-color: #fff; /*ブログタイトル背景色*/
}
#title a {
color: #000; /*ブログタイトル文字色*/
}
#blog-description {
color: #000; /*サブタイトル文字色*/
}
#slide-nav, #slide-nav .slide-nav-inner {
background-color: #000; /*スライドメニュー背景色*/
}
#slide-nav .menu a {
color: #fff; /*スライドメニュー文字色*/
}
.hatena-module-title {
color: #fff; /*サイドバータイトル文字色(二か所あり)*/
background-color: #000; /*サイドバータイトル背景色*/
}
.hatena-module-title a {
color: #fff; /*サイドバータイトル文字色(二か所あり)*/
}
.hatena-module {
background-color: #fff; /*サイドバーモジュール背景色*/
}
#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries {
background-color: #fff; /*最新記事、注目記事、関連記事リンク背景色*/
}
.page-archive .categories a {
color: #fff; /*カテゴリー文字色*/
background: #000; /*カテゴリー背景色*/
}
.page-archive .archive-entries .archive-entry {
background-color: #fff; /*アーカイブ背景色*/
}
#container-inner {
background-color: #none; /*ブログ背景色(デフォルト機能でも設置可)*/
}
.breadcrumb {
background-color: #fff; /*パンくずリスト背景色*/
}
</style>

詰め込んでやったぜ。( ;∀;)

 

私のテーマに限らず使えますが、余白などの関係でキレイにならないかもしれません。そこら辺はある程度知識のある方が参考にされてください。

 

てことでこれからひとつひとつ丁寧に解説します。

、、、なんせ72人もいるのだから。(イヤミではない笑)

ブログタイトルの背景色を変更する

先程のコードの一番上にあります。(一番上から順番に説明します。)

デフォルトでは白に設定しているので、コピペした時点では白になるはずです。

試しに黄色(#ffea63)でやってみます。

コードは以下のように書き換えることになります。

CSS


#blog-title {
background-color: #ffea63; /*ブログタイトル背景色*/
}

f:id:oyomiyo:20180919142931p:plain

なかなか良き。

次~。

タイトル・サブタイトルの文字色を変更する

デフォルトでは黒にしてます。タイトルはデフォルトのまま黒(#000)で、サブタイトルを赤(#e32424)で設定してみましょう。

CSS


#title a {
color: #000; /*ブログタイトル文字色*/
}
#blog-description {
color: #e32424; /*サブタイトル文字色*/
}

追加するとこんな感じです。

f:id:oyomiyo:20180920001532p:plain

サブタイトルの所がちゃんと赤文字になってますね。

ハイ次~!

スライドメニューの背景色と文字色を変更する

スライドメニューに関しては、完全に「PLAIN」ユーザーに限定されてしまいますね。

取りあえず背景をグレー(#dde5e8)、文字を黒(#000)にしてみます。

CSS


#slide-nav, #slide-nav .slide-nav-inner {
background-color: #dde5e8; /*スライドメニュー背景色*/
}
#slide-nav .menu a {
color: #000; /*スライドメニュー文字色*/
}

でこうなります。

f:id:oyomiyo:20180919154018p:plain

あ、ちなみにどんな風なカラーにしようとか全く考えてないのでこの先ちょっと怖いですがお付き合いください。

サクサクいきまそ。

サイドバーのタイトル背景色と文字色を変更する

サイドバータイトルの文字色に関しては追加する場所が二か所あるので注意してくだされ。

ここでは背景色をブログタイトルで使用した黄色(#ffea63)にして文字色を黒(#000)にしてみましょう。

CSS


.hatena-module-title {
color: #000; /*サイドバータイトル文字色(二か所あり)*/
background-color: #ffea63; /*サイドバータイトル背景色*/
}
.hatena-module-title a {
color: #000; /*サイドバータイトル文字色(二か所あり)*/
}

でこんな感じ。

f:id:oyomiyo:20180919154033p:plain

タイトルとカラーを合わせるのはアリがちなやつですね~。結構やってるサイト見かけます。

ハイ次!

サイドバーのモジュールに背景色を付ける

モジュール自体の背景色ということになります。カード型デザインの人なら設定することになるとは思いますが、特にその類のテーマでなければ変な余白が入ってしまうかもしれません。

そこら辺は様子を見ながらお願いします。

ここではグレー系の色(#dde5e8)を追加しました。コードはこんな感じです。

CSS


.hatena-module {
background-color: #dde5e8; /*サイドバーモジュール背景色*/
box-shadow: 0 2px 4px rgba(0,0,0,0.3); /*影*/
}

あとbox-shadow: 0 2px 4px rgba(0,0,0,0.3);の部分は冒頭のコードに含まれていませんが影を付けるために追加してます。

背景色を設定したセレクタで同時に追加しておくと間違いのないと思うので参考までに~

カード型テーマだからと言って影を多用するとかえって逆効果になることもあると思いますので注意か必要ですね。(俺を見るんじゃない)

でこれ↓

f:id:oyomiyo:20180919154045p:plain

まだまだこれからです。

津木行成。

関連・最新・注目記事のリンクの背景色を設定する

「PLAIN」テーマ使用者しか需要無いかもしれないですねこれ。

他のテーマでこれやったらどんな感じになるのか気になります。恐らく正しく設定されるはずですが見た目がいいかどうかは分かんないです。すんません。

超超超薄いグレー(#f9f9f9)でいきまそ。

CSS


#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries {
background-color: #f9f9f9; /*最新記事、注目記事、関連記事リンク背景色*/
}

f:id:oyomiyo:20180919154113p:plain

変化を感じたら視力8.0。

都木行造。

アーカイブのカテゴリーリンクの文字色と背景色を変更する

記事書き始めて何回も思うけどタイトルどうしても長くなる。どうでもいいけど( ;∀;)

赤系の色(#ff9868)にしてみます。文字色は見えやすいように白のままでいきます。

CSS


.page-archive .categories a {
color: #fff; /*カテゴリー文字色*/
background: #ff9868; /*カテゴリー背景色*/
}

そろそろ飽きてきたよ!(ゆうなそういうことは)

f:id:oyomiyo:20180919154124p:plain

ドゥカティ?

NEXT!!!

アーカイブの背景色を変更する

文字が見やすいようにうすいグレー(#f6f6f6)でいきましょう。

CSS


.page-archive .archive-entries .archive-entry {
background-color: #f6f6f6; /*アーカイブ背景色*/
}

で、ドン!!

f:id:oyomiyo:20180919154133p:plain

あと少しで完成です。

ブログの背景色を設定する

サイトの印象を大きく左右しますから慎重に選びたいものです。

あ、ちなみにデフォルトの機能でも背景色を設定できるようになってるので一度見てみて下さい。

気に入るのがなかったら私の方法を参考にしてみて下さいね。

追加したのは以下。

CSS


#container-inner {
background: linear-gradient(40deg, #bcd0ac, #bcddff);
background: -webkit-linear-gradient(50deg, #bcd0ac, #bcddff);
background: -moz-linear-gradient(50deg, #bcd0ac, #bcddff);
}

、、、っっってええええええ!?

原型すらなくなってるやん(笑)

ゲンケー笑


#container-inner {
background-color: #none; /*ブログ背景色(デフォルト機能でも設置可)*/
}

はい。さっきのは「ぐらでーしょん」ってやつです。東京の女子共には通じるようですねこのコトバ。

明日は雨なので説明は延期します。(後で猛省しとく)

で、そのぐらでーしょんとやらの出来栄えはこんな感じ。

f:id:oyomiyo:20180919154144p:plain

カッコええやろ??? な???

パンくずリストの背景色を設定する

パンくずリストの背景色とは、

f:id:oyomiyo:20180921090913p:plain

赤枠の部分です。カテゴリーをクリックするとこのような表示になります。

設定してないとカッコ悪いですから忘れずにしておきましょう。

背景色と合わせておけば間違いはないと思いますが、私の場合は背景色にグラデーションを使ったので、別の色で設定してみます。

スライドメニューと同じグレー(#dde5e8)でやってみましょう。

CSS


.breadcrumb {
background-color: #dde5e8; /*パンくずリスト背景色*/
}

こんな感じになります。

f:id:oyomiyo:20180921091513p:plain

ええんちゃう?

最後に

あとは、ちょこちょこと調節すれば終わりです。

背景のせいで検索ボックスが迷子になってしまっていたので少しだけ色を変更しました。さっきのままだと検索ボックスを検索しないといかんですからねぇ~(うぜぇ~)

で完成。

f:id:oyomiyo:20180919154152p:plain

このサイトカラーは何風というのだろうか、、、分かる人いたら教えてください。

私の場合、出来上がったコードはこんな感じになりました。

これを冒頭で説明したタイトル下の部分に追加する形になります。

CSS

<style type="text/css">
#blog-title {
background-color: #ffea63; /*ブログタイトル背景色*/
}
#title a {
color: #000; /*ブログタイトル文字色*/
}
#blog-description {
color: #e32424; /*サブタイトル文字色*/
}
#slide-nav, #slide-nav .slide-nav-inner {
background-color: #dde5e8; /*スライドメニュー背景色*/
}
#slide-nav .menu a {
color: #000; /*スライドメニュー文字色*/
}
.hatena-module-title {
color: #000; /*サイドバータイトル文字色(二か所あり)*/
background-color: #ffea63; /*サイドバータイトル背景色*/
}
.hatena-module-title a {
color: #000; /*サイドバータイトル文字色(二か所あり)*/
}
.hatena-module {
background-color: #dde5e8; /*サイドバーモジュール背景色*/
box-shadow: 0 2px 4px rgba(0,0,0,0.3); /*影*/
}
#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries {
background-color: #f9f9f9; /*最新記事、注目記事、関連記事リンク背景色*/
}
.page-archive .categories a {
color: #fff; /*カテゴリー文字色*/
background: #ff9868; /*カテゴリー背景色*/
}
.page-archive .archive-entries .archive-entry {
background-color: #f6f6f6; /*アーカイブ背景色*/
}
#container-inner {
background: linear-gradient(40deg, #bcd0ac, #bcddff);
background: -webkit-linear-gradient(50deg, #bcd0ac, #bcddff);
background: -moz-linear-gradient(50deg, #bcd0ac, #bcddff);
}
.breadcrumb {
background-color: #dde5e8; /*パンくずリスト背景色*/
}
</style>

余計なもの満載だったかもしれませんが少しでも参考になればと思います。

はてなブログはWordPressなんかと比べてデザイン面で劣るといわれますが、やり方次第ではカッコよくもできると思います。

以前WordPressでサイト持ってた時期もありましたが、正直はてなブログの方がお手軽に始められますし、カスタマイズ自体もやりやすいです。

まあ雑記ブログ主体のサービスでここまでこだわる人がいるかというと良く分からんのですが、、、汗)

最近このブログも独自ドメインを取ったので、はてな色が一気になくなってしまったような感じがしますね。(自分でやったんだけれども( ;∀;))

 

まあそれはいいとして、、、

日々カスタマイズを重ねながら、ブログもワタクシもちょっとずつ成長していければと思ってます。

期待を込めても言う一度ドン!!!

PLAIN – テーマ ストア

ではまた。