Home > blog

blog Archive

スポンサーサイト

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

テンプレート bazookaの編集

  • 2008-12-17 (Wed)
  • 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-->を加えた。

テンプレートを bazookaに変更した

  • 2008-12-14 (Sun)
  • blog

ブログのテンプレートを fc2.VICUNAbazookaに変えて、少しいじった。

グローバルナビの削除

グローバルナビは、ページ上部にあるトップページ、プロフィール、ブックマークなどのリンク。

テンプレート HTMLから 'globalNavi'idの ul要素をすべて削除した。

プラグインの整理

テンプレート管理のページで bazookaはプラグインに対応していないと表示されるが、非対応ではない。プラグインをカテゴリ3に移動すれば、表示される。

プラグインのナビゲーション部分の Recent Comments、Recent Trackback、Linksを削除した。テンプレート HTMLから 'utilities'idの div要素内の Recent Commentsの dt要素、Recent Trackbackの dt要素、Linksの dt要素を削除。

CSSの 疑似要素を削除

blockquote要素の引用元を私は cite要素を使って表示しているから、引用元を表示する blockquoteの before疑似要素と after疑似要素を削除した。テンプレート CSSから blockquote[title]:beforeと blockquote[cite]:afterを削除。

del要素と ins要素の日付を私は要素内のテキストで表示しているから、日付を表示する delと insの before疑似要素を削除した。テンプレート CSSから del[datetime]::beforeと ins[datetime]::beforeを削除。

Google Analytics

Google Analyticsのトラッキングコードをテンプレート HTMLの body要素内の一番下にコピーした。

ゴミを削除

テンプレート HTMLの個別ページ(<!--permanent_area-->)の 'newer'classと 'older'classの li要素内の a要素の rel属性の 'nofollow'の後の '<'を取り除いた。

参考にしたサイト

Amazonアソシエイトをはじめてみた

  • 2008-11-21 (Fri)
  • blog

アフィリエイトは今までも気にはなっていたが、どちらかというとサイトに広告が付いていると嫌だなあと思っていた。しかし、今回なんとなくアフィリエイトをはじめてみた。Amazon アソシエイトGoogle AdSenseのどちらにするか迷ったが、手軽にはじめられそうな Amazonにした。

Amazon アソシエイト・プログラムに昼頃申しこんでおいたら、申し込みサイトの審査完了のメールが夕方に届いていた。

Amazonのウィジェット(ブログパーツ)の中の Amazon おまかせリンク(R) ベータ版をブログの左サイドに貼ってみた。Amazon おまかせリンク(R)は、Amazonがページにあった商品を自動的に選んで表示するらしい。

貼り付ける HTMLコードのスクリプトが「&lt;!--//--&gt;」でコメントアウトされていた。このブログは XHTMLなので「//&lt;![CDATA[//]]&gt;」に一応換えておいた。(スクリプトは「<」や「&」を使ってないからコメントアウトしなくてもよかったか?)

ベータテストバージョンの期間は、条件指定に関わらず、まれにアダルトタイトルが表示されてしまう場合のあること。という文章をヘルプで見かけたので少し期待していた。そこまでおかしな商品はないけれど、「National ホームベーカリー 1斤タイプ ペールオレンジ SD-BM101-D」「竹中式マトリクス勉強法: 竹中 平蔵」が表示される。

Amazon おまかせリンク(R)の詳細設定でキーワードや商品カテゴリーの設定をしたほうがいいようだ。しかし、それだと商品のカテゴリーやキーワードに基づいて自動的に最新の人気商品を表示する Amazonライブリンクとあんまり変わらないしな。

ブログ内検索の結果のリスト表示を少し変更した

  • 2008-08-02 (Sat)
  • blog

Karafuto Blog: ブログ内検索の結果をリスト表示に少し手を加えた。検索結果の記事のタイトルの下に本文の要約(200文字)を表示するようにテンプレートを編集してみた。

ブログのテンプレートは公式テンプレート sharpgreenを使用しています。

テンプレートの HTMLの編集

<!-- ▼検索結果の一覧ここから --> 
<!--search_area--> 
<div class="search_area"> 
<h3>「<%search_word>」の検索結果</h3>
<ul> 
<!--topentry--> 
<li>
<h4><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a>&nbsp;(<%topentry_year>/<%topentry_month>/<%topentry_day>&nbsp;|&nbsp;<%topentry_category>)</h4>
<p><%topentry_discription>...</p>
</li>
<!--/topentry--> 
</ul> 
</div> 
<!--/search_area--> 
<!-- /検索結果の一覧ここまで△ -->

「<%topentry_discription>」が本文の要約(200文字)を表示するテンプレート用の変数。

テンプレートの CSSの編集

スタイルは、Karafuto Blog: ブログの全記事のタイトル一覧を表示と同じにした。
div.search_area p {
    font-size: 100%;
    margin: 0.5em 2em;
    line-height: 1.6;
}
div.search_area h3 {
    margin: 0 0 1.5em 0;
}
div.search_area h4 {
    color: #999;
    font-size: 90%;
    font-weight: normal;
    margin-top: 2em;
}
div.search_area h4 > a {
    font-size: 120%;
}

参考

テンプレート用 変数一覧|FC2ブログ公式マニュアル

ブログの全ての記事のタイトル一覧を表示

  • 2008-07-21 (Mon)
  • blog

FC2ブログには、全ての記事のタイトル一覧のページがある。記事のタイトルが新しい順に2000件まで表示される。

FC2ブログの全記事のタイトル一覧を表示する URIは、ブログの URIに「archives.html」か「?all」を付ければいい。

私のブログの URIが「http://karafuto50.blog117.fc2.com/」だから、全記事のタイトル一覧の URIは「http://karafuto50.blog117.fc2.com/archives.html」か「http://karafuto50.blog117.fc2.com/?all」になる。

そのままだとFC2が用意したテンプレートで表示されますということなので、ブログのテンプレートで表示されるようにテンプレートの HTMLと CSSを編集した。

ブログのテンプレートは公式テンプレート sharpgreenを使用しています。

テンプレートの HTMLの編集

<!-- ▼全記事タイトルの一覧ここから --> 
<!--titlelist_area-->
<div class="titlelist_area"> 
<h3>全ての記事のタイトル一覧</h3>
<!--titlelist-->
<h4><a href="<%titlelist_url>"><%titlelist_title></a>&nbsp;(<%titlelist_year>/<%titlelist_month>/<%titlelist_day>&nbsp;|&nbsp;<%titlelist_category>)</h4>
<p><%titlelist_body>...</p>
<!--/titlelist-->
</div>
<!--/titlelist_area--> 
<!-- /全記事タイトルの一覧ここまで△ -->

上記の HTMLを<!--topentry-->の上に挿入した。

テンプレートの CSSの編集

div.titlelist_area p {
    font-size: 100%;
    margin: 0.5em 2em;
    line-height: 1.6;
}
div.titlelist_area h3 {
    margin: 0 0 1.5em 0;
}
div.titlelist_area h4 {
    color: #999;
    font-size: 90%;
    font-weight: normal;
    margin-top: 2em;
}
div.titlelist_area h4 > a {
    font-size: 120%;
}

全記事タイトル表示プラグインの追加

公式プラグインの全記事表示リンクを追加して、サイドバーの月別アーカイブの下に表示した。

参考にしたページ

Home > blog

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

Page Top

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