*

トップのイメージ画像を入れ替える

公開日: : 最終更新日:2017/10/15 Webサイト作成

サイトのイメージ画像とロゴを入れ替えましょう。

あらかじめテンプレートにはサンプル画像が入っています。縦と横の大きさはサンプル画像に合わせるのがベスト。なぜかというと実際にブラウザで表示される画像は、大きさや配置がスタイルシート(CSS)で指定されているから。

image1

①がロゴで②がイメージ画像。

①のロゴは「幅が235pxで高さが39px」。②のバナーは「幅980px、高さ230px」に設定されています。

画像を作るときに注意することは、かならず大きさを合わせること。たとえば②の横縦が978×230と横が2px小さい画像でも、ブラウザでは980pxに引き伸ばされるため、画質が悪くなります。

ちなみに、スタイルシートで設定されているので、ソースタグの横幅は変更することはできませんが、タグの大きさと比率が同じであれば縦は小さくも大きくも可能です。また画像を保存するときは、「名前と拡張子」もサンプルに合わせるとソースタグを変更する手間がはぶけます。
たとえば、①のロゴの場合、名前は「logo1」、拡張子は「png」。画像の拡張子はpng以外に「jpg」や「gif」もあるので間違えないように注意を。

今回はレスポンシブサイトなので、スマホやタブレットのようなが幅が狭い画面で見ると、レイアウトが変わります。

チェック方法は、パソコンのブラウザの幅をマウスでスライドさせても見られますが、「responsivepx」などの専用ツールもあります。
http://kachibito.net/sample/remy-responsivepx/

image4



ad

関連記事

ファイルを開く

テンプレートをダウンロードして準備

さて、いよいよサイトを作っていきます。 まず、今回使うテンプレートファイルをパソコンにダウンロ

記事を読む

無料テンプレート

webサイトのテンプレートはどれを選ぶ?

さて、サイトのテンプレート選びです。 googleで検索をかけると、たくさんでてきます。 い

記事を読む

電話番号にリンクを設定する

スマホサイトによくある、タップをすると電話がかけられるリンクを設定します。 スマホ画面では電話

記事を読む

dreamweaver cc

サイト作成ソフトとHPビルダーの設定

サイト作成のソフトもいろいろありますが、代表的なものといえば「ホームページビルダー」と「Dreamw

記事を読む

ページのコピーと貼付けで注意すること

以前も書きましたが、ホームページ作成にはコピーと貼付け作業を頻繁に使います。 サイトの構成を考

記事を読む

スマホの画面

スマホサイトに画像やメニューを表示させない設定

スマホの画面は表示範囲が狭いので、縦長のサイトになります。 縦スクロールは操作がしやすいとはい

記事を読む

スマホ人口の増加

スマホのユーザーが増加中!なのに…

企業のウェブサイト(ホームページ)でも、まだスマートフォン対応していないものが多いですね。

記事を読む

バナー画像をJavaScriptで切り替える

前回スマホ用の画像の話をしましたが、jQueryのJavaScriptを使ってサブページのバナー画像

記事を読む

テンプレートの見出しタグ

タイトル(メタタグ)と見出しタグを編集する

テンプレートのソースタグ「<head>~</head>」の部分を編集します。

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

webサイトの運営にはサーバー選びが重要。 中小企業、個人事業者なら、レンタルサーバーが一般的

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

サゴシ
神社参拝と釣り場の探索

気持ちがいい秋晴れ。この季節は日差しが強くても、風がひんやりしているの

アジ
アジングを始めて二週間で気づいたこと

アジングをやりだして約二週間。台風の影響はあったものの、連休もあり、朝

釣れたアジ
アジングは楽しい!常夜灯で入れ食い

最近はまっているアジング。仕事帰りに車で約40分の波止場へ寄りました。

釣ったアジ
朝マズメのアジングに行ってきた

今回は朝マズメのアジ釣りに行ってきました。早朝も夕方と同じように魚が釣

ガイドスルーを使っているところ
アジングにおすすめ「TICT ガイドスルー」

釣りのゴールデンタイム、夕マズメのアジングに行ってきました。

→もっと見る

PAGE TOP ↑