スタイルシートをテンプレート化し、ページごとにデザインを変える

CSSファイルをクラウドに保存して共有、LINK で呼び出す

空に雲で描かれたハート・マーク

前回の記事で作成した、このページのスタイルはのコードで生成しています。

クリックでコードを開閉

.container {
  padding: 1%;
  width: 1080px;
  position: relative;
  left: -180px;
}
.content {
  background: #f2f1e8;
  display: flex;
  padding: 20px 40px 20px 40px;
}
.main {
  padding: 0;
  flex: 1 0 auto;
  display: block;
  height: ;
  margin-right: 0px;
  background: linear-gradient(to bottom, #ggg 0%, #ggg 100%);
  max-width: 720px;
  width: 70%px;
  margin-top: 0;
}
.side {
  display: table-header-group;
  align-items: center;
  justify-content: center;
  max-width: 360px;
  width: 30%;
  height: 360px;
  background: ;
  top: 0px;
}
.twe-fixed {
  display: table-header-group;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  max-width: 360px;
  width: 30%;
  height: 360px;
  color: #2e3034;
  background: ;
  margin-top: -0px;
  margin-bottom: 0px;
}

２カラムで書こう、と思ったとき、毎回このコードを書き込むのは手間ですし、「定型文貼り付け」という選択もありますが、そもそもコードが記事内にあると、文章を書くジャマになりますよね。。
それではてなの場合、「デザインCSS」にスタイルを書くのが基本ですが、すべてのページに反映させない、＆カスタマイズとかしててCSSコードがどんどん増えてくると、、デザインCSSも整理が着かなくなり、ゴミ屋敷状態になって来るのです笑

ですので、私はデザインシートを DropBox に上げて、共有化して LINK で呼び出す、というワザ？を使っています。一度やり方を覚えてしまえば、すごく便利な方法ですので、皆さんにもぜひおススメします。

注:このやり方は、<link>タグを利用します。ですが私の環境で試したところ、見たままモードだと、記事中に<link>タグを書いてもコードが残らず、消えてしまう現象がおきます…。
これははてなブログが特定の HTML 要素を制限している可能性がありますので、

「ダッシュボード詳細設定 <head>要素にメタデータを追加」

に共有化したスタイルシートを置く分には使えますが、記事ごとの出し分けに関しては Markdown、もしくははてな記法でないと、利用できないかもしれません。( ´•ᴗ•ก )💦

ただスタイルシートを外部共有化するだけでも、十分便利ですので、見たままモードを利用している方も、興味があればぜひ読んで実践してみて下さいね。

スタイルシートの出し分け方

① CSSコードをファイル化する。

メモ帳などを開いて、CSS のコードを書き込み、拡張子を「.css」に変えて保存するだけです。

② 作成したCSSファイルをDropBoxにアップロードする。

www.dropbox.com

DropBox は 2GB までなら無料で使えるクラウドサービスです。テキストファイルなので容量も小さいですし、ここで複数書類を管理できます。もしまだ登録されていない方は、この機会にぜひ。画像や動画の保管もできます。

③ DropBoxでファイルを共有化する。

こちらのやり方については、はるなぴログさんの記事を参考にしてください。私より 100 倍以上分かりやすく説明されているので…。行ってらっしゃい~ヾ(_´∀ ｀_)ﾉﾏﾀﾈ ♪ www.halu7.com

共有化の流れとしては、

1. CSS ファイルを作成
2. DropBox にアップロード
3. 共有リンクをコピー
4. コピーしたＵＲＬを修正
5. リンクタグで共有

という感じです。

④ リンクタグを整理する。

さきほどご紹介した CSS コードをリンク化したのがのコードです。

<link id="twe-columns" rel="stylesheet" href="https://dl.dropboxusercontent.com/scl/fi/w1f7iku29e6idgt4eorgp/twe-columns.css?rlkey=3y4l0sl8uypb4g3m39legelde">

記事ページ冒頭などに貼り付ければ、スタイルシートとして機能します。

ちなみに、私はメインの CSS も、この方法で管理しています。
メリットとしては、大きく分けて 2 つあると思っています。

ひとつは、一度記事を保存して、デザイン CSS にコードを書き、また記事に戻る…、といった手間が省けます。DropBox アプリをインストールして、PC のツールバーに常駐しておけばいつでもシートが呼び出せますし、そこでファイルをメモ帳などで書き換えて保存すれば、記事の作成中でもプレビューによって反映されたデザインがリアルタイムですぐ確認出来ます。

ふたつ目は、スタイルシートが整理しやすい、ということです。
さきほども触れましたが、いろいろと CSS コードを追加していくと、デザイン CSS の枠がいっぱいになって訳が分からなくなって来ます笑
そもそも、あそこでコードを直接書くのは、字も小さいしちょっとやりづらさを感じますし、あと怖いのは、うっかりバックアップを取らずにテーマを変更してしまうと、「デザイン CSS」の中身はすべて消えてなくなってしまいます(-\_-;)
個別にファイル化しておけば、そういった事故も防げますし、定期的なバックアップもテキストファイルをコピーするだけなので、かんたんです。