Home > スポンサー広告 > テンプレート bazookaの編集

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/193-9cf3b2b4
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog
Trackback from 2011-04-16 (土) 15:37

-

管理人の承認後に表示されます (more…)

Home > スポンサー広告 > テンプレート bazookaの編集

Home > blog > テンプレート bazookaの編集

テンプレート bazookaの編集

blog

ブログのテンプレート bazookaKarafuto Blog - テンプレートを bazookaに変更したからさらに編集した。

個別ページのレイアウト

個別ページはメニューが下にくるので、他のページのようにメニューを横に持ってきた。テンプレート HTMLの個別ページ(<!--permanent_area-->)内の body要素の class属性を 'individual single'から 'individual double'に変更した。

コメントとトラックバックの上にある区切り線を削除した。テンプレート CSSから div#commentsと div#trackbackの backgroundを削除した。

記事の長さを伸ばした。CSSの body.double div#mainの min-heightと _heightを 2400pxに設定した。

見出しの調整

bazookaの前のテンプレート sharpgreenでは記事のタイトルが h3要素だったのが、bazookaでは h2要素になっているため、h3要素が空いてしまう。投稿した記事のすべての h4要素を h3要素に変更するのは面倒だから、見出しのレベルを一つずつずらした。

見出しのレベルを一つずつ下げた。テンプレート HTMLの h1要素を h2要素に、h2要素を h3要素に変更した。 テンプレート CSSの h1の宣言(プロパティ)を h2に、 h2の宣言を h3に、h3の宣言を h4に移した。 CSSの(body.mainIndex h1, body.double h1)の h1セレクタを h2に、(div.entry h2, div.entry h2 a, div.entry h2 a:link, div.entry h2 a:visited, div.entry h2 a:hover, div.entry div.textBody h2, div#comments h2, div#trackback h2)の h2セレクタを h3に変更した。

h1要素を新たに作成した。テンプレート HTMLの 'siteName'classの p要素を h1要素に変更した。CSSの div#header p.siteNameを div#header h1.siteNameに変更した。

見出しの文字を大きくして、h5要素に下線を引いた。テンプレート CSSの h3の font-sizeを 128%、h4の font-sizeを 128%、h5の font-sizeを 114%に変更した。h5に「border-bottom: 3px #f5f5f5 solid;」を加えた。

記事の h4要素、h5要素の上に h3要素がないとおかしいかと思い、個別ページの記事に h3要素を作成した。テンプレート HTMLの個別ページ(<!--permanent_area-->)の記事タイトル(<%topentry_title>)の下に「<h3><%topentry_category></h3>」を加えた。CSSに「body.individual h2 + h3 { display: none;}」を作成した。

marginを広げた

段落、見出し、リスト、テーブルなどの間が狭く感じたから、上下の marginを2倍にした。

p, pre, address, cite
margin: 1.6em 20px;
h4, h5, h6
margin: 1.6em 20px 1em;
ul, ol, dl
margin: 2em 20px;
table
margin: 2em 20px;

全記事のタイトル一覧を表示

bazookaでは全記事のタイトル一覧のページの テンプレートが用意されていなくて、FC2のテンプレートで表示されるから、bazookaのテンプレートで表示されるようにした。

Karafuto Blog - ブログの全ての記事のタイトル一覧を表示の時のように自分で書いてもいいが、Black Vicunavicuna_template.zipを使わせてもらった。

  1. vicuna_template.zipをダウンロードして、zipファイル内の black_vicuna1.txtファイルから Archives(全件タイトル表示)(<!--titlelist_area-->から<!--/titlelist_area-->)を取り出す。
  2. 1.の HTMLを編集。
    • グローバルナビを削除した。 'globalNavi'idの ul要素を削除。
    • 書いているのは自分だけだから、'author'classの li要素を削除。
    • カテゴリーをタイトル、日付の右に移動した。'category'classの li要素を span要素に変えて、'date'classの span要素の後ろに置いた。
  3. 2.をテンプレート HTMLの エリア外の適当なところにコピーした。
  4. テンプレート HTMLのその他ページの前後に<!--not_titlelist_area-->と<!--/not_titlelist_area-->を加えた。

Comments:0

Comment Form

Trackback+Pingback:1

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/193-9cf3b2b4
Listed below are links to weblogs that reference
テンプレート bazookaの編集 from Karafuto Blog
Trackback from 2011-04-16 (土) 15:37

-

管理人の承認後に表示されます (more…)

Home > blog > テンプレート bazookaの編集

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。