メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

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

2019/11/01  09:00
2
この記事は、StrawMan Templateの案内板ライクなリンク集になります。


道の駅案内板
このテンプレ気になるんだけどどんな感じなん?
ここをカスタマイズしたいんだけど調べ方がわかんない。


そんなときは、下記のもくじを御活用ください。


漫画特化型テンプレート『StrawMan Template』について
・StrawMan Templateの紹介
・StrawMan Templateの機能の紹介
・見本サイト
・SEO対策
・仕様一覧
・テンプレートの開発者たちと権利
・もっと広まれStrawMan Template

StrawMan Templateの導入
・FC2ブログとの契約
・StrawMan Templateのダウンロード
・FC2側でStrawMan Templateを有効にする初期設定
・FC2の地雷機能をOFFにする
・SSL化でセキュリティを強化する

テンプレート導入初期のカスタマイズ
・TOP画像の差し替え
・カスタムテーマの設定
・グローバルナビゲーション(メニュー)の設定

各種カスタマイズ
・見た目のカスタマイズ
・機能のカスタマイズ

画像から探すカスタマイズ
・PCホームの案内画像
・スマホ/タブレットホームの案内画像
・カスタムテーマの案内画像
・記事内の案内画像

各機能の使い方
・漫画ビューワーlaymic
・ライトボックス
・ギャラリー
・アニメーションジャンプ
・ペルソナ

オススメ外部機能
・googleアナリティクス
・Search Console
・Push7

サイト運営の豆知識
・使ってはいけないFC2の地雷機能
・レスポンシブとサイドバーの関係
・サイドバープラグインのまとめ方
・サイト運営と広告の関係
・作家のためのサイト集客術
・大事な記事の見た目を整える

記事一覧
・ディレクターの記事
・エンジニアの記事

修正済み不具合一覧




漫画特化型テンプレート『StrawMan Template』について


テンプレートの紹介など、導入を迷う方向けのプレゼン記事へのリンク集


StrawMan Templateの紹介


エモーショナルな視点での紹介

無料で始めるweb漫画サイトを作る方法


技術的視点での紹介

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






StrawMan Templateの機能の紹介


エモーショナルな視点での機能紹介

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


技術的視点での機能紹介

組み込み機能詳細







見本サイト


サンプルサイト
StrawMan Template sample

カスタマイズを施したサンプルサイト
ヤマノス






SEO対策


StrawMan TemplateのSEO対策の解説

SEO対策など






仕様一覧


StrawMan Templateの技術的仕様

他仕様一覧






テンプレートの開発者たちと権利


開発者と権利者について

スタッフクレジット






もっと広まれStrawMan Template


StrawMan Templateをご利用中のサイトを一部紹介



やた(痔ブリール)のツレヅレブログ

妊娠&育児、時々ゲーム。漫画家のぼちぼちブログ


TAMANOSU

好きなまんがを英訳したり、関連地を旅行したり。



ヤマノス

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










StrawMan Templateの導入


FC2との契約からテンプレートの有効化までの解説


FC2ブログとの契約


FC2との契約のチュートリアル

FC2との契約






StrawMan Templateのダウンロード


テンプレートのダウンロード方法

StrawMan Templateのダウンロード






FC2側でStrawMan Templateを有効にする初期設定


テンプレートを有効化する手順

StrawMan Templateの初期設定







FC2の地雷機能をOFFにする


使いにくい?それいる?
そういうレベルではありません、使うだけで機能不全を起こすアルバム機能。

地雷機能アルバムの無効化






SSL化でセキュリティを強化する


これからの主流はSSLで間違いなし。
とにもかくにもSSL化してしまおう!

SSL(https)を有効にする







テンプレート導入初期のカスタマイズ


導入後、最低限必要なカスタマイズ方法のリンクです。

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テンプレート見た目変更ペルソナ導入解説記事







画像から探すカスタマイズ


ここをこう変えたい!
ここだよここ、えーとなんて言えばいいんだろう???

そんなときは案内画像を御活用ください。


PCホームの案内画像


PC表示の案内


1: ヘッダー画像差し替え
1.2: ヘッダー画像の推奨画像サイズリスト


3: グローバルナビゲーション部位の差し替え
3.1: 単一リンクの記述方法


3.2: 入れ子項目の記述方法
3.3: グローバルナビゲーションについての注意点1
3.3: グローバルナビゲーションについての注意点2
アニメーションジャンプの設定


