Cコード さん プロフィール

  •  
Cコードさん: seesaa新デザインブログ研究中
ハンドル名Cコード さん
ブログタイトルseesaa新デザインブログ研究中
ブログURLhttp://seesaablg-newcstm.seesaa.net/
サイト紹介文seesaaブログ・新デザインシステムを研究しているとブログサイトです。
参加カテゴリー
更新頻度(1年)情報提供6回 / 365日(平均0.1回/週) - 参加 2016/11/08 19:33

Cコード さんのブログ記事

  • 過去の記事 …
  • 報告
  • 特に更新もせず放置状態で申し訳ありません。まだ新しいテンプレートは出来上がっていませんが、また後ほど更新する予定です。 [続きを読む]
  • セパレート 両サイド
  • 公式テンプレートであるセパレートの両カラム版を作成致しました。画像では潰れてしまって表
    示されていませんが、記事の右側と同じく左側にも黒線が挿入されます。@charset "UTF-8";/*! n
    ormalize.css v3.0.2 | MIT License | git.io/normalize */html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text
    -size-adjust: 100%;}body { margin: 0;}article,aside,details,figcaption,figure,footer,header,mai [続きを読む]
  • simply (両サイド)
  • 公式テンプレートのsimply を3カラムにした改造テンプレートです。見た目通りシンプルですので自分好みにカスタムもしやすくなっています。seesaa新デザインシステムの3カラムテンプレートを選んだ後、デザイン→デザイン設定を選択、cssにコピー&ペーストしてお使い下さい。@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html { font-family: sans-serif; -ms-text-size-adjust: 100%; [続きを読む]
  • Time Line Green風テンプレート(両サイド)
  • 公式テンプレートののTime Line Greenのテンプレートを製作致しました。あくまで〜風で完全再現とはいきませんでしたが、よろしければご使用下さい。@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body { margin: 0;}article,aside,details,figcaption,figure,footer,header,main,nav,section [続きを読む]
  • 新デザインシステムのカスタム方法
  • 新デザインは旧デザインと違ってどこを編集すべきか分かりにい、そんな経験はありませんか?デザイン設定の上部の記述を変えても何も変化しない・・・そこで、新デザインの編集すべきは箇所は/* other */以降のCSSになります。大体270以降にあります。main やheaderを編集し、自分好みのテンプレートを作成しましょう。 [続きを読む]
  • bodyに背景色を設定したときの注意点
  • bodyの背景に色をつけて.mainの背景を別のものにする手法はよく知られていますが、新デザインシステムでは注意点があります。.mainの背景色が適応されるのは「続き読む」を押す前の画面だけです。「続きを読む」を押した後に表示される記事の背景にまでは色がつきません。「続きを読む」を押した後に表示される記事のcssは.articleになります..articleにもbackground-color:;を設定しておきましょう。※配布したテンプレートに.art [続きを読む]
  • カスタムテンプレート Ver.1,2
  • 上部を白くしたテンプレートを少し手直ししました。もちろんカスタマイズ可能ですのでご自由
    にお使い下さい。@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html { font-family:
    sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body { margin: 0;}article,aside,details,figcaption,fig
    ure,footer,header,main,nav,section,summary { display: block;}audio,can [続きを読む]
  • ヘッダーとコンテンツの色分け
  • このような色分けをするにはbody{box-shadow:inset 00px 230px 0px 0px #FFF;}と記述します。2番目のpxの値はヘッダーの高さによって変わるかもしれませんので、プレビューを見ながら調節していきましょう。尚、Time Line GreenのCSSコードは、.l-wrapper width: 100%; header width:100%;という記述で色分けがされています。右カラムか左カラムであればこれいいのかもしれませんが、両カラムだとこのようになってしまいます。 [続きを読む]
  • 上部を白くしたテンプレート
  • まとめブルー(両サイド)のHTMLで製作しました。上部の領地を広く取ってある今の流行り
    のスタイルになっています。@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html
    { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body { margin: 0;}article,aside,details
    ,figcaption,figure,footer,header,main,nav,section,summary { display: block; [続きを読む]
  • 新デザインシステム用テンプレート
  • 3カラムのテンプレートを最初に選んだ後、このCSSをコピー&ペーストしてお使い頂けます
    。カスタマイズ可。@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html { font-fami
    ly: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body { margin: 0;}article,aside,details,figcaption,
    figure,footer,header,main,nav,section,summary { display: block;}audio,c [続きを読む]
  • .l-wrapper とcontainer(旧デザイン)の違い
  • seesaaの旧デザイにおいて、contentとsideを内包しているのはcontainerでしたが、新デザインシステムでは.l-wrapperが内包しています。・containerの場合.l-wrapperそして.l-wrapperはcontentとsideに加えて、headerも内包しているのがcontainerとの大きな違いになります。ちなみに.l-wrapperはcontainerと同じくcontentとsideとmarginの値に影響を受けるので、この3つの値が.l-wrapperのwidthの値を上回ると表示崩れの原因になる [続きを読む]
  • 記事(中央)・サイドの背景だけ変更する方法
  • .side もしくは.main にbackground-color:(色のCSS);を指定することで変更できます。しかし現状では、.side に背景色をつけると配置されているカテゴリの数が少ないと、下方にまで色が行きわたらず見た目が間抜けです。なお.l-leftや.l-rightにbackground-colorを指定すると何故か記事にまで色がついてしまったり、色がつかなかったりという現象が起きています。.l-wrapper にbackground-colorを指定、そして.mainにもbackgro [続きを読む]
  • l-contentのあれこれ
  • l-content とl-left とl-rightはfloat:left or rightと指定することで、画面上に安定して表示されます。通常 l-rightはfloat:right;になっていますが、leftにして変則カラムにすることが出来ます。float:none;にするとレイアウトが崩れます。フッター部分にカテゴリを表記させたいときは、デザイン→コンテンツ画面に移動して、フッターに記事やカテゴリを置くの無難です。 [続きを読む]
  • 新デザインのカスタマイズ方法・覚え書き
  • seesaaの新デザインは旧デザインとはCSSの名称が違うため新たに覚えなおす必要があります。編集していく過程で判明したCSSはここに記録していきますね。.article…続きを読むを押した際に表示される記事。続きを押す前と押した後の背景を個別に設定したいときに。.article--entry…続きを読むを押した際に表示される記事の文章部分.article__date…続きを読むを押した際に表示される年月日。旧デザインでは年月日(上部)デ [続きを読む]
  • 過去の記事 …