【wordpress】CSSが貼り付けできない＆一行になる・正しく表記・認識されない時の対処法！

面倒なCSS編集をしなくても、ボタン１つでＨＰを自在にカスタマイズできるwordpress最強のテーマ

【AFFINGER4】

CSS編集に費やす時間も格段に減り、かなりの時間節約になり、大変お世話になっているテーマなのですが、オリジナルのカスタマイズや細かい部分のカスタマイズにはどうしてもCSSを編集する必要があります。

ＨＰを１から自分で勉強しながら地道に作成してきた方は、嫌である程度の知識は身に付きますが、ボタン１つで自在にカスタマイズしてくれる便利なテーマを使っていると、全く成長しない＆トラブルに見舞われると対応できないという悲しい現実を思い知らされます。

最近私が直面したCSSに関する問題が２つあります。

①CSSの貼り付けができない。

１つ目は、AFFINGER4のテーマ編集画面にコピーしたCSSを貼り付けようとして右クリックをしても【貼り付け】がててこない問題。

この問題は、正直かなり簡単な理由で解決したのですが、かなりの時間悩みました。

右クリックする場所がシビアなだけ。

今思えば『それだけかよっ！』と笑える問題なのですが、CSSという強敵を前にすると、小さな問題であっても『凄い難しい問題かも…』と身構えてしまい、勝手に深く考え込んでしまうんですよね。

というか、wordpressは貼り付けるときに右クリックをする場所が結構シビアなんですよね。

無事に貼り付けできたCSSですが、改行されずに１行に表示され、エラーになる問題に直面しました。

普通はこうなります。

しかし、今回はこうなりました。

本来改行されるはずなのに、されずに１行に表示されてしまう。

これ、１日悩みました。

原因ですが、メモ帳で編集したCSSをコピーし、そのままCSS編集画面に貼り付けるのが原因だったようです。今まではこの方法で大丈夫だったのですが、2018年明けたくらいにダメになりました。私がテーマのAFFINGER4を更新してからだと思います。

早速ですが、解決法をお教えします！

プラグインの【Crayon Syntax Highligher】(以後Crayon)にCSSを貼り付け、それをコピーして編集画面に貼り付けるという方法です。

メモ帳で編集▷Crayonに貼り付け＆コピー▷編集画面に貼り付け、ならCSSは正しく機能してくれます。

Crayonの使い方はこちらの記事をお読みください。

: 【WordPress】記事本文にHTMLやCSSなどのソースコードをテキストエディタのように表示する方法。

WordPressをしようしている方で、分からないことがあればネットで検索して調べますよね。調べた先で必ずといっていいほど本文に表示されているコレ⇩ [crayon-5b2d2e6f5eddf720 ...

続きを見る

流れですが、

まず、記事作成画面を出します。新規記事作成画面ですね。

編集画面には【ビジュアル】と【テキスト】の２種類の画面がありますが、【テキスト】を選択するとエディターの項目にCrayonが表示されます。クリックして編集画面を出し、そこにCSSを貼り付けます。最後に編集画面上にある【Add(決定)】を押すと、CSSが記事中に表示されます。

これをコピーしてはだめです。

まだだめなんです！

急がないで笑。

編集画面はテキスト画面のままになっていると思いますが、これをビジュアル画面に変えます。

ビジュアル画面に表示されているCSSをコピーすればＯＫです。

あとはCSS編集画面に貼り付けるだけ！

…どうでした？

いけましたか？

無事改行されてエラーも出ないはずです。

というか、私はこの方法で解決したので、これで解決しない場合は他の人の記事を当たってみてください…。すいません。

この記事にたどり着いた皆さんが、無事問題を解決できたことを願っています。

【wordpress】CSSが貼り付けできない＆一行になる・正しく表記・認識されない時の対処法！でした。