Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
2023/03/12 17:32
(上画像はPC版ライトテーマ時のスクショです)
このサイトはFC2ブログ使ってないので、「なんでキミこれ作ったの?」といったツッコミを受けそうな部分もありますが。
僕(のようなWebサイト制作に慣れてる人)が使うためのものというより、むしろ「モダンでシンプルなブログを最低限の調整だけで誰でも構築できる」テンプレートとして作りました。
かなり自信のある出来なので、よってらっしゃい見てらっしゃい。
もくじ
・テンプレート情報
・サンプルサイト
・組み込み機能詳細
・レスポンシブデザイン
・多段項目型グローバルナビゲーション
・テーマ変更機能
・スマホ版カスタムテーマ機能
・追従ボタンの位置変更機能
・同一カテゴリ次記事リンク
・コメント欄簡易アバター機能
・ライトボックス機能
・SEO対策など
・カスタマイズについて
・他仕様一覧
・スペシャルサンクス
※元記事のキャッシュ
インターネットアーカイブ
・項目
内容
・名称
straw_man
・別名
StrawMan Template
・制作者
dettalant
一つ目のサイトは開発時に用いていたサイトで、(投稿記事内容を除いて)テンプレート初期状態と合わせています。
テンプレート導入時の状態の参考用としてご活用ください。
二つ目のサイトは当テンプレート開発監修をしていただいたLV3さんのサイトで、独自のカスタマイズが施されている状態です。
より実地的な活用例になるのではないかと考えています。
テンプレートに組み込んだ機能のうち、キャッチーで見目の良さそうな部分を紹介します。
FC2ブログは「PC/スマホで別々のテンプレートを使う」機能もあるのですが、さすがに今の時代はレスポンシブデザイン一本でいいんじゃないかな……?
そんなわけで、当テンプレートでもレスポンシブデザインを採用しています。
これがPC版を想定した表示。
こちらがスマホ版を想定した表示。
表示画面サイズに応じて二つのデザインが切り替わるので、二つ別々のテンプレートをいじる必要はありません!
※ FC2ブログ環境設定の「スマートフォン版の表示設定」を「無効にする」状態の使用を想定しています。
サイトコンテンツが多くなってきた時に役立つのが、主にページ上部に表示されることが多いグローバルナビゲーション。
これは多くのサイトに導入されている一般的なもので、当然ながらこのテンプレートにも組み込んであります。
PC版ではこの画像のようにページ上部表示。
「項目をクリックしたら格納された子要素を展開する」といったこともできます。
スマホ版では左側からにゅっと出てくるドロワー形式を採用。
ページ上部に配置されてるメニューボタンか、スクロール追従型のメニューボタンを押すとグローバルナビゲーションが開かれます。
伝統的なウェブサイトは「一つのサイトでは一つの見た目で固定」が基本でした。
しかし昨今においては「ダークテーマ機能」などのユーザー側で見た目を変えられる機能が一つのトレンドとなっています。
かくいう僕もダークテーマ大好きマンの一人であるので、このテンプレートにもテーマ変更機能を組み込んでみました。
初期状態ではこの二種類のテーマを切り替えられるようになっています。
※画像をクリックでテーマ変更を体験できます
また、拡張性を持たせておいたので、CSSスキル次第では第三第四のテーマも追加可能ですので、どうぞご活用ください。
先も書いた通り、このテンプレートは「絵描き・漫画描き」の方をメインターゲットとしているのですが。
「絵描きは自分の描いた絵で自サイトを彩ることが大好き」
という主張をテンプレート開発中に受けたので、スマホ版グローバルナビゲーションに画像展示用の箇所を作っておきました。
たとえばライトテーマではポップな色合いで表示したり。
逆にダークテーマではシックな印象を持たせたり。
といったことも簡単に出来る作りなので、使用者のアイデアとCSSぢから次第ではあっと驚かせることもできる! はず!
もちろん、この機能を取っ払うことも簡単なのでご安心ください。
各ページにおいて、これらのボタンが画面右下に固定表示される仕様になっているのですが。
画面の広いPCはともかく、スマホでは邪魔になる場合もあると思うんですよね。
なので、追従ボタンの表示位置を変更する機能も組み込んでおきました。
この機能を使えば画面右上に配置したり、
画面左下に配置したりが簡単に切り替えられます。
漫画作品をブログ上で連載する場合に気にしておきたいことは、一気読みのしやすさ。
一気読みがしにくければ、一つのサイトに漫画をまとめる意味がないといっても過言じゃありません。
なので、「同じカテゴリに属している次の記事」へのリンクを自動表示する機能を組み込みました。
作品ごとにカテゴリを分けて記事を投稿することを前提とした機能になります。
これを上手く用いれば、一気読み派がスムーズに作品を追いかけていける! はず!
コメント欄は新鮮な風をブログに吹き込ませてくれる便利なやつですが、上手く賑わってくれないとちょっぴり寂しいやつでもあります。
そんなコメント欄を少しかわいくできないものかと考えて、簡易アバター機能を組み込んでみました。
サイト管理者側がアバター画像を用意して、その中から利用者が選んで使う形式を取っています。
この画像は初期状態のアバター選択ウィンドウのもの。
アイコン画像はCreative Tail - 40 Flat Animal Iconsのものを使用しています。
もちろんこのアバター画像は自由に差し替え可能!
何か作品を作っている方なら、作品キャラのアバターを使うと楽しいことになるんじゃないでしょうか。
ちなみにコメント投稿時のemail欄はアバター機能を実装するための犠牲になってしまったので、使用不可状態になってます。
email欄なんてスパムコメント以外が使ってるとこ見たことないような機能だし許して。
ライトボックスというのは、「クリックすると画像がブラウザ中央にハイライト表示される」スクリプトのことを指すのですが。
絵描きさんのポートフォリオサイトでは、ライトボックスが高い確率で採用されている勝手なイメージを持っています。
クリック(タップ)で拡大します。
こういうやつ。
絵描きさんをメインターゲットとしている以上、これは喜ばれるお節介じゃないかと思ったので、テンプレートに組み込んでおきました。
よって、「ライトボックスを使いたいがために自前で頑張って導入する」必要性はナッシング!
簡単に取っ払えるようにもしておいたので、そういうのいらないタイプの人は取っ払って使ってくださいね。
SEO。それは検索エンジンの支配を受けしネット世界において、検索上位にのし上がるためには避けられない戦い……であった時代も過去にはありました。(唐突な思い出話)
今はgoogle先生の検索表示アルゴリズムの関係から、昔のようにSEO対策テクニックが重要な時代ではないとされていますが。
一応ながらこのテンプレートも、最新のSEO対策を念頭に置いた内部構造にはしてあります。
以下、組み込んだ裏機能のうち主要な部分。
※ 「高速化のために必要ないページを先読みさせまくる」のは個人的にあまり好きではないので、一気読みの際に狙いを絞って効力を発揮する仕様にしています。
こういうテンプレートはカスタマイズしてなんぼ。望むままにカスタマイズして使ってやってください。
制作者として想定しているテンプレートカスタマイズ方法を載せた解説記事を別途書く予定なので、そちらも参考にしてみてくださいね。
ただ、想定の幅を越えたカスタマイズ方法についてはおそらく解説しないと思いますのであしからず。
それぞれのサイトで行いたい方向性が千差万別な以上、全てをカバーすることはほぼ不可能なんよ……。
あなたのサイトをあなた好みにカスタマイズできるのは、この世界であなた一人だけ。
カスタマイズ道の奥地への到達を望むなら、カスタマイズぢから、つけよう!
※ 正確に言えばlinux版chromiumとfirefoxの最新版で動作確認しています。
※2 スマホ版動作確認については、様々な方のご協力を受けて成し遂げました。多謝。
LV3さん
当テンプレート計画発案者。
Web漫画作家としての視点で、テンプレート全体の監修をしていただきました。
融さん
テスター。主にiPhoneでの動作確認をしていただきました。
ヤマノス読者のみなさん
先に紹介したLV3さんのサイトで、straw_manの先行導入テストを行っていたのですが。
その際に、いろいろとご意見不具合報告などをしていただきました。

