記事タイトルの先頭に画像を表示させたいです

擬似要素はcontent:””;が必要かと思います。また画像を背景で表示する以外はサイズも必要になるかと。

.article h1::before{
  content: "";
  background-image: url(PATH);
  width: 1rem;  //サイズは任意
  height: 1rem;
  display: block; //あるいはinline-block等、必要であれば
}

またどのように配置するかが問題ですが、positionでabsoluteを使う場合は、

.article h1 {
  position: rerlative;
}
.article h1::before{
  content: "";
  background-image: url(PATH);
  width: 1rem;  //サイズは任意
  height: 1rem;
  position: absolute;
  top: 0;
  left: -1rem; //位置は任意で
}

などでしょうか。上下センターにしたい時などにabsoluteを使ったりすることがあります。

例えば、
top: 50%;
transform: translateY(-50%);
など。要素の左上コーナーが親要素の真ん中にくるため、それだけでは中央によらない(要素の上辺が縦中央になる)のでtransformで自身の要素を-50%、つまり上に自身の高さの半分を上に上げるわけです。
※ ベンダープレフィックスはつけていませんのでtransformには-webkit-などが必要な場合があります。

先頭に画像ということなので、positionはまぁ別の話なので良いとして、擬似要素のサイズとその背景を指定するという感じになるかと思います。
またサイズを指定した時に、画像と要素のサイズと微妙に異なる場合があったりする事もあるかと思うので、

background-position: center center;
background-repeat: no-repeat;

等も必要かも知れません。ここらは入れる画像次第です。パターンなら小さなパターンをリピートさせたほうが軽くなりますし。

Hidekichi様
素早い回答ありがとうございます。

たくさんご指示いただいたのですが、恥ずかしながら半分も理解できておらず・・・

上の枠と下の枠のcssをそれぞれ親テーマと子テーマのスタイルシートに貼り付けてみましたが
何も変わりませんでした・・・

上の枠と下の枠のcssはどのように使い分けたらいいのでしょうか？
貼り付けたい画像はこんな感じの★マークです。

