WordPressの記事で独自スタイルを適用したい

エンジニアの徳光です。 画像を貼った時の回り込みなどで困ったついでに、うまくスタイル定義できないかなと試して見…

エンジニアの徳光です。

画像を貼った時の回り込みなどで困ったついでに、うまくスタイル定義できないかなと試して見ました。
CSSは共通のものを偉い人に追加してもらうしかできないのかな?
bodyの中しか編集できないので、タグごとにスタイル定義すればできなくはないけど。。。

まずは単独HTMLで定義する

<head>
<meta charset="utf-8">
<title>コラム枠の確認</title>
<style>
  div.waku1 {
    border: 2px solid #444;
    padding: 1em 0em 4px 4px;
    position: relative;
    margin: 1.4em 30% 1em 5%;
  }
  span.waku1 {
    position:absolute; top: -1.4em; left: 1em;
    color: #f00; background-color:#fff;
    font-weight:bold;
  }
  span.waku1:first-letter {
    font-size: 1.6em;
  }
</style>
</head>
<body>
それっぽいコラム枠の表示テストです。
<div class="waku1">
<span class="waku1">
これがタイトル!
</span>
あいうえお <br />
かきくけこ <br />
</div>
それっぽいコラム枠の表示テストです。
<div class="waku1">
<span class="waku1">
これがタイトル!
</span>
あいうえお <br />
かきくけこ <br />
</div>
<div class="waku1">
<span class="waku1">
これがタイトル!
</span>
あいうえお <br />
かきくけこ <br />
</div>
<body>

 

WordPressの編集ページに直接埋め込む

Bodyの内部のみが編集対象となっているようなので、タグに直接スタイルを定義するようにしてみた。

<div style = "margin-top: 1em; border: 2px solid #444; padding: 1em 0em 4px 4px; position: relative; ">
<span style = "position:absolute; top: -0.7em; left: 1em; color: #f00; background-color:#fff; font-weight:bold; ">
これがタイトル2!
</span>
あいうえお<br />
かきくけこ<br />
</div>

これをSafariで表示させてみた場合のキャプチャ画像はこれ。
ちょっと簡素化して、一文字目の装飾とかは省いています。


 

やってみた



これがタイトル2!

あいうえお
かきくけこ

ダメだ。。。
生成されたソースをみると。。。brタグが余分に埋め込まれたりしてるや。
お節介機能に邪魔されていたんすね。

編集ページへの記述を変えておく

<div style = "margin-top: 1em; border: 2px solid #444; padding: 1em 0em 4px 4px; position: relative; "><span style = "position:absolute; top: -0.7em; left: 1em; color: #f00; background-color:#fff; font-weight:bold; ">これがタイトル2!</span>あいうえお<br />かきくけこ<br /></div>

やってみた


これがタイトル2!あいうえお
かきくけこ

少しはマシになったけど。
なんかまだ、他のスタイルとかが邪魔している気がしますかね。

ダメな気がするけれども……

タグごとにスタイルを定義していくのって、雛形をコピペで用意しておけばできなくはないけど、記述がゴチャっていやだし、スタイル変えたい時に全置換とかバカなのでなんとかしたいよねと。
ダメ元でbodyの中にstyle記述をしてみましょうか。

<style>
  div.waku1 {
    border: 2px solid #444;
    padding: 1em 0em 4px 4px;
    position: relative;
    margin: 1.4em 30% 1em 5%;
  }
  span.waku1 {
    position:absolute; top: -1.2em; left: 1em;
    color: #f00; background-color:#fff;
    font-weight:bold;
  }
  span.waku1:first-letter {
    font-size: 1.6em;
  }
</style>

↓ここにかいてみた



↑ここにかいてみた

<div class="waku1"><span class="waku1">これがタイトル3!!!</span>さしすせそ<br />たちつてと<br /></div>
<div class="waku1"><span class="waku1">これがタイトル3-b!!!</span>なにぬねの<br />はひふへほ<br /></div>
<div class="waku1"><span class="waku1">これがタイトル3-c!!!</span>まみむめも<br /></div>

これがタイトル3!!!さしすせそ
たちつてと
これがタイトル3-b!!!なにぬねの
はひふへほ
これがタイトル3-c!!!まみむめも

なんか効いちゃってる?!(Mac版 Safari 10.1.2)
「編集」からの変換の罠はあるものの、少しはマシに書けそうです。
※めっちゃブラウザ依存なんじゃないのかなぁ。。。(?_?)