Wordpressの見出しデザインの構想についての相談

Question

今以下の画像のような見出しデザインをしようと考えています。

一番左の「en」と書かれた四角形が傾いているようなデザインを目指しています。

このデザインを達成するためには、以下のどれの構想が良いのでしょうか？また他の構想があれば教えていただけると幸いです。

①「en」と書かれ、傾いた四角形をイラレ等で作成し、画像に。画像を挿入。
②四角形をcssで生成し、傾けさせる。その上に文字を入れる

②の方向で以下のように進めていたのですが、文字入力が実現できず、構想自体が間違っているのかと思い質問させていただきました。

	background: #e60012;
	content: "" !important;
	height: 30px;
	width: 30px;
  left: 0 ;
	position: absolute;
	top: 3px ;
	margin-left: 17px !important;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
コード

聡明な方いらっしゃいましたら、何卒ご回答のほどよろしくお願いいたします。

Comments

[yoshinavi]

①が簡単かと思いますが、②の場合、CSSだけでは推測しか出来ませんので、HTMLも提示されると良いかと思います。

Answer 1

content: "" !important;

を

content: "en";

とかにして、paddingとかtext-alignとかで
文字が真ん中に来るように調整

なおかつclassを付け替えることで
中身の文字を入れ替えたり四角の色を
変えられたりするようにするのがいいかな

--
一応理由

WordPressの新エディタは、HTMLの構文をどうこうするのは面倒だけど
クラスをつけるのはとっても簡単にできるので
クラスによってデザインを簡単に変えられるようにしておくと
投稿の編集作業が捗りますん

Comments

[white1114]

content:"en"で目的を達成することができました！ありがとうございます！