*

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

公開日: : 最終更新日: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

関連記事

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

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

記事を読む

メニュー部分をドラッグ

DreamWeaverの便利な「ライブラリ機能」

webサイト作成にはコピーとペースト(貼付け)作業をよく使います。 メニューやヘッダー(タイト

記事を読む

dreamweaver cc

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

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

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

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

記事を読む

TeraPad

サイト作成に役立つツール

webサイト作成には、バナーやボタンなどが必要です。 ホームページビルダーには「ウェブアートデ

記事を読む

php工房

問い合わせフォームを作る

ちょっと油断すると更新が遅れますね(笑 ところで、サイトに不可欠なのが問い合わせフォーム。

記事を読む

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

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

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

記事を読む

ファイルを開く

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

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

記事を読む

画像を回り込ませる方法

スタイルシート(CSS)で画像を回り込ませる

赤枠部分のような、CSSで文字の右や左に画像を回り込ませる方法。ホームページ制作によく使いますね。

記事を読む

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

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

記事を読む

ad

Message

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

ad

コンパクト卓上コンロ
シーズン前に釣りキャンプの準備中

暦では立春を過ぎましたが、北海道は猛烈な寒波に襲われ、関東地方も積雪だ

ライフジャケット
海釣りにライフジャケットは必需品!?

気温は低いものの天気が良いので釣りに出かけていますが、相変わらず釣果は

姫島の漁港
離島で釣り 糸島市の姫島に行ってきた

2019年も半月が過ぎすっかり正月気分も抜け、繁忙期の仕事に追われてい

シャローフリーク・プチ
シャローフリーク・プチ(3.3g)を使ってみた

アルカジックジャパンから発売されているフロート、シャローフリーク PU

ショアジギング用のリールとライン
ショアジギング用のタックルを揃えてみた

12月も残りわずかとなり、公私ともに慌ただしい日が続いています。

→もっと見る

PAGE TOP ↑