まださなぎ © Proudly written by dettalant
StrawMan Template総合案内板へ戻る
このサイトはFC2ブログ使ってないので、「なんでキミこれ作ったの?」といったツッコミを受けそうな部分もありますが。
僕(のようなWebサイト制作に慣れてる人)が使うためのものというより、むしろ「モダンでシンプルなブログを最低限の調整だけで誰でも構築できる」テンプレートとして作りました。
かなり自信のある出来なので、よってらっしゃい見てらっしゃい。
もくじ
・テンプレート情報
・サンプルサイト
・組み込み機能詳細
・レスポンシブデザイン
・多段項目型グローバルナビゲーション
・テーマ変更機能
・スマホ版カスタムテーマ機能
・追従ボタンの位置変更機能
・同一カテゴリ次記事リンク
・コメント欄簡易アバター機能
・ライトボックス機能
・SEO対策など
・カスタマイズについて
・他仕様一覧
・スペシャルサンクス
※元記事のキャッシュ
インターネットアーカイブ
当記事の文章とコードはリラ様の著作物です
リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。
このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。
共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました(詳細な経緯はこちら)。
もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。
最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています(当サイトの著作物について)。
ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。
文責:秋田LV3
テンプレート情報
・項目
内容
・名称
straw_man
・別名
StrawMan Template
・制作者
dettalant
サンプルサイト
一つ目のサイトは開発時に用いていたサイトで、(投稿記事内容を除いて)テンプレート初期状態と合わせています。
テンプレート導入時の状態の参考用としてご活用ください。
二つ目のサイトは当テンプレート開発監修をしていただいたLV3さんのサイトで、独自のカスタマイズが施されている状態です。
より実地的な活用例になるのではないかと考えています。
組み込み機能詳細
テンプレートに組み込んだ機能のうち、キャッチーで見目の良さそうな部分を紹介します。
レスポンシブデザイン
FC2ブログは「PC/スマホで別々のテンプレートを使う」機能もあるのですが、さすがに今の時代はレスポンシブデザイン一本でいいんじゃないかな……?
そんなわけで、当テンプレートでもレスポンシブデザインを採用しています。
これがPC版を想定した表示。
こちらがスマホ版を想定した表示。
表示画面サイズに応じて二つのデザインが切り替わるので、二つ別々のテンプレートをいじる必要はありません!
※ FC2ブログ環境設定の「スマートフォン版の表示設定」を「無効にする」状態の使用を想定しています。
多段項目型グローバルナビゲーション
サイトコンテンツが多くなってきた時に役立つのが、主にページ上部に表示されることが多いグローバルナビゲーション。
これは多くのサイトに導入されている一般的なもので、当然ながらこのテンプレートにも組み込んであります。
PC版ではこの画像のようにページ上部表示。
「項目をクリックしたら格納された子要素を展開する」といったこともできます。
スマホ版では左側からにゅっと出てくるドロワー形式を採用。
ページ上部に配置されてるメニューボタンか、スクロール追従型のメニューボタンを押すとグローバルナビゲーションが開かれます。
テーマ変更機能
伝統的なウェブサイトは「一つのサイトでは一つの見た目で固定」が基本でした。
しかし昨今においては「ダークテーマ機能」などのユーザー側で見た目を変えられる機能が一つのトレンドとなっています。
かくいう僕もダークテーマ大好きマンの一人であるので、このテンプレートにもテーマ変更機能を組み込んでみました。
・白を基調としたライトテーマ
・黒を基調としたダークテーマ
初期状態ではこの二種類のテーマを切り替えられるようになっています。
※画像をクリックでテーマ変更を体験できます
また、拡張性を持たせておいたので、CSSスキル次第では第三第四のテーマも追加可能ですので、どうぞご活用ください。
スマホ版カスタムテーマ機能
先も書いた通り、このテンプレートは「絵描き・漫画描き」の方をメインターゲットとしているのですが。
「絵描きは自分の描いた絵で自サイトを彩ることが大好き」
という主張をテンプレート開発中に受けたので、スマホ版グローバルナビゲーションに画像展示用の箇所を作っておきました。
たとえばライトテーマではポップな色合いで表示したり。
逆にダークテーマではシックな印象を持たせたり。
・テーマごとに別の背景画像を表示する
・テーマごとに好きなフィルターをかける
といったことも簡単に出来る作りなので、使用者のアイデアとCSSぢから次第ではあっと驚かせることもできる! はず!
もちろん、この機能を取っ払うことも簡単なのでご安心ください。
追従ボタンの位置変更機能
・PC版: ページトップへ戻るボタン, テーマ変更ボタン
・スマホ版: ページトップへ戻るボタン, メニュー展開ボタン
各ページにおいて、これらのボタンが画面右下に固定表示される仕様になっているのですが。
画面の広いPCはともかく、スマホでは邪魔になる場合もあると思うんですよね。
なので、追従ボタンの表示位置を変更する機能も組み込んでおきました。
この機能を使えば画面右上に配置したり、
画面左下に配置したりが簡単に切り替えられます。
同一カテゴリ次記事リンク
漫画作品をブログ上で連載する場合に気にしておきたいことは、一気読みのしやすさ。
一気読みがしにくければ、一つのサイトに漫画をまとめる意味がないといっても過言じゃありません。
なので、「同じカテゴリに属している次の記事」へのリンクを自動表示する機能を組み込みました。
作品ごとにカテゴリを分けて記事を投稿することを前提とした機能になります。
これを上手く用いれば、一気読み派がスムーズに作品を追いかけていける! はず!
コメント欄簡易アバター機能
コメント欄は新鮮な風をブログに吹き込ませてくれる便利なやつですが、上手く賑わってくれないとちょっぴり寂しいやつでもあります。
そんなコメント欄を少しかわいくできないものかと考えて、簡易アバター機能を組み込んでみました。
サイト管理者側がアバター画像を用意して、その中から利用者が選んで使う形式を取っています。
この画像は初期状態のアバター選択ウィンドウのもの。
アイコン画像はCreative Tail - 40 Flat Animal Iconsのものを使用しています。
もちろんこのアバター画像は自由に差し替え可能!
何か作品を作っている方なら、作品キャラのアバターを使うと楽しいことになるんじゃないでしょうか。
ちなみにコメント投稿時のemail欄はアバター機能を実装するための犠牲になってしまったので、使用不可状態になってます。
ライトボックス機能
ライトボックスというのは、「クリックすると画像がブラウザ中央にハイライト表示される」スクリプトのことを指すのですが。
絵描きさんのポートフォリオサイトでは、ライトボックスが高い確率で採用されている勝手なイメージを持っています。
クリック(タップ)で拡大します。
こういうやつ。
絵描きさんをメインターゲットとしている以上、これは喜ばれるお節介じゃないかと思ったので、テンプレートに組み込んでおきました。
よって、「ライトボックスを使いたいがために自前で頑張って導入する」必要性はナッシング!
簡単に取っ払えるようにもしておいたので、そういうのいらないタイプの人は取っ払って使ってくださいね。
SEO対策など
SEO。それは検索エンジンの支配を受けしネット世界において、検索上位にのし上がるためには避けられない戦い……であった時代も過去にはありました。(唐突な思い出話)
今はgoogle先生の検索表示アルゴリズムの関係から、昔のようにSEO対策テクニックが重要な時代ではないとされていますが。
一応ながらこのテンプレートも、最新のSEO対策を念頭に置いた内部構造にはしてあります。
以下、組み込んだ裏機能のうち主要な部分。
機能
説明
URLの正規化
検索インデックスに重複ページが登録されないようにする
Twitterカード
記事がTwitter上へシェアされた際にリンクが装飾される
画像先読み(prefetch)
同一カテゴリ次記事内画像を先読み※
schema.org
検索結果で表示される追加情報などを付記するやつ。
個別記事にBlogPostingとパンくずリスト情報を付与
※ 「高速化のために必要ないページを先読みさせまくる」のは個人的にあまり好きではないので、一気読みの際に狙いを絞って効力を発揮する仕様にしています。
カスタマイズについて
こういうテンプレートはカスタマイズしてなんぼ。望むままにカスタマイズして使ってやってください。
制作者として想定しているテンプレートカスタマイズ方法を載せた解説記事を別途書く予定なので、そちらも参考にしてみてくださいね。
ただ、想定の幅を越えたカスタマイズ方法についてはおそらく解説しないと思いますのであしからず。
それぞれのサイトで行いたい方向性が千差万別な以上、全てをカバーすることはほぼ不可能なんよ……。
あなたのサイトをあなた好みにカスタマイズできるのは、この世界であなた一人だけ。
カスタマイズ道の奥地への到達を望むなら、カスタマイズぢから、つけよう!
他仕様一覧
項目
内容
スクリプトローダー
loadjs
lazyloadスクリプト
lazysizes
lightboxスクリプト
baguetteBox.js
ライセンス
MIT License
PC版動作確認ブラウザ
chromeとfirefoxの最新版※
スマホ版動作確認
AndroidとiPhone両方で実施済み※2
備考
IE非対応
※ 正確に言えばlinux版chromiumとfirefoxの最新版で動作確認しています。
※2 スマホ版動作確認については、様々な方のご協力を受けて成し遂げました。多謝。
スペシャルサンクス
LV3さん
当テンプレート計画発案者。
Web漫画作家としての視点で、テンプレート全体の監修をしていただきました。
融さん
テスター。主にiPhoneでの動作確認をしていただきました。
ヤマノス読者のみなさん
先に紹介したLV3さんのサイトで、straw_manの先行導入テストを行っていたのですが。
その際に、いろいろとご意見不具合報告などをしていただきました。

