2009年4月 1日

メニューを画像に

サイドバーのメニューを画像にしました。
Movable Typeアップグレード前の記事「メニューの画像化」に書いた方法と基本的に同じです。
用意した画像は下のような画像1枚だけです。
navi.gifまた、修正したのは、ウィジェット「リンク」とテンプレート「スタイルシート(オリジナル)」の2つです。
ウィジェット「リンク」のddタグの部分は、以下のとおりです。

<dd class="side">

<ul id="navigation">

<li id="navi01"><a href="http://kim.art.coocan.jp/my_blog/blog.html">ブログ記事</a></li>

<li id="navi02"><a href="http://kim.art.coocan.jp/my_blog/gallery.html">携帯写真ギャラリー</a></li>

<li id="navi03"><a href="http://kim.art.coocan.jp/my_blog/link.html">リンク集</a></li>

<li id="navi04"><a href="http://kim.art.coocan.jp/my_blog/profile.html">プロフィール</a></li>

<li id="navi05"><a href="mailto:shoji.s.kimura@nifty.ne.jp">E-mail</a></li>

</ul>

</dd>

次に、スタイルシート(オリジナル)の内容は以下のとおりです。
/*リンクを画像にする*/
ul#navigation{
      list-style: none;
      text-indent: -9999px;/*テキスト非表示*/
}

ul#navigation li{
      width: 153px;
      height: 24px;
}

ul#navigation li a{
      display: block;
      width: auto;
      height: 24px;
      margin: 0;
      padding: 0;
      text-decoration: none;
      background: url(http://kim.art.coocan.jp/my_blog/images/navi.gif) no-repeat;
} 

ul#navigation li#navi02 a{background-position: 0 -24px;} 
ul#navigation li#navi03 a{background-position: 0 -48px;} 
ul#navigation li#navi04 a{background-position: 0 -72px;} 
ul#navigation li#navi05 a{background-position: 0 -96px;} 
ul#navigation li#navi01 a:hover{background-position: -153px 0;}
ul#navigation li#navi02 a:hover{background-position: -153px -24px;}
ul#navigation li#navi03 a:hover{background-position: -153px -48px;} 
ul#navigation li#navi04 a:hover{background-position: -153px -72px;} 
ul#navigation li#navi05 a:hover{background-position: -153px -96px;} 

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

メニューボタン修正

図1メニューボタンの表示がIE6で問題だったのですが、何とか無事に修正できました。
最初の状態は図1で、各項目の下に12〜15pxくらいの余白ができてしまいました。スタイルシート(オリジナル)は以下のとおりでした。
なお、IE以外のブラウザでは、以下の図1,2,4のケースで余白が生じることなく、問題なく表示されます。
ul#menu li a {
      display: block;
      background-image: none;
      background-color: #bfd7cd;
      padding: 3px 8px;
      border-bottom: #666 1px solid;
}

図2原因はpaddingの設定だろうと推測し、上下のpaddingの値を0にしてみましたが、結果は図2のとおりで、各項目の上下の幅が狭まっただけで、余白は全く同じです。
行間の指定(line-height: 1.5)が影響しているのかと考え、各項目の高さを24px、行間を同じ24pxに指定、左右の余白はテキストのセンタリングで対処することにしました。高さの「ついでに」幅も計算して153pxを指定しました。その結果、図3のように不具合はなくなりました。
スタイルシートは以下のとおりです。
ul#menu li a {
      display: block;
      width: 153px;
      height: 24px;
      padding: 0;
      background-image: none;
      background-color: #bfd7cd;
      text-align: center;
      border-bottom: #666 1px solid;
      line-height: 24px;
}

図3ここまででもよかったのですが、どうしてもテキストを左寄せにしたかったので、センタリングの指定を削除、そのかわり左に8pxのpaddingを設定してみたのですが、図4のように今度は右端に(おそらく)8px分の余白ができてしまったのです。
スタイルシートは以下のとおりです。なお、widthの値は、153pxからpaddingの8pxを差し引いた値に変更しています。
ul#menu li a {
      display: block;
      width: 145px;
      height: 24px;
      line-height: 24px;
      background-image: none;
      background-color: #bfd7cd;
      padding-left: 8px;
      border-bottom: #666 1px solid;
}

図4不思議なことにIE6では、ボーダー、背景色ともwidthで指定した幅にしか設定されないようです。
widthの値を153pxにしてみると、予想どおり余白はなくなったものの、当然ながらIE以外のブラウザで、メニュー部分がタイトルよりも8px分右側にはみ出してしまいました。
図5またも挫折しかかりましたが、やはり幅(width)の指定が問題なのではないかと思い、width: autoとしてみたところ、不具合が解消し、今の状態(図5)になりました(ちなみに、widthの指定を削除しても結果は同じです)。
おそらく、このようなバグは広く知られたものなのでしょうが、IE(6以前)にはいつも泣かされます。

