基本設定
設定項目を未入力のまま、ダウンロードボタンを押した場合は、初期値として設定されている内容が反映されます。
スマホ対応
ページ幅によって、レイアウトやサイズが自動で切り替わるフレキシブルレイアウトを採用しています。分割数に合わせてboxを配置するとバランスよく表示されます。
スマホなどの幅が狭い画面では、サイト名の上にページタイトルが重なるようにしています。
もし、長いタイトルがお好みの場合は、css部分を編集してください。
厨二な表示エフェクト
スタイルシートの記載行を消せば無効化できます。
animation-duration: 3s; animation-name: slidein;
HTMLタグとCSS
段落タグ p
段落の 1文字目に 全角 スペースが、必ず 入るスタイルシート入り。
リンクタグ a
テキストリンクのアンダーバーを非表示にしています。 装飾なしテキストリンク
classで link を指定すると、 アイコンつきテキストリンク というようにリンクの後ろにアイコンが自動追加されます。
テキストだけのリンクは、スマホでは押しにくく、見逃しやすい部分になってしまうことがあるため、
ボタンっぽいリンク buttonLink
というのも用意してみました。
ボタンにすると、「ここを押してください」という意図が伝わりやすいです。
画像タグ img
画像は、自動でサイズ調整、角丸になる仕様のcssを使用しています。
画像をクリックすると、imgタグのonclickで指定された画像を表示します。表示された画像および画像の周囲をクリックすると、元の画面に戻ります。
作成したHTMLの中身
作成したHTMLには、文字色などを指定したCSSと JavaScriptが 埋め込まれています。
最低限のテキストやタグしか含まれていません。HTML講座などは含んでいません。
ギャラリー機能やランダム背景、紙芝居機能なども含んでいない最低限のデータがダウンロードできます。
使用許諾
作成データの編集、改造、転用などは自由です。埋め込みを外したり別ファイルへしたりするのも、 部分的にコピーしてbloggerなどcssやhtmlタグも改造可能なブログへ貼り付けて使用するのもOKです。
使用する際には、リンク集や奥付などで、当サイトのトップページへのリンクをしてください。
https://www.ne.jp/asahi/active/creative/
編集必須なヘッダータグ
編集必須な部分には、コメントが入っています。
facebookやXで共有＆検索サイトで検索された時に表示される部分となります。
アップロード環境に合わせて編集してください。ローカル環境のみで使用する場合は丸ごと削除してもOKです。
meta propertyは、sectionとして指定しています。作成したHTMLデータをサイトトップページ(index.html)として使用する場合は、 必ず website に変更してください。
wordpressやWIXなどでSEO対策をするには、有料プランへの加入が必須とか、特定のテンプレを購入が必須とかってあるんですけど、 数行を追加するだけで済むので、データベース運用や大人数での管理を考えていないのであれば、 レンタルサーバーではなく、昔ながらのレンタルスペースやgoogleが提供しているbloggerを改造するだけで十分なのでは？ と思ってます。 SEO対策やギャラリーモードやら色々つけて、スペースも15GBついて広告が表示されず無料なんていうbloggerは最強すぎ。
この注釈エリアは、メインの文字色とメイン箱の背景色を入れ替えたものです。
SaMpLe
レイアウト例
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
人気ファッション
- たまむしいろ
- にじ色
- 透明すけすけ
まぁ★クロス柄.js
サンプルは、このページの右側「テンプレ設定パネル」の背景で使用しています。 リロードするたびに背景模様が更新されます。
使い方
macross.jsをHTML内で読み込み、classで cross を指定するだけ。 HTMLファイルを表示するたびに自動で背景パターンを変更します。
macross.jsランダムcss生成生成したHTMLデータの headタグ内に、上記を追加して、macross.jsをHTMLデータと同じフォルダに保存。 模様をつけたい部分の class で cross と指定すると、背景模様がランダムに変化します。
背景パターンを固定する
「まぁ★クロス柄css生成」を使用して、クロス柄のスタイルシートを生成し、.cssに書き込んで使用してください。
まぁ★クロス柄css生成