maiden について

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

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

利用規則

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

CSSについて

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

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

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

同梱内容について

最新バージョン
  • csstemplate/
    • banner/
      • 200.png
      • 88.png
      • 32.png
      • favicon.ico
      • apple-touch-icon.png
    • maiden/
      • modori.png
      • dd.png
      • h.png
      • img.jpg
    • style.css
  • はじめにお読みください.txt

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

以上の画像は併記のサイトからお借りして二次配布させていただいています。該当の画像、及び該当画像を利用したバナーやfaviconを利用する場合は画像配布サイトの利用規約のご確認もあわせてお願いいたします。

オリジナルの画像の一部は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が/* ▼カスタマイズ項目名 */のキャプションと共に抜き出して記述されています。文字列検索機能があるエディタを利用すると該当部を見つけやすいです。

:;{}などを消してしまったりすると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には、各寄せ側の端からの距離として適宜自由な数値を入れることができます。

【margin-right:10px;margin-left:auto;】と指定すると、全体は右寄せになり、左のブラウザ端から10pxの位置になります

全体最大横幅

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

/* ▼全体最大横幅 */
max-width:最大横幅;

スマホなど小さい画面(ブラウザ横幅670以下)になると横幅は100%になります。

アイキャッチ

アイキャッチ画像を差し替える

表示する画像を変更する場合はimg.jpgを同名上書きします。

なお、アイキャッチ画像は、ブラウザの縦横幅によって拡大縮小されることがあり、テンプレートによってはブラウザサイズの如何で一部見切れる場合がありますのでご了承ください。画像の見せたい位置がある場合はbackground-positionの編集で対応できるかもしれません。


拡張子やサイズが異なる画像に差し替えたり表示位置を変える場合はstyle.cssを編集します。▼アイキャッチで文字列検索の上、style.css内のコメントを参照して変更してください。。

変更該当箇所
/* ▼アイキャッチ */
#HEADER::after,
#FOOTER::before
{
    content:""; /* 編集不可 */
    background-image:url(maiden/img.jpg); /* 画像URI */
    padding-top:calc( 250 / 900 * 100% ); /* 【250】画像縦幅(単位無用)【900】画像横幅(単位無用) */
    background-position:50% 50%; 
}
#FOOTER::before
{
    padding-top: 40px; /* フッターの画像の高さ */
    background-position:50% 50%;
}
/* ▲アイキャッチここまで */

数値を変える際はcalcを用いず自力で計算した数値を指定しても構いません。

例:padding-top:27.78%; /* ( 250 ÷ 900 × 100 ) */

表示領域が狭い環境での扱いについて

このテンプレートはスマートフォンなど表示領域が縦もしくは縦横に狭い場合、コンテンツ優先のためINDEX以外でアイキャッチの表示領域を狭くするもしくは表示させないようにしています。もしアイキャッチが重要で、INDEX以外でもINDEXと同様に表示させたい or INDEX非表示でINDEX以外表示にさせるようにする場合は、▼INDEX以外アイキャッチで検索し、以下の部分を削除してください。

