HTMLテンプレートが簡単に作れるAperitif

レスポンシブ対応のサイトが色々なヘッダー、メイン部分、フッターなどパーツ(コンポーネント)の組み合わせで(0からコードを書くよりずっと)簡単に作れるAperitifアペリティフの使い方とその後のhtml、cssファイルの見方、編集方法です。

 

Aperitifの使い方

Aperitifのサイトを開き「LET’S GO!」をクリックします。

 

使い方はサイトに1、2、3で書いてあるように簡単です。

 

今回はこんな構造のサイトを作ります。

画像や文字、サイズなどは後で変更できます

 

右のHEADER、CONTENT、、などタブをクリックするとデザインが選べます。どれもシンプルでよく見る形です。

 

まずは左のヘッダーにあたる部分(1)をクリック、右のHEADERの中からHeader1(2)を選びました。

 

こんな感じでデザインサンプルが入りました。これを後ほどダウンロードするhtmlファイルで見てみると、

 

パソコンの場合はこうで、

 

スマホの場合はこうなります。Companyというタイトルの下にSearch(検索)ボックスやSNSアイコンが下に来てちゃんとレスポンシブが効いているのが分かります。

 

 

ヘッダー A に続けて B C D とコンポーネントを入れていきます。

 

合計4つでこんなサイトです。

 

ここから先同じ様にする場合は、

HEADERにはA、CONTENTにはB、

 

もう1つCONTENTにC、FOOTERにはDを選んでください◎

BLOGは選びませんでした

 

選び終わったら「GENERATE」をクリックしてデータファイルをダウンロードします。

 

ファイルをダウンロードした後の使い方

ダウンロードした「file.zip」をダブルクリックで解凍します。

 

「template.html」をダブルクリックして表示してみると4つ選んだコンポーネントが入ったサイトになっているのが確認できると思います。

あれ?写真がこれと違うよ

それは後で説明しますが「再読み込み」する度に変わるので違っていてOKです

 

VSCodeなどのソースコードエディタでダウンロードした「file」フォルダを開きます。

 

Visual Studio Code、Sassコンパイルのフォーマット

 

template.htmlファイルの中をざっと見てみます。205行目までコードが書いてあります。199行目にはAperitifの4つ目(D)のコンポーネントに選んだFooter2の表記はここまで(END)、と書いてあります。

 

83行目には1つ目(A)に選んだHeader 1はここまで(END)と書いてあり、87行目は2つ目(B)の始まり(START)〜99行目が終わりです。

STARTとENDに囲まれた範囲のコードが1つのコンポーネントなんだね

 

更新の度に変わる画像?Lorem Picsum

先程書いた画像の件です。

89行目(コンポーネントB)の大きな画像のURL、unsplash.it をググってみると、

 

Lorm Picsumと言う画像は決まっていないけれど仮に入れておきたい時に使うので有名なサイトへ行きます。(ダミー文章はLorm Ipsumがあります)

ここの下のURLを、

 

コピーして使いたい所にペーストすると、同じ様に更新する度にダミー画像が変更します。

 

 

手持ちの画像と差し替えましょう

次はダミー画像ではない自分で用意した画像を入れる方法です。

コードに書いてあるのと同じ400×300pxのサイズでjpeg画像を作りました。これを4つ並んだ左端と差し替えてみます。

 

やり方は色々ですがベーシックに「img」(イメージ)フォルダを新しく作成し、その中にhalloween.jpg画像を入れました。今後画像が増えた時はこのimgフォルダに入れる事になります。

 

109行目の src=”https://unsplash.it〜” を src=”img/halloween.jpg” と書き換えます。ここで大事なのは画像までのリンク(パス)です。”imgフォルダの中の、〇〇画像” と言うふうに書きます。

なのでimgフォルダの位置、階層が変わればパスの書き方も変わります。

リンク URLの書き方

 

cssファイルを見てみます

ダウンロードしたfileフォルダ>assets>css>modules.cssファイルがあります。これを見てみます。

