デザインテーマのCSSを確認する方法【はてなブログ】
この記事ではこういった疑問を解決します。
記事の内容
作業の手順
手順 ①:デザインテーマを選ぶ
はてなブログで、デザイン > テーマストアでテーマを探す から好きなテーマを選んでください。
今回は例として「ユーザーが作成したテーマ」から
ろくぜうどんさんのUnderShirtを選びます。
プレビューしてインストール > 適用するブログを選択 > このテーマをインストール
でブログにデザインテーマをインストールします。
選んだテーマの種類が、「ユーザーが作成したテーマ」か「公式テーマ」で次の手順が異なります。
自分の選んだテーマのところをみてください。
手順 ②:ユーザーが作成したテーマの場合
デザインCSSの@import url("〜");で囲まれたURLを開きます。
デザイン>デザインCSS を開くと下記のようなコードがあると思います。
これがブログにインストールしたデザインテーマです。
URLの部分だけをコピーして、ブラウザで開きましょう。
すると下の画像のようなコードが書かれたページが開きます。
これがデザインテーマのCSSになります。
今回はUnderShirtを選んだので、Theme Name:UnderShirt と書かれています。
手順 ②’:公式テーマの場合
公式テーマを選んだ場合、@import "~"の中がURLで表示されていないので、URLに書き換える必要があります。
デザイン>デザインCSS を開くと、@import "~"の中が次のようになっていると思います。(公式テーマは、Smoothを例とします。)
デザインCSSから、上記の箇所をコピーして下記の赤い部分に貼り付け、URLを書き換えましょう。
書き換えが終わったら、URLをブラウザで開きましょう。
すると下の画像のようなページが開かれます。
これがデザインテーマのCSSになります。
Smoothを選んだので、Theme:Smooth と書かれていますね。
・
・
・
ただ公式テーマの場合、コードの改行がされていないのでこのままでは読みづらいです。
なのでテキストエディタなどにCSSを全文コピーして、適当な場所で改行させ読みやすくしましょう。
- 「 } 」を「 } + 改行↵ 」に置換
- 「 { 」を「 { + 改行↵ 」に置換
- 「 ; 」を「 ; + 改行↵ 」に置換
とするだけでもだいぶコードが見やすくなると思います。
もっとオススメなのは「VSCode(Visual Studio Code)」で「ドキュメントのフォーマット」をする方法です。
「VSCodeのインストール」と「拡張機能の追加」が必要ですが、一発で改行作業が終わります。長くなるので詳細は、下記のリンクを参考にしてみてください。
いつでも見れる状態にしておく
デザインテーマのCSSは、自分でCSSを書き加える時によく見比べるので、いつでも確認できるようにしておきましょう。
CSSファイルを作成し全文コピーして保存しておくのがオススメです。
簡単に済ませたい人は、URLをわかりやすい場所にメモしておくか、ページをブックマークしておくのでも良いでしょう。
ページ内検索で問題の箇所を探す
自分の追加したCSSがブログに反映されないときは、テキストエディタやWebページでデザインテーマのCSSを開き、「ページ内検索」で原因を探しましょう。(Win:control + F、Mac:command⌘ + F)
追加したCSSと同じ#id、.classなどのセレクタ名で検索すると見つけやすいです。
はてなブログの#id、.classの構造はkyabanaさんの記事を参考にするとイメージがつきやすくなると思います。
まとめ
- ユーザーが作成したテーマ:@import url("〜");で囲われたURLを開く
- 公式テーマ:URLを変更してから開く
- コピーしてCSSファイルで保存しておく
以上で、デザインテーマのCSSを確認する方法は終わりです。
「CSSをコピペしたけど上手く反映されない!」という人は 、選んだデザインテーマのCSSを開いて、書き換えたい箇所を調べてみると解決策がわかるかもしれませんね。