困ったときのStrawMan Template総合案内板

このテンプレ気になるんだけどどんな感じなん?
ここをカスタマイズしたいんだけど調べ方がわかんない。
そんなときは、下記のもくじを御活用ください。
漫画特化型テンプレート『StrawMan Template』について
・StrawMan Templateの紹介
・StrawMan Templateと亜種の配布
・StrawMan Templateの機能の紹介
・見本サイト
・SEO対策
・仕様一覧
・テンプレートの開発者たちと権利
StrawMan Templateの導入(チュートリアル1)
・FC2ブログとの契約
・StrawMan Templateのダウンロード
・FC2側でStrawMan Templateを有効にする初期設定
・FC2の地雷機能をOFFにする
・SSL化でセキュリティを強化する
テンプレート導入初期のカスタマイズ(チュートリアル2)
・TOP画像の差し替え
・カスタムテーマの設定
・グローバルナビゲーション(メニュー)の設定
各種カスタマイズ
・見た目のカスタマイズ
・機能のカスタマイズ
画像から探すカスタマイズ
・PCホームの案内画像
・スマホ/タブレットホームの案内画像
・カスタムテーマの案内画像
・記事内の案内画像
各機能の使い方
・漫画ビューワーlaymic
・ライトボックス
・ギャラリー
・アニメーションジャンプ
・ペルソナ
エンジニアの解説記事
・Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
・straw_manテンプレート初期導入設定解説記事
・straw_manテンプレートライトボックス関連設定解説記事
・straw_manテンプレートスムーススクロール機能設定解説記事
・straw_manテンプレートコメントアバター設定解説記事
・straw_manテンプレート見た目変更ペルソナ導入解説記事
・straw_manテンプレートlaymicビューワー関連設定解説記事
・straw_manテンプレートでの修正済み不具合一覧記事
・laymicスクリプト配布ページ
・laymicビューワーの汎用サイト向け導入説明記事
・straw_manテンプレートlazyload設定解説記事
オススメ外部機能
・googleアナリティクス
・Search Console
・Push7
サイト運営の豆知識
・使ってはいけないFC2の地雷機能
・レスポンシブとサイドバーの関係
・サイドバープラグインのまとめ方
・サイト運営と広告の関係
・作家のためのサイト集客術
・大事な記事の見た目を整える
・ファビコンでオリジナリティを出す
・記事編集リンクを追加する
・文字でデザインを引き締める
・引用ルールを守りドメインを強くする
・ファンコミュニティを作る
記事一覧
・ディレクターの記事
・エンジニアの記事
・他のサイトの記事
修正済み不具合一覧
漫画特化型テンプレート『StrawMan Template』について
テンプレートの紹介など、導入を迷う方向けのプレゼン記事へのリンク集
StrawMan Templateの紹介
エモーショナルな視点での紹介
無料で始めるweb漫画サイトを作る方法
技術的視点での紹介
Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
StrawMan Templateと亜種の配布
漫画ビューワー付きFC2テンプレート『StrawMan Template』と亜種の配布
StrawMan Templateの機能の紹介
エモーショナルな視点での機能紹介
漫画特化型テンプレートStrawMan Templateの機能の紹介
技術的視点での機能紹介
組み込み機能詳細
見本サイト
サンプルサイト
StrawMan Template sample
カスタマイズを施したサンプルサイト
ヤマノス
SEO対策
StrawMan TemplateのSEO対策の解説
SEO対策など
仕様一覧
StrawMan Templateの技術的仕様
他仕様一覧
テンプレートの開発者たちと権利
開発者と権利者について
スタッフクレジット
StrawMan Templateの導入(チュートリアル1)
FC2との契約からテンプレートの有効化までの解説
FC2ブログとの契約
FC2との契約のチュートリアル
FC2との契約
StrawMan Templateのダウンロード
テンプレートのダウンロード方法
StrawMan Templateのダウンロード
FC2側でStrawMan Templateを有効にする初期設定
テンプレートを有効化する手順
StrawMan Templateの初期設定
FC2の地雷機能をOFFにする
使いにくい?それいる?
そういうレベルではありません、使うだけで機能不全を起こすアルバム機能。
地雷機能アルバムの無効化
SSL化でセキュリティを強化する
これからの主流はSSLで間違いなし。
とにもかくにもSSL化してしまおう!
SSL(https)を有効にする
テンプレート導入初期のカスタマイズ(チュートリアル2)
導入後、最低限必要なカスタマイズ方法のリンクです。
straw_manテンプレート初期導入設定解説記事
TOP画像の差し替え
・サイト上部の画像の差し替え方
1: ヘッダー画像差し替え
・TOP画像に推奨される画像サイズ
1.2: ヘッダー画像の推奨画像サイズリスト
カスタムテーマの設定
・カスタムテーマの設定方法
2: スマホ版カスタムテーマ画像差し替え
・カスタムテーマに推奨される画像サイズ
2.1: カスタムテーマ背景画像の推奨サイズ
・ライト・ダークテーマ2種のカスタムテーマ設定
2.2: ライトテーマとダークテーマで違うカスタムテーマ背景画像を指定する
・メニューにかかるフィルターの設定
2.3: 初期状態で適用されている各種マスクについて
2.4: ダークテーマ時のグレイスケールフィルタ解除
・その他カスタムテーマのカスタマイズ
2.5: その他カスタムテーマ機能カスタマイズ
グローバルナビゲーション(メニュー)の設定
・メニュー項目の設定方法
3: グローバルナビゲーション部位の差し替え
3.1: 単一リンクの記述方法
3.2: 入れ子項目の記述方法
3.3: グローバルナビゲーションについての注意点1
3.3: グローバルナビゲーションについての注意点2
各種カスタマイズ
StrawMan Templateのカスタマイズのリンクです。
カスタマイズしたい個所の名称がわからない場合は画像から探すカスタマイズを参照ください。
見た目のカスタマイズ
各カラー、区切り線、文字、表示幅などの外観に関するカスタマイズ。
背景色の変更(暫定版)
見出し・目次・ジャンプ機能で見た目を整える。
StrawMan Templateで大事な記事の見た目を整える方法
サイドバーの見た目を変える(タイトル/区切り線/余白)
サイドバーのプチカスタマイズ(暫定版)
コメントアイコンを変える
straw_manテンプレートコメントアバター設定解説記事
レイアウトを着せ替えする
straw_manテンプレート見た目変更ペルソナ導入解説記事
ファビコンを設置する
StrawMan Templateでファビコンを設置する方法
記事の行間と本文記事概要の表示行数の調整
StrawMan Templateで文字のレイアウトを整える方法
機能のカスタマイズ
記事編集リンクを追加する
StrawMan Templateの個別記事に記事編集リンクを追加する方法
画像から探すカスタマイズ
ここをこう変えたい!
ここだよここ、えーとなんて言えばいいんだろう???
そんなときは案内画像を御活用ください。
PCホームの案内画像

