会話形式の実装について

サンプル: line風会話、デフォルト修正、新規flex版 | codepen

Simplicityデフォルトでもline会話形式での書き方もできますが、それを少し修正したものと新たに書き足したもののサンプルです。

html欄273行目辺りからどのように書いているかがわかります。

結局右、左と分けてるだけですから他にも色々書き方はできそうです。

修正の内容としては、会話行のセレクタをleft_balloonなどししないといけない所を、親要素にballoonを入れることでその子要素はleftとrightだけで良いようにしたという感じです。

Hidekichiさん
回答ありがとうございます。
せっかく回答頂いたのですが、やっぱり自分には難解です＞＜

そもそも、質問の趣旨としては、これまで自分が使ってきた資産を転用したいという趣旨でしたので…
例の、紹介されていたプラグインだと瀕雑さをはんじますが、大人しく使うことにしようか残念ですが検討しようと思います。

なにか難しかったですかね？

<div class="line_back">
  <p class="left_balloon">左の人の会話</p>
  <p class="right_balloon">右の人の会話</p>
</div>

とやれば何もプラグインを入れなくてもline風の会話形式になると言うだけのことです。これはSimplicityのデフォルトの機能です。

ビジュアルエディターではなく、テキストエディターでhtmlを書けばよいだけです。

でこれらデフォルトの機能を修正したものと、他の例として前レスのサンプルがあり、その書き方は「html欄273行目辺りからどのように書いているか」を参考にしてくださいと言うだけです。

htmlを書く際に、right_balloonは書くのが面倒なので、サンプルのcssのように修正すると、

<div class="line_back balloon">
  <p class="left">左の人の会話</p>
  <p class="right">右の人の会話</p>
</div>

こう書けますよというだけの話です。xxx_balloonと書かなくても良いだけのことですね。

まずは真似てみるのは重要です。そこからこうやったらどうなる？という創意工夫ができるようになるわけです。まぁpタグを行ごとコピペすればclassを書く必要もないですけどね。

マークダウンで書くならいざ知らず、ビジュアルエディターは甘えです(笑)
htmlをせっせと打ち込むMの血が技術の向上に繋がるんですよ(笑)

Hidekichiさん
う～ん、上手く意図が伝わらなかったようですね。
口下手でごめんなさいm(_ _)m

では、逆にズバリ聞きます。
教えて頂いたHTMLの記述方法は理解しました。
サンプルのページのCSSに画像指定する箇所があるのも確認しました。

では、具体的に画像の指定を行うのはどのCSSファイルなのでしょう？
その手順も併せて教えてください。
一応、子テーマはインストール済みです。
登場キャラを左2人、右1人とする際に考慮すべき点など有ったら併せてご教授下さると助かります。

よろしくお願いします。

わいひらさん

ご助言ありがとうございます。
サンプルCSSをBracketsにコピペして画像部分を入れ替え、この後試してみます。
もし、うまくいかない場合はうまくいっていないページのURLを掲載しますね。

わいひらさん
サンプルのCSSのアイコン画像部分のみ変更して、子テーマstyle.cssに記述して試してみましたが…

http://allaa.review/%E6%9C%AA%E5%88%86%E9%A1%9E/post-682

結果はご覧のとおりです。
ちなみに、HTMLは上記のHidekichiさんの説明にも有った…

<div class="line_back balloon">
  <p class="left">左の人の会話</p>
  <p class="right">右の人の会話</p>
</div>

でテストしました。
よろしくお願いします。

キャラクタの設定は、基本左、右の一人ずつですが、画像は別途画像ファイルだけを指定するクラスをつければ何人でも登場させられます。

基本的なものは、前サンプルのcss欄を見てもらえればまんまコメントで「画像設定」というのが書いてあります。更に「ここで画像を設定する」とも書いてあるのでどの部分が何をしているのかは理解してもらえるとは思いましたが、cssに変換すると、scssの場合「//」から始まるコメントは無くなるので(無くすために//で入れてあるんですが)、確かにどこで？となるかも知れません。

