何回目かのウェブサイト全面リニューアル

ちょっと思うところあって7回目の拙サイト全面改修を挙行。
今回は見映えなどの大幅変更というよりも細かい箇所の改装が主目的だったが、構造見直しのためHTMLは全取っ替え。以下に今回の改修点を列挙。

• 横幅を960pxから1200pxへ
• ヘッダおよびサイドメニューの固定化
• 不要になったページの削除
• 「上に戻る」ボタンの削除
• メニュー展開時のアイコンのアニメ追加
• 文字詰めjQueryの追加

横幅変更

横幅は現状1200pxでも大丈夫と（勝手に）判断し変更。そのついでに今まで左寄せにしていたレイアウトを左右中心揃えに。そのTIPSはネット上に沢山転がっているので割愛。

サイドメニュー固定

ウェブ、ショウジンさんの記事「サイドメニューとフッターメニューをCSSのposition:fixedで固定する例 ＊一応「IE6」もいける。」を参考にした。深謝！

サイドメニューに該当するCSS

#side {
 width: 100%;
 float:left;
 position: fixed;
 overflow: auto;
 background-image: url("../images/common/eszett_logo01.jpg");
 background-repeat: no-repeat;
 background-position: 3.6rem top;
}
#sideWrapper {width: 180px;}

上記赤字の「position: fixed;」を追加することでサイドメニューは固定される。
そして、今回の密かな目玉である「eſzett」ロゴを背景に追加しこれもサイドメニューと共に固定させるために、上記青字を追加。幅100％はサイト全体の横幅に対する設定で、これにより背景ロゴはサイドメニューに設定しているにも関わらず中途で切れずに（サイドメニュー自体は#sideWrapperにて幅180pxに設定）表示される。

コンテンツ部分のCSS

#main {
 width: 900px;
 float: right;
 overflow: auto;
 position: relative;
 margin-bottom: 6rem;
}

コンテンツ部分のCSSにて、赤字の「float: right;」を追加で、コンテンツ部分は設定通りの場所に収まる。
また、サイドメニューに背景ロゴを追加したので、青字の「position: relative;」を追加することで、背景ロゴがコンテンツ部分上に被ることを回避。

「position: relative;」を設定しないと背景ロゴが被さる。。。

メニュー展開時のアイコンのアニメ追加

なにかというと、メニュー展開する項目の右に「＋」を追加して、メニュー展開時にこれが「-」に変わり、メニュー収納時にまた「＋」になるよう、今まで使用してきたメニュー展開jQueryを改良。詳説は別エントリ「縦型メニュー展開・収納時（開閉時）にメニュー横の＋−表示が切替るjQuery」にて。

文字詰めjQueryの追加

前エントリHTMLで文字詰め出来るJAVASCRIPTとJQUERYにて紹介したものを今回拙サイトに採用。その際、句読点・括弧類が2つ以上連続した場合「全角二分取り」になるだけでなく、欧文のenダッシュ・emダッシュ・掛算記号・©のアキ設定も追加。この拙ブログ最下部にあるコピーライト表記をご覧あれ。微妙すぎて判りづらいかも（苦笑


以上、変更の模様は拙サイト、www.eszett-design.comをご覧あれ。

---