日本生類創研GoIフォーマット検討スレッド「モックアップ付き」
Forum » フォーラムディスカッション / 財団世界観 » 日本生類創研GoIフォーマット検討スレッド「モックアップ付き」
このユーザーにより開始: Nanimono Demonai Nanimono Demonai
日付: 21 Sep 2017 14:20
投稿数: 2
rss icon RSS: 新しい投稿
概要:
モックアップ作ったのでフィードバックをください
日本生類創研GoIフォーマット検討スレッド「モックアップ付き」

このスレッドについて:日本生類創研をイメージしたGOIフォーマットのガワのモックアップを用意しました。今日この場より、ありとあらゆるアイディアを駆使したあなたの記事に使っていただいても構いません。ただし評価は保証しません。でも、正しく動作するような手伝いはします。

今回は特に、島津やHOZAN、アズワンなどの実験器具の総合機器カタログをイメージして作りました。

version.1のデザイン(レイアウト例)
しばらくの間は私のサンドボックスでも観ることができます。このThemeに使われているカラフルな表や、様々なリストの表示方法についての解説を追加できれば、そのうち消えます。

DM884Y7.png
nzj7QAB.png

このスレッドの目的: このGOIフォーマットのガワ部分をより洗練されたものにしていきたいと考えています。そのためにみなさんからのフィードバックを求めます。できれば曖昧なフィードバック(例: 「リッチさが足りません。もっと射幸心を煽るようなデザインにしてください!」)ではなく、なるべく具体的なフォードバックをいただければありがたいです。

  • 色味を変えてほしい
  • 箱を大きくしたい
  • ロゴに使っている画像をこれに差し替えてほしい
  • 文字のポイントを大きくしてほしい
  • CSSコードとモックアップを直に用意して訴えかける
  • その他、具体的に説明ができる変更内容ならなんでも

などのフィードバックをお待ちしております。

そのほかにもこれで記事を書こうと思った方の導入サポートのための質問対応や、カスタマイズも受け付けます。

目下のTODO:

  • 何か必要なパーツを追加する
  • カラフルな表の作り方や、バリエーションのあるリストの表示方法についての解説を追記する。

適用方法
以下のコードをページのどこかに貼り付けてください。

