2008年10月28日

新着記事一覧の掲載

トップページからブログ記事を削除したら、随分とさびしいページになってしまいました。
空白を埋めるため、というだけの理由ではないのですが、新着記事の一覧を掲載してみることにしました。
とある参考書を見ながら、テンプレート「メインページ」に以下の記述をしました。
<div id="news">
<h3>新着記事一覧</h3>
  <ul>
<MTEntries lastn="10">
    <li><$MTEntryDate$><br />
    <a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
    <$MTEntryTitle$>をアップロードしました。</a></li>
</MTEntries>
  </ul>
</div>

その後、スタイルシート(ベーステーマ)で見出しを画像にしたり、余白の調整などを行い、作業終了です。

2008年10月27日

トップページの修正

トップページを普通のホームページ風にカスタマイズしようと考えています。
ブログ記事がトップページでは表示されないようにし、その代わりにあいさつの文章と画像を載せてみようと思います。
まずトップページ"index.html"を生成するテンプレート「メインページ」をすべてコピーし、新たにインデックステンプレート「ブログページ」を作成してそこにペーストします。
次に「メインページ」の中でテンプレートモジュール「ブログ記事の概要」を読み込んでいる部分を削除、そこに以下の記述をしました。
<div id="message">
<img src="images/top_image.jpg" />
<p>
ようこそKim's Blogへ!<br />
(中略)
また、姉妹編(?)の"Kim's Blog-2"もよろしくお願いいたします。</p>
</div>
最後にメニューに「ブログ記事」を追加するため、テンプレートモジュール「ヘッダ」を修正、余白を調整するためスタイルシート(ベーステーマ)を修正して今回の作業は終了です。

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;
}

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

ウェブページ作成

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

2008年10月11日

カウンターの設置

カウンターを設置してみました。
FC2の無料サービス「FC2カウンター」を利用しました。
数字の画像をPhotoshopで作成、アップロードします。各種設定を終え、示された設置タグをコピーしてテンプレートモジュール「サイドバー(2カラム)」の最後に貼付けます。
もちろん、最後といってもdivタグ2つの前で、貼付ける位置を間違えるとレイアウトが崩れます。
その後、スタイルシートでレイアウトを調整します。
テンプレート「スタイルシート(ベーステーマ)」に以下の指定を追加しました。
/*counter*/
#counter{
    margin: 10px 0 0 70px;
}
初期値はとりあえず50にしました。うっかりカウンターをクリックすると、FC2カウンターのPRページが別ウィンドウで開いてしまいますが、仕方がないでしょう。以上です。

2008年10月 7日

「先頭に戻る」の画像化など

今回は微調整です。
1月ほど前にページのトップ(先頭)に戻るリンクを設定しましたが、そのテキストを画像に変えてみました。
テンプレートモジュールの「フッター」中の「ページのトップに戻る」というテキストを削除、以下のような画像のパスに差し替えました。
<img src="<$MTBlogURL>images/to-top.gif" width="135" height="23" alt="ページの先頭に戻る" />
次に、フッターの文字をセンタリングしてみました。
テンプレートのスタイルシート(ベーステーマ)の最後の方に#footer .widget-powerd .widget-contentというセレクタがあるので、その中のtext-alignの値をleft→centerに変えるだけです。以上です。

2008年10月 5日

テンプレート修正に伴う余白

昨日の投稿の最後に書いたとおり、今まで別ファイルだったスタイルシートをコピーし、テンプレートの中のスタイルシート(ベーステーマ)にペーストしました。
同時に、テンプレートにあるもうひとつのスタイルシート(メイン)で別ファイルを読み込む指定@import urlL(http://...../screen.css);という1行を削除しました。
背景の斜線やヘッダの画像がリンク切れとなって表示されなくなったので、パスを修正、ブラウザで確認すると・・・・。 Safari、Firefoxなど、問題なく従来どおり表示されましたが、Win版IE6(v.5以前は未確認)だけは右側に約50ピクセルの余白ができてしまいました。
これから原因を究明したいと思いますが、私の知識では見通しは厳しいでしょう。

2008年10月 4日

ヘッダとフッタの修正

Kim's Blog-2の制作に忙しく、こちらのブログがしばらく休止状態になってしまいました。
今回はヘッダの画像を変更するとともに、フッタについては画像を削除し、すっきりとさせてみました。
いくらかイメージが変わったと思います。
しかし、試行錯誤でカスタマイズを進めてきたということもあり、テンプレートの修正よりも、主に別ファイルのスタイルシートを修正するという変則的な形になってしまいました。
そのため、いちいちDreamweaverを立ち上げ、スタイルシートを開いて修正、アップロードという面倒な作業を強いられているのです。
ここまで書いてきてふと思いついたのですが、別ファイルになっているスタイルシートの中身を、テンプレートのスタイルシート(ベーステーマ)にそっくりコピペしたらどうなんでしょう。
これは次回に試してみることにします。
ページの先頭に戻る