fc2ブログ

テンプレートをいじってみる

 FC2のテンプレートは結構良く出来ていると思う(上から目線でスミマセン)のですが、さすがに慣れていないと改造するのは大変なようで、うちのような地味なカスタムはあまり見掛けません。
 前にも書いたことがありますが、このページはFC2公式が提供する「blue_2column」と「blue_3column」を参考に、3ベースで改造したものです。

 ……もはやどう変更したかはさっぱりですが(笑


 一応参考的なメモとしては、
 ・<div class="entry_body">からは「記事本文」のテンプレート
 ・<ul class="entry_footer">からは「記事ごとのフッター」のテンプレート(今回変更したのもココ)
 ここより後は、<div id="tb" class="content">のトラックバックや、<div id="cm" class="content">のコメント欄などのテンプレが続きます。
 tb=TrackBack、cm=CoMment、ですね。

 ・<div id="sidemenu">からは「左サイドメニュー」のテンプレート
 plugin_firstとかplugin_secondとかplugin_thirdなどの記載は、プラグイン設定の「プラグインカテゴリ」で選べる3カテゴリに相当します。

 このように、そこかしこにヒントはあるので、この辺直したいなぁ……というときにもある程度アタリを付けていくと直せたりします。

 で、今回の修正点は、

 修正前:
  <li><%topentry_year>-<%topentry_month>-<%topentry_day> : </li>

 修正後:
  <li><%topentry_year>-<%topentry_month>-<%topentry_day> <%topentry_hour>:<%topentry_minute> : </li>

 読むとなんとなくわかると思いますが、年-月-日 だった投稿日表記を、年-月-日 時:分 に直してみました。
 topentry_○○で日付が設定できるので、時や分もいけるだろうと思ったら予想通り(ニヤリ

 オリジナルテンプレが使い勝手を意識して作られていると、修正したい場所もすぐ見つかって簡単ですね。



 さて、今回も備忘がてら修正したテンプレを置いておくことにします。
テンプレートはこちら
blue_3column_Rev3_html.txt

また今回はCSSも。
blue_3column_Rev3_css.txt

 CSSは、本文記事内のみリンクを強調するようにしてみました。
・div.entry_body a:link
 div.entry_bodyは記事本文のこと。a:linkは記事内に出てくるリンクのうち、未訪問のリンク。
 → colorを黒っぽくして、bold(太字)にしてみました。

 以下、visitedは訪問済みリンクなのでちょっと目立たなくしてますが、「hover=マウスを乗せたとき」や「active=選択したとき」などには太字になるように設定しています。



 この手の設定画面の修正は、やってて楽しいですね。
 自分好みにカスタマイズできると時間がどんどん過ぎて行きます、気をつけましょう(笑

 それでは。
スポンサーサイト



FC2のテンプレート ~ blue_3column、blue_2column

 うちのblogには、たま~に「blue_2column」で検索して訪問される方がいらっしゃいます。
 そこでいきなりドールが出てきてごめんなさい、は置いといて。


 とりあえず結論ですが、HTMLの方はここ(右クリック→対象をファイルに保存、で保存してください)に置いておきますので、万が一欲しいっていう人がいらっしゃるならどうぞ持って行ってください。


 この「blue_2column」はFC2の公式テンプレートの1つなのですが、本blogはこの公式テンプレを加工したもの(厳密にはblue_3columnの改造版)になっています。

 そもそもの経緯はこちらにもあるように、AirH"でも崩れることなく見られるページにすることでした。
 2columnだと右側にあるメニューが画面外にはみだしてしまって活用できず、3columnだと左右のメニューが幅を取りすぎて本文が見えませんでした。
 そこで、3columnをベースに左メニュー+右本文の、逆配置な2columnを作ることにしたのです。


 ではここから、実際にテンプレートを修正する場合の情報を簡単に記載しておきます。

 配置の変更点ですが、右側にあったメニューを左側メニューの下に配置しています。pulgin_secondと書かれた部分を、丸ごとplugin_firstの続きに移しています。
 ・・・あとは特に変えていないはずです。
 左側のメニュー内容については、FC2にログインした上で「環境設定」「プラグインの設定」で変更や順番入れ替え等を行ってください。


 HTMLの配置はざっくり以下のとおり。HTMLの内容と比較してみてください。

header
container
   :
  class content
    entry_body
      本文
    entry_footer
      年月日
      コメント
      トラックバック
  class tb トラックバック記入欄
  class cm コメント記入欄
    :
  sidemenu
    plugin_first プラグインカテゴリ1
    plugin_second プラグインカテゴリ2
footer

 ※ HTMLの読み方
 HTMLは、メモ帳で作るようないわゆる文書データに、タグによって目印をつけたものです。目印として使うキーワード(ここでは<html>とか<title>とか<body>とか)の綴りとその意味は世界的にルールが決められているので、インターネットエクスプローラやFireFoxといったブラウザで開くと、綺麗にレイアウトされたページを表示できます。

 HTMLで重要なポイントはただ1つです。それは、「内容」を「タグ」で囲むことです。

 <開始タグ> 内容 </終了タグ>

 たとえば、実際にはこんな書き方をします。
 <title>On The Edge</title>

 こう書くと「On The Edge」が「タイトル」ですよ~っていう意味になるので、これをブラウザで開くと、タイトルバーに「On The Edge」と表示されるようになります。
 また、「開始タグ」と「終了タグ」は同じつづりにします。終了タグだけ、頭に/(スラッシュ)を入れます。

 タグは、ほかのタグごと囲むこともできます。

 <開始タグ1><開始タグ2> 内容 </終了タグ2></終了タグ1>
 ただし、タグ1の開始と終了の間に、タグ2の開始と終了が両方入っていなければダメ。

 このように、内容をタグで囲んで行ったのがHTMLという形式です。



 また、配色についてですが、そちらは読み方だけ簡単に紹介しておきます。

 配色や幅などを設定するのは、css(カスケードスタイルシート)ファイルの中です。
CSSファイルの中には、以下のような内容が書かれています。

body {
  background-color: #F8F0FF;
  color: #404060;
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
 先頭の「body」は、HTMLの中で「body」と書かれた場所(タグと の間)に適用する、という意味です。
 {中かっこ}の間は、body部分の色や配置を指定しています。たとえばbackground-color:#F8F0FFとありますが、これは背景の色を指定しています。(backgraound:背景、color:色)

 「F8F0FF」の読み方ですが、実は2文字ずつに分かれていて、最初の2文字(F8)が赤、次の2文字(F0)が緑、最後の2文字(FF)が青の明るさになります。
 ひとつの色につき2桁で、それぞれの桁に0-9、A-Fが使えます。明るさは0~9 A=10、B=11、C=12、D=13、E=14、F=15と思ってもらえればいいです。

 なお、真っ白(明るさ全開)はFFFFFF、真っ黒(明るさ0)は000000です。
 同様に、colorの#404060も色です。赤40緑40青60と、やや青っぽい、暗めの色になります。


 お好みの色が確定したら、同じように#XXXXXXと色が書かれている箇所すべてで、ひとつずつ好みの配色にしていってください。

 あ、私のblogの配色は単なる趣味です。暗い画面は嫌だったので、明るくかつ青系統の落ち着いた色にしたくて、結局薄紫になりました。

 HTMLにしてもCSSにしても、結構適当に変えてはリロードを繰り返して作りましたので、あんまり正確な知識があるわけではありませんが、あれこれいじるだけでも結構楽しめます。
 特に色は個性を出せるところだと思いますので、興味のある人はぜひ遊んでみてください。



(2009/09/01-2200 追記)
 さすがにドールメインのblogで一番上にこの記事があるのはジャマなんで、ちょっと日数をずらして後ろに下げます。。。

テンプレート

 テンプレートを変更してみるテスト。
 これまでは blue_3column という公式テンプレートをベースに、淡色系への色変更と、若干の配置変更のみで使用。
 しかし、3列配置は普段使っているes(ws007sh、液晶はVGA/640x480)で見たとき、左右のメニューの幅(それぞれ約250px)を確保してしまい、肝心の本文が細長くなってしまってとても不便。
 そこで、2列配置の blue_2column の配置を参考に、メニューを左側だけに絞る。

 これでだいぶ見やすくなったはず。

test

新規作成、動作確認テスト。
プロフィール

Elemental-Edge

Author:Elemental-Edge
たぶん趣味のドール紹介ページになっているはず。
ドールと、ドール関連で購入したものを紹介していきます。

ドール以外も気分であれこれ。

最新記事
最新コメント
月別アーカイブ
カテゴリ
DD (34)
1/6 (4)
検索フォーム
リンク
ブロとも申請フォーム

この人とブロともになる

カウンター