HPサポートの紹介・概要・コンセプト
ご案内
当サイトは、ホームページの制作や保守管理をはじめとする幅広いサポートを致します。
Digitalコミュニケーションにより、ありとあらゆるものがインターネットを通じてつながり、限りなくリアルとネットの境界線がなくなっていきます。
企業のマーケティングは、One to Oneマーケティングが更に進み、
販売促進から購買支援やライフスタイルの提案に変わっていきます。
一方、ユーザー（生活者）はよりパーソナライズされたサービスを受けられるようになります。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を
行う事でHP下部の著作を外す事ができます。
お知らせ
- 2024/02/25全体
- 当サイト正式公開
HP制作サービスについて
お客様の要望に合った
- モバイルファーストの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ファイルに関するご質問等は受け付けておりません。
そのままで使える環境のお客様はご活用下さい。
Gallery
lightboxの使い方
サムネイル画像をクリックすると、画面が暗転してポップアップが開きます。
海外で配布されているプログラムなので、カスタマイズなどには弊社では対応していません。ご自身でGoogle検索などかけてみて下さい。
■画像を増やしたい場合
基本的にはご利用のテンプレートのhtml側のパーツをコピペして増やしてみて下さい。
以下のタグのように大画像はaタグ内で読み込み、サムネイル画像（小さな画像）はimgタグで普通に読み込まれています。
このテンプレートではどちらの画像も同じ画像を使っていますが、それぞれ別の画像を配置して頂いても構いません。
<a href="images_photo/sample1.jpg" data-lightbox="group1" data-title="タイトルをここに入れます">
<figure><img src="images_photo/sample1.jpg" alt=""></figure>
</a>
■タグの説明
data-lightbox="group1"は、ポップアップで表示した場合に次の画像へリンクでつないていくかの設定です。「group1」部分は好きに変更して頂いて構いませんが、ここを同じ名前で揃えておけば、画像の右半分にカーソルをのせた時に次の画像へのリンク用のアイコンが出ます。
data-title="タイトル"は、lightboxで暗転表示された際に写真下に表示されるテキストです。
よく分からない場合は実際に設定して動作を確認してみて下さい。不要ならタグごと削除してもらえばOKです。