漫画特化テンプレートStrawMan Templateの機能の紹介

この記事は、漫画特化型テンプレート『StrawMan Template』の機能を解説し興味を持ってもらうために書かれたものです。
テンプレートの紹介はコチラや技術者のサイトをご参照ください。



StrawMan Templat sampleより引用


『StrawMan Template』は、漫画家が個人サイトで作品を発信することに特化したテンプレートです。

利用にかかる費用はゼロ。
思い立ったその日に開設でき、webサイト制作に必要な知識（HTML/css）はコピー＆ペーストで済むように設計されています。

以下の項目別に、StrawMan Templateの機能の紹介と運用方法のリンクをまとめましたので個人サイトに興味のある方の一助になれたら幸いです。

StrawMan Templateの機能とプラグインの違い

テンプレートにはStrawMan Templateに組み込まれている機能、FC2が提供している機能、外部サービスより提供されている機能があります。

本記事ではStrawManの機能を紹介していきますが、どこからどこまでがStrawManなのかわかりづらいかと思いますので解説します。


以下の画像の、青がStrawMan Template部分、緑がFC2、赤が外部サービスです。

・青
StrawMan Templateに組み込まれている機能。


・緑
PCでは右側、スマホ/タブレットでは下側がFC2提供のプラグインエリア。


管理画面→プラグインの設定

様々なものが提供されているが、基本的にはフリースペースなのでHTMLや外部サービスなどあらゆるものが設置できるエリア。


・赤
広告やプッシュ通知（更新通知を端末に届ける機能）など、外部サービスにより提供されているもの。



本記事では、StrawMan Template独自の機能の紹介にとどめ、FC2のプラグインや外部サービスについては別記事でまとめます。

---

初期搭載機能

StrawMan Templateに内蔵されている機能の一覧です。

テーマ切り替え

StrawMan Templateはポートフォリオ的な展示や名刺のような簡易サイトではなく、たくさんのコンテンツを盛り込み読者を長くとどめることを重視していますので、長時間の閲覧による目の負担に配慮したダークテーマを組み込んでいます。


太陽・月アイコンで切り替わります。


各テーマのカラーを変更する方法はコチラ
背景色の変更（暫定版）

---

カスタムテーマ

漫画を軸に活動する以上、見た目にこだわるのは当然です。

PC表示は右側がフリーエリアですので装飾するのは容易ですが、スマホやタブレットでは自由な領域はほぼありません。
そこで、スマホとタブレットのメニューエリアに画像を設定できるカスタムテーマ機能を組み込みました。


ライトテーマでの表示、ダークテーマでの表示の２種。
メニュー全体や各項目の展開部分にフィルターをかけられます。


フィルターの種類はペイントツールにある乗算やオーバーレイをはじめ、セピアやモノクロといった写真フィルターなど多くのものが使え、画像と文字色が馴染まないときは文字・アイコン・区切り線のカラーも変更できます。


画像設定、推奨画像サイズ、フィルターの設定、UIカラーの変更の方法はコチラ
2: スマホ版カスタムテーマ画像差し替え

---

TOP画像

サイトの看板画像です。
PC、スマホ/タブレット、メニューの看板を設定できます。


PC/タブレット/スマホ/メニュー×２テーマで全８種


なお、日記系ブログでよく見られるTOP画像+サイト名（テキスト）表記は、文字入れや加工などを日常的に行っている漫画描きには不要なので外しました。


詳しい設定方法や推奨画像サイズはコチラ
1: ヘッダー画像差し替え

---

漫画ビューワーlaymic

紙媒体での読書体験を機能に落とし込み、商業非商業すべての既存ビューワーの一歩先を目指した高機能漫画ビューワーです。




漫画ビューワーで読む
©佐藤秀峰 ブラックジャックによろしくより引用