htmlファイルでこのcssファイルをリンクさせているおかげで文字や色、配置などデザインが決まります。なのでこのリンクを外すと(この行を削除したりすると)、

 

白かった文字の色がデフォルトの黒になり、ボタンの装飾が無くなり、レスポンシブも効かないので画面を狭くするとカラム落ちと言って下に画像が落ちたり、デザインが崩れます。

 

 

CSSファイルはどれをダウンロードしても共通

AperitifでどのHEADERを選んでもどのCONTENTを選んでもCSSファイルは全てに対応した内容で共通のようでした。( style.min.cssも)
この量のhtmlファイルに対してCSSが1657行と随分長かったので違うHEADERなどを選んでダウンロードしたらCSSは共通だと確認出来ました。

JavaScriptのファイル、index.jsも共通でした

CSSは同じ、、なのにどうしてサイトで表示した時に不要な物が表示されないの?

 

CSSは装飾の準備だけして同じクラス名(ここで言うと1659行目に試しに追加した「.H_bar」の事)がhtmlファイルに書かれるのを待っているイメージです。

この状態で保存>更新してもHero Areaの文字の下は何も変わりませんが、

htmlファイルに H_bar(こちらに書く時は「.」は不要)を書いて保存>更新するとCSSで準備していた装飾などが適応され表に出てきます。

なのでCSSには選択したコンポーネントには関係の無い不要コードが沢山ありますので、どれが不要か分かれば削除しても問題ありません◎

 

 

コンポーネント化されている利点

Aperitifはコードがコンポーネント化されているので簡単に増やせます。

紹介したい商品が多いのでコンポーネントCをもう1つ増やしたいとします。そんな時はhtmlファイルのコード116〜155行目をコピーします。

 

すぐ下にペーストします。

 

Cが増えました(水色のC)。こうした後で画像、文章を差し替えれば簡単です。

 

 

同じようにコンポーネントD(フッター)をコピーしてCコードとCコードの間にペーストするとこんなデザインになります。フッターの場合<footer>〜</footer>と言うコードが2つあるのは少し問題がありますがこの後アレンジしてください◎

 

 

javascriptファイルを見てみる

CSSファイルはhtmlファイルの上の方head内にリンクを書きますが、javascriptのファイルは</body>の直前にリンクを書くのが良いとされています。今回は202行目です。”assetsフォルダの中の>jsフォルダの中の>index.jsファイルを読み込む” と書いてあります。

index.jsファイルもCSSと同じで全部共通内容が書かれていました。そして今回はこのファイルは必要ないのですが選択したコンポーネントによっては必要になります

 

html,css どこに何が書いてるか見てみましょう

全部は解説できませんが目に付いた所々を解説しますので、これを足掛かりに色々アレンジして頂ければ◎

フッターのリンク部分、ここの色を変更したいと思ったら。

 

 htmlファイルの152行目からがフッター(footer)です。150行目にもそのように書いてあります。で、色を変えるにはcssファイルのコードを書き換えます。cssの長〜いコードの中からこの部分を探す方法の1つは class=”〇〇” の〇〇、ここ言うとMOD_FOOTER2 をコピーします。

これをクラス名と言います

 

cssファイルで(VSCodeの場合)command+Fで上から検索窓が降りて来ますのでそこにペーストします。すると該当する文字が何個あってどこにあるか表示されます。

長いコードの「ここ」の部分に集中していたようです(画面右)

 

1070行目の「.MOD_FOOTER2 a」が探していたリンク文字です。白だったのをオレンジ色に変更。

 

保存して更新すると色が変わりました。(横のEmailなども変わってしまいましたが、変わらないようにする方法もあります)

 


ちょっとブレイク。4つのコンポーネントはFlexboxを使っていました。


 

コードで書かれている?アイコンのイラスト

htmlファイルの70行目から数字の羅列があります。ヘッダーのSNSアイコン5個分です。(フッター部にも同様のコードがあります)

 

実はこれはX座標、Y座標のコードで書かれています。FacebookとPinterestのコードを比べると複雑な図形のPinterestはコードが多いです。