[[module css]]
/*
背景画像
*/
div#container-wrap {
 background: none !important;
}
/*
ヘッダ
*/
#header {
 padding-top: 2em;
 height: 130px;
 z-index: 10;
 background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q2.png) 10px 40px no-repeat, url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q1.png) calc(100% - 10px) calc(100% - 40px) no-repeat;
}
div #header h1 {
 margin-left: 0;
 width: 273px;
 top: 35px;
 min-height: 100px;
 position: absolute;
}
div #header h1 a {
 position: absolute;
 opacity: 0;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 1px;
}
div #header h2 {
 display: none;
}
#top-bar {
 position: absolute;
 bottom: 0px;
 margin-top: 115px;
 height: auto;
 padding: 0;
 z-index: 20;
 font-size: 90%;
}
#top-bar ul {
 float: right;
 padding-right: : 5em;
}
#top-bar a {
 color: #b5cde2;
}
#top-bar ul li a {
 border-left: none;
 border-right: none;
}
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
 color: #178cce;
 border-left: none;
 border-right: none;
}
#search-top-box-input {
 display: none;
}
#search-top-box-form input[type=submit] {
 border: none;
 border-radius: 0px;
 padding: 2px 5px;
 font-size: 90%;
 font-weight: bold;
 color: #178cce;
 background-color: #fff;
 background: none;
 box-shadow: none;
 cursor: pointer;
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
 border: none;
 color: #b5cde2;
 text-shadow: none;
 background-color: #fff;
 background: none;
 box-shadow: none;
}
#search-top-box {
 position: absolute;
 top: auto;
 bottom: 23px;
 right: 8px;
 width: 250px;
 text-align: right;
}
#header::after {
 content: '';
 position: absolute;
 width: 100%;
 margin: 0 auto;
 margin-top: 130px;
 height: 100px;
 background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q3-min-min.png) top left repeat-x;
}
/*
コンテント
*/
/* ヘッダーにかぶせない */
#main-content {
 margin-top: 100px;
}
h1, #page-title {
 color: #000;
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}
a {
 color: #b5cde2;
}
#page-content a{
 color: #00A;
}
#page-content h2{
font-weight:bold;
}
#page-content h2:before{
 content:'■しかく';
 color:#006837;
}
.page-rate-widget-box .rate-points {
 background-color: #178cce !important;
 border: solid 1px #178cce;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
 background-color: #b5cde2;
 border-top: solid 1px #178cce;
 border-bottom: solid 1px #178cce;
}
.page-rate-widget-box .cancel {
 background-color: #178cce;
 border: solid 1px #178cce;
}
.page-rate-widget-box a{
 color: #fff !important;
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
 background: #b5cde2;
 color: #fffff0;
}
.page-rate-widget-box .cancel a:hover {
 background: #b5cde2;
}
/*
リスト http://webnonotes.com/css/css-list/
*/
.defaultlist, .defaultlist li{
 padding:0px;
 margin:0px;
}
.defaultlist li{
 list-style-type:none !important;
 list-style-image:none !important;
 margin: 5px 0px 5px 0px !important;
}
.list1 li{
 position:relative;
 padding-left:20px;
}
.list1 li:before{
 content:''; 
 display:block; 
 position:absolute; 
 box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
 top:3px; 
 left:2px; 
 height:0; 
 width:0; 
 border-top: 6px solid transparent;
 border-right: 7px solid transparent;
 border-bottom: 6px solid transparent;
 border-left: 9px solid #aaa;
}
.list2 li{
 position:relative;
 padding-left:20px;
}
.list2 li:before{
 content:''; 
 height:0; 
 width:0; 
 display:block; 
 border:5px transparent solid; 
 border-right-width:0; 
 border-left-color:#aaa; 
 position:absolute; 
 top:5px; 
 left:8px;
}
.list2 li:after{
 content:''; 
 height:2px; 
 width:10px; 
 display:block; 
 background:#aaa; 
 position:absolute; 
 top:9px; 
 left:0px;
}
.list4 li{
 position:relative;
 padding-left:20px;
}
.list4 li:after, .list4 li:before{
 content:''; 
 display:block; 
 position:absolute; 
 top:4px; 
 left:8px; 
 height:11px; 
 width:4px; 
 background:#aaa; 
 border-radius:10px;
 transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 -o-transform:rotate(45deg);
}
.list4 li:before{
 top:8px; 
 left:3px;
 height:8px; 
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 -o-transform:rotate(-45deg);
}
.list5 li{
 position:relative;
 padding-left:20px;
}
.list5 li:before{
 content:''; 
 height:0px; 
 width: 90%;
 display:block; 
 position:absolute; 
 top:18px; 
 left:0px; 
 border-bottom: 1px dashed #aaa;
}
.list5 li:after{
 content:'';
 display:block; 
 position:absolute; 
 background:#aaa;
 width:5px;
 height:5px; 
 top:7px; 
 left:5px; 
 border-radius: 5px;
}
.list6 li{
 position:relative;
 padding-left:20px;
}
.list6 li:after{
 content:'';
 display:block; 
 position:absolute; 
 background:#aaa;
 width:9px;
 height:9px; 
 top:5px; 
 left:5px; 
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 -o-transform:rotate(-45deg);
}
.list7 li{
 position:relative;
 display: block;
 padding: 5px 0px 5px 30px;
 background: #ccc;
 color: #444;
 border-radius:15px 0px 0px 15px;
}
.list7 li:after{
 content:'';
 display:block; 
 position:absolute;
 width:14px;
 height: 14px;
 top:7px;
 left:5px;
 background: #fff;
 border-radius: 10px;
}
/*
表 http://tablestyler.com/#
*/
/*
背景画像
*/
div#container-wrap {
 background: none !important;
}
/*
ヘッダ
*/
#header {
 padding-top: 2em;
 height: 130px;
 z-index: 10;
 background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q2.png) 10px 40px no-repeat, url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q1.png) calc(100% - 10px) calc(100% - 40px) no-repeat;
}
div #header h1 {
 margin-left: 0;
 width: 273px;
 top: 35px;
 min-height: 100px;
 position: absolute;
}
div #header h1 a {
 position: absolute;
 opacity: 0;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 1px;
}
div #header h2 {
 display: none;
}
#top-bar {
 position: absolute;
 bottom: 0px;
 margin-top: 115px;
 height: auto;
 padding: 0;
 z-index: 20;
 font-size: 90%;
}
#top-bar ul {
 float: right;
 padding-right: : 5em;
}
#top-bar a {
 color: #b5cde2;
}
#top-bar ul li a {
 border-left: none;
 border-right: none;
}
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
 color: #178cce;
 border-left: none;
 border-right: none;
}
#search-top-box-input {
 display: none;
}
#search-top-box-form input[type=submit] {
 border: none;
 border-radius: 0px;
 padding: 2px 5px;
 font-size: 90%;
 font-weight: bold;
 color: #178cce;
 background-color: #fff;
 background: none;
 box-shadow: none;
 cursor: pointer;
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
 border: none;
 color: #b5cde2;
 text-shadow: none;
 background-color: #fff;
 background: none;
 box-shadow: none;
}
#search-top-box {
 position: absolute;
 top: auto;
 bottom: 23px;
 right: 8px;
 width: 250px;
 text-align: right;
}
#header::after {
 content: '';
 position: absolute;
 width: 100%;
 margin: 0 auto;
 margin-top: 130px;
 height: 100px;
 background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q3-min-min.png) top left repeat-x;
}
/*
コンテント
*/
/* ヘッダーにかぶせない */
#main-content {
 margin-top: 100px;
}
h1, #page-title {
 color: #000;
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}
a {
 color: #b5cde2;
}
#page-content a{
 color: #00A;
}
#page-content h2{
font-weight:bold;
}
#page-content h2:before{
 content:'■しかく';
 color:#006837;
}
.page-rate-widget-box .rate-points {
 background-color: #178cce !important;
 border: solid 1px #178cce;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
 background-color: #b5cde2;
 border-top: solid 1px #178cce;
 border-bottom: solid 1px #178cce;
}
.page-rate-widget-box .cancel {
 background-color: #178cce;
 border: solid 1px #178cce;
}
.page-rate-widget-box a{
 color: #fff !important;
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
 background: #b5cde2;
 color: #fffff0;
}
.page-rate-widget-box .cancel a:hover {
 background: #b5cde2;
}
/*
リスト http://webnonotes.com/css/css-list/
*/
.defaultlist, .defaultlist li{
 padding:0px;
 margin:0px;
}
.defaultlist li{
 list-style-type:none !important;
 list-style-image:none !important;
 margin: 5px 0px 5px 0px !important;
}
.list1 li{
 position:relative;
 padding-left:20px;
}
.list1 li:before{
 content:''; 
 display:block; 
 position:absolute; 
 box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
 top:3px; 
 left:2px; 
 height:0; 
 width:0; 
 border-top: 6px solid transparent;
 border-right: 7px solid transparent;
 border-bottom: 6px solid transparent;
 border-left: 9px solid #aaa;
}
.list2 li{
 position:relative;
 padding-left:20px;
}
.list2 li:before{
 content:''; 
 height:0; 
 width:0; 
 display:block; 
 border:5px transparent solid; 
 border-right-width:0; 
 border-left-color:#aaa; 
 position:absolute; 
 top:5px; 
 left:8px;
}
.list2 li:after{
 content:''; 
 height:2px; 
 width:10px; 
 display:block; 
 background:#aaa; 
 position:absolute; 
 top:9px; 
 left:0px;
}
.list4 li{
 position:relative;
 padding-left:20px;
}
.list4 li:after, .list4 li:before{
 content:''; 
 display:block; 
 position:absolute; 
 top:4px; 
 left:8px; 
 height:11px; 
 width:4px; 
 background:#aaa; 
 border-radius:10px;
 transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 -o-transform:rotate(45deg);
}
.list4 li:before{
 top:8px; 
 left:3px;
 height:8px; 
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 -o-transform:rotate(-45deg);
}
.list5 li{
 position:relative;
 padding-left:20px;
}
.list5 li:before{
 content:''; 
 height:0px; 
 width: 90%;
 display:block; 
 position:absolute; 
 top:18px; 
 left:0px; 
 border-bottom: 1px dashed #aaa;
}
.list5 li:after{
 content:'';
 display:block; 
 position:absolute; 
 background:#aaa;
 width:5px;
 height:5px; 
 top:7px; 
 left:5px; 
 border-radius: 5px;
}
.list6 li{
 position:relative;
 padding-left:20px;
}
.list6 li:after{
 content:'';
 display:block; 
 position:absolute; 
 background:#aaa;
 width:9px;
 height:9px; 
 top:5px; 
 left:5px; 
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 -o-transform:rotate(-45deg);
}
.list7 li{
 position:relative;
 display: block;
 padding: 5px 0px 5px 30px;
 background: #ccc;
 color: #444;
 border-radius:15px 0px 0px 15px;
}
.list7 li:after{
 content:'';
 display:block; 
 position:absolute;
 width:14px;
 height: 14px;
 top:7px;
 left:5px;
 background: #fff;
 border-radius: 10px;
}
/*
表 http://tablestyler.com/#
*/
.defaultT table {
 border-collapse: collapse;
 text-align: left;
 width: 100%;
}
.defaultT table td, .defaultT table th {
 padding: 3px 10px;
}
.defaultT table th:first-child {
 border: none;
}
.defaultT table th:first-child {
 border: none;
}
.defaultT table tbody td:first-child {
background-color: #f0f0e6;
font-weight: bold;
 border-left: none;
}
.defaultT table tbody tr:last-child td {
 border-bottom: none;
}
.defaultT .wiki-content-table {
 margin: 0;
}
.defaultT{
 font: normal 12px/150% Arial, Helvetica, sans-serif;
 background: #fff;
 overflow: hidden;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}