/* ▼INDEX以外アイキャッチなし */
    body:not(#INDEX) #HEADER{ border-bottom:2px dotted #CCC; margin-bottom:15px; }
    body:not(#INDEX) #HEADER::after{ content:""; display:none !important; }

アイキャッチ画像を全てのページで表示させない

/* ▼アイキャッチ */から/* ▲アイキャッチここまで */を削除します。

以下の部分も不要です。/* ▼アイキャッチ *//* ▲アイキャッチここまで */以外の場所にある場合もありますので、アイキャッチで文字列検索の上、あれば削除してください。

/* ▼INDEX以外アイキャッチなし */
    body:not(#INDEX) #HEADER{ border-bottom:2px dotted #CCC; margin-bottom:15px; }
    body:not(#INDEX) #HEADER::after{ content:""; display:none !important; }

INDEXとそれ以外で画像やサイズを変えるor変えない

  • INDEXは表示領域が広くそれ以外では狭い、或いはINDEXは狭くそれ以外で広い
  • INDEXとそれ以外で表示する画像を変更する(モノクロイラスト⇔カラー、ぼかしあり⇔なし…など)
  1. style.cssを開き、/* ▼アイキャッチ */から/* ▲アイキャッチここまで */の間の記述をコピー・ペーストします
  2. コピペしたほうのセレクタの頭に#INDEX (全て半角で「#INDEX」のあと、半角のスペース1つ)を書き加えます。セレクタがbodyだった場合はbody#INDEXにします。書き足したほうがINDEX用の記述になります。
    該当部をコピペ(手順1)し、セレクタを書き換え(手順2)たサンプル
    /* ▼アイキャッチ */
    #HEADER::after,
    #FOOTER::before
    {
        content:""; /* 編集不可 */
        background-image:url(maiden/img.jpg); /* 画像URI */
        padding-top:calc( 250 / 900 * 100% ); /* 【250】画像縦幅(単位無用)【900】画像横幅(単位無用) */
        background-position:50% 50%; 
    }
    #FOOTER::before
    {
        padding-top: 40px; /* フッターの画像の高さ */
        background-position:50% 50%;
    }
    
    #INDEX #HEADER::after,
    #INDEX #FOOTER::before
    {
        content:""; /* 編集不可 */
        background-image:url(maiden/img.jpg); /* INDEXの画像URI */
        padding-top:calc( 250 / 900 * 100% ); /* 【250】INDEXの画像縦幅(単位無用)【900】INDEXの画像横幅(単位無用) */
        background-position:50% 50%; 
    }
    #INDEX #FOOTER::before
    {
        padding-top: 40px; /* フッターのINDEXの画像の高さ */
        background-position:50% 50%;
    }
    /* ▲アイキャッチここまで */
  3. INDEXで変えたい項目についてINDEX用の記述の値を書き換えます。値を書き換えなかったものはINDEX用の記述から削除してください。

アイキャッチ画像をINDEXのみで表示/INDEXのみ非表示

INDEXのみで表示
セレクタの前に#INDEX (全て半角で「#INDEX」のあと、半角のスペース1つ)を追加
セレクタがbodyだった場合は body#INDEXに書き換え
INDEX以外表示(INDEXでは非表示)
セレクタの前にbody:not(#INDEX) (全て半角で「body:not(#INDEX)」のあと、半角のスペース1つ)を追加
セレクタがbodyだった場合は body:not(#INDEX)に書き換え
INDEXのみ表示に変更後のサンプル
/* ▼アイキャッチ */
#INDEX #HEADER::after,
#INDEX #FOOTER::before
{
    content:""; /* 編集不可 */
    background-image:url(maiden/img.jpg); /* 画像URI */
    padding-top:calc( 250 / 900 * 100% ); /* 【250】画像縦幅(単位無用)【900】画像横幅(単位無用) */
    background-position:50% 50%; 
}
#INDEX #FOOTER::before
{
    padding-top: 40px; /* フッターの画像の高さ */
    background-position:50% 50%;
}
/* ▲アイキャッチここまで */
INDEX以外表示(INDEXでは非表示)に変更後サンプル
/* ▼アイキャッチ */
body:not(#INDEX)  #HEADER::after,
#body:not(#INDEX)  #FOOTER::before
{
    content:""; /* 編集不可 */
    background-image:url(maiden/img.jpg); /* 画像URI */
    padding-top:calc( 250 / 900 * 100% ); /* 【250】画像縦幅(単位無用)【900】画像横幅(単位無用) */
    background-position:50% 50%; 
}
#body:not(#INDEX)  #FOOTER::before
{
    padding-top: 40px; /* フッターの画像の高さ */
    background-position:50% 50%;
}
/* ▲アイキャッチここまで */

カラム関連

aleviritaのテンプレートは閲覧ブラウザの横幅によってカラムが変わります。

どんな横幅でも1カラムに

  1. /* ▼2カラム */から/* ▲2カラムここまで */の記述を全て削除

カラムの左右や幅を変える

  1. ▼2カラムで文字列検索
  2. 左右を入れ替える場合は、該当箇所のleftrightrightleftに書き換え
  3. 幅を変える場合は、style.css内の注釈を参照して、該当の数値を全て書き換え(数値の単位は自由に変えて構いません)
2カラム時変更該当箇所
/* ▼2カラム */
    /* 【20%】 メニューの横幅(2箇所) */
    #MENU
    {
        float:left; 
        width:20%; 
        border:none; padding-top:0;
    }
    #KIZI
    {
        margin-left:calc( 20% + 10px ); 
    }
    #KIZI h2
    { 
        padding-left:35px; 
        text-align:left;
    }
    div.text::before
    { 
        left:-11px;
    }
    div.text
    {
        margin-left:12px;
        padding-left:12px;
        border-left-width:2px;
        border-bottom:0;
    }

最大幅を1カラム時とは変えたい場合は、/* ▲2カラムここまで */の直前にmax-widthを書き足して指定してください。

.
.
#PAGETOP{ max-width:2カラムのときの最大幅; }
/* ▲2カラムここまで */

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

要素

一部の要素には背景色がついています。カスタマイズによってリンク色を変更した場合などは、該当要素内のリンクが見づらくなる可能性があります。該当要素の背景色を変更するか、リンク色を上書き指定をしてください。

  • テーブル(要素名:tablethtd
  • 整形済みテキスト(要素名:pre
  • 出力サンプル文(要素名:samp
  • 入力(要素名:kbd
  • 定義リスト(要素名:dldtdd
  • インライン引用(要素名:q
要素名 a:link{ color: 要素名内の未訪問リンク色; }
要素名 a:visited{ color: 要素名内の既訪問リンク色; }

サーバー広告

カスタマイズによっては、広告や提供元リンクが見えづらくなる場合があります(全体の背景色と#PAGETOPなどの背景色に差異がある場合など)。そのときは色を上書きして見えやすくしてください。以下は一部のサーバーの例です。

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

サポート

favicon.icoの使いかた

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

マルチアイコンとして16px×16pxと32px×32pxの2サイズが1つのファイルにまとまっています。

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

また、デスクトップにショートカットを作成した場合、またIE9以上の機能であるピン留めなどでは32pxサイズのアイコンが用いられます。(ブラウザによっては16pxが使われます)

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


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

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

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

apple-touch-icon.pngの使いかた

apple-touch-icon.png表示サンプル
ブックマークに追加されたりホーム画面に追加されたときに使われます。

設置すると、iPhoneやiPad、一部のAndroidで、ブックマークに追加されたりホーム画面に追加されたときになどこのアイコンが表示されます。Apple製品では、ルート直下(index.htmlをアップロードするのと同じディレクトリ)にapple-touch-icon.pngをアップロードすれば自動で所得してくれます。


ファイル名や階層を変える場合や、不安定なAndroidで確実に読みこませるためには、HTMLに記述します。

  1. apple-touch-icon.pngを表示させたい全てのHTMLファイルを開き、<head></head>の内に以下を記述コピペし、適宜アドレスを書き換えて、上書き保存しアップロード。
    <link rel="apple-touch-icon" href="http://hoge.com/apple-touch-icon.png">
    ※絶対パス・相対パスでも構いませんが、Android対応にはhttp://~での指定がいいらしいです。

Androidの場合はこれをしたとしても端末によっては、読み込んでくれない、favicon.icoのほうを読み込む、といった場合があり、完全ではないようです。

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

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

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

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