お小遣い生活の傍らでFC2共有テンプレート作成に励んでいる男の軌跡。。。

遥かなるわらしべ長者への軌跡
http://hyama2004.blog16.fc2.com/  presented by hyama2004

プロフィール



ホームRSS1.0
管理人:hyama2004
結構楽しいお小遣い生活^^
岡山県岡山市棲息中
2014年の実績:16,800円
2013年の実績:28,730円
2012年の実績:36,850円
2011年の実績:33,461円
2010年の実績:47,386円
2009年の実績:55,162円
2008年の実績:64,174円
2007年の実績:68,371円
2006年の実績:93,554円
2005年の実績:62,046円
2004年の実績:38,581円
2003年の実績:17,400円
RSS feed meter for http://hyama2004.blog16.fc2.com/



換金実績(記事リンク)


30,200円 ECナビ
18,500円 マクロミル
17,650円 NetMile
15,400円 LifeMile
13,500円 げん玉
13,400円 流石めーる
12,950円 ポイントタウン
12,820円 ちょびリッチ
12,100円 くじ引きネット
12,000円 フルーツメール
9,750円 予想ネット
9,500円 goo Research
9,500円 Potora
9,100円 MyVoice
9,000円 Warau.JP
8,895円 まんぷく島
8,670円 Chance It!
8,000円 エルネ
8,000円 CMサイト
6,400円 Gポイント
6,000円 Prize-Prize
6,000円 ライフメディア
5,614円 GetMoney!
5,000円 infoQ
5,000円 ポイントモンキー
5,000円 KING OF LEADMAIL
4,416円 Pointin
4,000円 ポイントナビ
4,000円 タメトク
4,000円 POINT-BOX
3,600円 KNOTs
3,500円 eライフナビ
3,500円 白くつしたのナッツ
3,500円 CiM-Net
3,500円 Tremii
3,400円 PONEY
3,354円 2PT.JP
3,046円 High Stage
3,000円 得だわ幕府
3,000円 ぱんだポイント
3,000円 プレコ
3,000円 なるほどMC.net
3,000円 ポイントスタジアム
2,750円 NobleMail
2,500円 MyAccount
2,500円 ポイントランド
2,500円 ポインティア
2,000円 Magic2Mail
2,000円 ポインちょ
2,000円 クリックチャンス!
2,000円 Sugar Mail
2,000円 ABCリードメール
2,000円 5050.jp
2,000円 きかせて・net
1,790円 新欲張り王
1,500円 vlcrew
1,500円 ぽちコム
1,440円 オレンジトラフィック
1,400円 Qzoo
1,300円 PointPark
1,000円 StarBiz-Mail
1,000円 貯めネコに小判
1,000円 天空
1,000円 ふくびき.com
1,000円 speedtraffics.biz
1,000円 PEGASUS MAIL
950円 お小遣いJP
900円 Enjoy-Mail
600円 ええやん
500円 CLICKS ON AIR!
500円 ウリ坊めーる
500円 Dreamy Mail
500円 マリオン☆メール
500円 爆走めーる
500円 LeadMail777
500円 Luxury Mail
500円 ひまわり


広告エリア



スポンサーサイト

--/--/-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

カスタマイズ講座(第17回)

2007/03/31 15:28|カスタマイズ講座TB:0CM:20

カスタマイズ講座(第17回)

約1ヶ月ぶりの第17回。
ネタに困った時はやはり初心に。。。

と言う事で、そもそも私はカスタマイズし易いテンプレを目指して、
無画像に拘っていました。
テンプレートを辞書で調べてみると『すぐに使えるサンプル集』。
『サンプル集』と言う事は自由に加工出来ないといけません。

しかし初心者にはカスタマイズの敷居が高いのも事実。
HP作成歴のあるブロガーとBLOGから始めたブロガーとでは、
当然、その前提となる知識量に差があります。

HTML、CSS、と英字の羅列ばかりでサッパリ意味が…
と感じるのも概要がイメージできないからではないでしょうか?

一度イメージが掴めると大きな一歩になると思います。
そこで今回はFC2ブログの概要を解説します。
カスタマイズに最低限必要であろう内容を、
なるべく分かり易く説明したつもりですので是非続きを…

