Bean's blog

知り得たコトを 自分のコトバで

デザインテーマのCSSを確認する方法【はてなブログ】

f:id:soybeans6:20210915215147p:plain

 

 

f:id:soybeans6:20210914204911p:plain

はてなブログにコピペしたCSSがうまく反映されない....

 

そもそも選んだデザインテーマのCSSが分からない....

 

この記事ではこういった疑問を解決します。

 

記事の内容

はてなブログで選んだデザインテーマのCSS確認する

 

作業の手順

 

手順 ①:デザインテーマを選ぶ

 

はてなブログで、デザイン > テーマストアでテーマを探す から好きなテーマを選んでください。

 

f:id:soybeans6:20210918155552j:plain

 

今回は例として「ユーザーが作成したテーマ」から

ろくぜうどんさんのUnderShirtを選びます。

 

プレビューしてインストール > 適用するブログを選択 > このテーマをインストール

でブログにデザインテーマをインストールします。

f:id:soybeans6:20210918162519j:plain

 

選んだテーマの種類が、「ユーザーが作成したテーマ」か「公式テーマ」で次の手順が異なります。

自分の選んだテーマのところをみてください。

 

 

手順 ②:ユーザーが作成したテーマの場合

 

デザインCSS@import url("〜");で囲まれたURLを開きます。

 

デザイン>デザインCSS を開くと下記のようなコードがあると思います。

これがブログにインストールしたデザインテーマです。

 

f:id:soybeans6:20210918155710j:plain

 

URLの部分だけをコピーして、ブラウザで開きましょう。

すると下の画像のようなコードが書かれたページが開きます。

 

f:id:soybeans6:20210919001328j:plain

 

これがデザインテーマのCSSになります。

今回はUnderShirtを選んだので、Theme Name:UnderShirt と書かれています。

 

手順 ②’:公式テーマの場合

 

公式テーマを選んだ場合、@import "~"の中がURLで表示されていないので、URLに書き換える必要があります。

 

デザイン>デザインCSS を開くと、@import "~"の中が次のようになっていると思います。(公式テーマは、Smoothを例とします。)

 

f:id:soybeans6:20210918155733j:plain

 

デザインCSSから、上記の箇所をコピーして下記の赤い部分に貼り付け、URLを書き換えましょう。

 

書き換えが終わったら、URLをブラウザで開きましょう。

すると下の画像のようなページが開かれます。

 

f:id:soybeans6:20210919004304j:plain

 

これがデザインテーマのCSSになります。

Smoothを選んだので、Theme:Smooth と書かれていますね。

ただ公式テーマの場合、コードの改行がされていないのでこのままでは読みづらいです。

 

なのでテキストエディタなどにCSSを全文コピーして、適当な場所で改行させ読みやすくしましょう。

  • 「 } 」を「 } + 改行↵ 」に置換
  • 「 { 」を「 { + 改行↵ 」に置換
  • 「 ; 」を「 ; + 改行↵ 」に置換

とするだけでもだいぶコードが見やすくなると思います。

 

もっとオススメなのは「VSCodeVisual Studio Code)」で「ドキュメントのフォーマット」をする方法です。

 

VSCodeのインストール」と「拡張機能の追加」が必要ですが、一発で改行作業が終わります。長くなるので詳細は、下記のリンクを参考にしてみてください。

 

beanblog.hatenablog.com

 

いつでも見れる状態にしておく

 

デザインテーマのCSSは、自分でCSSを書き加える時によく見比べるので、いつでも確認できるようにしておきましょう。

 

CSSファイルを作成し全文コピーして保存しておくのがオススメです。

 

簡単に済ませたい人は、URLをわかりやすい場所にメモしておくか、ページをブックマークしておくのでも良いでしょう。

 

ページ内検索で問題の箇所を探す

 

自分の追加したCSSがブログに反映されないときは、テキストエディタやWebページでデザインテーマのCSSを開き、「ページ内検索」で原因を探しましょう。(Win:control + F、Mac:command⌘ + F)

 

追加したCSSと同じ#id、.classなどのセレクタ名で検索すると見つけやすいです。

 

はてなブログの#id、.classの構造はkyabanaさんの記事を参考にするとイメージがつきやすくなると思います。

kyabana.hatenablog.jp

 

まとめ

 

以上で、デザインテーマのCSSを確認する方法は終わりです。

 

CSSをコピペしたけど上手く反映されない!」という人は 、選んだデザインテーマのCSSを開いて、書き換えたい箇所を調べてみると解決策がわかるかもしれませんね。