サンプル3

ログ

2行以上の文章だと、三点リーダーが出て省略するようになっています。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

上のように、サイトタイトルには画像も使えます。imgタグにclass="logo"を指定するといい感じの大きさになると思います。200px×50pxに切り取られるようになっています。

ページ下部の右端にあるトップへ戻るボタンはデザインのみです。動きはつけていませんので、各自でJavaScriptを使うなどして対応して下さい。

サイトメニューはスマホ表示だと、下の画像のようにボトムメニューに変わります。

初期状態だと6つありますが、これだと少し多いかなという印象です。6つ以上にも出来ますが、スマホの小さな画面には合わないです。多くても5つ程度に収めておくのが良いです。

サイトメニューのアイコンは他のものにも替えることが出来ます。cssのhude::beforeからhome::beforeまでがアイコンの画像を指定してる部分ですので、ここのurlの部分に使いたい画像のパスを指定して頂くと、指定したものに変わります。

配布されているアイコンも使えるのかを試してみたくて、icooon-monoさんのアイコンを使ってみましたが、そのままダウンロードしてcssの方を書き換えても、表示されませんでした。
色々試してみましたが一番簡単なのは、icooon-monoさんの方でaiデータをダウンロードしてきて、svgに書き出すことです。
自分で作ったアイコンや画像などは普通に表示されると思います。

原因はちょっと分からないです。ちなみにpngでダウンロードしてもダメでした…。
他のサイトのアイコンでも表示されない場合があるかもしれません。その際はご了承下さい。力不足ですみません…。以下は同梱しているアイコン素材です。

Icon Monstrというサイトのアイコンは普通に表示出来たので、他のアイコンを使いたい場合はこちらのサイトがオススメです。他にも素材配布サイトはたくさんあるので、色々試してみると良いと思います。