.defaultT table th {
 color: #FFFFFF;
 font-size: 15px;
 font-weight: bold;
}
.defaultT table tbody td {
 font-size: 12px;
 font-weight: normal;
}
.blueT {
 border: 1px solid #006699;
}
.blueT table th {
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
 background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
 background-color: #006699;
 border-left: 1px solid #0070A8;
}
.blueT table tbody td {
 border-left: 1px solid #E1EEF4;
}
.blueT table tbody td:first-child {
color: #00496B;
}
.redT {
 border: 1px solid #991821;
}
.redT table th {
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #991821), color-stop(1, #80141C));
 background: -moz-linear-gradient( center top, #991821 5%, #80141C 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#991821', endColorstr='#80141C');
 background-color: #991821;
 border-left: 1px solid #B01C26;
}
.redT table tbody td {
 border-left: 1px solid #F7CDCD;
}
.redT table tbody td:first-child {
color: #80141C;
}
.greenT {
 border: 1px solid #36752D;
}
.greenT table th {
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
 background: -moz-linear-gradient( center top, #36752D 5%, #275420 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
 background-color: #36752D;
 border-left: 1px solid #36752D;
}
.greenT table tbody td {
 border-left: 1px solid #C6FFC2;
}
.greenT table tbody td:first-child {
color: #275420;
}
/*
サイド
*/
#side-bar {
 min-height: calc(100% + 7em);
 background-color: #b5cde2;
 transform: translateY(-6em);
}
#side-bar .side-block {
 border: none;
 border-radius: 0;
 box-shadow: none;
 background: transparent !important;
 margin-top: 4em;
}
#side-bar .heading {
 color: #178cce;
 border-bottom: solid 1px #178cce;
}
#side-bar .side-block a {
 color: #fff;
}
/*
めであ
*/
@media (max-width: 767px) and (min-width:440px) {
 #container {
 border-left: 9px solid #b5cde2;
 }
 #header {
 background-size: 200px, 180px;
 }
 div #header h1 {
 width: 200px;
 min-height: 100px;
 }
 #side-bar {
 transform: translateY(0em);
}
}
@media (max-width: 440px) {
 #container {
 border-left: 3px solid #b5cde2;
 }
 #header {
 background-size: 130px, 140px;
 height: 100px;
 }
 div #header h1 {
 width: 200px;
 min-height: 80px;
 }
 #header::after {
 margin-top: 100px;
 height: 100px;
 background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q3-min-min.png) top left repeat-x;
 background-size: 440px;
 }
 #top-bar {
 margin-top: 33px;
 }
 #main-content {
 margin-top: 30px;
 }
}
@media (max-width: 767px) {
 #side-bar:target .close-menu {
 min-width: 100vw;
 min-height: 100vh;
 }
}
img.close-menu {
 opacity: 0 !important;
}
/*
サイド
*/
#side-bar {
 min-height: calc(100% + 7em);
 background-color: #b5cde2;
 transform: translateY(-6em);
}
#side-bar .side-block {
 border: none;
 border-radius: 0;
 box-shadow: none;
 background: transparent !important;
 margin-top: 4em;
}
#side-bar .heading {
 color: #178cce;
 border-bottom: solid 1px #178cce;
}
#side-bar .side-block a {
 color: #fff;
}
/*
めであ
*/
@media (max-width: 767px) and (min-width:440px) {
 #container {
 border-left: 9px solid #b5cde2;
 }
 #header {
 background-size: 200px, 180px;
 }
 div #header h1 {
 width: 200px;
 min-height: 100px;
 }
 #side-bar {
 transform: translateY(0em);
}
}
@media (max-width: 440px) {
 #container {
 border-left: 3px solid #b5cde2;
 }
 #header {
 background-size: 130px, 140px;
 height: 100px;
 }
 div #header h1 {
 width: 200px;
 min-height: 80px;
 }
 #header::after {
 margin-top: 100px;
 height: 100px;
 background: url(http://scp-jp-sandbox2.wikidot.com/local--files/nanimono-demonai/q3-min-min.png) top left repeat-x;
 background-size: 440px;
 }
 #top-bar {
 margin-top: 33px;
 }
 #main-content {
 margin-top: 30px;
 }
}
@media (max-width: 767px) {
 #side-bar:target .close-menu {
 min-width: 100vw;
 min-height: 100vh;
 }
}
img.close-menu {
 opacity: 0 !important;
}
[[/module]]

