メモ
ボタンなどを中央寄せにしたい場合
場合によっては、そのままaタグなどを書いただけだと、中央に配置されない場合があります。その場合は中央に配置したいものを<div class="hako"></div>で囲んでください。多分これでイケると思います。
テキストページの段組み
縦向きの場合、段組みはcssの.tate部分のcolumn-count: 2;の数字を変えると変更できます。記述を消すと、段組が消えます。
アイコンの変更
サイトメニューのアイコンは他のものにも替えることが出来ます。cssのhome::beforeからlog::beforeまでがアイコンの画像を指定してる部分ですので、ここのurlの部分に使いたい画像のパスを指定して頂くと、指定したものに変わります。
試しにこのページだけメモの横をスプーンのアイコンにしてみました。こちらicooon-monoさんのスプーンアイコンを使わせて頂いております。
icooon-monoさんのアイコンを使う場合に注意することがあります。そのままダウンロードしてcssの方を書き換えても、表示されません。
表示させるにはicooon-monoさんの方でaiデータをダウンロードしてきて、自分でsvgに書き出すと表示できます。
自分で作ったアイコンや画像などは普通に表示されると思います。
原因はちょっと分からないんですけど、icooon-monoさんの方は色の指定がrgbになってるからかなぁ…と個人的には思っています。自分で書き出す際に16進数のカラーコードの方に変えたら表示されたので…。
ちなみにpngでダウンロードしてもダメでした…。
他のサイトのアイコンでも表示されない場合があるかもしれません。その際はご了承下さい。力不足ですみません…。以下は同梱しているアイコン素材です。
アイコンサンプル
アイコン
メニューのアイコンや上のリストのアイコンは、cssのm_icon::beforeとicon::beforeのbackground-colorの部分をお好きなカラーのカラーコードに書き換えることで、一括での色変更が可能です。適当にクラスを追加してやると個別で色を替えることも出来ます。
コード例
青色：<span class="icon s-home ao"></span>
赤色：<span class="icon s-home aka"></span>
黒色：<span class="icon s-home kuro"></span>
色変更サンプル
ちなみに小さい方のアイコンは<span class="icon s-home">と書くことで、どこでも召喚できます。s-homeは家、s-hudeは筆、s-logは文書、という感じになってます。
リンク・強調
普通のリンクはこんな感じです。
aタグにclass="link"でリンクサンプルのようになります。
リンクを別タブで開きたい場合はクラスをclass="link betutabu"のようにすると別タブアイコンがつきます。
aタグにclass="btn"を指定すると、ぼたんになります。
注意書きなどで文字を強調したい場合は、pタグやbタグなどにclass="chui"を追加することで、このように文字の下にボーダーがつきます。
pタグ
pタグにclass="p-p_text"を追加することで若干下の余白が大きくなります。class="p-p_text2"にするともっと余白が大きくなります。
余白の大きさが気に入らなかったら、cssで調整してください。
以下サンプル。
通常のpタグ
pタグ1行目！。
pタグ2行目！！。
class="p_text"を指定
pタグ1行目！。
pタグ2行目！！。
class="p_text2"を指定
pタグ1行目！。
pタグ2行目！！。
メニューについて
メニューは初期状態だと3つですが、増やしても問題ありません。あまり多すぎると不格好になる（特にスマホで見た際）ので、多くても6つまでに留めておくと良いかもです。
aタグにclass="koko"を指定すると、上のように背景が緑になり下矢印がつくので、現在のページを示したり出来ます。
fuwaimg無しだとこんな感じです。fuwaimgありとの違いは、奇数枚数のときに最後の画像が横長になるかならないかです。無しだとなりません。
無しで使うなら、画像は1枚だけにするほうが見やすいかもです。
奇数枚数だと横長に大きく表示されます。