2009年2月18日

ウェブページの見出しを画像化

3つあるウェブページ(携帯写真ギャラリー、リンク集、プロフィール)の見出しをテキストから画像に変えてみました。
Movable Typeを4.2にアップグレードする前の記事「ウェブページタイトルの画像化」と基本的には同じことをしました。画像もまったく同じです。
違うのは、見出し要素がh1→h2に変わっていること、各ページに付けられたエントリー番号(という言い方が正しいかどうか分かりませんが)、若干の調整等です。
一応、リンク集のスタイルシートのみを以下に記載します(他の2つのページと異なる部分にアンダーラインを引きました)。

/*リンク集*/
#entry-51 h2.entry-header{
      width: auto;
      height: 30px;
      margin-top:10px;
      padding:0;
      border:none;
      text-indent: -9999px;
      background: url(images/title/link.gif) no-repeat left center;
}

2009年2月 4日

ウェブページの追加

ウェブページを2つ(「リンク集」「プロフィール」)復元しました。
これでウェブページは「携帯写真ギャラリー」と合わせて3つになったわけですが、ナビゲーションがまだできていません。
そこで、当面の間に合わせとして、サイドバーにある"Links"をウェブページへのナビゲーションとして利用することにしました。
Linksに載せていた外部リンクのサイトは、ウェブページのリンク集にあるので、問題はないわけです。

2008年10月26日

ウェブページタイトルの画像化

3ページ制作したウェブページのタイトルをすべて画像にしてみました。
見出しタグ<h1>で囲んだテキストをマイナスのインデントで画面の外に押し出し、その代わりに背景画像を表示させるという、ごく一般的な方法です。
スタイルシート(メイン)の修正だけでできるのですが、ウェブページが生成されるとその本文の部分に番号(page-46のような)が振られるらしく、それを利用しました。以下のとおりです。

/*リンク集*/
#page-46 h1{
      width: auto;
      height: 40px;
      text-indent: -9999px;
      background: url(images/title/link.gif) no-repeat left center;
}
あとの2つは、ページ番号と画像ファイルの名前が違うだけなので省略します。

2008年10月24日

ウェブページとメニューの追加

ウェブページ「携帯写真ギャラリー」とメニュー"Mail"を追加してみました。
ヘッダーの下のメニューを画像化するなど、カスタマイズしたいと思うのですが、メニューが「リンク集」と「プロフィール」の2つでは少し寂しいので、あえて追加したというわけです。
「ギャラリー」については、能書きから下の部分に#photosと名前をつけてそれを大枠とし、個々の画像とコメントには.photoと名前をつけました。そして、スタイルシート(メイン)に以下の記述を追加しました。

#photos{
      width: 500px;
      height: auto;
      margin: 10px auto 0;
}
.photo{
      margin: 0 0 15px 0;
      text-align: center;
}
.photo img{
      margin: 0 auto 2px;
}
.photo p{
      width: 400px;
      margin: 0 auto;
      text-align: left;
}

この写真ギャラリー、あまり本気ではないので、そのつもりでご覧ください。

2008年10月17日

スタイルシート適用成功

前回の投稿で、ナビゲーションとウェブページにスタイルシートが効いていない、と書いたのですが、先ほど確認したら、ちゃんと適用されていました。ブラウザの再読み込みがうまくいかなかったのかも知れません。
ナビゲーションに関するスタイルシートは以下のとおりです。
#navigation ul{
      margin: 0 0 10px 20px;
      list-style-type:none;
}
#navigation ul li{
      display: inline;
      padding-right:20px;
} 

ウェブページについては、リンク集は#link、プロフィールは#profileと名前をつけ、以下のように記述しました。

#link{
      line-height: 2em;
}
#link ol li{
      color: #33789c;
      font-weight: bold;
}
#link ul li{
      color: #333;
      font-weight: normal;
}

#profile dl{
      margin-left: 20px;
}
#profile dt{
      font-weight: bold;
      color:# 33789c;
}
#profile dd{
      margin-bottom: 10px;
      text-indent:1em;
}

何はともあれ、ほっとしています。

ウェブページ作成

ウェブページを初めて作成してみました。
「リンク集」「プロフィール」です。
プロフィールは半分おふざけですが、それはともかく、ヘッダの下のナビゲーションメニューがあまりに素朴する感があります。
実は、リストマークを消すとともに、メニューが横に並ぶような指定をスタイルシートに書いたのですが、まったく効いてません。ウェブページの方にもスタイルシートは効いていないようです。
まだまだ勉強不足のようです。あー奥が深い。
ページの先頭に戻る