その他のTips
使っているメインの色のRGBについて、以下に並べておきます。自分自身でカスタマイズするときに便利かもしれません。

青 #178cce ████
薄青 #b5cde2 ████
緑 #006837 ████
赤 #c1272d ████
走り書き用オレンジ #f49e4c ████
第三の青 #0071bc ████
表のbackground-color: #f0f0e6; ████


作成にあたって引用した画像の一覧

いずれもWikimedia Commonsから引用しています。
1
2
3
4
5
6
7
8

Footnotes
. できればrgbかhsvがありがたいです。なおマンセル値は辛いです。
. 画像をご持参ください

a.k.a. 鬼食料理長

by Nanimono Demonai Nanimono Demonai , 21 Sep 2017 14:20
Re: 日本生類創研GoIフォーマット検討スレッド「モックアップ付き」
crow_109 crow_109 25 Sep 2017 13:32

フォーマット作成お疲れ様でございます。
http://scp-jp-sandbox2.wikidot.com/crow-109
↑早速使ってみたのですが、私の環境(windows10、chrome最新版)ですと「仕様」のところの下線(点線)が文字と少しずれて見えます。修正する方法があるのであればご教示願いたいです。

zure.png
最後の編集 25 Sep 2017 13:37 by crow_109
by crow_109 crow_109 , 25 Sep 2017 13:32
/forum/t-3689031/goi#post-
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。
ページを編集するにはこのボタンをクリックしてください。
セクションごとの編集を切り替えるにはこのボタンをクリックしてください(ページにセクションが設定されている必要があります)。有効になった場合はセクションに"編集"ボタンが設置されます。
ページのソース全体を編集せずに、コンテンツを追加します。
このページが過去にどのように変化したかを調べることができます。
このページについて話をしたいときは、これを使うのが一番簡単な方法です。
このページに添付されたファイルの閲覧や管理を行うことができます。
サイトの管理についての便利なツール。
このページの名前(それに伴いURLやページのカテゴリも)を変更します。
編集せずにこのページのソースコードを閲覧します。
親ページを設定/閲覧できます(パンくずリストの作成やサイトの構造化に用いられます)
管理者にページの違反を通知する。
何か思い通りにいかないことがありますか? 何ができるか調べましょう。
Wikidot.comのシステム概要とヘルプセクションです。
Wikidot 利用規約 ― 何ができるか、何をすべきでないか etc.
Wikidot.com プライバシーポリシー

AltStyle によって変換されたページ (->オリジナル) /