コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

アヴァター ~地上に降りた神の化身

自分のアバターを使って対話形式のブログを描く人をヴァーチャルブロガーとか言っているらしい

いやいや、ありえないんですけどー。対話形式にしてるだけヴァーチャルって(笑)。自分のアバターみたいの作ったらヴァーチャルって(笑)。そんなんでヴァーチャルだったら数十年前のネット民だってヴァーチャルですわー。あー、草はえますわー。


そんなわけで、便乗クソ野郎の僕も対話形式でやるやつやってみようと思ったのでした。

つくったよ

作ってみたはいいけど、僕はそういったアバター的なキャラをもってないことに気づいてしまった。僕は一体何者なんだ……。とりあえず、僕のブログでよく見かけるであろうと思われるキャラ的なやつをはってみる。



f:id:andron:20180524185133g:plain
はーいどーもー、僕です。今日もいい天気ですね



f:id:andron:20160717162838p:plain
🐓

右にいる自己紹介画像と上のほうにいるブログマスコット的なやつからとってきました。なお、設定も名前も一切ないもよう。どうして勢いで作ってしまったのか……。




まあ、あれです。CSS の flexbox のテスト記事だったりします。今時、CSS の float 使ってレイアウト調整するなんて前時代もいいところだよねーって声(幻聴)が僕のほうに届いたのでテストがてら作ってみました。

上のソース

<div class="vblog-container vblogl">
<div>
<img src="***">
</div>
<div class="vblog-item"></div>
</div>
.vblog-container{
  display: flex;
  align-items: center;
}

/* 左に画像 */
.vblogr{
  flex-direction:row;  
}

/* 右に画像 */
.vblogl{
  flex-direction:row-reverse;
}

.vblog-container img{
  flex: 1;
  width : 90px;
  height : 90px;
  border-radius : 50%;  
  pointer-events: none;
}

.vblog-item{
  flex: 4;
  border: solid 2px;
  margin: 5px 15px;
  padding: 5px;
  border-radius: 5px;
}

.vblog-item:before{
  content:"*「";
}

.vblog-item:after{
  content:"」";
}

こんな感じになります。まあ、まだきれいじゃないけど float 使っているやつよりかはすっきりしていると思う。吹き出しつけたら少し手間になるかもしれないけども、それでも行数は少なくなると思われ。

flexboxについて詳しくはこちらを参照
CSS Flexible Box Layout Module Level 1



そういった感じで僕も作ってしまったので、今後は対話形式でブログをやることが出てくるかもしれないし、出てこないかもしれません。出てきたらよろしくですです。



おわり