考え方としては、右側、左側に分けるとしてそれぞれに画像を入れる必要があるわけですが、前のhtmlを見てわかるように画像を指定してませんよね？つまり、前レスのhtmlで言う所のpタグは吹き出し部分であって画像ではないことは理解できると思います。

pタグの前後に画像を入れるためにはどうすればよいか？それは::beforeであったり、::afterの疑似要素です。その名称のまんま、beforeは「前に」afterは「後に」ということです。

.left、.rightでは吹き出しのスタイルをします。そのbeforeであったりafterに基本的な画像の設定(サンプルでは背景画像の設定)をしておき、更にそれに追加するように、画像だけのスタイルを追加します。

↑ ここまで前のサンプル説明
↓ ここからコメントを入れまくって余計見にくくしたサンプル(笑)の説明

サンプル: line風会話、flex版詳細解説 | codepen

例えばscssで以下のようにあるものは、

.line_back2 {
  .left {}
  .right {}
}

cssに書き出すと、

.line_back2 .left {}
.line_back2 .right {}

となります。

.line_back2 {
  .left {
    &.hidekichi {
      //何かしらのプロパティ
    }
  }
}

これは、
.line_back2 .left.hidekichi {何かしらのプロパティ}
となります。

<div class="line_back2">
  <p class="left"></p>
</div>

このような場合は、leftにわいひらさんのアイコンが予め仕込んでありますが、

<div class="line_back2">
  <p class="left hidekichi"></p>
</div>

とすると、その後に書いてある.hidekichiクラスが、わいひらさんの画像を上書きします。

cssは同じセレクタ、プロパティは後から書かれたものが優先されます。これを利用すれば、上記で言うhidekichi部分を名前とその中身の画像アドレスを変えていくつも作れば、左右どちらでもいくつでも登場人物を追加できます。

吹き出し部分の色を変えないのであれば、画像だけを追加していけば良いですが、色を変えたりそれぞれに何かしようとする場合は、その分だけスタイルを書く必要があります。

つまり、

.line_back2 .left.hidekichi::before,
.line_back2 .right.hidekichi::before {
  background-image: url(hidekichi画像パス);
}

となれば、

<div class="line_back2">
  <p class="left">A</p>
  <p class="right">B</p>
  <p class="left hidekichi">C</p>
  <p class="right hidekichi">D</p>
</div>

と、あった場合、

A: わいひらさんのアイコン
B: hidekichiアイコン
C: わいひらさんのアイコンをhidekichiアイコンで上書き
D: hidekichiのアイコンをhidekichiアイコンで上書き

ということができるということです。上記のhtmlなら、A以外は右も左もhidekichiアイコンです。

#51498はscssをまんま子テーマstyle.cssに貼り付けてますよね？

scssはそのままではブラウザが読めませんのでcssに変換する必要があります。
そう言えば説明を書いてなかったですね。

サンプルのcss欄の下向き三角からview compiledを選ぶとcssに変換されます。
それを何かしらにコピペして修正し、子テーマstyle.cssに貼り付けてください。

ちなみにline_backはオリジナルのline風会話で画像の設定はありません。
line_back2が画像を入れ込めます。

Hidekichiさん
大変丁寧な説明に感謝です。

またCSSへの変換についても了解しました。

ですが、正直CSSにいろいろな事例が入りすぎていて逆に混乱してしまってm(_ _)m

当方が必要としている条件は

・left側メインキャラ用の吹き出し1人。
・left側ゲスト（ex)キャラ用の吹き出し1人。
・right側メインキャラ用の吹き出し1人。
・何れの吹き出しもballoonタイプ。

・背景は指定無しでデフォルトの白。

5つの条件中、背景色以外の4つを純粋に満たす為にはCSSの行番号でどれが不要なのかを知りたいです。
CSSの冒頭に…
/*見やすくするため不要部分を非表示にする ここは不要*/って注釈があっても実際混乱しちゃっています^^;

お手数ばかり賭けて大変申し訳ありませんが、どうかよろしくお願いします。

まず、#51499のサンプルのscssを何かしらのテキストエディターにコピペして下さい。

次にcssに変換したものを別のエディターのタブなどにコピペして下さい。

> 「/*見やすくするため不要部分を非表示にする ここは不要*/」

