Gyades について

Gyadesの概要一覧
DL可能な最新のバージョン 5.0.0 (ダウンロード
最終更新日 2013-06-04
配布元alevirita [http://a-c.2-d.jp/]

古いバージョンのテンプレートは表示や動作のバグが内在している可能性があります。また、詳しい解説は最新バージョンに則っています。新しいバージョンをご利用ください。

利用規則

このテンプレートを使うにあたっての禁止事項
テンプレートの営利再配布・同梱画像の再配布(バナーを除く)
テンプレートや同梱画像の著作権を偽る行為

CSSについて

マイクロソフトのサポートの終了時期や現状のシェアを鑑みて、最終更新が2016年9月24日以後のテンプレートではIE8以下の対応(バグやデザインの再現)を完全にとりやめました。

CSS3に対応していないブラウザでは意図したデザインで表示されません。また、CSSの対応によってブラウザによっては一部デザインが異なることがあります。

Androidの標準ブラウザはバグが色々あるらしいのですが、現在環境がないため確認できておりません。閲覧の不具合を見つけた場合はテンプレート名と状態、Androidの機種をご連絡ください。

同梱内容について

最新バージョン
  • csstemplate/
    • banner/
      • 200.png
      • 88.png
      • 32.png
    • Gyades/
      • text.png
    • style.css
  • favicon.ico
  • readme.txt

csstemplateフォルダ外のtxtファイルはアップロードしないでください。

同梱の画像はバナー・ファビコン含めて全てaleviritaオリジナルです。

オリジナルの画像の一部はWingding / Webdingのフォントを利用している場合があります。

画像のみ・バナーのみのご利用も可能です。簡単なものでよければお申し付け頂ければバナーの文字入れも承っています。

スマートフォン対応

スマートフォンでアクセスするとパソコンで見えるレイアウトが縮小されたものが表示されますが、レイアウトが崩れない代わりに、ピンチアウトで拡大したりはみ出た部分を見るためにスクロールしなければなりません。aleviritaのテンプレートは、HTMLでviewportを指定すれば、カラムを廃し余白をすくなくしたスマートフォン向けのCSSを適応させることができます。

  1. HTMLファイルを開き、<head></head>の内に以下を記述し、上書き保存。
    <meta name="viewport" content="width=device-width">
    ※2016年4月3日以降ダウンロード分ではコメントアウト(<!---->)を削除
  2. 書き換えたHTMLをアップロード

デバイスサイズor狭い横幅・縦幅を考慮していないテンプレート(CSS)に差し替えたとき、逆にレイアウトが見づらくなる可能性があります。

カスタマイズ

style.css上部に、カスタマイズに直結したCSSが/* ▼カスタマイズ項目名 */のキャプションと共に抜き出して記述されています。style.css内に記されているコメントも併せてご参照ください。

:;{}などを消してしまったりするとCSSが適切に読み込まれずレイアウトか崩れる場合がありますので、書き換えの際は気をつけてください。

名称
セレクタ { プロパティ : ; } 
注意点
calc()を編集する場合、+ と - の前後には必ず半角スペースが必要です。詰めないでください。
height: calc(20% + 10px); ← OK
height: calc( 20%+10px ); ← 半角スペースがないのでNG
height: calc(20%*10px); ← *や/は半角スペース不要なのでOK

全体寄せ位置

style.cssを開き、▼全体寄せ位置で文字列検索し、下記箇所を書き換えてください。

左寄せにする場合
/* ▼全体寄せ位置 */
margin-right: auto;
margin-left: 0;
センタリングにする場合
/* ▼全体寄せ位置 */
margin-right: auto;
margin-left: auto;
右寄せにする場合
/* ▼全体寄せ位置 */
margin-right: 0;
margin-left: auto;

0には、各寄せ側の端からの距離として適宜自由な数値を入れることができます。

全体横幅

style.cssを開き、▼全体横幅で文字列検索し、適宜自由な数値に書き換えてください。

  • width
  • max-width:最大幅
  • min-width:最小幅

寄せ位置にマージンをとった場合

マージン分横スクロールバーが出る場合があります。widthを編集すると横スクロールバーを回避できます。

width: clac(100% - マージン数);

画像を差し替える

表示する画像を変更する場合は該当画像ファイルを同名上書きします。拡張子や画像の縦横サイズが異なる画像に差し替える場合はstyle.cssを編集します。

background-image: url(差し替えたい画像のアドレス);

必要があれば、画像ファイル名以外の値も変更します(テンプレートによって違います。style.cssを参照してください)

メニューリスト項目やフッターリスト項目が多い場合

メニューないしフッターリストの項目が11以上ある場合、セレクタを書き足さないと11つ目以降の項目にスタイルが適応されない場合があります。

  1. スタイルシートをひらき、メニュー項目を増やす場合は#MENU10、フッター項目を増やす場合は#FOOTER10を文字列検索する(みつからなかった場合は全ての項目でスタイルが適応されるので終了)
  2. みつかった記述に、セレクタを必要なだけ増やしていく
    メニューリスト項目を増やす場合の追記例
    #MENU01, #MENU02, #MENU03, #MENU04, #MENU05,
    #MENU06, #MENU07, #MENU08, #MENU09, #MENU10,
    #MENU11, #MENU12, #MENU13
    {
    フッターリスト項目を増やす場合の追記例
    #FOOTER01, #FOOTER02, #FOOTER03, #FOOTER04, #FOOTER05,
    #FOOTER06, #FOOTER07, #FOOTER08, #FOOTER09, #FOOTER10,
    #FOOTER11, #FOOTER12, #FOOTER13
    {
  3. 上書き保存

アンカー色(リンクテキストの色)

カスタマイズによってリンク色を変えた場合、一部リンクが見づらくなる場合があります。

要素

テンプレートによっては一部の要素(引用文・テーブル・整形済みテキスト・定義リスト等)には背景色がついている場合があります。該当要素内のリンクが見づらい場合は該当要素の背景色を変更するか、アンカー色を上書き指定してください。

要素名 a:link{ color: 未訪問リンク色; }
要素名 a:visited{ color: 既訪問リンク色; }

サーバー広告

サーバーの挿入広告や提供元リンクが見えづらくなった場合は色を上書きして見えやすくしてください。以下は一部のサーバーの例です。

忍者TOOLS
.tdfta a{ color: 広告リンク色; }
2style.net(テキスト広告)
.ad_text a{ color: 広告リンク色; }
FC2(提供元リンク)
#fc2_footer a{ color: 提供元リンク色; }

サポート

favicon.icoの使いかた

favicon表示サンプル
最近は多くのサイトで独自のファビコンが利用されています。GoogleやYahooなどの検索サイト、TwitterやPixivなどのSNSにアクセスしてみてください。

設置すると、お気に入り(ブックマーク)に追加された際のタイトルの左側やタブに表示されたページタイトルの左側などに16pxサイズのアイコンが表示されます。

多くのブラウザでは、ルート直下(index.htmlをアップロードするのと同じディレクトリ)にfavicon.icoをアップロードすれば自動で所得してくれます。


ファイル名や階層を変える場合や、うまく表示されないときは、HTMLに記述すると確実に読みにいってくれます。

  1. favicon.icoを表示させたい全ての全てのHTMLファイルを開き、<head></head>の内に以下を記述し、適宜アドレスを書き換えて、上書き保存しアップロード
    <link rel="shortcut icon" href="/favicon.ico">
    ※相対パスやhttp://~で指定しても構いません

キャッシュが残っていると暫く変わらないこともあります。ブラウザのキャッシュを削除してください。

その他サポート・問い合わせ

使い方は基礎html配布の「基礎htmlをダウンロードしたら」の項目を参照してください。

問題や疑問点があったら基礎html解説FAQに答えがあるかもしれません。

また、個別サポートも承っております。