2009年2月11日

リンクをメニューボタン風にする

左のサイドバーのLinks(menu)からはブログ記事と3つのウェブページにリンクしているのですが、ここをメニューボタン風に変えてみました。
まずこの部分に"menu"という名前を付け、ウィジェットテンプレートの「リンク」を編集して、<ul id="menu">とします。
次にテンプレート「スタイルシート(オリジナル)」に以下のように記述します。

/*リンクをメニューボタン風にカスタマイズ*/
ul#menu {
      border-top: #666 1px solid;
      border-right: #666 1px solid;
      border-left: #666 1px solid;
}
ul#menu li a {
      display: block;
      background-image: none;
      background-color: #bfd7cd;
      padding: 3px 8px;
      border-bottom: #666 1px solid;
}
ul#menu li a:hover {
      display: block;
      text-decoration: none;
      background-image: none;
      background-color: #ff3;
      padding: 3px 8px;
      border-bottom: #666 1px solid;
}

テキストの周りを線で囲み、背景色を敷き、かつブロックレベル要素にすることでボタンらしき外観にし、マウスオーバーで背景色と文字色を変える、という単純な仕掛けです。
しかし、またもやWin版IE6で躓いてしまいました。他のブラウザではイメージどおりの結果になったものの、IE6だけはボタンとボタンの間にすき間ができてしまうのです。
a要素への上下のpaddingの指定がいけないのかと考え、上記スタイルシートからその部分を削除して、その代わりにline-height: 2.0;という指定を入れてみたのですが、結果は全く同じでした。
また以前と同じようにここを画像にしようかと思っています。

2009年2月 9日

リストマークのロールオーバー

前回の投稿「リストのマークを画像に」でマウスオーバー時に三角矢印(リストマーク)の画像の差し替えについて少し触れました。
簡単なので、やってみました。
まず、矢印の色を深紅色に変えた画像を作り、後はテンプレート「スタイルシート(オリジナル)」を次のように修正しました(アンダーラインが修正部分)。ロールオーバー以外の、若干の調整も含まれています。
.side ul li {
      list-style-type: none;
}
.side ul li a {
      padding-left: 15px;
      background: url(images/arrow.gif) no-repeat 0 3px;
}
.side ul li a:hover {
      padding-left: 15px;
      background: url(images/arrow-red.gif) no-repeat 0 3px;
}      
.side li li a,.side li li a:hover {
      padding-left: 0;
      background:none;
}
ul#tags li a,ul#tags li a:hover {
      background: none;
      padding-left: 0;
      padding-right: 2px;
}

要するに、三角矢印の背景画像の指定をリストタグ<li>からアンカータグ<a>に変え、疑似クラスをセレクタにしてロールオーバーを実現させるという、初歩的なやり方です。

2009年2月 7日

リストのマークを画像に

サイドバーの各項目(=サイドメニュー)はどれもリスト形式になっていて、「小粋空間」さんのテンプレートでは、リストのマークは"circle"(線で描かれた丸)になっています(ただし、タグクラウドだけは非表示)。
今回は、そのマークを三角矢印の画像にしてみました。
まずPhotoshopで矢印の画像を作り、あとはスタイルシート(オリジナル)に以下のような指定をします。
/* Sidebar ------------------------------------------------------- */

/*項目の頭に三角矢印を付けることと、それに伴う調整*/
.side ul {
      padding-left: 0;
}
.side ul li {
      padding-left: 15px;
      list-style-type: none;
      background: url(images/arrow.gif) no-repeat 0 4px;
}
.side ul li ul {
      padding-left: 0;
}
.side li li {
      background: none;
}
ul#tags li {
      background: none;
      padding-left: 0;
}

ポイントは、入れ子になっているサブのリスト及びタグクラウドにはマークの画像を表示させないことと、マークの表示位置の調整です。
表示位置は何度かやってみて、X軸を0(左寄せ)、Y軸を4px(上から4ピクセル下)としましたが、ブラウザによって微妙に上下に位置がずれるので、難しいところです。
マウスオーバー時に画像を差し替えて矢印の色を赤系統に変化させるということも可能ですが、今日はこれくらいにしておきます。

2009年2月 6日

トップページの修正