は、サンプル表示でSimplicityのヘッダやサイドバーなど不要な所を消して、#mainの中身だけを表示させているもので、実際にはコメント通り不要です。

必要なものは、cssでいう、.line_back2から始まる部分で、「/*ここまで*/」とある部分までだけです。
「不要」とあるものは、サンプル画面上でのスタイルなので本番環境にはいりません。あくまでサンプルを見せるために書いてある部分です。

.line_back2.stylishから始まるのは、前サンプルでの3つ目の例で、画像を出すだけなら必要ありません。こういうこともできるという例です。

さて、cssとscssをそれぞれのタブに表示したものが用意できたら、scssをまず見て下さい。
cssは、

なんちゃらの なんちゃらの なんちゃらは { こうする }

という書き方なので、読みにくいこと甚だしく修正点がわかりにくいため、scssを見るほうが良いです。
なんなら、codepenのアカウントを作ってforkしても良いです。そしてscssを自分用に修正して、cssに変換したものを子テーマstyle.cssにはっつければよいだけですから。

1) left側メインキャラ用の吹き出し1人。
2) left側ゲスト（ex)キャラ用の吹き出し1人。
3) right側メインキャラ用の吹き出し1人。
4) 何れの吹き出しもballoonタイプ。

まず、1ですが、サンプルscss124行目で画像を指定します。

.left {
  &::before {
    background-image: url("画像のパス");
    left: -100px;
  }
}

こんな感じになっています。この.leftの親は.line_back2です。これをcssに書き出せば、

.line_back2 .left::before {
  background-image: url("画像のパス");
  left: -100px;
}

こうなります。

&::beforeというのは、.left::beforeと同じことです。&がついていなければ、.left ::beforeとなりエラーになります。

.line_back2 {
  &.balloon {}
}

の様にして用いて、.line_back2.balloonと連結したひとつのクラスにします。&が無い場合は、.line_back2 .balloonとなります。
これらの違いは、

<div class="line_back2 balloon">
と連結した(複数指定の)クラスにするか、

<div class="line_back2">
  <div class="balloon">

の様に、.link_back2の子要素の.balloonとするかの違いになります。

なぜこうするかは、.balloon以外のスタイルを.line_back2に加えられるようにするためです。前レスの画像同様、共通するスタイルはそのままに、変更したい部分はクラスを加えることで変更できます。そういった応用を効かせるために、クラスを分離してあります。

<div class="left">と指定した時に表示されるデフォルトの画像は、上記の通り、サンプルscss124行目で画像パスを入れることでできます。右側は同様にその下にある.rightのbeforeの中身のbackground-imageで指定すれば良いです。コメントでもそのまんま書いてありますので位置はわかると思いますが、cssに変換した時にどれかというのがわからないのかな？と思うので、cssで言えば、

.line_back2 .right::before { 
  background-image: url("画像パス");
}

部分です。ここまでかけば理解してもらえると思いますが、.leftにしても.rightにしても親は全部.line_back2です。

.line_back2 なんちゃら {プロパティ};

は、

<div class="line_back2">
  <p class="なんちゃら"></p>
</div>

というのを表しており、cssでは毎回「.line_back2 なんちゃら」と書かないといけませんが面倒くさいですよね？
scssでは、カッコをネスト(入れ子)にしてその構造を保てます。

.line_back2 {     //<div class="line_back2">部分に該当
  //このカッコ内は子要素
  .left {         //<p class="left">に該当
    &::before {   //.left::beforeと同義。.leftは&として代用できる
      //<div class="left">の画像は疑似要素beforeで表示
      background-image: url(画像パス);
    }
  }
  .right { //<p class="right">に該当
    //中身はleftと同様
  }
}

2)は、別キャラクターをどのようにして作るかがわからないのかと思いますが、これまでの仕組みがわかれば簡単です。

例えば、

.left::before { background-image: url(画像パスA); }
.left::before { background-image: url(画像パスB); }

このようにcssが書いてあったら、.leftで表示されるのは画像パスBになるのはわかりますか？
同じセレクタの同じプロパティは後に書かれてあるものが優先されます。

もう少し簡単に言えば、