url(PATH)のところはPATHを画像URLの「(http://○○/wp-content/uploads/2015/10/○○.png)」に書き換えればよろしいでしょうか？

貼り付けたのは
————–
.article h1::before{
background-image: url(http://○○/wp-content/uploads/2015/10/○○.png);
width: 1rem; //サイズは任意
height: 1rem;
display: block; //あるいはinline-block等、必要であれば
}
————–
と
——————
.article h1 {
position: rerlative;
}
.article h1::before{
content: "";
background-image: url(http://○○/wp-content/uploads/2015/10/○○.png);
width: 1rem; //サイズは任意
height: 1rem;
position: absolute;
top: 0;
left: -1rem; //位置は任意で
}
——————
とそれぞれ試してみましたが、
何も変わらずでした・・・

どのようにしたらよいでしょうか？
申し訳ございませんがお手すきな時にお返事いただけますと幸いです。

あ、css内の//は普通のスクリプトのコメントでcssでは/**/という形式のコメントしか機能しないので、レス内では一応補足のために書いたのですが//から以降は削除して取り除いておいて下さい。

1remと言うのはpxと同じく単位でして、htmlに指定してある文字を基準にn倍する単位です。htmlにフォントサイズの指定がない場合はブラウザのデフォルトのフォントサイズ16pxが使われます。なので、

html {
  //フォントサイズ指定なし
}

h1 {
  width: 1rem;
}

このようなものがあった場合は、h1の横幅は16pxになるということです。
pxは絶対値、%やem、remは相対値でサイズを指定します。つまりのところ、htmlのフォントサイズが変わればemやremで指定してある部分というのは自動的にそのhtmlのフォントサイズで再計算されます。

emとremが異なる部分は、emはその要素の親のサイズに対する相対値で、remは全てのベースとなるhtmlに対する相対値という点です。

ここは別にremである必要はありません。挿入する画像のサイズを入れればよいのですが、実際にその画像が何pxであるかはわかりにくいですよね？

もちろんh2などに対して、フォントサイズを指定している場合はそれを絶対値でpxによって入れればよいわけですが、PC・スマホなどの端末によって画面サイズが変わったりした時に、その画面に合わせてフォントサイズを変更したいと考えた時、全ての要素にフォントサイズを指定するのは面倒です。

なので、何かしらを基準にしてその倍数で目的のサイズを書いておいたほうが、その基準のサイズを変えるだけで全体が変更されるので便利です。そういう時にremであったりemを使います。emの場合は、親の要素によってサイズが変わったりするので、24pxが欲しいと思った時に、正しい数値が求められない事があります。ulとかliなどの組み合わせなどで。

なのでremがとても便利なのですが、最近のブラウザは問題ないにしろ古いブラウザはrem自体が対応していないので、そういう時は、

h2 {
  font-size: 15px;
  font-size: 1rem;
}

などのように書きます。古いブラウザはremがわからないので無視します。なのでpxが有効になり、新しいブラウザはremがわかるので15pxを1remで上書きします。cssは後から読み込むものが優先されるので、このh2の例であれば1remの基準となるhtmlのフォントサイズが呼び出されるわけです。

と、余談が長くなりましたが、こんな感じでサイズを入れます。

次にhtmlのフォントサイズが16px、あるいは指定がない場合に(例として)24pxを求めるにはどうすればよいかですが、これは24pxを16pxで割ればよいだけです。なので実質24pxが欲しい場合は、1.5remと言う感じになるでしょうか。

background-imageは、何かしらの要素の背景なのでその要素に大きさがないとimgみたいに要素を押し広げてサイズを作ったりはしてくれません(たぶん)。サイズの調整はひとまず後回しにして、width,heightがそれぞれ1remあるいは1em(pxでも構いません)の時にその背景画像が表示されるかをひとまず確認して下さい。

何かしら表示されるようであれば、あとはその背景画像が正しく表示されるように、サイズを決めていけば良いかと思います。

で、ここらまでできて何かしら表示できるようになったら、サイトのアドレス等を教えてもらえると、きちんと表示させるために何が必要かをみることができます。
実際僕も何かで試してから書き込んでいるわけではなく、想像で書いてるのでそのままで正しく動作するかどうかはわかりません。

ただ画像が表示されるようになれば、ブラウザのweb開発機能を使って、どうすればよいかが外から見れますのでひとまずそこらまでしておいてもらえると助かります。

.article h1::before{
  content: "";
  background-image: url("http://○○/wp-content/uploads/2015/10/○○.png");
  width: 1rem;
  height: 1rem;
}

クォートが文字化けするかも知れませんが(多分イケると思うんですけれども)、これは管理人以外の人がコードを投稿するとそうなるようになってます。わいひらさんがちょっと体調がおもわしくないみたいなので、すぐに修正されないかも知れないんですけれども、ひとまず、〈〉と”等は文字化けのような感じになりますのでご了承下さい。

ひとまずこんな感じで試してみて下さい。

うほぅ、やはり文字化けました(笑)

ということで、サンプル作りました。
僕のイメージしていたのはこんな感じかと思うんですけれども・・・

サンプル: h1タイトルの前に画像を挿入する | jsFiddle

ただ、タイトルの長さによってh1の高さが変わりますよね？
その時にどう対応するかの仕様が必要になると思います。h1の高さに合わせて画像も大きくするか、それとも画像自体のサイズは同じにするか等です。

もしh1の高さに画像を合わせるのであればjQueryが必要になります。

画像自体のサイズは固定の場合であれば、設定する数値は1行の時のh1の高さぐらいかと思います。こういった細かな部分も色々と仕様が固まらないとどうするべきかがなかなか難しく、イレギュラーなことに対応できなくなるかも知れないので、結果的にどうなっていればよいかを考える必要があるでしょうか？

Hidekichiさん

またまた丁寧なお返事ありがとうございます！
そしてサンプルまで作っていただいて感激です。

ご指示の通り、今子テーマに
——————
.article h1 {
position: relative;
}
.article h1::before {
content: “”;
width: 2em;
height: 2em;
background-image: url(“http://○○/wp-content/uploads/2015/10/○○.png”);
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

.entry-title {
padding-left: 2.5em;
}
——————
と表示させたところ画像がかけてしまいましたが、ひとまず何かしら表示させることはできました。
でも全体を表示させるのに「em」の数字をいじっていますがどうにもうまくできません。

URLお伝えいたしますので、一度ご覧いただけますでしょうか？
http://yunikki.com/child-care/mamas-body/137.html
表示させたい画像はこれです
↓

＞＞h1の高さに画像を合わせる
ことは今のところしなくても大丈夫です。
（もし後日気になるようでしたらまたご質問させていただきますm(__)m）

あと、各記事ページのタイトルだけではなく、
トップページのタイトルの先頭にもスペースができてしまいます。
これをなくすことはできますか？

こんな感じに変なスペースが入ります・・・
↓

わいひらさんがご不在のところお手数をおかけいたしますが
お手すきの時で結構です。
何卒よろしくお願いいたします

ひとまず、

> ただ、タイトルの長さによってh1の高さが変わりますよね？
> その時にどう対応するかの仕様が必要になると思います。
> h1の高さに合わせて画像も大きくするか、
> それとも画像自体のサイズは同じにするか等です。

この部分はどうされますか？
これによって手法が異なります。

もし高さを考慮しない場合はこの画像のようになります。

これを解決するには、
・h1の高さに合わせて画像横幅を決定する
・h1の高さを常に固定にする
などが考えられますが、画像全体を表示したほうが良いですか？
それとも今回添付したように、一部(主に画像下側)が切れても良いですか？

画像全体を表示したい場合は、タイトルの長さが1行の時と仮に2行、3行以上に画像の大きさが変わります。

1行の時: 画像の元々のサイズが80*87なので、縦が横の1.0875倍にわけです。なのでh1の高さが仮に24pxだったとしたら横幅は22.068965517px
2行の時: h1のline-heightにもよりますが、フォントサイズ24px * 2 + line-height(117%)で、ザックリ52pxあたりの場合、画像の横幅は47.816091954pxあたりとなり、行数が増えれば画像は次第に大きくなったりします。

こういう場合、例えば画像の最大サイズは1行の時のものとしておけば、複数行になった時でも1行分の高さしかないわけですから、後は画像を左側スペースの上部か中央に表示すると言う感じになるかと思います。

ただ、1行の時が24pxとか30pxとかの高さしか無いと考えると、元の画像の半分強のサイズになるわけです。ここらをどうするかがとても考えさせられる部分です。

最終的に1行、あるいは複数行のタイトルのサイズの時、入れる画像はどうなっていれば正解かと言うのを決めておかないと美しく配置できないかと思います。

サンプル: どういう感じか視覚的にわかってもらうために | jsFiddle

表示する画像のサイズを固定する場合は、もう少し簡単にかけて、spanも使わなくてもイケるんじゃなかろうかと思います。つまり、表示すること自体はどうとでもできるわけですが、その表示の仕方、または1行の時、複数行の時それぞれにどのように表示したいかが問題点です。

普通にimgタグをjQueryで挿入するってのがとても簡単なんですけどね。
そしたら、height: 100%; width: autoで全体が勝手に表示されるんですけれども。

この場合も前のレスで画像をタイトルの左側のどの位置に表示するかが問題になります。
height:を固定したらそのサイズで表示されますから、1行の時のサイズを決めておけばどのタイトルでも同じように表示されるようになります。

Hidekichiさん

何度もすみません。

先日のレスで記載の通り、

＞＞h1の高さに画像を合わせる
ことは今のところしなくても大丈夫です。

画像は全体を表示させたいです。
よろしくお願いいたしますm(__)m

あ、あとすみません。
補足ですが、画像は１～３行に増えて大きくしなくてもよく、
こんな感じにタイトルのちょうど中央に表示されると嬉しいです。
↓

また、
2015年10月28日 – 9:15 AMの私の書き込みで、画像が手違いで消えてしまった部分があります。

トップページのタイトルの変なスペースとはこんな感じになってしまっているということです。
↓

この空欄の部分には画像は出なくて大丈夫です。
スペースさえ消えてくれればいいです。

私がやりたいことをされているサイトがありました。

テーマは違うものみたいですが、
もし参考になりましたら幸いです。
↓
このクマのイラストのようにしたいです。
http://310rich.net/310rich/sukikirai-rinyusyokuki/

表示の仕方・仕様がわかれば、この質問ぐらいの事なら、おちゃのこサイサイ(死語)です。

サンプル: タイトルの手前に画像を入れて真ん中に揃える | jsFiddle

何をしているかの原理を書くと、タイトルの中にjQueryでimgを挿入します。
元々のテキストをjQueryでspanで包みます。
※サンプルでは行数の違いによってどう見えるかを表示するため複数のarticleを利用しています。なのでそれに合わせてスクリプトを書いているのですが、通常利用の場合、articleは1つなので、それようにスクリプトを書いてもイケますし、このままでもイケると思います。
.article h1を別で使用している場合は、そこにも画像が挿入されるので、その際はまたレス下さい。

これらにより、h1の中には、imgとspanがあることになります。
これらを横並びにして、かつ縦センターで揃えるのに最適なのはflexです。

flexについては、ベンダープレフィックスが必要なので(必要になるブラウザがあるので)、codepenで新たに書きなおしました。
以下リンクのcss欄にある、view compiledボタンを押せばcssが取得できます。

サンプル: タイトルの手前に画像を入れて真ん中に揃える | codepen

状態がわかりやすいように、h1に対してborderを入れています。これは削除して下さい。
また::beforeを使わないので、以前に書かれていたbefore部分は必要無くなりました。
サンプルでは、.article h1::beforeがある時にそれをdisplay:noneで消しています。元々のbefore自体をコメントアウトなり削除なりされた場合は、

&::before {
  display: none;
}

ここを削除して、view compiledボタンを参照して下さい。またh1の中にあるpadding-left:0も不必要です。

親テーマのアップデート対策としてjQueryでh1の中身を加工しています。
jQueryを使いたくないと言う場合は、親テーマentry-body.php
<h1 class=”entry-title”>

<span>
<?php if ( !is_single() ) echo ‘‘; //投稿ページ以外ではタイトルにリンクを貼る?>
<?php the_title(); //投稿のタイトル?>
<?php if ( !is_single() ) echo ‘‘; //投稿ページ以外ではタイトルにリンクを貼る?>
</span>
</h1>

こんな感じにしておけばよいのではないでしょうか。
ただし、リスト表示を本文表示以外で利用して下さい。本文表示に対応するためにはリンクの部分を考慮するjQuery等が必要です。
また上記コードはコピペした際、”等が全角になっている可能性があります。正しく動作しない場合はカッコやクォート、アンドなどを半角にして正しく動作するようにして下さい。

■親テーマはアップデートの際に上書きされてカスタマイズした内容がなくなります。
子テーマにentry-body.phpをコピペして、それをカスタマイズすればイケるかと思うんですけれども、今後のSimplicityのアップデートで、entry-body.phpは大幅に変更される可能性が高いので、jQueryをオススメします。
jQueryでやっていることは、上記のphpで追記した部分をやってるだけです。

この表示で問題なければ、それようにサンプルを作り直しますので、レス下さい。

トップページのタイトル部分の余白は、

#list .entry-title {
    padding-left: 0;
}

これで消えるかと思います。

• この返信は10年、 6ヶ月前にわいひらが編集しました。

うぉぉ、やはりタグが消えたか(笑)

php部分はこんな感じです。
[h1 class=”entry-title”]
[img src=”画像へのパス” /]
[span]
[?php if ( !is_single() ) echo ‘[a href=”‘.get_permalink().'”]’; ?]
[?php the_title(); //投稿のタイトル ?]
[?php if ( !is_single() ) echo ‘[/a]’; //投稿ページ以外ではタイトルにリンクを貼る?]
[/span]
[/h1]

そいで、投稿ボタン押してしまうというね(汗)

〈〉で書くと実体化してしまうので、[]で書いてあります。
また”や’も全角になっているようなので注意して下さい。

追記が増えたので、追記ついでに総括を書いておきます。

cssで画像をいれるのは確かに::before等の擬似要素が必要です。しかしその際には画像は要素の背景として入れるしか現在の所では手段はありません。
これでも入れられなくはないのですが、問題点としては「画像とタイトルを縦センターで揃える」と言う点かと思います。

例えば画像とタイトルを縦センターで揃えなくても良いのであれば、擬似要素を入れてfloatするだけで画像は入ります。
センターに揃えるためにh1に対してposition:relativeを入れて、擬似要素にposition:absoluteを入れ、transformなどで縦センターに揃えると、画像はh1の高さを無視しますがセンターに揃えることは可能です。ただし、post-metaの部分等に画像が重なってしまうため、h1の高さ(あるいは画像の大きさについて)をどうするかを再三と聞いていたわけです。
position:absoluteの場合でも、h1の高さをmin-height: 87pxにすれば画像はh1内に収まるはずですが、様々な条件でやはり問題が浮上することがあるかもしれません。

確実に画像をh1に収めるためには、画像がh1を押し広げる必要があり、そのためにはjQueryで画像を挿入するか、phpを直接編集して画像タグを入れる必要があります。
こうすれば、画像の高さはimgタグによって押し広げられ、確実に画像の高さ分は確保できます。

しかし、タイトルと画像を並べるだけならこれでいけるわけですが、画像の位置をh1上部に表示するか中央に表示するかを聞いていたのは、タイトルが複数行になった時に、画像が上部にあるので良いかどうかを確認しており、今回のようにh1縦中央に画像とタイトルを並べるにはflex等の手法を用いる必要があるかと思ったからです。

前のレスにも書きましたが、表示自体は(大抵の事は)どうとでもできますが思われている最終形態をどういうふうに考えておられるかは僕らにはわかりません。

#33487で画像を貼って頂けたように、こうしたいという最終形態がわかるとそこに向かってアドバイスできますので、できるだけ具体的な目的はどういったものかを伝えて頂けると助かります。わからない内容についてはその都度尋ねますけれども、なかなか意味合いが伝わらないこともあったりしますので、難しいところなんですけどね。

別にきちんとした画像を作る必要はないんです。こういう時に、こうしたいと言う具体的な内容があればそれでよいのです。windowsならペイントでフリーハンドで書いても良いんです。
excelとかを使って、こんな感じでってのをスクリーンショットに撮ってもらっても良いです。

どうしたいか、どうなって欲しいかがとても重要です。今回はどうしたいか(あるいは何がしたいか)はわかりましたが、最終的にどうなって欲しいかが画像を見るまでに聞き出せませんでした。うまく最初のレスで聞き出せたらさっくりイケたんですけどね。
なかなか意図を聞き出すってのは難しいもんです。

ゆみさんだけでなく、このトピックを見られた全ての質問者にも向けて。

Hidekichiさん
本当にいつも丁寧にありがとうございます。とても心強いです。
もう少しでできそうな気がするのですが、なぜかまた何も表示されなくなってしまいました。

まさにhttp://jsfiddle.net/h6keh2e1/1/
のように画像を表示させたいです。

なので、
http://jsfiddle.net/h6keh2e1/1/
を見て、子テーマのスタイルcssに以下を
記述しました。
———

.article h1::before {
display: none;
}

.article h1 {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid #000;
padding-left: 0;
align-items: center;
}

.article h1 img {
display: block;
}

.article h1 span {
display: block;
margin-left: 4px;
flex: 1;
}
———

jQuery？？↓
———
(function($){
$(function(){
/*var h1_text = $(“.article h1”).text();
$(“.article h1”).html(“<span>”+h1_text+”</span>”);
$(“.article h1”).prepend(““);*/

$(“.article h1”).each(function(){
var h1_text = $(this).text();
$(this)
.html(“<span>”+h1_text+”</span>”)
.prepend(““);

});

});
})(jQuery);
———-

はどこに記述したらよいでしょうか？

実は私の理解が悪くHidekichiさんが書いてくださったことが半分も分からず・・・
大変お手数ですが、「どこにどれを書く」と記載していただけると
とてもとても助かります。

何度も本当に申し訳ございませんが、
よろしくお願いいたします

「どこにどれを書く」というのは
———-
スタイルcssにはコレ
entry-body.phpにはコレ
———-

という具合にご指示いただけるととても嬉しいです。

あと

トップページのタイトル部分の余白は、
———-
#list .entry-title {
padding-left: 0;
}

これで消えるかと思います。
———-
で消えました！ありがとうございます！！

サンプル: タイトルの手前に画像を入れて真ん中に揃えるpart2 | codepen

前回のものは複数の.article h1がある時の書き方だったので、ひとつだけ(いわゆる通常利用時用)としてスクリプトを書き直しました。動作内容は同じです。

codepenのhtmlの部分は何も手を入れることはありません。
cssは、リンク先のcss欄右側にあるview compiledボタンによってscssからcssに変換したものが表示されます。リンク先のcodepenのcss部はscssと言うもので書いてありますので、そのままでは正しく動作しません。
style.cssに書き写すのは、view compiledボタンを押すことによって表示されるcssです。
この際、必要なベンダープレフィックスが付与されて表示されるのでまるまるコピーでも良いかと思います。

これは子テーマstyle.cssの最後の方に書いとけば動作するんじゃなかろうかと思います。

次に、jQueryを使う場合は、子テーマjavascript.jsに(function($){〜})(jQuery);までをコピペします(つまり全部)。中に書いてあるコメント部は削除しても構いません。
これは、h1の中身にimgとタイトルをspanで囲むということをしています。これによってhtmlの構造に手を加えることができます。本来phpファイルを編集しなくてはならない所をjQueryでやってるわけです。

もちろんjQueryを使用せずphpを直接書き変えても構いません。その際はentry-body.phpを編集することになります。jQueryだけで問題ないかと思います。

以前のbeforeで追加したcssは全て必要ありません。
また、特に、.article h1のpadding-leftも必要ありません。

ひとまず、上記に則って実装してみて下さい。それでもし、おかしな部分があれば、それらは外部から見れるので何を直せばよいのか指示できるかと思います。

また、スマホの時もPC時と同じ動作をします。htmlの構造やcssは上記で実装できますので、スマホの時に画像をどうするかだけを追記すれば対応できますが、スマホの時は今回入れた画像はどのようにしますか？
サイズを変更するのであれば、

@media screen and(max-width: 440px){
  .article h1 img {
    width: xx;
    height: auto;
  }
}

みたいのを子テーマstyle.cssか、mobile.cssの最後に追記するだけです。どっちでも良いですが、更に細かな制御をする場合はstyle.cssに追記しておいて、モバイル時だけの別の処理はmobile.cssに分けると良いかも知れません。
個人的には1つにしておいた方が管理しやすくて良いので僕ならstyle.cssに書きますけれども。

Hidekichiさん
本当に何度も何度もすみませんでした。
無事に表示することができました！

スマホの画像もPCで見える通りで大丈夫です。
なので、子テーマスタイルcssとjavascript.jsだけいじりました。

今のところ不具合はありません。

こんなに詳しく親身になって対応していただいて
Simplicityを使っていてよかったです。

本当にありがとうございました！！！
解決です。

うまく行ってよかったです。

一応、他の方でスマホの時は画像を小さくしたいとか色々とあるかもしれませんので、

タイトルの手前に画像を入れて真ん中に揃えるpart2 | codepen

をアップデートしときました。
スマホのサイズの時、画像がwidth:60px、height:autoになるようにと、タイトルのフォントサイズを18pxとかにしました。
ザックリとしたメディアクエリなのでSimplicityとはちょっと違うブレイクポイントではあるのですが、スマホの横向き時にもある程度対応できるかと思います。
微妙なサイズがあるっぽいですけれども(笑)

まぁつまりは「その時にどうするかは、思い通りにできる(要微調整)」と言う感じです。
仮にタイトル横に入れる画像が16:9でアスペクト比をキープしたいという場合は、今回の方法とはまた別の手段が必要なので、そういった質問がある方は別でトピックを立てて下さい。