• 2009年1月20日(火) 00:10 JST
  • 投稿者:
    augebang
  • 閲覧数
    2,297

記事タイトルのアイコンを移動させるデザイン。

テーマクッキング各記事部分の変更の「独り言」にも書きましたが
記事タイトルの横にメールを送る・印刷用ページ・PDFアイコンが設置されてます。
これはタイトル部分の横にリストで表示されてるので別物です。

上記の理由より記事カラム幅一杯のタイトル画像やボーダー線が使えなくなってます。
これをつかうようにするには・・・

story.cssの

/* 記事タイトル */
div#centerblocks div.storytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}

/* 記事タイトル */(注目記事)
div#centerblocks div.featuredstorytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}

/* 記事タイトル */(アーカイブ)
div#centerblocks div.archivestorytext h2 {
float: left;
margin: 0 0 1em 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}

これらの float: left; float: none; に書き換えます。

これで記事ブロックの大きさにタイトルを指定できるのですが
別物のアイコンをどこかに移動しなければそこで切れてしまいます。
これを回避するためにstargazer15greengrass15はコメント・トラックバック
の横に持ってくるように修正をしています。

修正するファイルは

  1. storytext.thtml
  2. featuredstorytext.thtml
  3. archivestorytext.thtml

の3ファイルです。

storytext.thtmlを例に解説していきます。




  •   この部分がアイコン関係




















までがアイコン表示の部分です。
この中の




  • の中にコピーし

    までの部分を削除します。



    •   この部分を削除


    修正後は以下のようになります。





















    同様の修正を残りのファイルにすれば出来上がりです。

    トラックバック

    このエントリのトラックバックURL:
    http://gltmatrix.com/trackback.php/kizidezi

    サイト管理者はコメントに関する責任を負いません。