お小遣い生活の傍らでFC2共有テンプレート作成に励んでいる男の軌跡。。。
|
プロフィール |
|
|
|
カテゴリ | ||||||||||||||||||||||||
|
|
換金実績(記事リンク) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
広告エリア | |||||
|
|
カスタマイズ講座(第17回) | ||||||||||||||||||||||||
| 2007/03/31 15:28｜カスタマイズ講座｜TB：0｜CM：20｜▲ | ||||||||||||||||||||||||
約1ヶ月ぶりの第１７回。 ネタに困った時はやはり初心に。。。 と言う事で、そもそも私はカスタマイズし易いテンプレを目指して、 無画像に拘っていました。 テンプレートを辞書で調べてみると『すぐに使えるサンプル集』。 『サンプル集』と言う事は自由に加工出来ないといけません。 しかし初心者にはカスタマイズの敷居が高いのも事実。 HP作成歴のあるブロガーとBLOGから始めたブロガーとでは、 当然、その前提となる知識量に差があります。 HTML、CSS、と英字の羅列ばかりでサッパリ意味が… と感じるのも概要がイメージできないからではないでしょうか？ 一度イメージが掴めると大きな一歩になると思います。 そこで今回はFC2ブログの概要を解説します。 カスタマイズに最低限必要であろう内容を、 なるべく分かり易く説明したつもりですので是非続きを…  過去記事一覧
 では上図の番号に沿ってFC2ブログの全体像を。 １．ブログ設定 ブロガーの皆さんが一番アクセスするであろう設定画面。 ブログ名や記事を登録します。 これがHTMLとスタイルシートによってブラウザに表示される訳です。 ２．テンプレート設定 カスタマイズの中心であるHTMLとスタイルシートを設定します。 HTMLとは『HyperText Markup Language』の略。 ブラウザに表示させるための言語です。 スタイルシートとは、見栄えを定義する規格。 HTMLと合体して、より見易い画面表示を実現します。 ３〜５．ブログ変数 最終的にブラウザに表示するのはHTMLとスタイルシート。 ブログ設定した内容をHTMLのドコに反映するか指定が必要です。 それがHTML内に記述されたブログ変数です。 <%blog_name>の位置にブログ名を反映。 <%topentry_body>には記事内容を反映。 <!--topentry-->〜<!--/topentry-->の範囲が記事数だけ繰り返し。 他にもブログ変数は多数あり、それがHTML内に散りばめられています。 詳しくはブログ変数の一覧を参照して下さい。 ６〜８．スタイルシート パーツ毎の装飾を指定します。 ６．では<body>画面全体に対する装飾を指定。 color:black;…文字色を黒 background-Color:silver;…背景色を銀 ７．ではclass="top_tytle"と指定した領域に対する装飾。 上図の例ではブログ名を囲む<div>枠ですね。 ここでも文字色と背景色を指定しています。 ８．も同様に記事部分の背景色を指定しています。 id="…"の場合、スタイルシートでは『#…』との指定になります。 他にもスタイルシートで装飾できる内容は沢山あります。 詳しくはとほほのWWW入門が分かり易いかと。 ９．ブラウザ表示 HTMLにブログ設定内容を反映し、 それをスタイルシートに従って装飾し、 その結果がブラウザ上に表現される。。。 なんとなく理屈が見えてきたでしょうか。 最後に．カスタマイズのコツ ・HTML上の変更したい場所を探す(ブログ変数でサーチ) ・その場所に指定されているスタイルシートを見つける (class= またはid= あるいは<タグ>自身) ・スタイルシートの指定内容を調べる(とほほのWWW入門にて) ・試しに変更してみる ・『プレビュー』で確認する ・ＯＫなら『更新』する ・他の方の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%; 上の２箇所でサイドと中央部の比率を指定しています。 合計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) |
|
|
|
最新ヒットPV(10/6) | ||||||||||||||||||||
|
|
|
あわせて読みたい |
|
当ブログの読者は↑のブログも読んでいるそうです。。。 |
|
最近の記事 | |||||||||||||||||||||||||||||||||||||||||||||
|
|
|
このブログの価値は？ |
|
|
|
最近のコメント | ||||||||||||||||||||||||||||||
|
|
|
オレンジトラフィック |
|
非常に珍しい換金可能なトラフィックエクスチェンジサイト。 ＨＰやブログを持ってなくても登録可能。 詳しくはこの記事を参考に。 |
|
リンク | ||||||||||||||||||||||||
|
|
|
最近のトラックバック | |||||||||||||||
|
|
|
お気に入りブログ |
|
|
Powered by FC2ブログ. ホームページ アフィリエイト レンタルサーバー FC2ブログ template designed by 遥かなるわらしべ長者への軌跡.