momon について

momonの概要一覧
DL可能な最新のバージョン 3.0.0 (ダウンロード
最終更新日 2016-09-26
配布元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
    • momon/
      • bg.png
    • style.css
  • はじめにお読みください.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が/* ▼カスタマイズ項目名 */のキャプションと共に抜き出して記述されています。文字列検索機能があるエディタを利用すると該当部を見つけやすいです。

:;{}などを消してしまったりすると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%になります。

カラム関連

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

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

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

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

  1. ▼2カラムで文字列検索
  2. 左右を入れ替える場合は、該当箇所のleftrightrightleftに書き換え
  3. 幅を変える場合は、style.css内の注釈を参照して、該当の数値を全て書き換え(数値の単位は自由に変えて構いません)
2カラム時変更該当箇所
/* ▼2カラムここから */
    /* 【28%】メニューカラム幅 */
    #MENU
    { 
        float:left; 
        width:28%;
        margin-right:10px;
    }
    li[id^="MENU"]{ display:block; }
    /* ▲2カラムここまで

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

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