Inkscape はコードで描かれている?

う〜ん、コードで書かれている?

 

Pinterestの79行目上の8-8を1-8と書き換えてみると図形が崩れるのでコードで書かれているという意味が分かると思います。

なんとなく納得!

 

SNSアイコンを画像と差し替える

今見た長いコードのSNSを通常の(?)画像と差し替える方法です。

70行目の <svg から< /svg> までを削除します。そこに<img src=”img/〇〇(ファイル名)” alt=””>と書きます。ここで使うファイルは上の方で作ったimgフォルダに入れておいてください。

 

画像差し替え完了。

 

必要であればcssで大きさも変更します。Twitterなどの大きさ指定の前の行に書きました。(ので、ここから先css、htmlも行数が説明と若干ずれるかもしれません)

 

もっと便利な”アイコンフォント”を使ってみる

IcoMoonと言う使いたい分のアイコンが選べて、オリジナルも作れるサービスがあります。
→こんな
私はこれが好きでよく使っていましてお客様のサイトにも活用しています。Font Awesomeも便利で使っていますが、あるお客様が外部サーバー参照はシステムの関係で止めてほしいと仰りこうゆう時もIcoMoonは問題なく使えました。

 

WordPressにIcoMoonで作ったアイコンフォントを入れる方法_前編

Inkscapeで描く→アイコンフォントにする→WordPress子テーマに入れる

INKSCAPEでアイコンフォントを描く時の注意点

 

Font Awesomeの使い方_WordPressで使う方法

AperitifでIcoMoonのアイコンを使う方法

ここからはIcoMoonでダウンロードしたファイルをAperitifで使う方法です。

 

ダウンロードしたファイルを解凍したのが画像中央です。必要なのはfontsフォルダ(とその中の4つのファイル)とstyle.cssファイルです。この2つをAperitifのフォルダに入ます(画像下)。style.cssはよくある名前で重複しやすいのでicomoon.cssと書き換えました。

 

icomoon.cssが使えるようにAperifitのhtmlファイルの12行目に上記のようにリンクを書きます。もう1つやる事があります。

位置関係が変わったらurlパスも書き換える

icomoonフォルダ内の時の「fonts」と「icomoon.css(元 style.css)」の位置関係を変えてしまったのでicomoon.cssファイルを開いてURLを書き換えないとパスが通らないのです。「../」は1つ上のフォルダを意味します。(2つ上の画像を見てください)icomoon.cssから見てfontsは2つ上のフォルダと同じ階層なので「../../」を3、4、5、6、7行のurlに加えます。

ちょっと面倒だね。何で位置関係を変えたの?

CSSファイルはCSSフォルダにまとめたかったからよ

なので絶対ではありません。位置関係を変えなければこの作業は不要です◎ これで準備は完了です。

 

実際にアイコンを使ってみます。htmlファイル、75行目の<svg 〜 </svg>を削除します。これは削除前はヘッダーTwitterのアイコンです。そこにicomoonのアイコン名<i class=”icon-girl”></i>を書きます。(ご自身でダウンロードしたアイコンによって変わります)

 

表示されました。ここではリンクになっているのでデフォルトの紫&下線が付いていますが、

 

大きさなどと共にそれも変更できます。マウスホバー(:hover)時にオレンジ色に変わるようにしました。下線を消すのは text-decoration: none; です。

 

コピペで使えるCSSサンプル

 

 

こんな感じでFacebook、You Tube、 Instagram(元の位置とはあべこべですが)のIcoMoonを入れてコードも短くすっきりさせました。

 

オリジナル(上4つ)も既存のよく見るアイコン(下4つ)も使えるIcoMoonでした。

 

IcoMoonで作ったアイコンの制作販売

17,000円で4つ、オリジナルが欲しいけれど自分で作るのは自信がないと言う方はぜひご利用ください。coconalaココナラさんからでもこのサイトの「お問い合わせ」からでもご連絡ください。

 


 

Bootstrapのテンプレートにアイコンフォントを入れる

Bootstrapのテンプレートを使った方法も解説しています。