統合失調症とむの4コマ漫画ブログ

統合失調症のとむが4コマ漫画で社会人生活からの発病、 治療、回復までの話をつづるブログ(不定期ですが更新中!)

【とむの4コマ漫画大作戦】第7回 テンプレート

【とむの4コマ漫画大作戦】

とむです。

いつもご覧いただきありがとうございます。
漫画の更新が滞っておりすみません。現在制作中です。

「とむの4コマ漫画大作戦」
前回は「ワークフロー」についてお話しさせていただきました。

【とむの4コマ漫画大作戦】第6回 ワークフロー

第7回目の内容は「テンプレート」です。

テンプレートを作る理由

テンプレートを作る理由は以下の2つです。

・イメージ固定化
・更新効率化

イメージ固定化はデザインテンプレート(全記事の共通部分)
更新効率化はhtmlテンプレートの作成を行う事で実現可能です。

なお、ダッシュボードからの設定方法は割愛させて頂きます。

デザインテンプレートでイメージ固定化

当ブログでは下の画像をタイトルとしてヘッダに使っています。
ヘッダ画像にはタイトル、キャッチコピー、人物を入れています。
読み手への第一印象を与える非常に重要な部分となります。

f:id:ts106:20191228142629p:plain

ヘッダ画像の下には以下のグローバルナビゲーションを付けています。
「はじめから読む」「過去の記事一覧へ」の2つの導線を確保しています。
モバイルでスクロールしなくて済むように数は増やしていません。

f:id:ts106:20190204135330p:plainf:id:ts106:20190202215756p:plain

htmlテンプレートで更新効率化

記事の上部には書き出し文として以下のコードを使用しています。
毎回表示される冒頭の挨拶をhtmlで記述しています。

f:id:ts106:20200207191430p:plain

青い背景の部分のソースコードが該当部分です。
漫画は<img>タグの部分。ファイル名に"_original"を追加すると等倍サイズで表示されます。

記事は<h4>タグで小見出し、<p>タグに3行の文章で構成します。
読み手に負担を与えてしまわないよう適度な文章量を心がけます。

f:id:ts106:20200207191434p:plain

<p>タグにCSSで下のマージンを60px開けるように指定しています。

ブラウザーでは下の画像のように表示されます。

f:id:ts106:20200207191442p:plain

記事の下部には書き終わりとして以下のコードを使用しています。
挨拶、過去記事やランキングサイトへのリンク、読者登録ボタンです。

f:id:ts106:20200207191438p:plain

上記を一括管理できる方法があればもっと効率的ですが現在勉強中です。

テンプレートでメッセージの軸を作る

デザインとhtmlのテンプレートをあらかじめ作成する事で、
更新作業がもっと効率的になり、イメージも固定化され、
結果的にメッセージの軸が出来上がり話に一貫性が生まれます。

以上、テンプレートについて説明させて頂きました。

 

 

ここまでお読みいただきありがとうございました。
次回からもどうぞよろしくお願いします。

次回はこちら

【とむの4コマ漫画大作戦】第8回 文章作成

スマホタブレットの方は2回タップしないと反応しない場合がございます。

 

 

このブログを応援してくださる方へ

もし宜しければ下記の読者になるボタンより登録をお願いします。

応援のため下記のバナーをクリックして頂けると励みになります。
にほんブログ村 漫画ブログ 4コマ漫画へ

また下記のスターもクリックして頂けると励みになります。
※投稿時間の下にある星マークのボタンです。