①
1: ヘッダー画像差し替え
1.2: ヘッダー画像の推奨画像サイズリスト
②
3: グローバルナビゲーション部位の差し替え
3.1: 単一リンクの記述方法
③
3.2: 入れ子項目の記述方法
3.3: グローバルナビゲーションについての注意点1
3.3: グローバルナビゲーションについての注意点2
アニメーションジャンプの設定
④
タイトル文字のサイズ変更
⑤
StrawMan Templateで文字のレイアウトを整える方法
⑥
背景色の変更(暫定版)
⑦
右カラムの設定
広告の設定
サイドバー、タイトル/区切り線/余白のカスタマイズ(暫定版)
⑧
プロフィールの設定
FC2ブログの個人設定で「これだけは最低でもやった方が良い」と思うものを説明したいと思います。今回は「ブログの体裁」を重視し、どんな設定を行うとどんな表示になるのか図解もします。...
⑨
本文の表示幅・右カラムの表示幅・本文カラム区切り幅の変更
straw_manテンプレート見た目変更ペルソナ導入解説記事
スマホ/タブレットホームの案内画像

①
1: ヘッダー画像差し替え
1.2: ヘッダー画像の推奨画像サイズリスト
②
3: グローバルナビゲーション部位の差し替え
3.1: 単一リンクの記述方法
③
3.2: 入れ子項目の記述方法
3.3: グローバルナビゲーションについての注意点1
3.3: グローバルナビゲーションについての注意点2
アニメーションジャンプの設定
④
タイトル文字のサイズ変更
⑤
StrawMan Templateで文字のレイアウトを整える方法
⑥
背景色の変更(暫定版)
straw_manテンプレート見た目変更ペルソナ導入解説記事
カスタムテーマの案内画像