過去記事一覧
過去のカスタマイズ講座一覧
1.色
2.枠線
3.横幅
4.ランダムバナー
5.テキストリンク
6.スクロールバー
7.文字装飾
8.背景画像
9.検索窓
10.ターゲット
11.2カラム化
12.横幅Part2
13.画像リンク
14.隙間
15.トランプ図柄
16.アクアボタン







では上図の番号に沿ってFC2ブログの全体像を。

1.ブログ設定
ブロガーの皆さんが一番アクセスするであろう設定画面。
ブログ名や記事を登録します。
これがHTMLとスタイルシートによってブラウザに表示される訳です。

2.テンプレート設定
カスタマイズの中心であるHTMLとスタイルシートを設定します。
HTMLとは『HyperText Markup Language』の略。
ブラウザに表示させるための言語です。
スタイルシートとは、見栄えを定義する規格。
HTMLと合体して、より見易い画面表示を実現します。

3~5.ブログ変数
最終的にブラウザに表示するのはHTMLとスタイルシート。
ブログ設定した内容をHTMLのドコに反映するか指定が必要です。
それがHTML内に記述されたブログ変数です。

<%blog_name>の位置にブログ名を反映。
<%topentry_body>には記事内容を反映。
<!--topentry-->~<!--/topentry-->の範囲が記事数だけ繰り返し。

他にもブログ変数は多数あり、それがHTML内に散りばめられています。
詳しくはブログ変数の一覧を参照して下さい。

6~8.スタイルシート
パーツ毎の装飾を指定します。
6.では<body>画面全体に対する装飾を指定。
color:black;…文字色を黒
background-Color:silver;…背景色を銀

7.ではclass="top_tytle"と指定した領域に対する装飾。
上図の例ではブログ名を囲む<div>枠ですね。
ここでも文字色と背景色を指定しています。

8.も同様に記事部分の背景色を指定しています。
id="…"の場合、スタイルシートでは『#…』との指定になります。

他にもスタイルシートで装飾できる内容は沢山あります。
詳しくはとほほのWWW入門が分かり易いかと。

9.ブラウザ表示
HTMLにブログ設定内容を反映し、
 それをスタイルシートに従って装飾し、
  その結果がブラウザ上に表現される。。。
   なんとなく理屈が見えてきたでしょうか。

最後に.カスタマイズのコツ
・HTML上の変更したい場所を探す(ブログ変数でサーチ)
・その場所に指定されているスタイルシートを見つける
 (class= またはid= あるいは<タグ>自身)
・スタイルシートの指定内容を調べる(とほほのWWW入門にて)
・試しに変更してみる
・『プレビュー』で確認する
・OKなら『更新』する
・他の方のQ&Aを参考にする(FC2テンプレート掲示板)
・テンプレ作者に問い合わせてみる

少々長くなりましたが今回はこの辺で。
少しでも参考になれば幸いです。
m( _ _ )m
ゆき #LvECUUZU|2007/03/31(土) 16:44 [ 編集 ]
以前は、ありがとうございました。
ところで、また質問です。
自分で、どうしたらよいのやら確かめていたのですが分かりません。

今私が書いている、コメント欄のことです。
コメント投稿の上下の枠の高さが狭いので、高さを長くする方法はどうしたら宜しいのでしょうか。
教えてください。どうぞ宜しくお願いします。
管理人 #p6CkwyQg|2007/03/31(土) 18:02 [ 編集 ]
こんばんは。
いつもお世話になっています。

『コメント欄の高さ』とは、コメントを入力する箇所
の事で良かったですか。
であれば、
<!--■コメント投稿■-->

<input id=…>
このような<input>タグが並んでいますので、
ソコに高さの指定を追加してやれば伸びます。
<input id=… style="height:30px">

コメント自身の欄はスクロールバー付の長い領域
にしているので、
<textarea cols="45" rows="10">

colsが横幅、rowsが行数ですので変更してみて下さい。
では、この辺で。
もし私の勘違いのようでしたら連絡下さい。
宜しくお願いします。
m( _ _ )m
ゆき #LvECUUZU|2007/03/31(土) 19:26 [ 編集 ]
ご親切に、ありがとうございます。
成功しました。
ブログがもっと、楽しめそうです。
また何かありましたら宜しくお願いします。
感謝。
管理人 #p6CkwyQg|2007/03/31(土) 19:54 [ 編集 ]
わざわざ連絡ありがとうございます。
上手くいったようでなによりです。

