Web漫画作家さん向けFC2テンプレート「straw_man」を作りました

（上画像はPC版ライトテーマ時のスクショです）

このサイトはFC2ブログ使ってないので、「なんでキミこれ作ったの？」といったツッコミを受けそうな部分もありますが。
僕（のようなWebサイト制作に慣れてる人）が使うためのものというより、むしろ「モダンでシンプルなブログを最低限の調整だけで誰でも構築できる」テンプレートとして作りました。

かなり自信のある出来なので、よってらっしゃい見てらっしゃい。

テンプレート情報

・項目
内容

・名称
straw_man

・別名
StrawMan Template

・制作者
dettalant

サンプルサイト

・straw_man template sample
・ヤマノス

一つ目のサイトは開発時に用いていたサイトで、（投稿記事内容を除いて）テンプレート初期状態と合わせています。
テンプレート導入時の状態の参考用としてご活用ください。


二つ目のサイトは当テンプレート開発監修をしていただいたLV3さんのサイトで、独自のカスタマイズが施されている状態です。

より実地的な活用例になるのではないかと考えています。

組み込み機能詳細

テンプレートに組み込んだ機能のうち、キャッチーで見目の良さそうな部分を紹介します。

レスポンシブデザイン

FC2ブログは「PC/スマホで別々のテンプレートを使う」機能もあるのですが、さすがに今の時代はレスポンシブデザイン一本でいいんじゃないかな……？

そんなわけで、当テンプレートでもレスポンシブデザインを採用しています。


これがPC版を想定した表示。


こちらがスマホ版を想定した表示。


表示画面サイズに応じて二つのデザインが切り替わるので、二つ別々のテンプレートをいじる必要はありません！

※ FC2ブログ環境設定の「スマートフォン版の表示設定」を「無効にする」状態の使用を想定しています。

多段項目型グローバルナビゲーション

サイトコンテンツが多くなってきた時に役立つのが、主にページ上部に表示されることが多いグローバルナビゲーション。

これは多くのサイトに導入されている一般的なもので、当然ながらこのテンプレートにも組み込んであります。


PC版ではこの画像のようにページ上部表示。
「項目をクリックしたら格納された子要素を展開する」といったこともできます。


スマホ版では左側からにゅっと出てくるドロワー形式を採用。


ページ上部に配置されてるメニューボタンか、スクロール追従型のメニューボタンを押すとグローバルナビゲーションが開かれます。

テーマ変更機能

伝統的なウェブサイトは「一つのサイトでは一つの見た目で固定」が基本でした。

しかし昨今においては「ダークテーマ機能」などのユーザー側で見た目を変えられる機能が一つのトレンドとなっています。


かくいう僕もダークテーマ大好きマンの一人であるので、このテンプレートにもテーマ変更機能を組み込んでみました。

・白を基調としたライトテーマ
・黒を基調としたダークテーマ

初期状態ではこの二種類のテーマを切り替えられるようになっています。
※画像をクリックでテーマ変更を体験できます



また、拡張性を持たせておいたので、CSSスキル次第では第三第四のテーマも追加可能ですので、どうぞご活用ください。

スマホ版カスタムテーマ機能

先も書いた通り、このテンプレートは「絵描き・漫画描き」の方をメインターゲットとしているのですが。

「絵描きは自分の描いた絵で自サイトを彩ることが大好き」
という主張をテンプレート開発中に受けたので、スマホ版グローバルナビゲーションに画像展示用の箇所を作っておきました。


たとえばライトテーマではポップな色合いで表示したり。


逆にダークテーマではシックな印象を持たせたり。

・テーマごとに別の背景画像を表示する
・テーマごとに好きなフィルターをかける

といったことも簡単に出来る作りなので、使用者のアイデアとCSSぢから次第ではあっと驚かせることもできる！　はず！


もちろん、この機能を取っ払うことも簡単なのでご安心ください。

追従ボタンの位置変更機能

・PC版: ページトップへ戻るボタン, テーマ変更ボタン
・スマホ版: ページトップへ戻るボタン, メニュー展開ボタン

各ページにおいて、これらのボタンが画面右下に固定表示される仕様になっているのですが。

画面の広いPCはともかく、スマホでは邪魔になる場合もあると思うんですよね。


なので、追従ボタンの表示位置を変更する機能も組み込んでおきました。



この機能を使えば画面右上に配置したり、


画面左下に配置したりが簡単に切り替えられます。

同一カテゴリ次記事リンク

漫画作品をブログ上で連載する場合に気にしておきたいことは、一気読みのしやすさ。

一気読みがしにくければ、一つのサイトに漫画をまとめる意味がないといっても過言じゃありません。


なので、「同じカテゴリに属している次の記事」へのリンクを自動表示する機能を組み込みました。


作品ごとにカテゴリを分けて記事を投稿することを前提とした機能になります。


これを上手く用いれば、一気読み派がスムーズに作品を追いかけていける！　はず！

コメント欄簡易アバター機能

コメント欄は新鮮な風をブログに吹き込ませてくれる便利なやつですが、上手く賑わってくれないとちょっぴり寂しいやつでもあります。

そんなコメント欄を少しかわいくできないものかと考えて、簡易アバター機能を組み込んでみました。


サイト管理者側がアバター画像を用意して、その中から利用者が選んで使う形式を取っています。


この画像は初期状態のアバター選択ウィンドウのもの。

アイコン画像はCreative Tail - 40 Flat Animal Iconsのものを使用しています。


もちろんこのアバター画像は自由に差し替え可能！

何か作品を作っている方なら、作品キャラのアバターを使うと楽しいことになるんじゃないでしょうか。


ちなみにコメント投稿時のemail欄はアバター機能を実装するための犠牲になってしまったので、使用不可状態になってます。

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ビューワー関連設定解説記事