①
ボーダーライン・アイコン・文字カラーの変更
②
2: スマホ版カスタムテーマ画像差し替え
2.1: カスタムテーマ背景画像の推奨サイズ
2.2: ライトテーマとダークテーマで違うカスタムテーマ背景画像を指定する
③
2.3: 初期状態で適用されている各種マスクについて
2.4: ダークテーマ時のグレイスケールフィルタ解除
カスタムテーマ内のカラーフィルターの変更
記事内の案内画像

①
StrawMan Templateで文字のレイアウトを整える方法
StrawMan Templateで大事な記事の見た目を整える方法
②
SNSの追加と変更
③
StrawMan Templateの個別記事に記事編集リンクを追加する方法
④
タグの設定
いつもFC2ブログをご利用いただきありがとうございます。FC2ブログスタッフです。今回はキーワードにタグをつけてブログ内をタグで検索したり、同じタグをつけたユーザーと繋がることが可能になる「ユーザータグ」についてご紹介します。
⑤
FC2ランキングへの登録
いつもFC2ブログをご利用いただきありがとうございます。FC2ブログスタッフです。FC2ブログには、ランキングが2種類あることをご存知でしょうか?
⑥
straw_manテンプレートコメントアバター設定解説記事
各機能の使い方
StrawMan Templateに搭載された、各機能の使い方と設定の解説です。
漫画ビューワーlaymic
見開き表示・縦横ページ送り・ページ進捗バー・サムネイルなど、マンガを公開するうえで最上を目指した高機能ビューワーです。
ビューワーの習熟度による各種設定が可能なため、読者の閲覧スタイルに応じたカスタマイズにも対応しています。
さらに、SNSより直接ビューワーの起動が可能なためSNSで最高の状態での漫画公開も可能です。
html/cssが編集可能なサービスで利用できるlaymicスクリプトが公開されました。
https://t.co/8PXiANFZHX
— リラ (@dettalant) January 13, 2020
laymic最新版をgithubに上げました。これでもうstraw_man以外のサイトでも使える状態なのですが、導入説明が不親切気味なので、ここについてはまた記事を書こうと思っています。
dettalant/laymic
Contribute to dettalant/laymic development by creating an account on GitHub.