普段あまりコメントを書かないのであまり気にして
ませんでしたが、言われてみると長文を書くには
短いですね。^^;
あれだけ大きいと書き易いなと再発見です。
次回作に向けて最適な設定を考え直してみます。

では、この辺で。
これからもテンプレ可愛がってやって下さい。
m( _ _ )m
なおなお #-|2007/04/02(月) 10:37 [ 編集 ]
コメントありがとうございます。

お節介だなんてとんでもないです。

ものすごく嬉しくて勉強になりました。
仕事そっちのけで訂正しました。

これからもこちらで勉強させてもらいます。
今のテンプのタイトルを変更したいのですが、
忙しくてなかなか出来ません。
仕事が落ち着いて変更するつもりです。

わざわざありがとうございました。

またお願いします。
管理人 #p6CkwyQg|2007/04/02(月) 22:09 [ 編集 ]
こんばんは。
お節介でなくて一安心です
ついつい気になってしまうもので。。。

そんな訳で、これからも末永くテンプレ可愛
がってもらえたら幸いです。^^
では、今後とも宜しくお願いします。
m( _ _ )m
meguri #-|2007/04/09(月) 15:47 [ 編集 ]
はじめまして、テンプレートの「hyama_004」を
使わせてもらっています。
ところでこのテンプレートには記事のタイトルにリンクがない仕様だとうかがえるのですが、
これをリンク有り、にする方法はございますでしょうか?ご指導よろしく御願いいたします。
ゆき #LvECUUZU|2007/04/09(月) 16:02 [ 編集 ]
ゆきです。いつもありがとうございます。
度々すみません。
質問ですが、デフォルトでは枠組みが「可変」タイプですが、
これを「固定」に変更することが出来ますか?
左と右のカラムが少しぐらい狭くなっても構いません。
お答えは、お手すきの時でも結構でございます。
宜しくお願い致します。
管理人 #p6CkwyQg|2007/04/09(月) 20:33 [ 編集 ]
はじめまして。
綺麗にテンプレ使って頂きありがとうございます。

初期の頃の作品のため、リンクまで頭が廻らず申し訳
ありません。お手数ですが以下にて試してみて下さい。

<!--■記事繰り返し■-->
<!--topentry-->
<tr>
<td id="center_tytle"><h2><p class="kiji_t"><%topentry_title></p></h2>

赤文字の部分がタイトル名になります。
これをリンクに変更します。
赤文字部分を以下で置き換えて下さい。

<a href="<%topentry_link>"><%topentry_title></a>

このままではタイトル文字がリンク文字色になって
しまいますのでスタイルシートで調整してみて下さい。

では、取り急ぎこの辺で。
また何かありましたら遠慮なく。^^
これからも宜しくお願いします。
m( _ _ )m
meguri #-|2007/04/09(月) 20:56 [ 編集 ]
ご親切な回答ありがとうございます。
お陰様でタイトルをリンク表示させることができました。
ご回答の中にあったように「タイトル文字がリンク文字色」になってしまいます。
個人的には指定した色にしたいのです。
本来はここで聞くべきかもしれないと思うのですが、失礼を承知して再度お答えいただけないでしょうか?
管理人 #p6CkwyQg|2007/04/09(月) 21:09 [ 編集 ]
こんばんは。
いつもお世話になっています。

もともとの都合上、固定にするのは非常に難しいです。
どんな記事でも収まるよう『可変』にこだわって
いるものですが幅のカスタマイズについて少々書いて
おきますので参考にして下さい。

/* ■全体枠■ */
table#all_parts {
width:100%;

これで全体の横幅を指定しています。
これを変えれば全体の幅も変わります。

/* ■サイド枠■ */
td#side_parts {
width : 22%;

/* ■中央枠■ */
td#center_parts {
width : 56%;

上の2箇所でサイドと中央部の比率を指定しています。
合計100%となるよう変化させればそれぞれの幅も
変異します。

ただ、プラグインと記事内に、この比率を超えた
画像や指定があると、それにより見た目も変わって
しまいます。

ゆきさんのサイトを見ると、左サイドにある
『印刷専用画面』で『style="width:150px;"』との
指定があります。これが原因で左サイドが大きく
なっているようなので、これを訂正する事でも見た目
は変わるかと思います。

