DropboxでデザインCSSをスッキリさせる方法【はてなブログ】
こんにちは！Beanです！
皆さんは「はてなブログ」のカスタマイズが増えるにつれ、こんなことを感じてはいないですか？
この記事ではこういった悩みを解決します。
記事の内容
作業の手順
Dropboxとは
Dropboxとはオンラインストレージサービス（クラウドストレージサービス）の１つで、インターネット上に作られたファイル保管スペースを提供しているサービスです。
ネットワーク上でファイルを共有したり、別端末で同じファイルを編集することができます。
手順 ①：Dropboxをインストールする
下記のリンクから「Dropbox」をインストールしましょう。
無料でダウンロードでき、無料版のストレージ容量は2GBです。
必要のないバックアップはしないようにしましょう。
インストールする際にバックアップの設定を行うと、パソコン上のデスクトップやドキュメントにあるファイルがDropboxに保存され、Dropboxのストレージが圧迫されます。
手順 ①'：VSCodeをインストールする
CSSファイルを作成する方法はいくつかありますが
僕のオススメはコーディング用エディタで作成する方法です。
「Visual Studio Code（以下 VSCode）」や「Atom」などのエディタを使えば、コードの色分けができるだけでなく入力補助などの様々な機能があるので、サイト編集を円滑に進めることができます。
下記のリンクから「VSCode」をインストールしましょう。
こちらも無料でダウンロードできます。
インストールができたら「VSCode」を使ってCSSファイルを作成します。
手順 ②：CSSファイルを作成する
VSCodeを立ち上げ、ワークスペースにDropboxのフォルダを開きます。
開始（Start）の「開く（Open）」 ＞ 「Dropbox」のフォルダを選択 ＞ 開く
ワークスペースの「ファイル＋」を選択 ＞ 「ファイル名.css」を入力
でCSSファイルが作成されます。
はてなブログのデザインCSSの中身をコピーし、このファイルに保存しましょう。
VSCodeで更新した内容を「はてなブログ」に反映させる時は、必ずアプリ版のDropboxを起動させましょう。
手順 ③：CSSファイルのURLを取得、書き換え
DropboxにあるCSSファイルのURLを取得し、はてなブログで読み込める形式に書き換えます。
ブラウザでDropboxを開きます。
「すべてのファイル」にあるCSSファイルの「リンクをコピー」を押します。
ここで取得したURLは直接「はてなブログ」では読み込めません。
DropboxからコピーしたURLを、はてなブログで読み込める形式に書き換えます。
Dropboxから取得したURLを、適当なテキストエディタに貼り付けます。
貼り付けたURLは下記のようになっていると思います。
これを赤い部分だけを残して次のように書き換えます。
手順 ④：はてなブログの<head>要素にコードを追加する
先ほど書き換えたURLを、下記のコードに書き加えましょう。
HTML
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/〇〇〇〇〇/〇〇〇.css">
URLを書き加えたコードを
「はてなブログの管理画面」 ＞ 「設定」 ＞ 「詳細設定」と開き
「<head>要素に追加」の欄に記述しましょう。（<head>要素にメタデータを追加）
これで全ての工程が終了しました。
Dropboxに保存したCSSファイルが、はてなブログに反映されているか確認してください。
すぐに反映されない場合は1~2分待ってから再度更新してみましょう。
jQuery / JavaScriptを読み込む場合
jQuery / JavaScriptを読み込む場合もCSSと同様に行うことができます。
Dropboxからリンクを取得しURLの書き換えをした後、下記のコードにURLを記述して<head>要素に追加してください。
HTML
<script src="https://dl.dropboxusercontent.com/s/〇〇〇〇〇/〇〇〇.js"></script>
デザインCSSにimportで記入する
<head>要素にコードを追加すれば基本的にCSSは動作します。
ただ、レスポンシブルデザインにしていると、うまく反映されない部分が出る場合があります。
その場合は、デザインCSSにimportで追加することで解決出来ます。
@import url("https://dl.dropboxusercontent.com/s/〇〇〇〇〇〇/〇〇〇.css");
(" ")の中は先ほど<head>要素に記述したURLと同じものです。
DropboxからリンクURLをコピーした場合は、URLの書き換えを忘れず行いましょう。
Dropboxの方法とimportの違い
CSSを「DropboxのURLリンクを使い読み込ませる方法」と「importによって読み込ませる方法」の違いは２つあります。
CSSの優先度が変わる
1つ目は、CSSには後の行に書いたコードが優先される仕様があります。
HTMLにリンクされたCSSも記述された順に優先度が決まっています。
書かれている順番は上の行から
上：デザインCSSの中（import）
下：<head>要素にメタデータを追加の中（Dropbox）
はてなブログの場合、「Dropboxから読み込んでいるCSSファイル」の方が優先度が高くなります。
CSSの内容を外部の人が、見れるか見れないか
２つ目は、CSSの内容を他の人に見られるか、見られないかの違いです。
Google Chromeでは「ページのソースを表示」から、WebページのHTMLとCSSが見れます。
ただ、Dropboxから読み込んでいるCSSファイルは、外部の人は閲覧することはできません。
これはファイルの保存先であるDropboxが許可をした人以外には閲覧できない為です。（勝手に他の人が自分のDropboxを開けたら大変ですよね）
逆に、importを使うと、はてなブログのデザインCSSの中に記述されるため、外部の人でもCSSの中身を簡単に見ることができます。
これを聞いて少し不安になった方もいるかもしれませんが、デザインCSSに記述したコードは元から見れる仕様なので、あまり気にする必要もないです。
どうしても見られたくない人は前述のDropboxを使った方法に切り替える事をオススメします。
まとめ
読みづらいコードを自動で整えるオススメ拡張機能【VSCode】
コードがグチャグチャで全然読めない...
ちまちま体裁を整えるのがめんどくさい...
この記事ではこういった問題を解決します。
記事の内容
VSCodeの「Prettier」を使い、コードを自動でフォーマットさせる
作業の手順
動作のイメージ
左のような改行されていないコードを、右のように一発でフォーマットします。
前提 0：VSCodeをインストール
「Visual Studio Code（VSCode）」とは、コーディング用のエディタです。
VSCodeはコードの色分けがされているだけでなく、拡張機能も豊富なので、ブログ編集を円滑に進めることができます。
下記のリンクから「Visual Studio Code（以下 VSCode）」をインストールしましょう。
無料でダウンロードできます。
手順 1：Prettierをインストール
「Prettier」とは、VSCodeの拡張機能にあるオートフォーマッターです。
VSCodeを開いたら、Prettierをインストールします。
- サイドバーの「拡張機能」を開く
- 「Prettier」を検索する
- 「Prettier」を選択する
- 「インストール」する
これで、Prettierを拡張機能としてインストールすることができました。
手順 2：文字の折返し位置を調整
Prettierのデフォルト設定では、文字の折返し位置が多少短いため調整をします。
「Print Width」の値を80 → 100
「Print Width」の値は、「文字の折返しまでの文字数」を設定しています。
１行の文字数が設定値より多くなると区切りの良い場所（,など）で改行します。
80では多少短いと思うので、お好みで調整してください。
手順 3：Prettierの使い方
体裁を整えたいコードを開きます。
今回は例として、はてなブログのデフォルトテーマ「Smooth」のCSSを使っています。
Prettierの実行は簡単です。
右クリック＞「ドキュメントのフォーマット」を選択
とするだけでコードが自動的にフォーマットされます。
下の画像がPrettier実行後です。
コードの行数を見ると、しっかり改行がされているのがわかりますね。
あっと言う間にコードのフォーマットが完了です！
保存時にフォーマットさせる
ファイルの保存と同時にフォーマットするようにします。
保存するときにフォーマットのし忘れを防ぐことができるので、オススメです。
左下の歯車から設定を開く
- 「save」と検索する
- 「Format On Save」にチェックを入れる
これで、保存時にコードがフォーマット化されるようになりました。
command⌘+S（Ctrl+S）でフォーマットできるので、めちゃくちゃ楽になりましたね。
まとめ
- PrettierをVSCodeにをインストールする
- 文字の折返し位置を調整するとキレイになる
- 「ドキュメントのフォーマット」をするだけで自動整形
読みづらいコードを整形するときに、かなり時短できること間違いないです！
【参考記事】
デザインテーマの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を開いて、書き換えたい箇所を調べてみると解決策がわかるかもしれませんね。
プロフィール
はじめまして！
ブログ管理人のBean（ビーン）と申します。
私の経歴
鬱病になってから身体は思うように動かず、精神状態も不安定なことが多いけど
それでも少しだけ前を向いて生きています。
座右の名
完璧であることより終わらせることが重要だ / Done is better than perfect.
マーク・ザッカーバーグ（Mark Zuckerberg）
生真面目、完璧主義、100点病だった自分への戒めの言葉。
内容が完璧でなくても、まず一度書き切る。30%のエネルギー、30%の完成度。
運営したサイト
一番よかった時（2020/08/15-09/14）
直近の様子（2021/09/21現在）
月間平均は約10万PVでした。
2枚目の方はサイトの更新をやめた後の情報ですが、ゲームの方で大きな流入があったのでPVだけ爆上がりしてます。
今後はゲーム攻略で培った経験も活かしながら、ブログとプログラミングに挑戦していきます。
プライバシーポリシー
【Bean's blog】（以下「当ブログ」）のプライバシーポリシー・免責事項を次の通り記載します。
- 個人情報の利用目的について
- 個人情報の第三者開示について
- Cookieの使用について
- 広告配信サービスについて
- アクセス解析ツールについて
- コメントについて
- 著作権
- 免責事項
- プライバシーポリシーの変更
- お問い合せ
個人情報の利用目的について
当ブログでは、お問い合わせやコメント投稿の際に氏名・メールアドレス等の個人情報を入力いただく場合があります。
取得した個人情報は、必要な連絡のみに利用させていただくもので、これらの目的以外では利用いたしません。
個人情報の第三者開示について
取得した個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。
- 本人の同意が得られた場合
- 法令により開示が求められた場合
Cookieの使用について
当ブログでは、広告配信やアクセス解析のためにCookieを使用しています。
Cookieによりブラウザを識別していますが、特定の個人の識別はできない状態で匿名性が保たれています。
Cookieの使用を望まない場合、ブラウザからCookieを無効に設定できます。
広告配信サービスについて
当ブログでは、第三者配信の広告サービス（A8.net）を利用して広告を掲載しています。
第三者配信事業者は、ユーザーの興味に応じたパーソナライズ広告を表示するためにCookieを使用しています。
パーソナライズ広告は、広告設定で無効にできます。また、www.aboutads.infoで第三者配信事業者のCookieを無効にすることができます。その他、Cookieを無効にする方法やGoogleアドセンスに関する詳細は「広告 – ポリシーと規約 – Google」をご確認ください。
アクセス解析ツールについて
当ブログでは、Googleアナリティクスによりアクセス情報を解析しています。
アクセス情報の解析にはCookieを使用しています。また、アクセス情報の収集はCookieを無効にすることで拒否できます。
Google社のデータ収集・処理の仕組みについては、こちらをご覧ください。
コメントについて
当ブログでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。
また、メールアドレスとURLの入力に関しては、任意となっております。
全てのコメントは管理人が事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。
加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。
- 特定の自然人または法人を誹謗し、中傷するもの。
- 極度にわいせつな内容を含むもの。
- 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
- その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。
著作権
当ブログに掲載されている文章・画像の著作権は、運営者に帰属しています。
法的に認められている引用の範囲を超えて、無断で転載することを禁止します。
免責事項
当ブログは、掲載内容によって生じた損害に対する一切の責任を負いません。
各コンテンツでは、できる限り正確な情報提供を心がけておりますが、正確性や安全性を保証するものではありません。
また、リンク先の他サイトで提供される情報・サービスについても、責任を負いかねますのでご了承ください。
プライバシーポリシーの変更
当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本プライバシーポリシーの内容を適宜見直して改善に努めます。
修正された最新のプライバシーポリシーは常に本ページにて開示されます。
制定日:2021年10月03日
改定日:2021年10月26日
お問い合せ
当ブログに対するお問い合せは下記までご連絡ください。
【ブログ名】Bean's blog
【ハンドルネーム】Bean
以上