laymicビューワーの汎用サイト向け導入説明記事
straw_man以外のサイトに対して、laymicビューワーを導入するための説明をしていきます。
laymicスクリプトの詳細は製作者にお願いします。
主な機能
・全画面表示
・横読み縦読みの変更
・サムネイルによる全ページ表示とジャンプ機能
・カスタムサムネイル画像の設定
・ページ進捗バーによる残ページ表示
・SNSからのビューワー起動
・作者が想定した見せ方を初期設定に固定
・ビューワー内のガイドアイコンのON/OFF
・左始まり・右始まりの変更
・横セリフ・英訳に対応した右ページ送り
・各種設定の統合設定
・HTMLの使用可
・告知ページの追加
・ズーム機能
※laymicビューワーは時機を見てオープンソース化しますので、FC2以外のhtml/cssが編集可能なサービスでもご利用いただけます。
確認されている不具合について
2020/01/13:laymic_v2にて修正いたしました・ビューワーのラストページが単ページの場合、一つ前のページと原稿が重複する。)
→工数の関係からv2.0での対応とさせてください。
・暫定的な対応策
最後が単ページになった場合は、白紙画像(たとえば2life9999.pngという白紙画像)や透過pngを挿入し見開きにすることで対応願います。
(単行本のページ調整に白紙ページをはさむ要領
解説とサンプルはコチラ
漫画ビューワーlaymic
使い方はコチラ
基本的な使用方法
webマンガビューワーlaymic完全攻略ガイド
ライトボックス
ページを移動せず、画像を1~複数枚拡大表示する機能です。
主な機能
・画像の拡大表示
・複数枚画像のスライド表示
・画像へのテキスト追加
・サムネイル画像への装飾によるライトボックスリンクの提示
1: 基本的な使用方法
2: ヤマノスで使っているライトボックス装飾カスタマイズコード
2.1: ライトボックス装飾コード適用時のhtmlコード書き方
ギャラリー
画面の表示幅に合わせ、自動で整列する画像の一覧機能です。
主な機能
・画像の自動揃え
・透明ボックスによるサムネイル崩れの防止
・テキストの併記
・画像のみのタイトなパネル表示
ギャラリーの表示見本
3: アートギャラリー用カスタマイズコード
3.3: ギャラリー用HTMLコードテンプレート
アニメーションジャンプ
アニメーションを使い、ページ内を移動する機能です。
straw_manテンプレートスムーススクロール機能設定解説記事
ペルソナ
ペルソナ機能とは、StrawMan Templateの見た目を変える着せ替え機能です。
cssへの追記でレイアウトを変えるため、テンプレートを変更せずにご利用いただけます。
ペルソナ:super_flatサンプルサイト

ヤマノス
マンガ投稿サイトの解説・アマ作家向けのマネタイズと発信支援・漫画特化型テンプレートstraw_manと漫画ビューワーlaymicのサポート。土着信仰/神道/民俗学をベースにした秋田県推しweb漫画『神様セカンドライフ』の発信基地。

多摩ノ巣
東京は三多摩地域に住む人の徒然日記。

雲梨恋愛漫画
恋愛漫画を公開してますここを拠点にきゅんきゅんからドロドロまで配信中!
straw_manテンプレート見た目変更ペルソナ導入解説記事
オススメ外部機能
漫画公開にオススメな外部サービスの紹介と導入方法へのリンク集。
googleアナリティクス
googleアナリティクスの契約から導入まで
Search Console
Search Consoleの契約から導入まで
Push7
プッシュ通知送信サービス『Push7』
サイト運営の豆知識
サイト作りからサイト運営まで、見落としがちなヒント集。
使ってはいけないFC2の地雷機能
使いにくい?それいる?
そういうレベルではありません、使うだけで機能不全を起こすアルバム機能。
地雷機能アルバムの無効化
レスポンシブとサイドバーの関係
PC/タブレット/スマホ。
表示幅で変わるレイアウトと変動するサイドバーについての豆知識。
レスポンシブデザインとサイドバーの位置
サイドバープラグインのまとめ方
サイドバーを整理する方法の豆知識。
サイドバープラグインのまとめ方
サイト運営と広告の関係
StrawMan Templateの広告設置ガイドと広告の考え方。
サイト運営と広告の関係
作家のためのサイト集客術
読者を集め充実した創作ライフを!
ファンと作家のためのサイト集客術
大事な記事の見た目を整える
コピペで完成、見た目を整え読者とgoogleに猛烈アピール!
StrawMan Templateで大事な記事の見た目を整える方法
ファビコンでオリジナリティを出す
小さなおしゃれで目立たせる
StrawMan Templateでファビコンを設置する方法
記事編集リンクを追加する
気付いたときに即編集!
・StrawMan Templateの個別記事に記事編集リンクを追加する方法
文字でデザインを引き締める
サイトに合わせた余白デザイン
・StrawMan Templateで文字のレイアウトを整える方法
引用ルールを守りドメインを強くする
慣れれば簡単引用ルール、ドメイン強化で一歩リード
・正しい著作物の引用とリンク設定でドメインパワーを上げる方法
関連記事
・あまねさーん!google検索から人を引っ張れー!!
ファンコミュニティを作る
ファンと一緒に創作活動
・ファンコミュニティを作り創作を長続きさせる方法
記事一覧
ディレクターの記事
・困ったときのStrawMan Template総合案内板
・無料で始めるweb漫画サイトを作る方法
・漫画特化テンプレートStrawMan Templateの機能の紹介
・[StrawMan Template]FC2ブログの契約と初期設定ガイド
・StrawMan Templateの各種機能の表示見本
・[FC2ブログ対応] オススメ外部機能の紹介と実装方法
・FC2ブログとstraw_manの運用に役立つヒント集
・StrawMan Templateで大事な記事の見た目を整える方法
・StrawMan Templateの簡易コード置き場
・StrawMan Templateでファビコンを設置する方法
・漫画ビューワーlaymicのアップデートとスクリプト版配信のお知らせ
・StrawMan Templateの個別記事に記事編集リンクを追加する方法
・webマンガビューワーlaymic完全攻略ガイド
・StrawMan Templateで文字のレイアウトを整える方法
・あまねさーん!google検索から人を引っ張れー!!
・正しい著作物の引用とリンク設定でドメインパワーを上げる方法
・ファンコミュニティを作り創作を長続きさせる方法
・StrawMan Templateとlaymic解説記事の移植とビターな話
エンジニアの記事
・Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
・straw_manテンプレート初期導入設定解説記事
・straw_manテンプレートライトボックス関連設定解説記事
・straw_manテンプレートスムーススクロール機能設定解説記事
・straw_manテンプレートコメントアバター設定解説記事
・straw_manテンプレート見た目変更ペルソナ導入解説記事
・straw_manテンプレートlaymicビューワー関連設定解説記事
・straw_manテンプレートでの修正済み不具合一覧記事
・laymicスクリプト配布ページ
・laymicビューワーの汎用サイト向け導入説明記事
・straw_manテンプレートlazyload設定解説記事
他のサイトの記事
・ブログつくり日記 1 2 3 4 5
・straw_manテンプレート友の会
・漫画ブログ作ろ!
- 関連記事
『太字』太~く『/太字』
『色:007BC3』色変わ~る『/色』
『』は[]に置き換える
↓
太~く
色変わ~る
備忘録
スパムフィルタに掛かったときのために投稿前に本文をコピーすること!
背景色の変更(暫定版)
管理画面→テンプレートの設定→ctrl+Fで以下の『』内を検索
ライトテーマの背景色変更→『4.1: light theme』
ダークテーマの背景色変更→『4.2: dark theme』
検索結果の区切り線囲いがプログラム解説でその下が背景色設定
ライトテーマを例にすると
* #eee: ベース背景色
* #fafafa: 記事背景色
* #e2e2e2: サブ背景色
* #333: 文字色
* #023db5: リンク色(未閲覧、閲覧済み両方で同じ色)
上記がライトテーマで使われているデフォルトカラーの解説。
下へスクロールしていくと各背景色の項目がズラリ
ベース背景色を変える場合はこの部分
/* ベース背景色 */
background: #eee;
#eeeをお好みのカラーに変更
HTMLでのカラーの指定は、以下のリンクより色を選ぶとカラーコードが表示されるのでそれを入力。
HTMLカラーチャートのリンク
https://html-color-codes.info/japanese/
サブ背景色の場合はこの部分
/* サブ背景色 */
background: #e2e2e2;
#e2e2e2をお好みのカラーに変更
といったように、各項目を変えていく
より細かな設定は記事の公開をお待ちください。