別のCSSファイルをCSSに取り込む方法(@import url)

自分用のカスタムcssファイルをWordPressのサーバーに置いて、WordPressのカスタムCSSに@import urlで読み込むだけです。 その方法を以下に記載しました。
*『WordPressのカスタムCSSの場所はここを参照』

@importで別のcssファイルを読み込む

WordPressの/ichiri.biz/public_htmlフォルダにあるichiri.cssにclass=”number_circle_blue”を書いた番号リスト(<ol>タグ)表示を飾り付けるスタイル記述がされています。このichiri.cssファイルを@import urlで読み込みます。

注意! @import分はカスタムcssの一番上に書く事。 先頭に書かなければ読み込まれません。

WordPressの/ichiri.biz/public_htmlフォルダの下にichiri.cssファイルを置いて、/public_htmlを省いて@import url()内に書けば読み込めました。(私の場合だけかもしれませんが)

@import url("https://ichiri.biz/ichiri.css");

WordPressの番号リスト表示は下の様に味気ない。

  1. ああして
  2. こうして
  3. こうなった

@import urlでichiri.cssを読み込んでおけば、<ol>タグにclass=”number_circle_blue”を追加で記述すると、下の絵の様におしゃれになります。

<ol class="number_circle_blue"><li>ああして</li><li>こうして</li><li>こうなった</li></ol>
  1. ああして
  2. こうして
  3. こうなった

おまけ1 (エックスサーバーでのフォルダ場所)

私の場合、Notepad++でichiri.cssファイルを作って、エックスサーバーの『ファイル管理』でichiri.cssファイルを/ichiri.biz/public_htmlフォルダにアップロードしています。

😭 Notepad++はSSHやFTPが設定できるので、エックスサーバー内のファイルを直接編集もできたのですが、何故か今はエックスサーバーに接続できなくなってしまいました。 (なんでかな?)

おまけ2 CSSが消える以外に困ってた事

管理や編集がややこしい

WordPressのカスタムCSSにCSSを書いていけばバージョンアップ等で消えないのですが、いろんなスタイル記述をCSSに書いていくと、カスタムCSSは1つの場所である事とカスタムCSSの表示も幅が狭く、CSS記述の表示が縦長になり、どこに何を書いたか分からなくなり管理がしづらいのです。 なので、自分のファイルにcssを記述出来れば、Notepad++で幅広で大きく表示して見やすく、管理しやすいのでめちゃくちゃ便利です。(またNotepad++では項目ごとに折りたためるので、画面を有効に使えます。) 

htmlの<link>での取込みは面倒くさい

下記のコードをhtml内に記述すると、cssファイルを取り込めるのですが、2点問題があります。

  • 各ページに追記せねばならず面倒臭い。 ファイル数が増えたら、cssファイル取込みの記述の行も複数になり、後に新しいcssファイルを作ったら、過去のhtmlページにも全て追記しなくてはならない。
  • WordPressではどこに書いて良いか分からない。 しかもWordPressは色々phpで制御されているので、あるバージョンの時に消されたり、phpない記述はバージョンアップで消えるし、何処に書いて良いか分かったとしても、勝手に消されるリスクがあると思います。
<link href=""https://ichiri.biz/ichiri.css" rel="stylesheet">

おまけ3 複数ファイル取込み動作した

まだ2つだけですが、自分のcssファイルを2つ作り、@import urlを2つ並べて記述したら、両方のファイルの記述も反映されました。 複数ファイルで出来ると、機能ごとに分けて管理できるので更に便利になると思っています。

カスケードは動作しませんでした。(´;ω;`)

コメント

タイトルとURLをコピーしました