wordpressだと思ってるように作れない…
こうした悩みを解決します。
デザイン性に欠ける
WordPressは導入したテーマの上で動作するので、デザインはテーマによる制限がかかります。
WordPress自体は画像やショートコード、吹き出しなどブロック挿入でササっと作れて非常に便利！
ほとんど困らず、考えていることを実現できます。
全幅にしたい
テキストを装飾したい
アニメーションをつけたい
こうしたときに、導入したテーマに機能があればすぐ対応できますが、調べるのにも一苦労。
テーマ内に目的の機能があることが分かったとしても、そこに制限が合ったりする場合もあります。
結局自分で好きにできたほうが追加修正すぐできるのでは？
なんて思ってきます。
カスタムHTMLで自由自在
好きにデザインしたいなら、カスタムHTMLを使うとよいです。
もともとテーマによる制限を取り除きたいときには、カスタムHTMLで自作のクラスを付加して解決を試みます。
cssなら、styleで囲みます。
<style>
（この中に処理を書く）
</style>
このように囲んでやると良いです。
javascriptなら、
<script>
（この中に処理を書く）
</script>
のようにします。
そして、たまに起こるのが衝突です。
異なるクラスで、同じプロパティに別の値を入れていると衝突が起こり、プロパティは後から読み込まれた方の値に上書きされます。
自作のクラス作っても、これじゃダメか…
いえいえ、とんでもない。基本的にどのプログラミング言語も優先度の考え方があります。
優先度を覚えよう！
処理と表示の２種類の優先度があります
処理の優先度：!important
さきほど、異なるクラスで、同じプロパティに別の値を入れていると衝突が起こり、プロパティは後から読み込まれた方の値に上書きされると説明しました。
これを回避するのに用いるのが !important です。
たとえば、
<style>
.hoge{
color: red !important;
}
.fuga{
color: blue;
}
</style>
<span class=”hoge fuga”>テキスト</span>
のようにすると、テキストの色はhogeクラスのcolor: redが優先されて赤色となります。
表示の優先度：z-index
表示というかレイヤー（階層）と言った方がよいのかもしれません。
基本は後に表示されるものが上になるのですが、始めに書いたものを上に表示させたいときがあります。
たとえば、斜めの背景色がついたページをたまに見かけることはないでしょうか。
あのような要素同士が重なるものはレイヤーを気にしなければならず、各要素にz-indexを指定してやることで上下関係が明確になります。
z-index: 1;
z-index: -100;
のような書き方をして数字が大きいほど上位の階層となります。
まとめ
WordPressは導入したテーマの上で動作するので、デザインはテーマによる制限がかかります。
好きにデザインしたいなら、カスタムHTMLを使うとよいです。
処理と表示の２種類の優先度を使ってデザインしましょう。