Sample Gallery

テンプレートのご利用前に

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『ギャラリー・作品展示サイト向け 無料ホームページテンプレートtp_simple18』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

お知らせ

2022/09/05その他
tp_simple18配布開始。
20XX/00/00Gallery
サンプルテキスト。サンプルテキスト。サンプルテキスト。
20XX/00/00Gallery
サンプルテキスト。サンプルテキスト。サンプルテキスト。
20XX/00/00
サンプルテキスト。サンプルテキスト。サンプルテキスト。
20XX/00/00その他
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

2021年10月「以前」にテンプレートを利用した事のあるお客様へ

2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
今後しばらく新作テンプレートの手直しが入るかもしれません。

  • モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
  • floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。
  • 2022年6月でMicrosoftのIEサポートが終了したのに伴い、弊社テンプレートもIE対応(バグ対応など)を終了しました。

当テンプレートの使い方

初心者向けマニュアル公開中

画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。

titleタグ、copyright、metaタグ、他の設定

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

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

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

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

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

メイン画像について

「tp_simple18_green」と「tp_simple18_heart」タイプのみ、横長の端末向き画像（bg_main.jpg）と、縦長の端末向き画像（bg_main_portrait.jpg）とで画像を切り替えられるようにしています。

お手元の画像に入れ替えたい場合、それぞれ同じ画像ファイル名にしてimagesフォルダ内に上書きして下さい。
閲覧する端末サイズによって切り抜かれる割合が変わるので、ある程度のサイズ変動に対応できる画像を使って下さい。

ロゴ画像について

ロゴは背景を透過したPNG画像で作られています。
自作される際は、必ず「正方形」でロゴ画像を準備して下さい。長方形で作ってしまうと楕円形（simple18_cubeの場合は長方形）で出力されてしまいます。

メニューに使っているフォントについて（Google Fonts）

メニューの文字は直接htmlにテキストで配置されています。必要に応じて入れ替えて下さい。

フォントについては、cssフォルダのstyle.cssの冒頭でGoogle Fontsを読み込んでそれを指定しています。
「tp_simple18_bamboo」のみ日本語フォントで縦書きスタイル。その他のテンプレートは全て英語専用フォントです。
フォントを変更したい場合はGoogle Fontsマニュアルをご覧下さい。

最後のメニュー（Instagramアイコン）のみ、Font Awesomeを使っています。Font Awesomeの説明は下の方で改めてしていますのでお読み下さい。

メニューの配置・数を変更したい場合

このテンプレートはメニューに特徴があるので、小さな端末になっても開閉メニューにはなりません。そのまま表示され続けます。

配置については、cssフォルダのstyle.cssの
/*メインメニュー
ブロック内にある「left」や「top」の数値で変更できます(端末サイズごとに再設定箇所あり)が、色々な端末サイズに変更した際にコンテンツと重なったりメニュー同士が重なりすぎたりしてしまうので、可能なら現状の配置のままご利用いただく事をおすすめします。

メニューを増やしたい場合、メニュー同士が重なりすぎてしまう端末環境が出てきてしまうのでおすすめしません。どうしても増やす必要がある場合はstyle.cssを調整して下さい。

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

imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

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

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

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

トップページの「お知らせ」ブロックのアイコンについて

「その他」「Gallery」など、テキスト部分はhtml側で直接入力されていますので必要に応じて編集して下さい。
アイコン用の文字数が増えすぎるとレイアウトが崩れます。ご注意下さい。

背景色は、cssフォルダのstyle.cssの、
#new dt span
や、
#new dt span.icon-bg1
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、上記の「#new dt span.icon-bg1」ブロックをコピペし、.icon-bg1部分を.icon-bg2などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg2">〜〜〜</span>
などとすればOKです。

psdファイルを梱包している場合あり

編集に役立ちそうなpsdファイル（Photoshopソフト用）を梱包しているテンプレートもあります。
（※梱包していないテンプレートもあります。）

「おまけ」なので、psdファイルに関するご質問等は受け付けておりません。
そのままで使える環境のお客様はご活用下さい。