オーバーレイ表示（画面全体を覆う表示）により、雑多なブログ画面を覆いますのでより漫画にフォーカスした公開が可能です。
※laymicビューワーは、時機を見てオープンソース化しますのでhtml/cssが編集可能なサービスでも使えます。


一般的なビューワーで出来ることは全て可能。
一言で説明できないほど多機能なので一つづつ紹介していきます。


・全画面表示
ビューワー上で全画面表示に切り替えることが出来るため、マンガへの没入度や読みやすさが向上します。

htmlでの補足により、初期状態で全画面表示を指定できますので、作家側が読んで欲しい形式で公開できます。
なおビューワー設定より、読み手側の読みたい状態で固定することも可能です。



・見開きと縦読みの切り替え
見開き表示と縦読み表示を自由に切り替えられます。

htmlでの補足により、初期状態で見開き（または縦読み）表示を指定できますので、作家側が読んで欲しい形式で公開できます。
なおビューワー設定より、読み手側の読みたい状態で固定することも可能です。
※スマホでの見開き表示はv2.0からの搭載になります。



・サムネイルによる全ページ表示とジャンプ機能
ビューワー内の原稿をサムネイルで一括表示し、指定したページへのジャンプが出来ます。

この機能は、紙媒体であの巻のあのシーンをまた読みたいときに行う動作。
つまり、あたりを付けた巻を手に取りパラパラーとめくる動作から要素を抜き出し機能化したもので、グラフィカルな目次・シーンを読み返す・おおまかなザッピングなどを想定した機能ですので、１話のページ数が多い作品や漫画一冊分をビューワーに入れたケースで効果を発揮します。



・ページ進捗バー
現在表示している原稿の進捗を表示する機能です。

この機能は、紙媒体で読書中の左手に感じている残ページ数の感触を機能に落とし込んでいますので、１話のページ数が多い作品や漫画一冊分をビューワーに入れたケースで効果を発揮します。
なお、ビューワー設定よりON/OFFが選べます。



・ガイドアイコン
ページの送り方向を示す矢印アイコンを搭載しています。

なおガイドアイコンは、ビューワーの操作を覚えてしまうと不要に感じることもありますので、読者のお好みによりビューワー設定よりON/OFFが選べます。



・左始まり・右始まりの変更
原稿の開始位置を指定できます。



・右ページ送り
原稿の読み方向を、横セリフ漫画や英語漫画で一般的な右送りに指定できます。



read on viewer




・SNSからのビューワー起動
SNSに記載したビューワーURLより直接起動できます。

これによりSNS上で、より洗練された漫画公開と自サイトへの誘導が容易になります。



・各種設定の統合設定
ビューワーに原稿を登録する際の各種指定を一括で行う事が出来ます。

内容に違いがあっても、マンガの見せ方をコロコロ変える作家はほぼいません。
そこで、原稿サイズ・見開き/縦読み・左始まり/右始まり・ページ送り方向・原稿の余白数値をhtmlに規定値として設定することにより、更新の手間を大幅に削減できます。



・HTMLの使用可
ビューワー内でhtmlが使えますので、プログラムの習熟度により柔軟な運用が可能です。



・ズーム機能とピンチ操作
原稿の指定位置を拡大して表示できます。
※ズームとピンチ操作はv2.0からの搭載になります。



以上がStrawMan Templateに搭載されたlaymicビューワーの機能です。

なお高機能を目指しましたが、comicoなどで用いられる規格外の原稿サイズには対応していません。
※comico独自の縦長原稿は、記事に直接貼ることでcomicoと同様の読み味が再現できます。

縦長原稿表示サンプル

確認されている不具合について
・ビューワーのラストページが単ページの場合、一つ前のページと原稿が重複する。
→工数の関係からｖ2.0での対応とさせてください。

・暫定的な対応策
最後が単ページになった場合は、白紙画像（たとえば2life9999.pngという白紙画像）を挿入し見開きにすることで対応願います。
（単行本のページ調整に白紙ページをはさむ要領）