トップページを修正しましたので、かなり以前のブログの外観に近づいてきました。
作業内容は、以前の投稿「トップページの修正」(タイトルまで同じ!)と「新着記事一覧の掲載」に書かれていることとほぼ同じです。
ただ、新着情報の部分("news"と名前を付けてあります)については、マージンやテキストに関して若干の調整が必要になったので、「スタイルシート(オリジナル)」に以下の指定を追加しました。
#news ul{
      margin-left: 15px;
}
#news li{
      margin-bottom: 10px;
      font-size: 75%;
      color: #333;
}

あと、「ページの先頭に戻る」ボタンを各ページの下の方に設置しました。
これについては、以前の記事「ページのトップに戻ること」「「先頭に戻る」の画像化など」がありますが、ボタンを表示させるためのコードは同じものの、追加したテンプレートは「フッタ」1つではなく、以下の6つのテンプレートとしました。
  • メインページ(index.html)
  • ブログページ(brog.html)
  • ウェブページ
  • ブログ記事
  • ブログ記事リスト
  • 検索結果

「フッタ」テンプレートの内容が変わったので、レイアウトの都合上、少し煩雑でしたが、上記の各テンプレートにコピー、ペーストすることになりました。
ブログの復元でまだ残っているのがナビゲーション(メニュー)の部分です。
今のところ、左サイドバーのカレンダーのすぐ下に「Links(Menu)」という形で表示されていますが、やはりメニューらしくしたいと考えています。

2009年2月 3日

カレンダー表示成功

カレンダーが表示されないので不思議だったのですが、以前Movable Type4.0に「小粋空間」さんのテンプレートを導入したときに、カレンダーのことが書かれていたのを思い出し、探したところ、「Movable Type (MT) テンプレート」の記事の中にカレンダーの表示方法が載っているのを見つけたのです。
そして、実に簡単にカレンダーを表示させることができました。
テンプレート「スタイルシート(オリジナル)」でカレンダーのタイトル(年月)と曜日のフォントサイズを若干大きくしました。以下のとおりです。
/* Calendar Widget */

.calendarhead{
      font-size:10px;
}

#calendar th{
      font-size:8.5px;
}

課題が一つ解決し、ほっとしています。

2009年1月26日

背景、ヘッダの変更など

カスタマイズを始めました。
まず、白い斜線の入った背景画像を敷いてみました。極く小さな画像の繰り返しで実現しています。テンプレート「スタイルシート(オリジナル)」に以下の記述をしました。
body.layout-three-column{
      background:#a3ccc8 url(images/back2.gif);
}

次に、以前も使っていた画像をヘッダに表示させてみました。スタイルシートは以下のとおりです。
#header {
      width:auto;
      height:130px;
      background: url(images/banner.jpg) no-repeat top center; 
}

続いて、記事の日付の背景の色、記事のタイトルの文字色、文字サイズなどを変更しました。スタイルシートは以下のとおりです。
/*ブログ記事日付等のバックの色*/
.date,
.trackbacks-header,
.comments-header,
.comments-open-header,
.search-header{
      background:#113377;
}

/*ブログ記事のタイトル*/
.entry-header{
      margin-bottom:8px;
      border-left:5px solid #115b77;
      font-size:110%;
      color:#113377;
}
.entry-header a{
      color:#113377;
}

これで以前の雰囲気に近づいてきました(背景の色はかなり違いますが)。

2009年1月23日

スタイル切り替え不可など

小粋空間さんのテンプレート導入は何とか成功しましたが、このテンプレートセットが「スタイル対応版」にもかかわらず、スタイルの切り替えができないのです。
いえ、小粋空間さんに文句を言っているのではありません。Movable Typeを4.23にアップグレードして以来、不具合が相次いでいるので、うまくインストールできていない可能性があると考えています。
レイアウトを2カラムにしたいのですが、「Movable Type 4.2 テンプレートセット(スタイル対応版)」の記事の後半のとおりにやっているつもりなのに、「スタイル」を選択する画面で、「カテゴリ」の欄に"Koikikukan Themes"と出てくるにもかかわらず、レイアウトのサムネール画像が表示されず、「レイアウト」のセレクトボックスにも「見つかりません」と出ます。
何度やっても同じ結果なので、スタイルの切り替えはあきらめました。
これからブログのデザインをカスタマイズしていくつもりですが、小粋空間さん作成のスタイルシート"styles-site.css"はそのままにして、新たに独自のスタイルシート"styles-kim.css"を作り、インデックステンプレートに追加することにしました。
そして、テンプレートモジュール「ヘッダ」にそのスタイルシートへのリンクを以下のように追加したというわけです。
<link rel="stylesheet" href="<mt:link template="スタイルシート(オリジナル)" />" type="text/css" />

もうひとつ、ウェブページ「携帯写真ギャラリー」も復活させました。
それにしても、ブログ復元までの道のりは結構長そうです。
ページの先頭に戻る