CSS編集環境構築
CSSを自分で用意したいと思い、まず環境整備をしました。
クラウドサービスを利用して、楽に自作CSSを「はてなブログ」に反映させます。
紆余曲折あり、Google DriveとDropBoxの両方のやり方を把握することになったので、記録します。
タイトルがお堅いですが、URLを編集することが肝です。
紆余曲折の詳細
はてなブログでCSSを触ろうと思うと、「管理画面⇒デザイン⇒スパナのタブでデザインCSSにコードを書いていく」が標準作業です。
この標準作業を編集に使うと手間が多いので、以下を参考にDropBoxにCSSファイルを作り、ブログに反映させることにしました。
はてなブログのCSS編集が使いづらい人はDropboxを使いましょう - なか日記
DropBoxにファイルを置いた後、ブラウザ上DropBoxで「共有」状態にし、リンクURLを取得しました。そして、前記の参考先に従い、はてなブログへ設定しました。
しかし、反映されない ⇒ 調査開始！！
「2012 年 10 月 4 日以降に作成した Dropbox アカウントには、Publicフォルダが無い」という記述を見つける。
詳しくは↓
Public フォルダについて (Dropbox ヘルプセンター)
私のアカウントは、正に条件に合致しており、Publicフォルダはなく、はてなブログで使うための共有ができないと勘違いしました。
そして、GoogleDriveに方針変更・・・。
DropBox同様に共有リンクを「はてなブログ」に設定。⇒ 反映されない
Google Driveの共有リンクをブラウザURL欄に「貼り付け」、確認を繰り返しました。
そして、アクセス時にURLが切り替わる事を確認。
パターンは以下の三つです。
- https://drive.google.com/file/d/[ファイルID]/view
- https://drive.google.com/open?id=[ファイルID]
- https://docs.google.com/uc?authuser=0&id=[ファイルID]&export=download
そして、3.のURLを「はてなブログ」に使うことで、反映されることを確認。
これで、目的は達成されました。
ただ、個人的にはDropBoxを使いたい。(同期の安定性が理由です)
そして、「Google Drive同様、リンクURLを書き換えれば、DropBoxもできるかも！」と思いつく。再度調べると、以下の通り、既にいらっしゃいました。
Dropbox無料版では直リンクができなくなった→できました！(追記あり)｜アメブロを仕事に活用するためのアイデアノート
以上が、紆余曲折詳細です。無駄な手順を踏んでしまった・・・。
クラウドサービス利用時の注意
この方法は、CSSファイルの編集がブログに即時反映されるので、作業が効率的にできます。
しかし、即時反映は、ミスのある状態が反映されるリスクがあります。そのため、以下の方法で作業する必要があります。
- テストブログを用意して、そちらで作業
- 直接編集せず、バックアップを残して、別ファイルで作業
前者の方が手間が少ないとは思います。
テストブログを用意し、確認用に２,３記事を投稿するだけなので。
GoogleDrive＆DropBoxの共通作業
- CSSファイルをクラウドに入れる
- ファイルの共有リンクを取得する
- 利用クラウドに合わせた作業で、リンクURLを取得
- はてなブログ管理画面で [設定] ⇒ [詳細設定] ⇒ [検索エンジン最適化] ⇒ [headに要素を追加]の欄に以下を記述
<link rel="stylesheet" href="[3.で得たURL]">
DropBoxの場合
[共有で取得されるURL]
https://www.dropbox.com/s/[ファイルID]/[ファイル名]?dl=0
↓ 書き換え
[編集作業用のURL]
https://dl.dropboxusercontent.com/s/[ファイルID]/[ファイル名]
GoogleDriveの場合
[共有で取得されるURL]
https://drive.google.com/file/d/[ファイルID]/view
または、https://drive.google.com/open?id=[ファイルID]
↓ 書き換え
[編集作業用のURL]
https://docs.google.com/uc?authuser=0&id=[ファイルID]&export=download
まとめ
クラウド利用で、CSS編集作業がスムーズになりました。URLの書き換えというシンプルな手段に気づくのがもっと早ければ、編集ソフトも探す時間が取れたのですがね。
そして、編集モードを「見たまま」にしてしまったので、リンクのつもりが無い箇所まで青く表示されてしまうままです。直し方が分からない…。
Markdownに統一していきます。反省。
--------------------------------------------------------------------------------
追記: 2016/5/14
URLの自動リンクの対策を確認・反映しました。