.test {
  font-size: 14px;
}
.test {
  font-size: 18px;
}

こう書いてあったら.testのfont-sizeは18pxになります。.testに2つのfont-sizeがあたっていたら、その平均の16pxなんてことにはなりません。最初の値が最後の値に上書きされるのが普通です。画像もこれと同じことを利用しています。

サンプルscssの152行目がそれです。まぁ本当は.line_back2のカッコを付けたほうがより正しいわけですが(←説明が面倒なのでサンプルを修正しました)

.left::before { background-image: url(画像パスA); } これがデフォルトで.leftで表示される画像とします。

別途、

.line_back2 {
  .left {
    &.hidekichi {
      &::before {
        background-image: url(画像パスB);
      }
    }
    &.別クラス {
      &::before {
        background-image: url(画像パスC);
      }
    }
  }
}

別画像を用意するにあたって、このように.leftに連結するクラスを書きます。つまりこれは、
.line_back2 .left.hidekichi::before { background-image: url(画像パスB); }となります。

見比べると、

.line_back2 .left::before { background-image: url(画像パスA); }
.line_back2 .left.hidekichi::before { background-image: url(画像パスB); }

上段: デフォルトのleft画像
下段: 追加クラスのleft画像

こういう違いがあります。

つまり.left.別クラス::beforeの.別クラス部分を追加していけばそれだけでいくらでも画像が追加できるということです。

使用例としては、上記スタイルがあったとして、

<div class="line_back2 balloon">
  <p class="left">A</p>
  <p class="left hidekichi">B</p>
  <p class="right">C</p>
  <p class="left 別クラス">D</p>
</div>

A: 左側　デフォルト画像
B: 左側　hidekichi画像
C: 右側　デフォルト
D: 左側　別クラス画像

とできます。これで言われていることは全部できます。

まとめると、

• .leftと.rightのbeforeの画像を変更すればそれぞれのデフォルトができる。サンプルscss121行目から
• .left.何かしらのクラス::before { background-image: url(画像パス) }とすればいくつでも画像は追加できる。サンプルscss152行目
  • .rightも同様

でここまで読まれたらわかると思いますが、僕はずっと同じことを言い方を変えて答えているだけです。最初はscssの変換について書かなかったのでアレでしたが、cssでも意味がわかれば理解してもらえると思うんですけども、質問者の技量は質問からは読み取れないので僕の書いてることが理解できるかどうかは何とも言えません。

別にscssをまとめて書いても良いんですが、そうするとどこで何をしているかがもっとわかりにくくなると思います。.leftや.rightが色々出てくるのは、機能別にまとめてあるからで、結果的にブラウザ上では.leftは同じプロパティは打ち消され、それ以外は継承されます。これは、