では、長くなりましたがこの辺で。
また何かあれば遠慮なく連絡下さい。
m( _ _ )m
管理人 #p6CkwyQg|2007/04/09(月) 21:46 [ 編集 ]
こんばんは。
取り敢えずリンクは表示できたようでなによりです。
続いてリンク色ですが、まず変更した部分を見て下さい。

<a href="<%topentry_link>"><%topentry_title></a>

これは<a>タグと言い、今のスタイルシートでは

/* ■標準リンク■ */
a:link,a:visited,a:active{
color:#337777;
text-decoration:underline; }
a:hover{
color:red;
text-decoration:underline; }

に従って表示されます。
これを今までのテキストタイトルの表示形式に
変更する訳です。

<a href="<%topentry_link>" class="new_title"><%topentry_title></a>

そこでタイトルリンクに新しいクラス名(赤字部分)
を付けます。

『new_title』と名づけた<a>タグの装飾をするよう
スタイルシートに以下を追加します。

a.new_title:link,a.new_title:visited,a.new_title:active{
font-size:100%;
color: black;
font-weight:bold;
text-decoration:none; }
a.new_title:hover{
font-size:100%;
color: red;
font-weight:bold;
text-decoration:none; }

元のタイトルとほぼ一緒の属性値です。
カーソルが乗った時は分かり易く赤色にしてますが、
もとのままの黒色でも構いません。
↓の記事も参考にしてみて下さい。
http://hyama2004.blog16.fc2.com/blog-entry-137.html

では、長くなりましたがこの辺で。
また何かあれば遠慮なく連絡下さい。
m( _ _ )m
meguri #-|2007/04/09(月) 21:55 [ 編集 ]
ご丁寧な対応感謝いたします。
お陰様で全てうまくいきました。
又何かあるかもしれませんが、そのときはまた
よろしく御願いいたします。
ありがとうございました。
管理人 #p6CkwyQg|2007/04/09(月) 22:33 [ 編集 ]
わざわざ報告ありがとうございます。
上手くいったようで何よりです。^^

私自身の勉強になりますし、訪問された方にも
何か参考になる事があると思いますので遠慮なく
質問して頂けたら嬉しいです。

では、簡単ですがこの辺で。
これからもテンプレ可愛がってやって下さい。
m( _ _ )m
ゆき #LvECUUZU|2007/04/10(火) 17:33 [ 編集 ]
返事が遅くなりましてすみません。
具体的には、ここで質問されている
meguri さんのブログが「hyama_004」で
「可変」のところを「固定」に変えてありますが
上記の方法で、meguriさんと同じように
「固定」に変更できるのでしょうか。
いつも質問を出して、ごめんなさい。
宜しくお願い致します。
管理人 #p6CkwyQg|2007/04/10(火) 21:12 [ 編集 ]
こんばんは。
meguriさんの所も可変で、22%-55%-22%の構成です。
これにTOPタイトル部分に画像を使って全体の横幅を
伸ばしているものです。

http://hyama2004.blog16.fc2.com/blog-entry-126.html

↑の記事で少し解説してますが、比率はあくまでも
初期値であって、プラグインや記事の内容で伸縮
します。

比率ではなく固定値にすれば『固定』になりそうですが
もともとのテンプレを可変前提で作っているため
上手くいかないようです。
(150px-400px-150pxのように指定して試してみましたが
変な形で表示されました)

そんな訳で、あまり良い回答にはなりませんでしたが
プラグインや記事で調整してみて下さい。
m( _ _ )m
ゆき #LvECUUZU|2007/04/11(水) 16:18 [ 編集 ]
>比率ではなく固定値にすれば『固定』になりそうですが
もともとのテンプレを可変前提で作っているため
上手くいかないようです。

なるほど、そういうことなんですね。
でも、今のままでも充分テンプレは気に入っていますので、そのままでも満足です!
せっかくアドバイス頂いてすみません。

>そんな訳で、あまり良い回答にはなりませんでしたが
プラグインや記事で調整してみて下さい。

とんでもございません。
いつも親切丁寧な、ご解答に感謝しております。
今後とも宜しくお願い致します。
管理人 #p6CkwyQg|2007/04/11(水) 17:12 [ 編集 ]
こんばんは。
わざわざ連絡ありがとうございます。

