オープンソースCMSGeeklogのテーマ無料配布と制作支援のサポートサイトです。


2010年3月21日(日) 12:28 JST

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

テーマクッキング各記事部分の変更の「独り言」にも書きましたが
記事タイトルの横にメールを送る・印刷用ページ・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を例に解説していきます。

<!-- storytext.thtml { -->

<div class="storytext">
  <h2>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h2>

  <ul class="icon">
    <li>{email_icon}</li>
    <li>{print_icon}</li>  この部分がアイコン関係
    <li>{pdf_icon}</li>
    <li>{edit_icon}</li>
  </ul>

  <ul class="status">
    <li>{story_date}</li>
    <li>
      <dl>
        <dt>{lang_contributed_by}</dt>
        <dd>{start_contributedby_anchortag}{contributedby_author}{end_contributedby_anchortag}</dd>
      </dl>
    </li>
    <li>
     <dl>
        <dt>{lang_views}</dt>
        <dd>{story_hits}</dd>
      </dl>
    </li>
  </ul>

  <div class="story_introtext">
    <span class="story_image">{story_anchortag_and_image}</span>
    {story_text_no_br}
  </div>

  <ul class="navi">
    <li>{page_selector}</li>
    <li>{start_readmore_anchortag}{lang_readmore}{end_readmore_anchortag}</li>
    <li>{post_comment_link}</li>
  </ul>

  <ul class="feedback">
    <li>{plugin_itemdisplay}</li>
    <li>{comments_with_count}</li>
    <li>{start_trackbacks_anchortag}{trackbacks_with_count}{end_trackbacks_anchortag}</li>
  </ul>
</div>

<!-- } storytext.thtml -->

 <ul class="icon"> ~ </ul>までがアイコン表示の部分です。
この中の

    <li>{email_icon}</li>
    <li>{print_icon}</li>
    <li>{pdf_icon}</li>
    <li>{edit_icon}</li>

を<ul class="feedback"> ~ </ul>の中にコピーし

  <ul class="feedback">
    <li>{plugin_itemdisplay}</li>
    <li>{comments_with_count}</li>
    <li>{start_trackbacks_anchortag}{trackbacks_with_count}{end_trackbacks_anchortag}</li>
    <li>{email_icon}</li>
    <li>{print_icon}</li>
    <li>{pdf_icon}</li>
    <li>{edit_icon}</li>
  </ul>

<ul class="icon"> ~ </ul>までの部分を削除します。

 <ul class="icon">
    <li>{email_icon}</li>
    <li>{print_icon}</li>  この部分を削除
    <li>{pdf_icon}</li>
    <li>{edit_icon}</li>
  </ul>

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

<!-- storytext.thtml { -->

<div class="storytext">
  <h2>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h2>

 

  <ul class="status">
    <li>{story_date}</li>
    <li>
      <dl>
        <dt>{lang_contributed_by}</dt>
        <dd>{start_contributedby_anchortag}{contributedby_author}{end_contributedby_anchortag}</dd>
      </dl>
    </li>
    <li>
     <dl>
        <dt>{lang_views}</dt>
        <dd>{story_hits}</dd>
      </dl>
    </li>
  </ul>

  <div class="story_introtext">
    <span class="story_image">{story_anchortag_and_image}</span>
    {story_text_no_br}
  </div>

  <ul class="navi">
    <li>{page_selector}</li>
    <li>{start_readmore_anchortag}{lang_readmore}{end_readmore_anchortag}</li>
    <li>{post_comment_link}</li>
  </ul>

  <ul class="feedback">
    <li>{plugin_itemdisplay}</li>
    <li>{comments_with_count}</li>
    <li>{start_trackbacks_anchortag}{trackbacks_with_count}{end_trackbacks_anchortag}</li>
    <li>{email_icon}</li>
    <li>{print_icon}</li>
    <li>{pdf_icon}</li>
    <li>{edit_icon}</li>
  </ul>
</div>

<!-- } storytext.thtml -->
 

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

 

記事のオプション

トラックバック

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

この記事にはトラックバック・コメントがありません。
記事タイトルのアイコンを移動させるデザイン。 | 0 件のコメント | アカウント登録
コメントは投稿者の責任においてなされるものであり、サイト管理者は責任を負いません。