タイトル文字のサイズ変更


記事本文表示行の変更


背景色の変更(暫定版)


右カラムの設定
広告の設定
サイドバー、タイトル/区切り線/余白のカスタマイズ(暫定版)


プロフィールの設定

FC2ブログを開設したら最低でもこの設定は済ませよう

FC2ブログの個人設定で「これだけは最低でもやった方が良い」と思うものを説明したいと思います。今回は「ブログの体裁」を重視し、どんな設定を行うとどんな表示になるのか図解もします。...




本文の表示幅・右カラムの表示幅・本文カラム区切り幅の変更
straw_manテンプレート見た目変更ペルソナ導入解説記事







スマホ/タブレットホームの案内画像


スマホ/タブレットホームの案内


1: ヘッダー画像差し替え
1.2: ヘッダー画像の推奨画像サイズリスト


3: グローバルナビゲーション部位の差し替え
3.1: 単一リンクの記述方法


3.2: 入れ子項目の記述方法
3.3: グローバルナビゲーションについての注意点1
3.3: グローバルナビゲーションについての注意点2
アニメーションジャンプの設定


タイトル文字のサイズ変更


記事本文表示行数の変更


背景色の変更(暫定版)
straw_manテンプレート見た目変更ペルソナ導入解説記事






カスタムテーマの案内画像


カスタムテーマの案内


ボーダーライン・アイコン・文字カラーの変更


2: スマホ版カスタムテーマ画像差し替え
2.1: カスタムテーマ背景画像の推奨サイズ
2.2: ライトテーマとダークテーマで違うカスタムテーマ背景画像を指定する


2.3: 初期状態で適用されている各種マスクについて
2.4: ダークテーマ時のグレイスケールフィルタ解除
カスタムテーマ内のカラーフィルターの変更






記事内の案内画像


記事内の案内


本文文字サイズ・行幅の変更
StrawMan Templateで大事な記事の見た目を整える方法


SNSの追加と変更


記事編集リンクの追加


タグの設定

ユーザータグを使ってみよう!

いつもFC2ブログをご利用いただきありがとうございます。FC2ブログスタッフです。今回はキーワードにタグをつけてブログ内をタグで検索したり、同じタグをつけたユーザーと繋がることが可能になる「ユーザータグ」についてご紹介します。ユーザータグを使えば、その記事のキーワードを設定し、後で検索して記事を引くときの目印となりますまた、カテゴリーよりも記事を細かく分類できますユーザータグの追加方法※ユーザータグを設...




FC2ランキングへの登録

実はFC2ブログの「ランキング」は二種類あります

いつもFC2ブログをご利用いただきありがとうございます。FC2ブログスタッフです。FC2ブログには、ランキングが2種類あることをご存知でしょうか?FC2ブログに付随している「ジャンルランキング」と、独立したサービスの「FC2ブログランキング」です。本日はこちらの2つの違いについてご説明します。FC2ジャンルランキングとは? ブログの「アクセス数」がカウントされるランキングです。ジャンルはブログ管理画面の環境設定で選択...




straw_manテンプレートコメントアバター設定解説記事







各機能の使い方


StrawMan Templateに搭載された、各機能の使い方と設定の解説です。


漫画ビューワーlaymic


見開き表示・縦横ページ送り・ページ進捗バー・サムネイルなど、マンガを公開するうえで最上を目指した高機能ビューワーです。
ビューワーの習熟度による各種設定が可能なため、読者の閲覧スタイルに応じたカスタマイズにも対応しています。

さらに、SNSより直接ビューワーの起動が可能なためSNSで最高の状態での漫画公開も可能です。


主な機能
・全画面表示
・横読み縦読みの変更
・サムネイルによる全ページ表示とジャンプ機能
・ページ進捗バーによる残ページ表示
・SNSからのビューワー起動
・作者が想定した見せ方を初期設定に固定
・ビューワー内のガイドアイコンのON/OFF
・左始まり・右始まりの変更
・横セリフ・英訳に対応した右ページ送り
・各種設定の統合設定
・HTMLの使用可
※ピンチ操作と拡大機能はv2.0からの対応になります。
※laymicビューワーは時機を見てオープンソース化しますので、FC2以外のhtml/cssが編集可能なサービスでもご利用いただけます。

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

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




