はてなブログデザインCSSをVS Codeで編集する - 昨日より1mm進化するための備忘録

今回は，VS Codeを使いつつ，デザインCSSを使いやすくしようと思います

当方は，エディタにVS Codeを使用していますが，メモ帳などでも構いません

実際はこういう感じになっています

ブログの見栄えを良くするうえで必須なデザインCSSですが，

文字が小さいうえに，コメントなどがわかりずらく，要素の色もありません

また，タブ移動すると，ウィンドウが閉じます（笑）

設定方法は，OneDriveを介すので意外と面倒でしたが．

一回設定すれば，大丈夫です

アップロードするファイル名は何でもいいですが，拡張子は.cssにしてください

（今回はデザインCSS.css）

右の三点リーダーから，"リンクをコピー"をクリックしてください

”既存のアクセス権を持つユーザーがリンクを使用できます”をクリックします

共有の設定から”すべてのユーザー”を選択して適用をクリックします

恐らくほかの項目だと動作しません

完了したら，一度ダブルクリックファイルを開いてください

そしたら上に三点リーダーがあるので，"埋め込み"をクリックしてください

すると右側に埋め込みのウィンドウが出てきます

その中のリンクの`embed`を"download"に変更してください

完了したらそのリンクを開いて，下のようにダウンロードが始まるか確認してください

始まらなければ，どこかうまく行えていない可能性があります

これでOneDriveのダイレクトダウンロードリンクの作成が完了しました

次にはてなブログのトップからデザイン，詳細設定，<head>要素に行ってください

<head>中を以下のように記述してください

<link type="text/css" rel="stylesheet" href="先ほど作成したリンク">

以上でOneDriveから直接編集できるようになりました，お疲れ様でした

私も何回かやってみましたが，動作しない場合があるようです（Google DriveはOK）

その場合，公開リンクを作成した末尾に，?download=1を追加して④と同じように，<head>要素に追加してください

これでも動作しないようであれば，Google Driveのほうがいいかもしれません

CSSを編集すると，秒で反映されるのでかなり使い勝手は良いです

また，当方はWindows for OneDriveを入れて，エクスプローラから編集するようにしています

レンタルサーバー【ヘテムル】なら、独自ドメイン、データベースが無制限。しかも、サーバー容量は余裕の 500ＧＢ〜！ 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。

昨日より1mm進化するための備忘録