.text { font-size: 14px; }
.text { color: #000; }

と書いてあるのと同義です。結果的に、

.text {
  font-size: 14px;
  color: #000;
}

こういうことなのです。

吹き出しの色は左右で変えてありますが、background-colorを.left、.right共に同じにして、それぞれのafterのborder-colorの色部分を同じにすれば同じ色になります。

プロパティの継承とかがわからない場合は、cssの基本が書いてあるサイトで、cssとはなんぞやというのを理解しておく必要があります。しかしこれがどこのサイトもあまり詳しく書かれていません。なぜならそれが肝にして一番難しいところだからです。

プロパティ一覧とかでどういう機能があるのかは鬱陶しいぐらいでてくると思いますが、cssはどう書けるのかとか、どう使うのかというのはその体系を解説するにも難しい単語を用いなければならず、なんとなしに理解しつつ使いながら覚えるもので、cssはある種、美しくまた応用が効くように書くためには他のプログラム言語を覚えるのに匹敵するぐらい難しいのです。

background-imageを使っている所は、.leftと.right、そして追加クラスの所しかありませんから適当に何かしら入れたらどうなるかというトライアンドエラーでも確かめられます。
これらをするにおいてもデベロッパーツールで、cssがそのセレクタにどうあたっていて、どこを修正すればよいかを確認できるようになっておくべきです。

scssとcssのファイルをそれぞれ用意してもらいましたが、それを見比べてどういう構造になっているかを確認しつつ理解を深めてもらえればなお良いかと思います。

コピペだけでは思うようにできなくても、そのコピペをどうすれば思うようにできるようになるかは創意工夫とトライアンドエラーの先にあります。

Hidekichiさん

大変に丁寧な説明ありがとうございます。

全体を把握理解する上での知識補完としては大変に役に立ちます。
ですが、当方としてはもっと簡潔に、言い方が悪いかもしれませんが「サクッと」カスタマイズを完了させたいと望んでおります。

Hidekichiさんの解説は、そういった面では少し冗長に過ぎると感じてしまうのです。（あくまでも初心者目線でと言う意味ですのでご容赦下さいm(_ _)m）

.line_back2.balloonで、3キャラクタ（左2，右1）が実現するため必要な部分を、簡潔に示して頂ければ当方としては問題ないのです。
逆に言えばキャラクターの追加に関しても、その部分が解れば以降は対処もできます。

どうか、その辺りを考慮に入れたご説明を大変に恐縮ですが、改めて頂けると大変に助かります。
よろしくお願いします。

僕は何度も同じことを書くのは嫌なので全部説明します。あるいは説明しません。
本来は説明なしでもサンプルを見てご自身でやりたい事の解決方法を見つけてもらうのが筋です。なぜなら既にできるようにしてあるわけですから。

また質問者に向けてだけ回答しているわけではありません。この質問を見た他の人が回答を見ながら何をどういじるべきかのヒントになるように書いてるつもりです。

しかし、まずは質問者にわかってもらう必要があります。
例えば修正点だけ書いて、それに答えれば、またわからないことが出てきて同じようなことを質問したりするでしょう？

画像のサイズはどうしますか？
スマホでもこのままの画像サイズでいくのであれば良いですけども。

これらはどこをどういじればどうなるかの理屈がわからないとダメなわけです。

始めから修正点はコメントで書いてあって、何をいじるべきかも書いてあります。それでもわからないのであれば全部説明するしか無いのはご理解下さい。また僕はこの質問用に別のサンプルを用意してコメントも追加しました。それでもわからないと言われれば説明するしか無いでしょう？

初心者であるかないかは僕にとっては関係ありません。こういうことがしたいという事について、こうすればできますよと言う回答をしているだけです。初心者は自力でそれらをわかるように努力して下さい。ここは学校ではなく僕は誰からも報酬を受けているわけではないのですから。

そういいながらもできるだけ細かく、どういう動作をしているかは説明しているつもりですけどね。

僕は例えば僕が提示したサンプルを質問者が実装してみて自分なりにいじってこうなってしまったが、どうしてもできないのでどこを修正すればよいかと言う流れを期待しています。
そうすればすぐに解決方法を提示できます。

別の誰かが、同じようにしてみたがスマホの時に画像を小さくしたいと追加で質問されれば、どうすれば良いかを答えられます。こういう流れがスムースなフォーラムの質疑応答だと思います。

まずは試してみて下さい。自分なりに考えて修正を試みて下さい。他のサイトの情報を探してでもなんとか形にもっていって下さい。それでも尚、できない場合は喜んで回答します。フォーラムにとって、単にコピペで済ましたいだけは何の意味も持ちません。

Hidekichiさん

申し訳ありません。
フォーラムの在り処を、そもそも誤解しているような質問の数々。

Hidekichiさんの仰られたことを踏まえて、現状の自身の技量で行ったことを列記し整理してみます。

1.サンプルSCSSをCSSに変換しました。
2.自分なりの理解のもとに、不要と思われる部分の削除と、80px * 80pxで作成したアイコン用画像URLに置き換えました。
（以下、実際の修正済みCSSです。）

.line_back2 {
  background-color: #607D8B;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.line_back2.balloon .left,
.line_back2.balloon .right {
  border-radius: 15px;
}
.line_back2 .left,
.line_back2 .right {
  position: relative;
  padding: 10px;
}
.line_back2 .left {
  -ms-flex-item-align: start;
      align-self: flex-start;
  background-color: #fff;
  margin-left: 100px;
}
.line_back2 .right {
  -ms-flex-item-align: end;
      align-self: flex-end;
  background-color: #85e249;
  margin-right: 100px;
}
.line_back2 .left::after,
.line_back2 .right::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.line_back2 .left::after {
  left: -8px;
  border-width: 5px 10px 5px 0;
  border-color: transparent #ffffff transparent transparent;
}
.line_back2 .right::after {
  right: -8px;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #85e249;
}
.line_back2 .left::before,
.line_back2 .right::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.line_back2 .left::before {
  background-image: url("http://allaa.review/wp/wp-content/uploads/2017/04/fuki-ajyupon80.jpg
");
  left: -100px;
}
.line_back2 .right::before {
  background-image: url("http://allaa.review/wp/wp-content/uploads/2017/04/fuki-uzuki80.jpg
");
  right: -100px;
}

/*------------  ここまで  -------------*/

3.それをSimplicity2の子テーマのstyle.cssに管理メニュー内のテーマの編集から書き込みし更新しました。
4.検証用の記事…
http://allaa.review/%E6%9C%AA%E5%88%86%E9%A1%9E/post-682

に、HTMLでテスト用に下記の記述を行いました。

<div class="line_back2">
<p class="left">左の人の会話</p>
<p class="right">右の人の会話</p>
</div>

現段階での結果は上記のURLでご覧の通り反映されておりません。
自分でも正直、混乱してきてしまって全く解らなくなってしまって…
早急に機能実装に漕ぎ着けたいあまりに、若干焦ってしまっているのかもしれませんね。

ズバリ、間違っている点をご指摘下さい。
よろしくお願いします。

Hidekichiさん

ありがとうございます。
画像アドレスの部分の閉じクォートが改行されているってことに全く気づきませんでしたm(_ _)m
指摘された箇所を修正したら無事表示出来ました。
Bracketsでは特に問題なく表示されていたはずですが…
正直、あまり自身がありません＞＜

あと数点質問です。
・#51502で自分が希望していた、全体のボックス背景色を無しにして云々は、淡い色に変更しようと思っていますが、その場合は冒頭の…

background-color: #607D8B;

の色指定を変更するだけでOKと言う認識で間違いないでしょうか？
これは一応の確認です。

・吹き出しが現状だとアイコン画像と重なって表示されていますが、アイコンの円の縁から1～2px程離し、かつ若干表示位置を上に上げる為の位置指定はどの部分で行っているのでしょうか？
教えて頂けたら自分好みに微調整をしてみますので。

3人目のキャラ導入の件に関しては、これまでの説明と応用部分なので大丈夫だと思います。

よろしくお願いします。

Hidekichiさん

ごめんなさい。
自分でカットアンドトライで、上記の追加した質問で色に関する部分と、アイコンとの距離については解決しました。

ですが、吹き出しの位置を挙げる部分だけが、イマイチ解りませんので、教えて頂けたら幸いです。
よろしくお願いします。

画像の位置は、

.link_back2 .left::before,
.link_back2 .right::before {
  //他プロパティ
  top: 50%;
  transform: translateY(-50%);
}

のtop:50%; と translateY(-50%);の値を変更します。これは親要素(ここではpタグ)の縦中央にセンタリングするものです。吹き出しを画像の上に揃えたいということですが、考え方は逆でpタグに画像が付随しています(pタグの疑似要素になっているので)。
なので、pタグはそのまま、画像の方を動かします。
三角形部分(.left(.right)::after)も同様です。

もしtopとtranslateYを仮に無くすと、pタグのテキストの上部にアイコンの上部が揃います。吹き出しの三角ではなくpタグのテキストの上部に注意して下さい。

topやらは、その要素(ここではpタグ)の左上のコーナーを0,0の座標としています。top: 50%とするということは、画像上辺がpタグの縦センターに来るということです。
translateYは、その要素自身の縦方向の座標を調整するもので、50%は画像の縦中央の高さ分を表します。

本来2つの要素を縦揃えしたい時は、それぞれの中点をあわせます。topが要素の上辺を調整してしまうのでtranslateYで要素の高さの半分をマイナスすることでY座標の中点を揃えられることになるという理屈です。

この縦揃え方法は本来の用途としては高さがわからない要素同士を縦中央揃えするためのものです。カスタマイズされた人が画像のサイズを変更しても勝手に縦中央揃えできるようにしてあるというわけです。

しかし今回のサンプルは画像の高さがわかっていますから、pxで指定しても良いです。

transform部分は、topでずらしたものを調整するためのものなので、pxで指定する場合は必要なく、topを0にしたら、p要素の上部に画像の上部が揃います。

p要素のposition: relative;の中にある疑似要素(::before)のposition: absoluteは、親要素(pタグ)の左上コーナーの座標が起点(0,0)になります。pのrelativeを無くすとと、先祖要素を遡ってrelativeのところが起点となります。

.line_back2 .left::before,
.line_back2 .right::before {
  top: 0;
  transform: translateY(-50%); /*これと-webkit-付きのも含めて削除orコメントアウト*/
}

これを起点に考えて、画像を少し上げるならtop: -5px;とか、こういう感じでpx指定すれば調整できます。

ただし、画像が下がれば最後のアイコンが、親の.line_back2の下スペースをはみ出すかも知れません。
そんな場合は、.line_back2のpaddingをpadding-bottomで上書きして下さい。

.line_back2 {
  padding: 10px;
  padding-bottom: 50px; /*値は任意で*/
  //他のプロパティ
}

Hidekichiさん

ありがとうございます。
位置決めの仕組みとポイント理解できました。
今朝、早朝まで自分なりに何度か位置の微調整をしてみたのですが、思いの外、デフォルトのいじらない位置がきれいに見えると改めて感じたので、結局戻してしまいました。
でも、お陰様でその辺りのやり方はマスターすることが出来たので感謝します。

余談のようになりますが、アイコン画像は現在80*80のjpgで作成しているのですが、元の画像よりアイコンにした際にボケるような感じがするのは錯覚でしょうか？
錯覚なら良いのですが…

> 元の画像よりアイコンにした際にボケるような感じがするのは
> 錯覚でしょうか？

いえ、それはたぶんボケてます。
beforeのサイズにもよりけりなので、beforeのサイズを変更している場合はわかりませんが、
beforeのサイズと同じにするかより大きくしないと、画像は自動で拡大されます。
サンプルでわいひらさんのはそうでもないですが僕のがボケてるのはそういう理由です。

正方形でbeforeのサイズより大きければ画像サイズはいくつでもよいですが、デフォルトの100×100サイズなら120×120ぐらいの画像を用意しておくほうが良いですかね。ドンピシャでも良いですが1pxもズレずに圧縮後のサイズがドンピシャならで、自信がなければ少し大きめで。あるいはpngで作成するとか。

例えばphotoshopで最高圧縮の設定で保存したとしても、jpegなら数回保存を繰り返せば画像は確実に目で見てわかるぐらいに劣化します。なので無圧縮のデータを、編集ソフト上で指定サイズに変更した後に保存して、その後サイズを変更する場合は、jpg保存したものを利用するのではなくマスターの無圧縮のものを利用してやり直すなどの配慮をするぐらいです。

jpegは必ず圧縮がかかってます。小さくなる分にはわかりにくいですが拡大されるとそれがモロにバレます。そもそもが写真などを圧縮して軽くしてもキレイに見えるように作られたフォーマットなのでアイコンには向かないと言えばそうです。何に使っても良いですけどね。

画像フォーマットには良し悪しはありますがアイコンならpngで作るのが良いのではないでしょうか？
svgなら拡大縮小化は関係ないですが、今度は扱いが難しくなるかも知れません。

Hidekichiさん

回答ありがとうございます。
やはり気のせいじゃなかったのですね^^;

現状はbeforeの値は100px ⇒ 80pxにして、アイコン画像も80pxのjpgです。
要は大は小を兼ねる的な発想で、例えばbeforeの値を80pxとするなら、アイコン画像側は100px程度でpngで作ればある程度軽減されるってことですね。

早速、この後トライしてみようと思います。

この度は、何から何まで丁寧にご教授頂きありがとうございました。
また何かありましたらよろしくお願いします。