@import が禁止コードとして扱われる
「@import」というのは、指定したURL先に置かれた外部のCSSコードを、ページのCSSに呼び込む時に使うコードです。 私は、アメブロのデフォルトで利用出来ないフォント「Font Awesome」を利用するために、この指定が必要です。
「Font Awesome」は沢山のデザイン文字を使用できて、その絵文字をブログの各所で使っていますが、実際にもっとも良く使うのは「 」「 」の文字です。 どんな絵文字が使えるか、興味のある方は以下のページを参照ください。
ところが先刻に、別件でCSSの更新して再保存をしようとすると、「CSSに禁止文字列@iが入力されています。」という警告が出て保存が出来なくなりました。
禁止文字列「@i」
「@i」が付くCSSコードは、「@規則」の「@import」以外にはありません。
@charset（スタイルシートで使う文字エンコーディングを定義）
✖ @import（外部スタイルシートのインポート）
@media（メディアタイプを指定してスタイルを適用）
いまさら「@import」コードを禁止した理由は不明です。 末端のユーザーページで、そのページの読込みが僅かに遅くなっても、アメブロ全体としては何の問題もないと思うのですが、セキュリティ上の問題になった事例でもあったのでしょうか？
ウェブフォント等を使用する場合の対策
「@import」指定の利用は、「フリースペース」「フリープラグイン」「記事HTMLにstyleタグ記入」の3通りの方法が現在でも可能です。
❶「フリースペース」
サイドメニューのフリースペースに「styleタグ」として「@import」指定を書き込む事が出来ます。 ページ表示とほぼ同時に指定が有効になり、最も扱い易い方法です。
❷「フリープラグイン」
フリープラグインは ❶と同様の方法で利用できますが、アメブロが非推奨として残している機能で、将来は使えなくなるかも知れません。 また、サイドメニーの下方にフリープラグインが配置されている場合は、その位置が画面に入るまでコードが実行されず、当該フォントだけ後から表示される難点があります。
❸「記事HTMLにstyleタグ記入」
ページ表示と同時に指定が有効になります。 記事ごとに「HTML記入」をする必要があり、一般的な方法ではありません。 ただし「Auto Style Attach ⭐ 」などのツールで自動記入させると、指定がスマホ画面でも有効になる利点があります。
当ブログの現状
このページの最初に書いた様に、今回のスキンCSSの更新で「CSS更新」をしたければ「@import指定」を削除する必要がありました。 やはり、今後も「CSS更新」は必要なので、スキンCSSでの指定は諦めるしかありませんでした。
ただし、現在は ❸の記入を全ページで実行しているので、もはや「スキンCSS」での記入は不要と言えます。
一般的な対処方法
過去の記事まで遡って「styleタグ」を記入するのは、メンテナンス上で一般的な方法とは言えないでしょう。 もし「Font Awesome」の様な特別なウェブフォントをブログ誌面で恒常的に利用したい場合は、やはり ❶の方法が妥当です。
❶の方法はスキンCSSとほぼ同要領で、「フリースペース」の内容を更新・廃止などをした時点で、それがブログ全記事に対して反映されます。 以下にこの方法について、簡単に説明します。
スキンCSSを使わずにページにCSSを適用する
この方法は、今回の「@import指定」に限らず、ページのCSSを触れない「公式スキン」で、任意のCSSを適用する手段として利用できます。 フォント指定等のデザインスパイスを投入するには、最適な手段です。
原理
サイドバーの「フリースペース」は、ページの「HTML」にユーザーが「styleタグ」を書き込める限られた場所です。 記入した「styleタグ」の指定は、サイドバー表示と同時にページのスタイルに適用されます。
➀ 「フリースペース」を有効にする
「配置設定 」 の画面を開きます。
● 左列の「使用しない機能」で「フリースペース」を探し、これを右列の「使用する機能」にドラッグ&ドロップで移動します。 メニュー配置の上下順は自由です。
●「フリースペース」を既に使用している場合は、そのままでOKです。
● 右列に配置したら「保存」を押します。
➁ フリースペース編集の画面で「styleタグ」を記入
「フリースペース編集画面 」の画面を開きます。
● 上図の「編集枠」に「styleタグ」を記入して「保存」すると、そのタグのCSS内容がブログページに適用されます。
〔記入コード例 1〕「Font Awesome」の表示を有効にする
この指定下で、絵文字の「HTMLタグ」を記事に記入して、絵文字を表示します。
（ 記入方法の詳細は「Font Awesome」をブログページ上で使う を参照 ）
〔記入コード例 2〕ブログページを「メイリオ」で表示する
● コードを途中で改行すると無効になるので、そのままコピー&ペーストします。
● 編集枠に記入したら「保存」を押します。 これでページにタグ内容が反映します。
〔諸注意〕
● 既に「フリースペース」を使用していて、編集枠に記入がある場合は、最後の行の後ろに追加記入します。「styleタグ」はページ上には表示されません。
●「フリースペース」に登録する「styleタグ」は、上記の例1に例2を追記する様にして、目的に応じてフリースペースの文字数制限まで追加して行くことが可能です。
● ブログスキンを他の公式スキンに変更しても、「フリースペース」に書き込んだ内容は変わらずに有効です。