[PR]

記事に4コマ漫画を入れたい!!テンプレートを作成中・・・

ブログ
[PR]

こんにちは、あつしです。
このブログを始めてから「そこそこ」経ちますが、記事の執筆に専念出来ていないですね。。。

その間ナニをしていたのかというと、記事の冒頭に「4コマ漫画」を入れたいと考え、4コマ漫画を描くためのテンプレート作成に着手。
しかもそれなりにこだわりがあり、かなり時間が掛かっています。

現時点で考えている構成は・・・


[タイトル]
[アイキャッチ画像]
[SNS]
[AdSense]
[4コマ漫画1/4]
キャラクター&吹き出し&背景
[4コマ漫画2/4]
キャラクター&吹き出し&背景
[4コマ漫画3/4]
キャラクター&吹き出し&背景
[4コマ漫画4/4]
キャラクター&吹き出し&背景
[AdSense]
[目次]
[サブタイトル]
文章
[サブタイトル]
文章
[サブタイトル]
文章
[サブタイトル(まとめ)]
文章
[AdSense]
[SNS]
[関連記事]

4コマ漫画部分でテーマと要点を掲げると共に、ページの滞留時間を伸ばすことが目的。そして4コマ漫画部分は、画像で作成するのではなく、HTML+CSSで構成することで、量産化と再編集を容易にしたいところ。

<div class="comic">
	<!-- 1コマ目 -->
	<div class="frame" style="background-image: url(【背景画像URL】);">
		<span class="image left top" style="background-image: url(【キャラクタ画像URL】);">
			<span class="balloon">
				<div class="comment">【セリフ】</div>
			</span>
		</span>
		・・・
	</div>
	<!-- 2コマ目 -->
	<div class="frame" style="background-image: url(【背景画像URL】);">
		・・・
	</div>
	<!-- 3コマ目 -->
	<div class="frame" style="background-image: url(【背景画像URL】);">
		・・・
	</div>
	<!-- 4コマ目 -->
	<div class="frame" style="background-image: url(【背景画像URL】);">
		・・・
	</div>
</div>

キャラクタ画像は既に準備済みで、余白部分は透過にしてあるので、画像同士が重なっても違和感が少ない様にしてあります。

配置は、前後の奥行きが3パターン、横位置が5パターンで配置し、それぞれに応じ縮尺と画像向きを調整。

キャラクタ画像に対して1つの吹き出しを持たせる。
これも前後位置と横位置に応じて、縮尺と配置を調整し、基本は「背景」「キャラクタ画像」「位置」「セリフ」を指定するだけで、一つの話が出来上がる様になります。

と、ここまでは決まっているのですが、吹き出しの形状であったり、キャラクタ画像位置に対する吹き出しの表示位置、セリフ長に応じた吹き出しのサイズ調整などをCSSで行うのですが、これがまだしっくり来る状態にはなっておらず、四苦八苦しています。

もう少し、安定運用まで時間が掛かりそうですね・・・。

コメント