解説とサンプルはコチラ
漫画ビューワーlaymic

使い方はコチラ
基本的な使用方法







ライトボックス


ページを移動せず、画像を1~複数枚拡大表示する機能です。

主な機能
・画像の拡大表示
・複数枚画像のスライド表示
・画像へのテキスト追加
・サムネイル画像への装飾によるライトボックスリンクの提示


1: 基本的な使用方法

2: ヤマノスで使っているライトボックス装飾カスタマイズコード

2.1: ライトボックス装飾コード適用時のhtmlコード書き方







ギャラリー


画面の表示幅に合わせ、自動で整列する画像の一覧機能です。

主な機能
・画像の自動揃え
・透明ボックスによるサムネイル崩れの防止
・テキストの併記
・画像のみのタイトなパネル表示

ギャラリーの表示見本

3: アートギャラリー用カスタマイズコード

3.3: ギャラリー用HTMLコードテンプレート







アニメーションジャンプ


アニメーションを使い、ページ内を移動する機能です。

straw_manテンプレートスムーススクロール機能設定解説記事







ペルソナ


ペルソナ機能とは、StrawMan Templateの見た目を変える着せ替え機能です。
cssへの追記でレイアウトを変えるため、テンプレートを変更せずにご利用いただけます。


ペルソナ:super_flatサンプルサイト

TAMANOSU

好きなまんがを英訳したり、関連地を旅行したり。



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








オススメ外部機能


漫画公開にオススメな外部サービスの紹介と導入方法へのリンク集。


googleアナリティクス


googleアナリティクスの契約から導入まで








Search Consoleの契約から導入まで







Push7


プッシュ通知送信サービス『Push7』








サイト運営の豆知識


サイト作りからサイト運営まで、見落としがちなヒント集。


使ってはいけないFC2の地雷機能


使いにくい?それいる?
そういうレベルではありません、使うだけで機能不全を起こすアルバム機能。

地雷機能アルバムの無効化







レスポンシブとサイドバーの関係


PC/タブレット/スマホ。
表示幅で変わるレイアウトと変動するサイドバーについての豆知識。

レスポンシブデザインとサイドバーの位置







サイドバープラグインのまとめ方


サイドバーを整理する方法の豆知識。

サイドバープラグインのまとめ方







サイト運営と広告の関係


StrawMan Templateの広告設置ガイドと広告の考え方。

サイト運営と広告の関係







作家のためのサイト集客術


読者を集め充実した創作ライフを!

ファンと作家のためのサイト集客術







大事な記事の見た目を整える


コピペで完成、見た目を整え読者とgoogleに猛烈アピール!

StrawMan Templateで大事な記事の見た目を整える方法








記事一覧



ディレクターの記事


・困ったときのStrawMan Template総合案内板
・無料で始めるweb漫画サイトを作る方法
・漫画特化テンプレートStrawMan Templateの機能の紹介
・[StrawMan Template]FC2ブログの契約と初期設定ガイド
・StrawMan Templateの各種機能の表示見本
・[FC2ブログ対応] オススメ外部機能の紹介と実装方法
・FC2ブログとstraw_manの運用に役立つヒント集
・StrawMan Templateで大事な記事の見た目を整える方法



エンジニアの記事


・Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
・straw_manテンプレート初期導入設定解説記事
・straw_manテンプレートライトボックス関連設定解説記事
・straw_manテンプレートスムーススクロール機能設定解説記事
・straw_manテンプレートコメントアバター設定解説記事
・straw_manテンプレート見た目変更ペルソナ導入解説記事
・straw_manテンプレートlaymicビューワー関連設定解説記事
・straw_manテンプレートでの修正済み不具合一覧記事



関連記事

コメント

コメントアバター画像
LV3 2019/10/27 10:39

htmlやcssを書く時に使えそうなコメント装飾コード控え

『太字』太~く『/太字』
『色:007BC3』色変わ~る『/色』
『』は[]に置き換える

太~く
色変わ~る

備忘録
スパムフィルタに掛かったときのために投稿前に本文をコピーすること!
コメントアバター画像
LV3 2019/11/02 10:42

背景色の変更(暫定版)

・ブログ全体のカラーの設定

管理画面→テンプレートの設定→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をお好みのカラーに変更

といったように、各項目を変えていく


より細かな設定は記事の公開をお待ちください。

コメントの投稿