おしゃれなポートフォリオ向け無料ホームページテンプレート tp

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>おしゃれなポートフォリオ向け無料ホームページテンプレート tp_portfolio1</title>
を編集しましょう。
あなたのホームページ名が「Sample Portfolio」だとすれば、
<title>Sample Portfolio</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

h1ロゴのaltタグも変更しましょう。
html側に、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

アイコン画像について（Font Awesomeの解説）

imagesフォルダに入っていない画像（アイコン）は主にFont Awesomeの素材です。（※マップ上のアイコンは、ブラウザのアイコンです）
Font Awesome 公式サイト
 Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。

画面右上のSNSアイコン

Font Awesomeのアイコンです。一般的なSNSアイコンを入れていますので、使わないアイコンはhtml側から削除して下さい。アイコンのコードはhtmlの下の方にあります。「sns」でテキスト検索をかけて下さい。
アイコンの並び順と同じ順序でコードが入ってるので、使わないアイコンの行を削除すればOK。

イラスト、写真素材について

当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ライセンス契約により、haconanaポイント特典付与を行っている場合もあるので、ご予定の場合はライセンスページをチェックして下さい。（※ポイント付与特典は予告なく終了する場合もあります）

Worksブロック

正方形または画像そのままの比率でのいずれかで使うことができます。
html側に「square」というスタイルがつくと正方形になります。
画像とテキストブロックを交互に使っていますが、画像だけでもOKです。
デフォルトでは3カラムですが、変更もできます。cssフォルダのstyle.cssから「list1」でテキスト検索をかけ、repeat(3,というところの数字を変更すればOKです。ただし、小さな端末で見づらくなるので、テキストを使う場合は注意して下さい。

以下は画像の比率そのままの出力です。htmlから「square」という文字を抜いた場合は以下のように画像がそのまま出力されます。お好みで使い分けて下さい。

タイトル

ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。

Serviceブロック

こちらは、上と異なり画像そのままで出力されます。
デフォルトでは3カラムですが、変更もできます。cssフォルダのstyle.cssから「list2」でテキスト検索をかけ、repeat(3,というところの数字を変更すればOKです。
カラム間のスペースを調整したい場合は、「gap: 10vw;」という行の「10」の数字を変更して下さい。10vwは画面幅10%のことです。