Search

Mucotan Official Web Site

自分でできる! おしゃれなWebサイト〜Chapter2サンプルサイト〜

Read me

このサンプルサイトでは、本書『自分でできる! Webサイト』のChapter 2(P.75〜)のカスタマイズを行った場合のサンプルサイトです。このサンプルサイトで本書で解説しているカスタマイズは下記になります。

・2-10(P.97)
「背景にパターン画像を配置する場合」

・2-11(P.99)
「タイトルを画像に変更する」

・2-12(P.102)
「ページ下部のメニューの文字の大きさを変える」

・2-13(P.105)
「トップページの画像を3列表示から2列表示にする」

本書で解説しているソースコードと同じものをこのページの下部に紹介しています。

※コードだけコピーをして、必要箇所に入力・変更などをしてください。
※ペーストをする該当箇所は本書を参考にして利用してください。

??????????????????????????????????????-

2-11「タイトルを画像に変更する」
P.101 STEP8

・リード文をなくし、タイトル画像だけ表示する場合

<hgroup class=”eleven”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><img src=”STEP4 でコピー(メモ)した画像のURL” alt=”<?php bloginfo(‘name’);?>”/></a></h1>
</hgroup>

・リード文を残し、タイトル画像を変更する場合

<hgroup class=”eleven”>
<h1><a href=”<?php echo get_option(‘ home’); ?>/”><img src=”STEP4 でコピー( メモ) した画像のURL” alt=”<?php bloginfo(‘name’); ?>”/></a></h1>
<h2><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>

???????????????
2-12「ページ下部のメニューの文字の大きさを変える」
P.104 STEP4

h2.widtgettitle {font-size: 90%;}
.footer li {font-size: 90%;margin: 0;}

???????????????
2-13「トップページの画像を3列表示から2列表示にする」
P.106 STEP4

.container .one-second.column, widget{
width: 460px;
}

© 2018 Mucotan Official Web Site . All Rights Reserved.