まださなぎ © Proudly written by dettalant
StrawMan Template総合案内板へ戻る
- 関連記事
-
- straw_manテンプレート見た目変更ペルソナ導入解説記事
- straw_manテンプレート初期導入設定解説記事
- Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
- straw_manテンプレートlazyload設定解説記事
- straw_manテンプレートlaymicビューワー関連設定解説記事
fc2ブログ内にてstraw_manテンプレートを導入したいのですが、検索に出てきません。
名も無きハタハタ さんへの返信
FC2ブログ管理画面から➔テンプレートの設定➔共有テンプレート追加➔作者『dettalant』、テンプレート名『straw_man 』、テンプレートの説明『漫画』のいずれかで検索すると出てきます。
おそらくジャンルをアダルト設定にしていると検索にでないようです。
名も無きハタハタ さんへの返信
製作者と連絡が取れず上げ直しや変更ができないので、”テンプレートの説明『漫画』”で検索してもらう他ありません。
そこで、同様のお問い合わせも多いので当サイトで配布してしまうことも考えています。
公開から数年経っており、FC2の共有から見つける方より通常の検索で知る方の方が多いと考えており、それならば知った流れで導入出来たほうが早いかなと。
れべるさん さんへの返信
場所は、案内板のもくじに『StrawMan Templateと亜種の配布』に配布記事のリンクがあります。
FC2で見つからない場合はこちらからお願いしいます。