テンプレ道の道も険しいですが、皆さんの色々な
声を参考に少しずつでも良いテンプレに育つよう
精進していきたいと思っています。

デザインも大切ですが、記事の書き易さ、見易さ、
カスタマイズし易さ、等々課題は山積みです。^^;

そんな訳でこれに懲りず今後とも宜しくお願いします。
m( _ _ )m
KARULA #SyB5pQsY|2007/09/05(水) 00:58 [ 編集 ]
はじめまして。
hyama_026を使わせていただいてます。
先日ブログをはじめた超初心者ですが、こちらのカスタマイズ記事を参考にいろいろ試行錯誤してみたいと思います。
素敵なテンプレートありがとうございました!
管理人 #p6CkwyQg|2007/09/06(木) 13:49 [ 編集 ]
はじめまして。
テンプレ使って頂きありがとうございます。
また記事にまでして頂き感謝感謝です。^^

拙いテンプレですのでカスタマイズも大変かと思います。
不明点等ありましたら遠慮なく連絡下さい。

では簡単ですがこの辺で。
これからもテンプレ可愛がってやって下さい。
m( _ _ )m
コメントの投稿

管理者にだけ表示を許可する

トラックバック
トラックバックURLはこちら
http://hyama2004.blog16.fc2.com/tb.php/300-75071179

ブログ内検索(Google)


GoogleTool by きゃべつのお小遣いGet!
ブログ内を検索
WWWから検索


カテゴリ


雑記(28)
リードメール情報(193)
サイト運営(5)
大当り画面倉庫(54)
小遣い同盟(4)
ポイントサイト情報(390)
トピックス(27)
アンケートサイト情報(80)
共有テンプレート(32)
カスタマイズ講座(19)
小遣い帳を作ろう(0)
参考リンク集(2)
株日記(14)


あわせて読みたい


あわせて読みたい

当ブログの読者は↑のブログも読んでいるそうです。。。


最近の記事


01/01ご挨拶
10/26Warau.JP(ワラウジェイピー)
10/19ポイントタウン
09/15ECナビ
09/14げん玉
07/21フルーツメール
06/14げん玉
06/07NetMile(ネットマイル)
05/18マクロミル
05/02Chance It!
04/27ポイントスタジアム
04/26KING OF LEADMAIL
04/20ECナビ
04/13きかせて・net
04/05げん玉


このブログの価値は?




最近のコメント


02/26管理人:Chance It!
02/26らいとNGC7000:Chance It!
12/16管理人:LifeMile(ライフマイル)
12/16畑:LifeMile(ライフマイル)
06/30管理人:テンプレート考察
06/29haru:テンプレート考察
06/28管理人:テンプレート考察
06/26haru:テンプレート考察
05/05管理人:ECナビ
05/02お小遣いサイトの攻略と解説@USA:ECナビ


オレンジトラフィック


非常に珍しい換金可能なトラフィックエクスチェンジサイト。 HPやブログを持ってなくても登録可能。 詳しくはこの記事を参考に。


リンク


遥かなるわらしべ長者への挑戦
ネット収入お小遣い
今時の小遣い稼ぎ
ダウンサポート紫屋
ドラゴンズプラネット-Dragon's Planet
m-style
image
SimpleAPI開発日記
全て無料!ホームページテンプレートの部屋
FC2blog Designers
LostTechnology
きゃべつのお小遣いGet!


最近のトラックバック


08/1760:
06/23まとめwoネタ速neo:まとめtyaiました【KING OF LEADMAIL】
06/11まとめwoネタ速neo:まとめtyaiました【ポイントランド】
05/27まとめwoネタ速neo:まとめtyaiました【LifeMile(ライフマイル)】
05/27まとめwoネタ速neo:まとめtyaiました【マクロミル】


お気に入りブログ



 |  雑記 | リードメール情報 | サイト運営 | 大当り画面倉庫 | 小遣い同盟 | ポイントサイト情報 | トピックス | アンケートサイト情報 | 共有テンプレート | カスタマイズ講座 | 小遣い帳を作ろう | 参考リンク集 | 株日記 | 
Copyright(C) 2008All Rights Reserved. 遥かなるわらしべ長者への軌跡
Powered by FC2ブログ.  template designed by 遥かなるわらしべ長者への軌跡.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。