
作業工程(flow chart, ふろーちゃーと)などを視覚的にわかりやすくするデザイン提案です。
はじめに
- 縦型
- 長文に耐えうるもの
横フローははみ出したりなど調整が難しくなることがありますので、縦配置に絞りました。また、各ステップの文章量が多くなる可能性を想定し、長文でわかりづらくなるデザインも省きました。
htmlは共通です。CSSはデザイン別です。テンプレートのスタイルシート最終に記載します。
複数導入する方は自己責任でクラス名を変更してご利用ください。
共通html
記事を書く際は HTML編集 に切り替えてください。
旧投稿画面 をご利用の方は、改行の扱いを HTMLタグのみ に変更する必要があります。
<!-- フローチャート -->
<ol class="flowchart">
<!-- 工程を増やすにはここから複製 -->
<li>
<div class="flowchart-content">
<div class="flowchart-title">タイトル</div>
<p>文章</p>
</div>
</li>
<!-- 工程を増やすにはここまで複製 (この直下(下の行)にペースト, インデントに全角スペースを利用しないよう注意) -->
</ol>
<!-- フローチャートここまで -->
デザインによってはラッパーを減らすことができますが、共通化するために上記の形としました。
以降のサンプルはstep2のみ p要素 を2つ利用しています。文章は必ずしもp要素でマークアップする必要はありませんが、できるだけ雛形に近いかたちにしておくと混乱しなくて済むかと思います。
雛形の保存は以下の記事を参考に。
【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ FC2ブログの管理画面のデザインが刷新されまして、これまで以上に WYSIWYG(見たまま編集)とHTML編集の選択 がはっきりするようになったのではないかと思います。今回はHTML編集モードでの記事作成に便利なツールをご紹介します。...
コメントを付けていますが不要ならば削除してください。FC2ブログでは ソースコードのインデントに全角スペースを利用してしまう方がとても多い です。インデントは必ず半角スペースで行う よう注意してください。インデントもコメント同様、不要ならば取り除いても構いません。
CSS
テンプレートで既に調整されていそうな内容には上書きできるよう !important を付けてありますが必ずしも必要とは限りません。また逆に、指定が効かない部位にはこの方法(important指定)が有効なこともあります。
カスタマイズの際に作業が煩雑にならないよう calc function や custom properties などを利用しています。
シンプル
-
基本設計
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
実施設計
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
見積もり
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
控えめ
* ドットの色を交互にしてあります(奇数は塗りつぶし, 偶数は中貫き)
-
基本設計
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
実施設計
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
見積もり
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ちょっと複雑
* このデザインでは最終工程横にも縦線が付きます。
-
基本設計
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
実施設計
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-
見積もり
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
まとめ
プロダクト系ブログで大まかな流れを説明しておきたいときなどに便利ではないかな、と思います。注意点としては、番号を大きくしすぎたり番号横余白を大きく取りすぎるなど、説明の左横の領域が多すぎるとスマートフォンで説明が見づらくなる可能性がありますのでほどほどに。
There are no comments yet.