詳しい利用方法はコチラ
straw_manテンプレートlaymicビューワー関連設定解説記事

---

ライトボックス

画像を中央に拡大表示する機能です。
イラストや、頂いたファンアートの展示を想定して組み込みました。


画像をクリックで拡大表示

一つの画像に複数枚の画像も設定でき

注釈などのテキストも入れられて




詳しい利用方法はコチラ
straw_manテンプレートライトボックス関連設定解説記事

---

グローバルナビゲーション

一般的なテンプレートと違いStrawMan Templateは漫画を見せることに特化したうえに、日記などの一般的な記事も混在できる作りになっていますが、記事や漫画をまぜこぜに更新してもどこを見ればいいのかわからず読者に優しくありません。

そこでカスタマイズ性の高いメニュー（グローバルナビゲーション）を導入し、各記事各漫画への誘導がしやすいように設計しました。


親項目、子項目、すべて自由に設定可能です。

短編
　→タイトルA
　→タイトルB
　→電子書籍

長編タイトル
　→もくじ
　→最新話
　→裏話
　→ファンアート
　→電子書籍

など、ご自身の創作スタイルに合わせ、思いつく限りの項目を設定できます。


詳しい設定方法はコチラ
3: グローバルナビゲーション部位の差し替え

---

追従ボタン

スマホで操作する以上、必ずどこかに指で覆われるデッドスペースが発生します。

そのスペースにメニューと上に戻るボタンを置き、記事の途中でもテーマを変更したり他の記事に移ることができますが、どこにデッドスペースが出来るのかは人それぞれ。

右利き左利き、両手持ち片手持ち、さらには拡大状態で読み進めるなどデッドスペースは出来ますが場所の特定は無理です。

そこで、追従ボタンの位置を読者が自由に設定できるようにし快適な閲覧環境を実現しました。



追従ボタン位置変更を押すたびに位置が変わります。


なお、追従ボタン機能の設定はありません。
（透過率や上下配置位置の変更など要望があれば公開されるかも？）

---

アニメーションジャンプ

PCでは一等地とされている右スペースですが、スマホやタブレットでは記事下に配置されるため下手をすると存在自体に気づかない方も多いです。
そこで、メニューよりサイトの任意の場所へジャンプすることができる機能を組み込みました。


メニューのプロフィールをクリックするとジャンプします。

この機能の肝はアニメーションすることです。
ジャンプが出来るという快適性もありますが、敢えてアニメーションをすることで記事下にもコンテンツがあることを暗に示すのが目的です。


詳しい設定方法はコチラ
straw_manテンプレートスムーススクロール機能設定解説記事

---

カテゴリリンク

マンガの１話２話３話と、連続したカテゴリ記事を表示する一気読みを想定した機能です。

マンガのタイトルなどをカテゴリで設定し
管理画面→カテゴリの編集
『神様セカンドライフ（旧版）』カテゴリに８０件の記事（８０話分）が登録されているという意味



記事の最後に同タイトルの次の話（同カテゴリの記事）のリンクが表示されます。
（表示される画像は記事で設定した見だし画像、未設定の場合は一番最初の画像）


なお、カテゴリリンク機能の設定は基本的にはありません

---

コメントアバター

まともな漫画特化型テンプレートが存在しない以上StrawMan Templateが溢れ、いくらカスタマイズをしてもオリジナリティが打ち出しにくくなるかもしれません。

そこでコメント欄にアイコンを導入し、自創作の世界感を強く打ち出せるようコメントアバター機能を組み込みました。



StrawMan Templateより引用
初期状態
↓

カスタマイズ後

管理者と非公開コメント、その他に２０個まで設定できます。
（あくまで製作者の推奨が２０個というだけでそれ以上も可能です）


コメントアバターの推奨画像サイズや設定はコチラ
straw_manテンプレートコメントアバター設定解説記事

---

外部サービス設置ガイド

