now-on について

now-onの概要一覧
DL可能な最新のバージョン	4.0.1 （ダウンロード）
最終更新日	2018-03-12
配布元	alevirita [http://a-c.2-d.jp/]

バージョンについて

ver.	4.	0.	1
	大幅なアップデートで数字が上がります	対象ブラウザの見直しやバグ対策、デザイン崩れの修正を含む変更で数字が上がります	色の変更や画像の差し替えなど重要性の低い変更で数字が上がります

左の桁が上がると右の桁は0にリセットされます。

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

利用規則

弊サイトの配布物全般を使うときの規約

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

CSSについて

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

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

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

同梱内容について

スマートフォン対応

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

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

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

カスタマイズ

style.css下部に、カスタマイズに直結したCSSが/* ▼カスタマイズ項目名 */のキャプションと共に抜き出して記述されています。文字列検索機能があるエディタを利用すると該当部を見つけやすいです。

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

名称

セレクタ { プロパティ : 値; }

注意点

calc()を編集する場合、+ と - の前後には必ず半角スペースが必要です。詰めないでください。

height: calc(20% + 10px); ← OK
height: calc( 20%+10px ); ← 半角スペースがないのでNG
height: calc(20%*10px); ← *や/は半角スペース不要なのでOK

「CDPの○○がいらないから消したい」

全体寄せ位置

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%になります。

メニュー項目画像

表示する項目画像を変更する場合は該当画像ファイルを同名上書きします。

拡張子が異なる画像に差し替える場合はstyle.cssを編集します。▼メニュー項目画像で文字列検索し、画像アドレスを任意で書き換えてください。

メニュー数が多い場合はセレクタ{ 内容 }（セレクタは複数あるかもしれません）のひとまとまりをコピペーして、MENU数値を編集して追加してください。メニュー数が少ない場合は、必要のないものを消して構いません。

/* ▼メニュー項目画像 */
    /* url(now-on/menu【数字】.png) 1項目につき3箇所 */
#MENU01>a::before,
#MENU01::before{ background-image:url(now-on/menu1.png); }
#MENU01::before{ background-image:
        linear-gradient(to left,rgba(255,255,255,0) 88%, rgba(255,255,255,.4) 88%, rgba(50,50,50,.2) 91%, rgba(255,255,255,.5) 90%),
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,.6) 2%, rgba(255,255,255,0) 100%),
        url(now-on/menu1.png); }
#MENU01::after{ background-image:
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 100%),
        linear-gradient(to right,rgba(255,255,255,0) 10%, #FFF 10%, #CCC 11%, #FFF 14%, #FFF),
        url(now-on/menu1.png); }

#MENU02>a::before,
#MENU02::before{ background-image:url(now-on/menu2.png); }
#MENU02::before{ background-image:
        linear-gradient(to left,rgba(255,255,255,0) 88%, rgba(255,255,255,.4) 88%, rgba(50,50,50,.2) 91%, rgba(255,255,255,.5) 90%),
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,.6) 2%, rgba(255,255,255,0) 100%),
        url(now-on/menu2.png); }
#MENU02::after{ background-image:
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 100%),
        linear-gradient(to right,rgba(255,255,255,0) 10%, #FFF 10%, #CCC 11%, #FFF 14%, #FFF),
        url(now-on/menu2.png); }

#MENU03>a::before,
#MENU03::before{ background-image:url(now-on/menu3.png); }
#MENU03::before{ background-image:
        linear-gradient(to left,rgba(255,255,255,0) 88%, rgba(255,255,255,.4) 88%, rgba(50,50,50,.2) 91%, rgba(255,255,255,.5) 90%),
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,.6) 2%, rgba(255,255,255,0) 100%),
        url(now-on/menu3.png); }
#MENU03::after{ background-image:
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 100%),
        linear-gradient(to right,rgba(255,255,255,0) 10%, #FFF 10%, #CCC 11%, #FFF 14%, #FFF),
        url(now-on/menu3.png); }

#MENU04>a::before,
#MENU04::after{ background-image:url(now-on/menu4.png); }
#MENU04::before{ background-image:
        linear-gradient(to left,rgba(255,255,255,0) 88%, rgba(255,255,255,.4) 88%, rgba(50,50,50,.2) 91%, rgba(255,255,255,.5) 90%),
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,.6) 2%, rgba(255,255,255,0) 100%),
        url(now-on/menu4.png); }
#MENU04::after{ background-image:
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 100%),
        linear-gradient(to right,rgba(255,255,255,0) 10%, #FFF 10%, #CCC 11%, #FFF 14%, #FFF),
        url(now-on/menu4.png); }

#MENU05>a::before,
#MENU05::after{ background-image:url(now-on/menu5.png); }
#MENU05::before{ background-image:
        linear-gradient(to left,rgba(255,255,255,0) 88%, rgba(255,255,255,.4) 88%, rgba(50,50,50,.2) 91%, rgba(255,255,255,.5) 90%),
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,.6) 2%, rgba(255,255,255,0) 100%),
        url(now-on/menu5.png); }
#MENU05::after{ background-image:
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 100%),
        linear-gradient(to right,rgba(255,255,255,0) 10%, #FFF 10%, #CCC 11%, #FFF 14%, #FFF),
        url(now-on/menu5.png); }

#MENU06>a::before,
#MENU06::after{ background-image:url(now-on/menu6.png); }
#MENU06::before{ background-image:
        linear-gradient(to left,rgba(255,255,255,0) 88%, rgba(255,255,255,.4) 88%, rgba(50,50,50,.2) 91%, rgba(255,255,255,.5) 90%),
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,.6) 2%, rgba(255,255,255,0) 100%),
        url(now-on/menu6.png); }
#MENU06::after{ background-image:
        linear-gradient(to top,rgba(0,0,0,.1) 1%, rgba(255,255,255,0) 1%, rgba(255,255,255,0) 100%),
        linear-gradient(to right,rgba(255,255,255,0) 10%, #FFF 10%, #CCC 11%, #FFF 14%, #FFF),
        url(now-on/menu6.png); }

    /* ▲メニュー項目画像ここまで */

項目画像を表示しない場合は、/* ▼メニュー項目画像 */から/* ▲メニュー項目画像ここまで */を削除してください。

カラム関連

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

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

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

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

▼2カラムで文字列検索
左右を入れ替える場合は、該当箇所のleftはright、rightはleftに書き換え
幅を変える場合は、style.css内の注釈を参照して、該当の数値を全て書き換え（数値の単位は自由に変えて構いません）

2カラム時変更該当箇所

/* ▼2カラム */
    /*  【160px】メニュー横幅(3箇所)（145px以上推奨)【900px】2カラム時全体最大幅 */
    #PAGETOP
    {
        max-width:900px;
    }
    #MENU
    {
        float:right;
        width:160px;
        background:#FFF;
        margin-right:10px;
        padding:0;
    }
    #KIZI
    {
        padding-right:calc( 160px + 30px );
    }
    #KIZI::before
    {
        content:"";/* 編集不可 */
        right:10px;
        width:160px;
    }

アンカー色（リンクテキストの色）

要素

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

テーブル（要素名：table・th・td）
整形済みテキスト（要素名：pre）
出力サンプル文（要素名：samp）
入力（要素名：kbd）
定義リスト（要素名：dl・dt・dd）
インライン引用（要素名：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表示サンプル

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

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

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

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

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

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に記述します。

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に答えがあるかもしれません。

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

http://a-c.2-d.jp/#about