IT未経験の転職ガイド

IT未経験
転職ガイド

TechAcademy受講ガイド

プログラミング
スキル習得

マイプロテインってどんなブランド?【おすすめな理由を徹底解説】

マイプロテイン
完全利用ガイド

GronG(グロング)のプロテインは評判が良い?【この記事を読めば購入に失敗しません】

グロング
完全利用ガイド

Pick up!

働き方

 
社会人の「つまらない」を抜け出す方法を解説【行動の意味を考える】

社会人の「つまらない」を抜け出す方法を解説【行動の意味を考える】

2022/02/18
 
【徹底解剖】テックアカデミーのフロントエンドコースの情報まとめ

【徹底解剖】テックアカデミーのフロントエンドコースの情報まとめ

2022/10/19
 
【初心者必見】VBAで業務効率化を実現するまでのロードマップ【6つの手順で実現】

VBAで業務効率化を実現するまでのロードマップ【6つの手順で実現】

2021/04/13

筋トレ・サプリ

 
マイプロテインってどんなブランド?【おすすめな理由を徹底解説】

マイプロテインってどんなブランド?【おすすめな理由を徹底解説】

2021/04/16
 
【GronG/グロング】スタンダードとベーシックの違いは?【おすすめが決定】

【GronG/グロング】スタンダードとベーシックの違いは?【おすすめが決定】

2022/06/15
 
【1番おすすめのホエイプロテインが決定】勝手に点数評価して比較しました

【1番おすすめのホエイプロテインが決定】勝手に点数評価して比較しました

2021/05/15

エンタメ

 
【徹底解剖】アローバースを理解するための完全ガイド【見どころをまとめました】

アローバースを理解するための完全ガイド【見どころをまとめました】

2021/04/26
 
【トム・ハーディ】おすすめ映画5作品

【トム・ハーディ】おすすめ映画5作品

2019/03/09
 
【どんな役でもこなす俳優マーク・ウォールバーグ】おすすめ映画17選

【どんな役でもこなす俳優マーク・ウォールバーグ】おすすめ映画17選

2020/03/22

コラム

 
【入院前に必ず読んでください】病室での生活を快適にする便利グッズを紹介【体験談あり】

病室での生活を快適にする便利グッズを紹介【体験談あり】

2021/05/24
 
入院時におすすめのWi-Fiレンタルサービスを紹介

入院時におすすめのWi-Fiレンタルサービスを紹介

2021/07/20
 
【健康に良いおすすめの入浴剤は?】入浴剤を悩みに沿ったおすすめ10選

【健康に良いおすすめの入浴剤は?】入浴剤を悩みに沿ったおすすめ10選

2020/03/16

新着&プロフィール

【はてなブログ】カテゴリによって背景の色やレイアウトを変更する方法

f:id:tainers:20200323231937p:plain

『カテゴリごとに背景の色を変えたい』

『カテゴリによってレイアウトを変更したい』

 

ブログのデザインを整えるうえで上記のように考えている人のために、カテゴリーによって背景を変える方法をご紹介します。

 

ではまず、例から見ていきましょう。

この記事のレイアウトを見ると、ヘッダー部分やサイドバーの色は緑です。

 

では、以下より一度このブログのトップページを一度見てください。

緑のところが黒色になっていますね。

 

このブログでは、カテゴリによって色を変更するようにしています。この記事はStudy Workerというカテゴリなので、緑。

 

他にも、映画について書いている記事は、Movie Calendarというカテゴリで青色、音楽について書いている記事は、Rock Calendarというカテゴリで赤色を指定しています。

 

では、実際にどうやっているのかですが、手順は下記の通りです。

手順

はてなブログのダッシュボード→デザイン→カスタマイズ→ヘッダ→タイトル下に下記のコードをコピペ。

<!--jQueryを既に読み込んでる場合は不要-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script>
$(function(){
 
   if($("a").hasClass("entry-category-link category-任意のカテゴリー名")){
    $("セレクト").css("プロパティ", "値");
  }

});
</script>

任意のカテゴリー名のところは色を変えたいカテゴリー名に変更してください。

※半角スペースは、「-」に変更。

 

例として、以下をコピペしていただくと、背景の色が青色に変わると思います。

<!--jQueryを既に読み込んでる場合は不要-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script>
$(function(){
 
   if($("a").hasClass("entry-category-link category-任意のカテゴリー名")){
    $("body").css("background-color", "#4169e1");
  }

});
</script>

このように、カテゴリーによってページの背景等のレイアウトをセレクタやプロパティ、値をいじることで、変更することができます。

 

しかし、トップページの記事を一覧表示にしていないと、トップページの背景色も変わってしまうので、注意してください。