StrawMan Templateでは、外部サービスを組み込むための設置スペースが最初から設けられているため、サイト作りが初めての方でも迷わないように設計されています。



googleアナリティクス（google提供のアクセス解析ツール）



ほとんどの解説サイトでは、『ヘッダー内にgoogleアナリティクスのIDを張り付け』と解説されていますが、これは専門用語の解説に専門用語を使うようなものです。

StrawMan Templateはプログラムの知識が無くても迷わないようにはっきりと明記しています。



広告


広告でよくある質問の、『ここに表示したいんだけどどこに貼ればいいの？』にも対応済み。
ここに貼るとここに表記されるなど、一般的な設置個所はすべて網羅しています。


皆様はctrl+Fで検索窓を開き、対象のワードで検索。
あとは指定の場所にコピペで設定完了です。

なお、カスタマイズも同様の手順で行えるため、プログラムの知識は不要です。

---

拡張機能

StrawMan Templateにコードを追記することにより使える機能。

ペルソナ

コードを追加することにより、サイトデザインを一新する着せ替え機能です。




なお、ペルソナ機能はサイト全体の見た目に関するコードをまとめたものなので、サイトデザインを変更する際に該当箇所が分かりやすくなるという恩恵もあります。

straw_manテンプレート見た目変更ペルソナ導入解説記事

---

ギャラリー

大量の画像をライトボックスで表示する機能です。
従来のライトボックスを設定しながら一つ一つ設置するのではなく、一括指定ができるので画像が多く並べたいケースに向いています。

簡単な設定でPC・スマホ/タブレットのどちらの表示幅でも快適に表示できるよう設計されています。



５個３列で表示されていますが、プラウザの表示幅により自動で変わります。

ギャラリーのサンプル
StrawMan Templateギャラリー機能の見本記事

表題あり使用例
神社・仏閣（商用利用可・クレジット不要、投稿フリー素材）

表題なし使用例
天目一神社（商用利用可・クレジット不要、投稿フリー素材）


詳しい設定方法はコチラ
3: アートギャラリー用カスタマイズコード

---

ライトボックスリンク装飾

ライトボックスが組み込まれた画像かどうか、視覚でわかるよう装飾を付ける機能です。


開くと画像が一枚拡大されるもの。
→写真が一枚重なっているイメージ


開くと複数枚表示されるもの。
→複数枚重なっている原稿的なイメージ


機能を追加した後でも装飾を外すことができます。


詳しい設定方法はコチラ
2: ヤマノスで使っているライトボックス装飾カスタマイズコード

---

記事編集リンク

今見ている記事から記事編集画面へ移動できるリンクを設置する管理者用の機能です。


記事下、SNSボタンの下に『EDIT』を設置


FC2の記事は仕様上、記事に名前が付けられずこの記事のURL末尾にある『blog-entry-667.html』のような数字がふられます。

記事が少ないうちは構わないのですが、ある程度の数がたまると探すのも一苦労。

記事一覧画面

法則を重視したタイトル付けと省略される管理画面があわさって、書いた本人すらどれがどんな内容なのかわかりません。

これを解決するには記事から直接編集画面に入れるようにするのが一番早く、それを実現するのが記事編集リンク機能です。


詳しい設定方法はコチラ
StrawMan Templateの個別記事に記事編集リンクを追加する方法

---

検索フォーム

FC2の検索フォームをStrawMan Template向けに調整した機能です。



FC2の検索フォームが馴染まない、google検索を置こうとしたけれどカラーが馴染まないと感じた方向けを想定しています。


詳しい設定方法はコチラ

---

StrawMan Templateの案内板へ戻る

関連記事

• FC2ブログとstraw_manの運用に役立つヒント集
• [FC2ブログ対応] オススメ外部機能の紹介と実装方法
• 漫画特化テンプレートStrawMan Templateの機能の紹介
• 無料で始めるweb漫画サイトを作る方法
• StrawMan Templateの各種機能の表示見本