タグ「ウェブページ」 の検索結果(1/1)

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月17日

ウェブページ作成

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