FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ

テンプレート名はあとから修正する事ができないのに、申請してから気づく痛恨のスペルミス。
文字数制限でやむなく短縮したんだよ!と自分に言い聞かせる。

1カラム
1col.jpg

2カラム右メニュー
2col.jpg

3カラム
3col.jpg

1~3カラムの3タイプ制作。
コンクリ部分とウッド部分とガラス部分とタイトル画像は全て独立してるから着せ替えが可能。

詳細:FC2ブログ共有テンプレート説明 grass_board_2colmn

構造自体はシンプル、それぞれの画像はそれなりに容量小さくしたから、そんなに重くないと思うけど、一応他はテキストベースで軽めに。
実はおすすめポイントはビジュアルじゃなくてSEO対策。
Googleウェブマスターのタイトルタグの重複問題の対策に特化してる。

詳細:「タイトルタグの重複」対策 FC2ブログパーフェクト版

もしテンプレートが気に入らなくても、タイトルタグの重複対策にこの部分だけ移植するといいかも知れない。
今後も気が向いたら共有テンプレートを作ってみようと思う。

★補足・更新情報

  • align属性による画像の回り込みがうまくいかない場合は、CSSの最初のほうにある▼CSSリセットの中のvertical-align:baseline;を削除してみてください。 2012/12/19修正しました。
  • 2012/12/30 「画像に重なるタイトル文字が見にくい場合は適度に調整してください」と投げっぱなしたものの、3カラムのデフォルト状態があまりにも見づらいかなと思ったので右寄せに修正、1・2カラムも微修正しました。
  • 2013/01/01 長い英文やURLがエリアよりはみ出る事があったので、改行に関するスタイル「word-wrap:break-word;」を追加しました。
  • 2013/01/02 記事エリア内にエリア以上の幅のスクリプト等を貼り付けた場合にスクロールバーが出てかっこ悪いので、スクロールバーが出ないように.entry_bodyに「overflow:hidden;」を設定しました。これにより記事エリアよりはみ出た部分は表示されないので、エリア内に収まるように元の幅を適度に調整してください。
  • 2013/01/02 youtube動画等のiframe表示ははみ出ないように「max-width:100%」を設定していますが、youtubeの仕様でサイズが小さすぎる場合に「Video player is too small」というエラーが出ます。たぶん小さすぎると広告が正常に表示できないケースがあるからだと思います。調べたところheight:232pxが最小のようなので、エラーが出る場合はiframeのheightを適度に調整してください。また、ニコニコ動画やFC2動画等のscriptタイプの動画はcssで調整できないので、エリアから見切れる場合は元のサイズを調整してください。
  • 2013年1月6日、amazonアフィリエイトの画像が表示されない場合は、CSSの▼デフォルトにあるimgのmax-width:100%;を削除してみてください。
  • 2013年1月19日、「続きを読む」部分のタグを微修正しました。大きなサイズの文字の行間が狭くなる事があったためline-heightの単位を変えました。
  • 2013年1月21日、入力フォームがエリアよりはみ出るケースがあったので、inputタグにmax-width:100%;を設定しました。

インターネット 】カテゴリーの記事一覧

86件のフィードバック

  1. 有難うございました。キチンと表示されるようになりましたが、2カラムにすると、記事の範囲が小さくなるようです(当たり前だ!)長い記事を書くので、上下移動範囲が少ないちょっと幅広であればと思ってます(自分で作れ!って言われそう)
    別ブログを立ち上げるので、そちらで使用させていただきます。
    手間をかけ申し訳ありませんでした。

  2. 1カラム メイン部分810=計810
    2カラム メイン部分600+間隔10+右サイド200=計810
    3カラム 左サイド200+間隔10+メイン部分540+間隔10+右サイド200=960
    テンプレートは3タイプあり、それぞれのカラム幅は上記のようになっていて、3カラムバージョンだけガラスの背景画像の幅が大きくなってます。
    画像だけは簡単に幅を広げる事ができないので、メイン部分の幅を広げたいのであれば、3カラムバージョンを改造するのがいいかもしれません。
    合計960pxを守れば、メインやサイドの幅をお好みで調整する事ができます。
    例えば、htmlの中から左右のサイドエリアどちらかを削除し、cssにてメイン部分の幅を広げると、メイン750+間隔10+サイド200にできます。
    p.s.
    横スクロールが発生するとユーザビリティが悪いため、一昔前まではコンテンツの幅を800pxに収めるのが主流でした。現在はワイドモニターが普及し960px前後が主流です。
    ただ、ワイドモニターに合わせて横幅いっぱいまで使うと、環境によっては顔を左右に振らなければならなかったり、視点を大きく動かさなければならないため、個人的にメインコンテンツは500~700pxくらいが一番読みやすいと思っています。

  3. 初めまして。
    今年からブログを開始しようと思い、昨年末にこちらの3カラムのテンプレートをDLさせていただいた者です。こちらを拝見しましたら、更新されたようなので改めて再DLしたところ、以下のような事象が起こることがあります。
    ・ 記事タイトルの文字が黒になる(以前は、茶)
    ・ 記事タイトルが、ブログタイトルとブログ紹介文の間に
    表示される
    とても気に入っているテンプレートで、ぜひ使わせて頂きたいと思っていますので、修正方法等教えていただけませんでしょうか? ちなみに使用しているブラウザは、IE9です。
    お忙しいところお手数をおかけして恐縮ですが、どうぞ宜しくお願い致します。

  4. テンプレートをダウンロードしたみなさんのブログを訪問して、不具合がないか確認してるのですが、ヘッダー画像の上に表示されるタイトルと説明の部分の文字が見にくいケースが多いため、デフォルトで少しでも見やすいようにと右上に変更しました。
    HTMLとCSSの知識が少しあれば変更できる事ですが、見た限りではできないと思われる方の割合が高かったので、出来る方は適度に調整するかなと思い、デフォルト状態で少しでも見やすいようにしました。
    >記事タイトルの文字が黒になる(以前は、茶)
    色は最初から、全体のリンク文字設定の#f00(濃い赤)で変わってないと思います。
    もし変えるのであれば、cssのどこかに次の記述を追加してください。
    #900や#000はカラーコードなので、お好みの色に変更してください。
    linkは最初の色、visitedは訪問済みリンクの色、focusとhoverとactiveはマウスが乗った時の色です。
    #header_content h2 a{text-decoration:none;}
    #header_content h2 a:link{color:#900;text-decoration:none;}
    #header_content h2 a:visited{color:#900;text-decoration:none;}
    #header_content h2 a:focus{color:#000;text-decoration:none;}
    #header_content h2 a:hover{color:#000;text-decoration:none;}
    #header_content h2 a:active{color:#000;text-decoration:none;}
    >記事タイトルが、ブログタイトルとブログ紹介文の間に表示される
    これはSEOを意識して最初からその位置に入るようにしています。
    この部分はSEOに重要な<h1>タグの部分なので、検索ロボットにページの内容をわかりやすく伝えるためにそのようにしています。
    ただ、最初は説明の前に入るようにしていましたが、説明が長い人の場合、横にすごく長くなってしまうためエリア幅を限定し、改行して入れるようにしました。
    個別記事では記事タイトルが入りますが、月別や検索結果ページやタグ検索ページなどでは、それぞれ対応した内容が入ります。
    変更する場合は<!–▼ヘッダー▼–>エリアの<h1>から</h1>の間の部分を変えます。
    <!–○○○_area–>で囲まれた部分がそれぞれのページで適用されます。
    どのエリアがどのページを意味するのかは、テンプレート用変数一覧のエリア(モード)変数を確認してください。
    http://help.fc2.com/blog/manual/Home/template/templatevariable.html#5
    <%introduction>がブログ説明、<%sub_title>が記事タイトルや検索文字などです。<br />は改行です。
    例えば、個別記事ページの<h1>部分は次のようになっています。
    <!–permanent_area–><%sub_title><br /><%introduction><!–/permanent_area–>
    <!–permanent_area–>から<!–/permanent_area–>までの間に書かれた内容が個別記事ページで適用されます。
    内容は、<記事タイトル> <改行> <ブログ説明>になっています。
    記事タイトルを削除する場合は、<%sub_title><br />を削除してください。

  5. 初めまして。
    glass_boardの3カラムを使わせて頂いています。
    タイトルに挙げましたamazonのアイテムを画像付きで記事に挿入すると、画像が表示されません。
    これは仕様なのでしょうか?
    単に画像が表示されないだけで他に不具合はないのですが、紹介したいアイテムの画像が見られないのは寂しいので、なんとか修正したいです。
    ちなみに使用ブラウザはIE8です。
    よろしくお願いします。

  6. ブログを見てみましたが、右カラムにあるamazonのアフィリエイトリンクの事でしょうか?
    そこだったら私のIE8環境では表示されてますね。
    他のテンプレートでは正常に表示されるのでしょうか?
    検証するためにもう少し詳しく教えてもらえますか?

  7. 早々に返信いただき、ありがとうございます。
    情報が不足していましたね。
    右カラムのアフィリエイトは表示されます。また、他のテンプレートでは表示されます。
    記事本文中に挿入すると表示されなくなります。
    たとえば以下リンクの記事のように、画像だけが消えてamazonへのリンクのみになります。
    http://mayfair524.blog94.fc2.com/blog-entry-1393.html
    お手数をおかけしますが、ご確認よろしくお願いします。

  8. CSSの▼デフォルトにある次の部分のmax-width:100%;を削除してみてください。
    img{max-width:100%;height:auto;}
    これは画像が大きすぎて記事エリアからはみ出た場合にレイアウトが崩れる事があるため、エリア幅100%を超えないように設定しています。
    なぜかはわかりませんが、これを削除すると大丈夫っぽいです。
    amazonのタグやcssと競合してるのかも知れません。

  9. 早々にご対応いただき、ありがとうございます。
    こちらのテンプレートに一目惚れして是非使いたかったのですが、amazonだけが引っかかっていました。
    これで心置きなく利用させてもらえます。
    どうもありがとうございました。

  10. お忙しい中、迅速なご対応ありがとうございます。
    これからいじってみようと思います。
    またご報告致しますが、取り急ぎお礼まで。m(_ _"m)ペコリ

  11. 改めて、迅速なご対応ありがとうございます。
    私の理解不足のため、不具合だと思いましたが仕様だったと
    理解しました。早とちり&無知で申し訳ございませんでした。
    ただ、私の場合は下記の順で表示されてしまいます。
    ブログタイトル
    記事タイトル(カテゴリetc.)
    ブログ紹介文
    俺様とmiyuさんのブログを拝見したところ、
    下記の順で表示されています。
    ブログタイトル
    ブログ紹介文
    記事タイトル(カテゴリetc.)
    HTMLのヘッダー部分にあるsub_title と introduction の順序を変えてみても、直りませんでした。現在は、テンプレートをDLしたままの状態です。どちらが正しく表示されているのか不明ですが、可能であれば皆さんと同じ順で表示したいと思いますので、修正方法を教えて頂ければ幸いです。
    何度もお手数をおかけして、大変申し訳ございませんが、どうぞ宜しくお願い致します。

  12. sub_title と introduction の順序を変えると、そうなるはずですが、おかしいですね。
    それでは、修正した次の記述を現状の<h1>から</h1>までと入れ替えてみてください。
    <h1>
    <!–index_area–><%introduction><!–/index_area–>
    <!–permanent_area–><%introduction><br /><%sub_title><!–/permanent_area–>
    <!–category_area–><%introduction><br /><%sub_title> カテゴリーの記事<!–/category_area–>
    <!–tag_area–><%introduction><br />ユーザータグ「<%sub_title>」が設定された記事<!–/tag_area–>
    <!–search_area–><%introduction><br /><%sub_title> の検索結果<!–/search_area–>
    <!–date_area–><%introduction><br /><%now_year>年<%now_month>月の記事<!–/date_area–>
    <!–not_index_area–><!–not_permanent_area–><!–not_category_area–><!–not_tag_area–><!–not_search_area–><!–not_date_area–><%introduction><!–/not_date_area–><!–/not_search_area–><!–/not_tag_area–><!–/not_category_area–><!–/not_permanent_area–><!–/not_index_area–>
    </h1>
    更新しても反映されない場合は、F5キーなどで再読み込みしてみてくださいね。

  13. 迅速なご対応ありがとうございます。
    そして見事に直りました!
    何度もお手数をおかけしたのに丁寧なご対応を
    して下さり、本当に感謝致します。m(_ _"m)ペコリ

  14. はじめまして。
    glass_boardの3カラムを拝見させていただき素晴らしいデザインに惚れて使わせていただこうと思っています。
    テンプレートを適用するとコメント欄が右カラムに移動してデザインが崩れてしまいます。
    http://gyazo.com/e270d1640828f4205d0db5b496b248db
    対処法がないかと思い書き込みさせて頂きました。
    よろしくお願いします

  15. この画像だけでは原因の特定は困難です。
    実際にテンプレートを適用して、見せてもらえたら特定できるかも知れませんが、絶賛稼働中のブログであれば、そうもいかないでしょうし困りましたね。
    一応いろんなケースで検証してますので、とりあえず一般的な使い方では不具合が無いという前提で考えられるのは、記事中やプラグインなど個々が編集する部分のソースに不具合、もしくはテンプレートと干渉している。こんなところでしょうか。
    カラム崩れの場合はhtmlタグが不整合になっているケースが多いです。
    ちなみに、これはコメントの無い記事等、全ての記事でこうなるのでしょうか?
    コメントが表示される個別記事ページやコメント編集ページ以外のページで不具合はありませんか?
    右カラムに配置されるプラグイン2や中央カラム下部に配置されるプラグイン3はどのようになってますか?

  16. 早速有り難うございます。
    休止中のブログにUPしてみましたので見ていただけたらありがたいです。
    http://animenews01.blog.fc2.com/blog-entry-76.html
    閲覧制限かけています。pc9821
    管理画面のIDはanimenews01
    パスワードはpc9821です。
    コメントがつくと表示が崩れてしまいます。
    テンプレは初期状態のままです。
    お手数ですが、よろしくお願いいたします
    みさか

  17. 何ページか確認したところ、コメントの無い記事でも崩れてました。
    どうやら「続きを読む」があるページで起きている事がわかりましたが、私の検証用ブログではなかなか再現できず、そちらの記事のソースをコピーして同じ記事を書いてみたところ再現でき、原因がわかりました。
    原因は記事中のタグの文法ミスです。
    次のような構文の記事が多いですが、<dl>に対する終了タグ</dl>が不足、<dt>に対する終了タグが</dd>になっています。
    <dl>
    <dt>本文</dd>
    <dt>追記</dd>
    正しい使い方は次のようになります。
    <dl>
    <dt>本文</dt>
    <dt>追記</dt>
    </dl>
    これを直したところ、私の再現ページでは正常になりました。
    今のブラウザは優秀なので、多少の文法ミスがあっても正常に表示してくれる事があります。
    でも、それはまぐれで表示できているだけなので、構造がおかしいタグの間に別のタグが入ったりすると、また解釈が変わり正常に表示できなくなったりします。
    今回のケースも「続きを読む」の有無に関係なく文法ミスがありますが、無い場合はなんとか正常に表示できていて、「続きを読む」が間に入ることにより、複数個タグが増え、それと干渉して表示が崩れるのだと思います。
    更に調べてみたところ、次の「続きを読む」を表示するブロックのdivタグと干渉するようでした。
    <div id="more"><p><%topentry_more></p></div>
    全ての記事のタグを修正するのは大変だと思ったので、この1行を次のようにしてみてください。
    <p id="more"><%topentry_more></p>
    全てのブラウザでは検証してませんが、これで問題を回避できるかも知れません。

  18. 早速有り難うございます。問題なく表示されるようになりました。
    お世話さまでした。

  19. はじめまして、2カラム版をしようしております。
    以下のテーブルタグを使用すると、外枠、内枠が表示されづテーブル表示位置が下に表示されてしまいます。恐れ入りますが、原因のほどアドバイスいただけますでしょうか。
    <table>
    <caption>身近な果物</caption>
    <tr>
    <th>名称</th>
    <th>味の特徴</th>
    <th>色</th>
    </tr>
    <tr>
    <td>りんご</td>
    <td>甘酸っぱい</td>
    <td>おおむね赤</td>
    </tr>
    <tr>
    <td>なつみかん</td>
    <td>かなり酸っぱいと思う</td>
    <td>たいてい黄色</td>
    </tr>
    </table>

  20. はじめまして、こんばんは。
    tableの件ですが、下に下がるのはたぶん「改行の扱い」が「自動改行」になっているためだと思います。
    表示したソースを見るとたぶん次のようにタグごとに<br>が挿入されてるはずです。
    <table><br>
    <caption>身近な果物</caption><br>
    <tr><br>
    <th>名称</th><br>
    <th>味の特徴</th><br>
    この<br>の数分テーブルの上に余白ができます。
    解決策としては「改行の扱い」を「HTMLタグのみ(<br>タグ以外では自動改行しない)」にします。「改行の扱い」は環境設定と記事毎どちらにも設定がありますが、環境設定で変更した場合は、それ以降の新しい記事には適用されますが、過去の記事には適用されませんので、過去記事は記事毎に変更しなければなりません。
    他の方法としては、ソースが見難くなりますがタグを改行せずに次のように書くと解消されます。
    <table><caption>身近な果物</caption><tr><th>名称</th><th>味の特徴</th>
    あと、枠線についてですが、tableはhtmlかcssにて枠線の属性を定義しないと表示されません。
    例えばcssにて一括定義する場合は、次の記述を追加してください。
    これは1pxの黒い実線をtable,tr,td,th,captionに定義するcssです。
    table,tr,td,th,caption{border:solid 1px #000;}
    他の記述の仕方は、「html table」や「css table」などのキーワードでGoogle等で検索すると解説しているサイトがたくさんありますので、調べてみてください。

  21. 初歩的な質問にも関わらず回答いただきありがとうございました。解決いたしましたので、お礼とご報告させていただきます。これからも質の高いテンプレート楽しみにしております。

  22. 俺さん、こんにちは。
    センスの良いテンプレートを作成されていて尊敬です。
    中でも3カラムに一目惚れをして早速使わせて頂いています!ありがとうございます。
    そこで、以前使っていたテンプレでは、HTML編集をして、次のURLの方法でカテゴリー一覧の表示をさせていたのですが、(参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1122656531 )
    私のやり方がおかしいのか、3カラムではこの方法が適用されず、カテゴリータイトルリストが作成できませんので、どのようにしたらできるのか教えて頂けたらと思い、質問させて頂きました。
    どうしてもカテゴリー別のリストを表示させたいので…
    お忙しいとは思いますがどうぞよろしくお願い致しますm(_ _)m

  23. はじめまして、こんばんは。
    <!–▲コメント編集ページ▲–>と<!–▼記事エントリー▼–>の間に次のソースを入れてみてください。
    <!–▼カテゴリーエリア・タイトルリスト▼–>
    <!–category_area–>
    <div class="content">
    <p class="list_header">カテゴリ:<%sub_title> の記事一覧</p>
    <ul class="list_body">
    <!–topentry–>
    <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
    <!–/topentry–>
    </ul>
    <p align="center">
    <!–prevpage–><a href="<%prevpage_url>" title="<%template_prevpage>">< PREV</a> <!–/prevpage–>
    <span style="color:#999;"> | <a href="<%url>" title="<%template_home>">HOME</a> | </span>
    <!–nextpage–> <a href="<%nextpage_url>" title="<%template_nextpage>">NEXT ></a><!–/nextpage–>
    </p>
    </div><!–/content–>
    <!–/category_area–>
    <!–▲カテゴリーエリア・タイトルリスト▲–>
    サンプル:http://oreshiten.blog47.fc2.com/blog-category-15.html

  24. 俺さん、迅速なご対応に大変感謝致します。
    サンプルを拝見して、「それそれ[絵文字:v-237]」って
    テンションが上がりながら、俺さん作成のソースを指定の場所に貼ってみましたら、何故かカテゴリー一覧が出現しないので「???」って状態に陥っていました(T_T)
    ですが、しばらく記事を書いていないと出現する「広告」に邪魔をされていたようで、試しに新規の記事を書いてみたところ、広告が消えて、俺さんのサンプルと全く同じ場所に、きちんとカテゴリー一覧が出ておりました(*´∀`*)
    試行錯誤してかなり苦戦していたので、本当に嬉しかったです。
    早くに俺さんにお聞きしていれば良かったような(;´∀`)
    本当に俺さんを尊敬します!
    素敵なテンプレートをありがたく使わせて頂きますね[絵文字:v-237]
    今後の制作も楽しみにしています。

  25. 俺さん
    素敵なテンプレートを提供していただき、ありがとうございます。
    ブログ初心者ですが人生初ブログの初テンプレとして、grass_boardシリーズの3カラムを使用させていただいております。
    1点質問させて下さい。
    私の使っているネットブック(Aspire one AOA150、液晶サイズ:8.9インチ)の画面上で自分のブログを表示すると、どうしても横スクロールバーが発生してしまいます。
    使用してるブラウザはFirefoxとIEです。
    特にIEで開いた時に、最初に表示されるページの表示倍率が大き過ぎる感じがします。
    横クローロバーが表示されないよう、ブラウザの大きさに合わせて可変させる表示に変更するには、どうしたらいいでしょうか?
    お忙しい中大変恐縮ですが、ご指導の程、よろしくお願いいたします。

  26. はじめまして、こんばんは。
    表示サイズの件ですが、まず共有テンプレートという性質上、多くの人が快適に使えるように利用者の多い横幅解像度1280~1920dpiを意識して作っています。
    一昔前までは横スクロールが出現しないようにコンテンツの横幅を800px以内に収めるのが主流でしたが、最近はワイド画面が主流になり960px前後が主流になりました。
    ただ、文章が読みやすい1行の文字数や文字サイズを考慮すると、メインコンテンツの幅は500~600px程度が見やすいと統計が出ています。
    3カラムは必然的に横幅が広くなってしまうので、FC2の共有テンプレートにも横幅が広すぎて汎用性の低いテンプレートもあります。
    横スクロールが出てしまったりカラム落ちしたりですね。
    自分の画面でしか確認しないからそうなるのでしょう。要は少数派は切り捨てています。
    でも、同じように大きな画面で利用する人が多いためか、3カラムは人気があります。
    個人的に3カラムはあまり好きではありませんが、人気があるので作ったしだいです。
    本題ですが、テンプレートの横幅を修正するためには使っている画像等の編集も必要になり、難易度が高いです。
    サイドバーはプラグイン等のサイズを考慮すると180px以上は欲しいので、調整するのは中央カラムになりますが、これ以上狭くするのは得策とは言えません。
    他の方法としては、画面のインチサイズに関わらず、パソコンのモニタ解像度の設定、またはブラウザの表示サイズの設定を高くすれば、画面内に収まるようになると思います。(解像度の上限が1024dpiなど低ければ無理かも知れません。)
    この場合、文字も一緒に小さくなってしまうので、調整が必要になります。
    でも、これは小さい画面のパソコンに合わせた設定になるため、多くの人が利用している画面サイズでは文字が大きすぎるという事になります。
    あと、単純に横スクロールを出さないようにするには、cssのhtmlとbodyにoverflow-x:hidden;を設定する方法もあります。
    いずれの方法でも、利用者が少ない低解像度のネットブックで見やすいブログにするのか、デスクトップパソコンなど利用者が多い高解像度のモニタでの閲覧者にとって見やすいブログにするかの二択になるという事です。自分の見やすさをとるか他の多くの訪問者の見やすさをとるかです。
    でも、自分の環境で見にくいというのは気持ち悪いですよね。
    もし俺がまたたびさんと同じ環境であれば3カラムは諦めると思います。
    結論としては3カラムのテンプレートは低解像度のモニタには適しません。
    grass_boardシリーズには2カラムもありますので検討してみてください。
    根本的な解決にならず申し訳ありません。

  27. 俺さん
    早速のご返答、ありがとうございました!
    お時間を割かせてしまい、申し訳ありませんでした。

  28. はじめまして。
    テンプレートを使わせていただいております。
    質問なんですが、にほんブログ村の最新記事から自分のブログに入ると、ヘッダーのブログタイトル下に記事タイトルが表示されてしまいます。(ブログ村に登録しています)
    これは表示出来ないようにすることは可能でしょうか?

  29. はじめまして、こんにちは。
    質問の件ですが、それはブログ村経由だけではありませんよね?
    このテンプレートで、その部分はページの種類に応じて違う内容を表示するようにしています。
    これはSEO対策を意識しての事で、ページ内容をより明確に検索エンジンに伝えるためにそのようにしています。
    htmlの<!–▼ヘッダー▼–>の中にある次の部分が該当します。
    <h1>
    <!–index_area–><%introduction><!–/index_area–>
    <!–permanent_area–><%introduction><br /><%sub_title><!–/permanent_area–>
    <!–category_area–><%introduction><br /><%sub_title> カテゴリーの記事<!–/category_area–>
    <!–tag_area–><%introduction><br />ユーザータグ「<%sub_title>」が設定された記事<!–/tag_area–>
    <!–search_area–><%introduction><br /><%sub_title> の検索結果<!–/search_area–>
    <!–date_area–><%introduction><br /><%now_year>年<%now_month>月の記事<!–/date_area–>
    <!–not_index_area–><!–not_permanent_area–><!–not_category_area–><!–not_tag_area–><!–not_search_area–><!–not_date_area–><%introduction><!–/not_date_area–><!–/not_search_area–><!–/not_tag_area–><!–/not_category_area–><!–/not_permanent_area–><!–/not_index_area–>
    </h1>
    <h1>の中身が、その部分に当たり、ページの種類によりそれぞれ別の物が表示されます。
    ・<!–index_area–>(トップページ)では、ブログ説明だけ。
    ・<!–permanent_area–>(個別記事ページ)では、ブログ説明と記事タイトル。
    ・<!–category_area–>(カテゴリーページ)では、ブログ説明と「○○カテゴリーの記事」。
    ・<!–tag_area–>(ユーザタグ結果ページ)では、ブログ説明と「ユーザータグ「○○」が設定された記事」。
    ・<!–search_area–>(検索結果ページ)では、ブログ説明と「○○の検索結果」。
    ・<!–date_area–>(月別ページ)では、ブログ説明と「○年○月の記事」。
    ・上記に当てはまらないページは、ブログ説明だけ。
    今回のブログ村の最新記事のリンクは、たぶん個別記事ページへのリンクだと思いますので、記事タイトルを表示したくないのであれば、次の部分の<br /><%sub_title>を削除してください。
    <!–permanent_area–><%introduction><br /><%sub_title><!–/permanent_area–>

  30. はじめまして。素晴らしいテンプレを使わせて頂き、ありがとうございます。
    一つ質問なのですが、画像に重なるブログの説明文ですが、どうしても見えにくいのですが、何か解決策はありますか?色なり文字サイズなり変えることは可能でしょうか?
    よろしくお願いいたします。

  31. はじめまして、こんばんは。
    ブログ説明文の件ですが、管理画面のテンプレートの設定にあるCSS編集の▼ヘッダーの中の次の部分が該当します。
    #header_content h1{
    width:920px;
    font-size:12px;
    font-weight:normal;
    position:absolute;
    top:40px;
    right:12px;
    color:#000;
    line-height:1.4;
    }
    #header_content h2{
    width:920px;
    font-size:18px;
    position:absolute;
    top:15px;
    right:15px;
    line-height:1;
    }
    h2がブログタイトル、h1が説明になります。
    文字の大きさはfont-size、位置はtopやrightの数値を変更してください。
    h2の文字色はcolor:webカラーコードを追加、h1の文字色はリンク文字の設定になりますので、次の記述をCSSのどこかに追加し、#900などのカラーコードを変更してください。
    カラーコードはwebcolorなどのキーワードで検索すると調べられると思います。
    #header_content a{text-decoration:none;}
    #header_content a:link,
    #header_content a:visited{color:#900;text-decoration:none;}
    #header_content a:focus,
    #header_content a:hover,
    #header_content a:active{color:#000;text-decoration:none;}
    また、実際に表示するタグはHTMLの中の<h1>の部分になります。
    その中にある<%introduction>という変数にブログの設定で入力した説明が自動的に入ります。
    この変数を利用せずに直接ここに説明を記述すれば<br />で改行する事ができます。
    <h1>の中身はページの種類により変えてますので、いくつかある<%introduction>全てを変更してください。
    例)<%introduction>を使わずに直接記述
    <!–index_area–><%introduction><!–/index_area–>
     ↓
    <!–index_area–>美味しいラーメン屋さんを紹介するブログです。<br />ごゆっくりしていって下さい。<!–/index_area–>

  32. 俺さん
    ご丁寧にありがとうございます。いろいろ試してみましたが、やはり俺さんが設定されている文字の大きさや位置が一番しっくりきたので結局そのまま使わせて頂いておりますm(__)mありがとうございました。
    もう1点メタタグについても質問させて頂いてもよろしいでしょうか?
    サイト説明文に書き換える部分はこちらであっていますか?
    もしかして<%introduction>の部分は全て書き換えるのですか?今現在は下記のような感じです。
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=<%template_charset>" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="author" content="<%author_name>" />
    <!–★title重複回避ここから–>
    <!–index_area–>
    <!–index.html トップページエリア–>
    <meta name="description" content="[太字]厳選サプライズアイデア30選!絶対泣かせる最高のサプライズ演出掲載中[/太字]" />
    <title><%blog_name></title>
    <!–/index_area–>
    <!–permanent_area–>
    <!–☆blog-entry-xxx.html 個別記事エリア–>
    <meta name="description" content="<%sub_title> – <%introduction>" />
    <title><%sub_title> – <!–topentry–><%topentry_category><!–/topentry–></title>
    <link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
    <!–/permanent_area–>
    <!–date_area–>
    <!–☆blog-date-yyyymm.html 月別エリア–>
    <meta name="description" content="<%now_year>年<%now_month>月の記事 – <%introduction>" />
    <title><%now_year>年<%now_month>月の記事 – <%blog_name></title>
    <!–/date_area–>
    <!–category_area–>
    <!–☆blog-category-xxx カテゴリー別エリア–>
    <meta name="description" content="<%sub_title> – <%introduction>" />
    <title><%sub_title> – <%blog_name></title>
    <!–/category_area–>
    <!–search_area–>
    <!–☆?q=キーワード 検索結果エリア–>
    <meta name="description" content="<%sub_title> の検索結果 – <%introduction>" />
    <title>「<%sub_title>」の検索結果 – <%blog_name></title>
    <!–/search_area–>
    <!–tag_area–>
    <!–☆?tag=タグ タグ検索結果エリア–>
    <meta name="description" content="<%sub_title> – <%introduction>" />
    <title>ユーザータグ「<%sub_title>」が設定された記事 – <%blog_name></title>
    <!–/tag_area–>
    <!–titlelist_area–>
    <!–☆?allとarchives.html統一 全記事一覧エリア–>
    <meta name="description" content="全記事タイトルリスト – <%introduction>" />
    <title><%blog_name> – 全記事タイトルリスト</title>
    <link rel="canonical" href="<%url>archives.html" />
    <!–/titlelist_area–>
    <!–edit_area–>
    <!–☆?mode=edit&rno=xxx コメント編集エリア–>
    <meta name="description" content="コメントno.<%eno> – <%introduction>" />
    <title>コメントの編集 no.<%eno> – <%blog_name></title>
    <!–/edit_area–>
    <!–not_index_area–><!–not_category_area–><!–not_date_area–><!–not_search_area–><!–not_tag_area–><!–not_permanent_area–><!–not_titlelist_area–>
    <!–page_area–>
    <!–☆page-xx.html トップページからのページエリア–>
    <meta name="description" content="<%introduction>" />
    <title><%blog_name></title>
    <!–/page_area–>
    <!–/not_titlelist_area–><!–/not_permanent_area–><!–/not_tag_area–><!–/not_search_area–><!–/not_date_area–><!–/not_category_area–><!–/not_index_area–>
    <!–☆送り・戻りページがある場合のtitle重複回避スクリプト–>
    <script type="text/javascript">
    var pageurl = document.URL;
    var pageurll = pageurl.match(/\w+/g);
    var pageurlll = pageurl.match(/page=\d/);
    if (pageurll[5].indexOf("page") != -1) {
    document.title = document.title + " page=" + pageurll[6];
    }
    else if (pageurll[5].indexOf("category") != -1) {
    document.title = document.title + " page=" + pageurll[6];
    }
    else if (pageurll[5].indexOf("q") != -1) {
    document.title = document.title + " " + pageurlll[0];
    }
    else if (pageurll[5].indexOf("tag") != -1) {
    document.title = document.title + " " + pageurlll[0];
    }
    else if (pageurll[6].indexOf("date") != -1 && pageurll.length > 9 ) {
    document.title = document.title + " page=" + pageurll[8];
    }
    </script>
    <!–/★title重複回避ここまで–>
    <link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
    <link rel="alternate" media="handheld" href="<%url>?m" />
    <link rel="top" href="<%url>" title="<%blog_name>" />
    <link rel="start" href="<%url>" title="<%blog_name>" />
    <link rel="index" href="<%url>?all" title="<%template_index>" />
    <!–prevpage–><link rel="prev" href="<%prevpage_url>" title="<%template_prevpage>" /><!–/prevpage–>
    <!–nextpage–><link rel="next" href="<%nextpage_url>" title="<%template_nextpage>" /><!–/nextpage–>
    <!–preventry–><link rel="next" href="<%preventry_url>" title="<%preventry_title>" /><!–/preventry–>
    <!–nextentry–><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>" /><!–/nextentry–>
    <meta name=”keywords” content=”サプライズ,プレゼント,誕生日,感動,バースデー,クリスマス,結婚” />
    </head>
    また、他にも書き換える部分があれば教えて頂ければ助かります。お手数おかけして申し訳ないですがよろしくお願いいたします。

  33. メタタグの部分の<%introduction>にも同じように説明が入ってくるのですが、これは実際のページに表示されるものではありませんので、変更しなくても大丈夫です。
    ただ、<%introduction>のようなFC2の独自変数を使わずに直接書いても問題ありませんので、変更しても問題はありません。

  34. Googleでブログ記事タイトル検索したところ、検索結果にブログ説明文しか表示されないのですが、
    本文を表示するにはどうすれば良いでしょうか?
    それと記事タイトルの後にブログ名を表示するにはどうすれば良いでしょうか?
    カテゴリ名で表示されてしまいます。
    ブログ名で検索するとプロフィールが表示されます。
    こちらはブログ説明文を表示させたいです…。
    お手数ですが、宜しくお願いします(>_<)

  35. >それと記事タイトルの後にブログ名を表示するにはどうすれば良いでしょうか?
    >カテゴリ名で表示されてしまいます。
    検索上位に表示されるためにはキーワードを意識しなければなりませんが、ネームバリューのある有名人のブログでもない限り、一般的にブログ名で検索される事は少ないので、個人的にはブログ名は軽視しています。カテゴリ名のほうがまだブログ内容を表すキーワードとして有益なケースが多いので、SEOを意識してそのようにしています。
    また、タイトルタグやmeta descriptionの重複問題も意識し、なるべく複数のページで同じ物にならないようにしています。
    ご希望のように個別記事タイトルの後ろにカテゴリ名ではなく、ブログ名を表示したい場合は、html編集の <!–☆blog-entry-xxx.html 個別記事エリア–> の中にある <title><%sub_title> – <!–topentry–><%topentry_category><!–/topentry–></title> を <title><%sub_title> – <%blog_name></title> に変更してください。
    >Googleでブログ記事タイトル検索したところ、検索結果にブログ説明文しか表示されないのですが、 本文を表示するにはどうすれば良いでしょうか?
    これに関しましては、Googleのさじ加減になります。
    「google 検索結果 表示 description」などのキーワードで調べてみてください。
    あと、何カラムのテンプレートをご利用なのかわかりませんが、説明文以外が表示される場合は、ソースの上の方から表示される事が多いため、3カラムは不利になります。
    記事タイトルではなく、キーワードで検索された場合は、その限りではありません。
    これもブログ名と同じで記事タイトルで検索される事は少ないと思います。
    >ブログ名で検索するとプロフィールが表示されます。 こちらはブログ説明文を表示させたいです…。
    プロフィールを表示する変数は<%introduction2>ですが、これはどこにも設定していませんので、テンプレートそのままであれば、通常はブログ説明文が表示されるはずです。
    ブログ名を教えていただければ、検索してみて何かアドバイスできるかも知れません。

  36. はじめまして。
    テンプレを使わせていただいたのですが、ヘッダーを替えてタイトルの位置も合わせて左下に持ってきたかったのですがよくわかりませんでした。
    (alignをいじって、左には持ってきたのですが・・・)
    超初心者的な質問で申し訳ないのですが、下の空いている位置に設定するにはどのようにしたらいいのでしょうか。
    通常ならどこか数値をちょこっといじって変更できるのですが、このテンプレでは私レベルが触れそうなところの見当がつきません。
    急ぎはしませんので、お暇な時にご回答いただけると嬉しいです。
    よろしくお願いいたします。

  37. はじめまして、こんばんは。
    タイトルはCSSの次の部分になります。
    #header_content h2{
    width:938px;
    font-size:24px;
    line-height:1;
    margin:3px 15px 0 15px;
    font-family:arial;
    }
    通常は左上からmarginでの位置指定になりますが、ご希望の位置の場合、ブラウザ毎の解釈により位置が安定しない可能性がありますので、position:absoluteを設定し、左下からの位置指定が理想かと思います。
    具体的には次のように変更してください。bottomとleftの数値はお好みで。
    #header_content h2{
    width:938px;
    font-size:24px;
    line-height:1;
    position:absolute;
    bottom:20px;
    left:20px;
    font-family:arial;
    }

  38. 管理人様
    詳しいご説明ありがとうございました。
    無事、左下に設定できて満足です。
    あと、ちょっと気になったのですが、カテゴリや最近の記事をクリックしたときに、ヘッダーの右上にそのタイトルが出るのはなぜですか?
    最初、ちょっと目についたので気になってたのですが、目立たないからいいか~とは思ってるのですが。。
    それより、あと一つお聞きしたいことがっ!
    新しく記事を書いた時に、画像を入れて回り込みさせることが多々あるのですが、hspaceが使えません。
    align="left"hspace="5"vspace="5"・・・と言う感じで使って、記事を書いているすぐ上のプレビューではタグを入れると反応があります。しかし、プレビューボタンを押して別画面でプレビューをみると画像と文字がピタッとついていますし、保存して公開状態にしてもやはりダメでした。
    今までのテンプレは上記のタグが使えたのですが、こちらのテンプレで反応しないのはなぜでしょう。
    最新の記事は、仕方がないので画像に写真風の白枠をつけて横の余白が出るようにしました。
    何度もお尋ねして申し訳なく思いますが、またお時間のある時にご回答いただければとても助かります。
    よろしくお願いいたします。
    うさりん

  39. 記事タイトルやカテゴリ名が表示されるのは、SEOを意識しての仕様です。
    必要が無ければ、htmlの<!–▼ヘッダー▼–>の中にある<h1>から</h1>を削除してください。
    <h1>が無いまま、<h2>を設定するのはおかしいので、
    その下の<h2><a href="<%url>"><%blog_name></a></h2>を
    <h1><a href="<%url>"><%blog_name></a></h1>に変更。
    cssの#header_content h1を削除し、#header_content h2を#header_content h1に変更してください。
    失敗した時のために、予め元のhtmlとcssをメモ帳にでもコピーしてからやってみてくださいね。
    あと、画像周りのスペースについてですが、CSSが優先されているからです。
    ▼CSSリセットの中で、ほぼ全てのhtmlタグにmargin:0を指定していて、必要に応じてmargin(余白)を指定するようにしていますが、これがhspaceなどより優先されています。
    hspaseなどを有効にするためには、この中からimg,を削除してください。
    他の方法としては、CSSはstyle="属性"のようにhtmlタグに直接記述する事もできるので、<img>タグにmarginのスタイルを直接記述する方法もあります。
    この場合、▼CSSリセットよりもこちらが優先されます。
    具体的には、<img src="画像URL" style="margin:0 10px 10px 0">のように書きます。
    marginの数値の意味はmargin:上余白 右余白 下余白 左余白"です。
    このようにCSSにてレイアウトするほうが現在主流の方法になりますが、過去記事まで手直しするのが面倒な場合は前者の方法が楽かも知れません。

  40. はじめまして。
    3カラムのテンプレートを使用させていただいています。
    最近ブログを始めて、右カラムにACR WEBのページランキングを設置してみたのですが、いろいろ設定してみても、なぜか背景色や表ラインは表示されません。表の幅や文字色などは設定できます。試しに他のテンプレートにしてみたら、ちゃんと表のラインが表示されました。
    元々左右のカラムにはラインなどの表示がされないように設定されているのでしょうか?
    すみませんが、ご指導のほどよろしくお願いします。

  41. 登録して試してみましたが、表ラインは表示されます。
    現在右カラム最上段に設置してますのでご確認ください。
    [打消]tdの背景色は反映されてませんが、これは公式テンプレートでも同様でした。
    現段階では原因がわかりません。[/打消]
    私も利用してますがi2iのページランキングが問題も無く、結構使い勝手がいいですよ。

  42. 引き続き、他のPCなどでも調査したところ、IE8では正常に表示されていました。
    IE10、Firefox、Chromeでは背景色が反映されませんでした。
    原因はわかりません。
    これらのブラウザでも正常に表示されるテンプレートがあるのであれば教えてください。

  43. 管理人様
    早速ご対応いただき、ありがとうございます。
    IE8で問題なかったということなので、意を決してもう一度ダウンロードし直してみたところ、ちゃんと表示されました。お騒がせしてすみません。
    ちょっとカスタマイズしたのが原因だったかもしれません。
    i2iのページランキングも良さそうですね。乗換してみたくなりましたが、せっかく表示されたので、もう少しACRWEBにお世話になります。
    本当にありがとうございます。今後ともよろしく。

  44. 管理人様
    始めまして!3カラムのテンプレートに惚れ込み、現在は2カラムの方を利用させて頂いているものです。
    現在、いろいろ勉強中で個人的にメニューバーを設置したいと思い、自分なりに試行錯誤したのですが、はみ出る?というかうまく設置する事が出来ません。
    とりあえずはまってくれたら良いなぁと思っているのですが、出来ればこの2カラムまたは3カラムを使い続けたいので、ご教授または追加頂く事は出来ませんでしょうか?
    大変お手数をおかけ致しますが、何卒、ご検討下さいますようお願い申し上げます。
    ちなみに今の当方のブログはこんな感じです。

  45. はじめまして、こんにちは。
    ちょっと質問が漠然としていてアドバイスしかねます。
    どの部分にどのようなメニューバーをお考えでしょうか?
    具体例や参考URL等見せてもらえたらアドバイスできるかもしれません。

  46. 管理人様
    返事ありがとうございます。
    申し訳ございません。相談するのも初めてだったもので・・・お手数をおかけ致しました。
    イメージとしては、こんな感じが良いです。

    単純にヘッダーのすぐ下、記事の上?になるのかな?
    このサイトを参考にしても出来ませんでした。
    用途はトップやサイトマップに行ければ良いと思っているのですが・・・ご理解頂けますか?
    すいません。文章能力がないので・・・

  47. とりあえず参考サイトのリンク先にある上記のタイプで試したところ問題ありませんでした。
    テスト用ブログでご確認ください。
    http://cathausecattower.blog.fc2.com/
    htmlはそのまま使います。
    ヘッダー直下であれば、次のところに挿入してください。
    メニューの中身を変えたい場合は、<li>タグの中のリンクタグを書き換えてください。
    <!–▼2カラムコンテナ▼–>
    <div id="container">
    ここにhtml
    次にcssと画像ですが、画像はimagesタブにある画像を全てダウンロードし、ご自分のスペースにアップロードしてください。
    cssも丸ごとコピーし、画像のurlを置き換えてください。
    このタイプの場合7箇所置き換える場所があります。
    例)
    background: url(highlight-bg.png) repeat;

    background: url(http://blog-imgs-47.fc2.com/c/a/t/cathausecattower/highlight-bg.png) repeat;
    あとは、サイズと余白調整をします。
    #cssmenuの部分を次のように変更してください。
    #cssmenu {
    width: 808px;
    margin:0 auto 10px auto;
    zoom: 1;
    }
    これでテストブログのようになるはずです。
    参考になりますでしょうか。

  48. 管理人様
    ありがとうございました!
    なんとかイメージ通りのメニューバーを設置する事が出来ました。
    本当にありがとうございます!
    しかし、設置したメニューバーとヘッダーの間が空いてしまいます。
    欲を言えばこの間が空いてしまう件につきましても、正直な話、教えて頂きたいです・・・。
    ですが、度々、ご迷惑をおかけする事になりますので、管理人様さえよろしければ教えて下さい。。。すいません。
    しかし、設置する事が出来たのは本当に嬉しいです!
    ありがとうございました。
    ちなみに私が使いたいと思っているメニューバータイプのリンクを貼り付けますので、ご検討の程、宜しくお願い申し上げます。
    都合の良い事ばかり言っており、申し訳ございません。
    希望メニューバーリンク

    現在の当方のブログリンク

  49. #cssmenu {
    width: 808px;
    margin:-10px auto 10px auto;
    }
    これをcssに追加してみてください。
    数値はお好みで調整してください。

  50. 管理人様
    こんな時間にありがとうございます!
    ヘッダー側にくっつける事が出来ました。
    margin: 0 auto 10px auto; }は試してみたんですが、-(マイナス)があるとは思いませんでした。
    何から何まで本当にありがとうございました!
    何も知らない素人のワガママにご対応頂きまして、ありがとうございました。

  51. とてもカッコいいテンプレート、いつも使わせていただいています。
    質問なのですが、プラグイン3を本文記事と同じ幅にして、両脇のプラグイン1・2と同じ高さにしたいのですが、どうしたら良いでしょうか?
    宜しくお願いします。

  52. htmlの中からプラグイン3を構成しているタグ群を探して、中央カラムを構成しているメインコンテンツ内に移動すれば、ご希望のようになると思います。
    <!–▽メインコンテンツ▽–>
    <div id="main">
    <!–▽プラグイン3・ヘッダー下▽–>
    <!–plugin–>
    <!–plugin_third–>
    中略
    <!–/plugin_third–>
    <!–/plugin–>
    <!–△プラグイン3・ヘッダー下△–>
    中略
    </div>
    <!–△メインコンテンツ△–>
    あとはcssの次の部分を修正してください。
    /*************************************************
     ▼プラグイン3
    *************************************************/
    #plg3{
    margin:0 0 10px 0;
    width:918px; ←この行削除
    }
    これでヘッダー画像下にプラグイン1・3・2の上辺が揃って並ぶはずです。
    構成上、下辺は揃える事はできません。
    参考になりますでしょうか。

  53. 俺さん、迅速かつ的確なアドバイスありがとうございます。
    完璧に出来ました!!
    もう一つ質問なんですが、本文やコメントを左揃え表示(現在中央揃えになっている)にしたいのですが、どうしたら良いのでしょうか?
    何回もすいませんが、宜しくお願いします。

  54. このテンプレートでは、デフォルトで左揃えになっています。
    このブログもそう見えてますよね?
    なので、原因の特定が難しいです。
    ご自身でどこか変更したのか、もしくはプラグイン等で追加した部分の文法ミスなどで影響を受けている可能性もあります。
    実際のページを見せてもらえたらアドバイスできるかも知れません。
    URLを公開したくないのであれば、非公開コメントでもいいです。

  55. こちら側のミスでした。
    本当にすいませんでした。
    そして、迅速な対応有難うございます。
    また困ったときはお願いします。。。

  56. glass_board_3colmnを使わせていただいております。
    カスタマイズをしたい部分があり いくつか質問させてください。
    1 ブログ説明文の文字色を変更したい。
    2 エントリー内の記事全体をもう少し右に寄せたい。
      (行の1文字めを少し右から始まるようにして 左端の空白部分を大きくしたい。)
    3 エントリータイトルとその下のラインのと本文の1行めとの間を少し離したい。
    例えば俺様のブログだと・・・
    FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
    --------------------------------------------------—
    テンプレート名はあとから修正する事ができないのに、申請してから気づく痛恨のスペルミ

    FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
    --------------------------------------------------—
    テンプレート名はあとから修正する事ができないのに、申請してから気づく痛恨のスペルミ
    こんな感じにしたいと思います。
    以上です。
    申し訳ありませんがよろしくお願いいたします

  57. はじめまして、こんばんは。
    ブログ説明文の色は、CSSの▼ヘッダーにある次の部分を変更してください。
    #header_content h1{
    width:920px;
    font-size:12px;
    font-weight:normal;
    position:absolute;
    top:40px;
    right:12px;
    color:#000; ←お好みのwebカラーコードに変更
    line-height:1.4;
    }
    記事の余白は、CSSの▼記事にある次の部分にpaddingを追加してください。
    例)上余白20px 右余白15px 下余白10px 右余白5pxの場合は次のようになります。
    .entry_body{margin-bottom:10px;overflow:hidden;padding: 20px 15px 10px 5px}

  58. 20px 15px 10px 25px で設定してみました。
    同じように エントリータイトルもずらしたいと思うのですが
    どの部分になりますか?
    .entry_header{border-bottom:solid 1px #999;margin-bottom:10px;font-size:[色:FF0000]16[/色]px;}
    で 文字サイズの変更はできたのですが・・・
    何度も申し訳ありません。。

  59. そうです。その部分が記事タイトルの部分です。
    htmlを見るとわかりますが、ほとんどの場合、ホームページは<div>というボックスを定義するタグでレイアウトされています。
    その<div>に<div class="entry_header">というように任意のクラス名を指定する事により、cssにてデザイン(スタイル)を定義することができます。
    記事に余白をつけた時と同じようにpaddingを設定してみてください。
    .entry_header{border-bottom:solid 1px #999;margin-bottom:10px;font-size:16px;padding:10px;}
    paddingはボックスの内余白、marginはボックスの外余白です。
    数値を1つだけ書くと上下左右4辺にその数値が適応されます。
    4つ書くと上下左右に別々の数値を指定できます。
    padding-topやpadding-leftのように個別に書くこともできます。
    タイトル下のライン(border-bottom)はボックスの外側に表示されます。
    そのためラインも一緒に縮小する場合はpaddingではなく、marginを変更しなければなりません。
    現在、margin-bottom:10pxと下だけにマージンが設定されてますので、4辺に設定するためにmargin:0px 20px 10px 20pxのように書き換えてみてください。
    いずれの属性もgoogleなどで「css margin」などで検索すると、記述の仕方を詳しく解説しているサイトがたくさんありますので、詳しくはそちらを参考にいろいろ試してみてください。
    私はそうやって独学で覚えました。
    念のためにhtmlやcssをメモ帳にでもコピーしてバックアップとして保存しておくと安心です。

  60. 2度もの質問に とても丁寧にお返事くださり感謝しております。
    お陰様でイメージ通りのテンプレートにカスタマイズすることができました。
    ありがとうございました。

  61. 俺サマ
    こんにちは。
    お世話になっています。
    早々にアドバイス頂きありがとうございます!
    昨日は半日パソコンの前に座れたので(笑)
    設定し、見事!様々解決しました!
    (Ah~うれしい~)←心の声
    タイトルの「右から左へ」の部分は、
    教えて頂いた一番目の最初の「rightをleftに変更」で
    二行(三行)いっぺんに移動出来ました!
    ※タイトル・説明の文字の大きさと位置の変更は
    タイトルの大きさを大きくし、位置を少しだけ下げたいと
    思っていますので、気持ちに余裕が出来た時(汗)に
    挑戦してみます。
    それから!!
    「本文/中央寄せ」の件ですが!!
    そうでしたか!!
    『目からウロコ』でした^^
    原因は、ランキングバナーを作っては変更したり
    また貼り付けたり…の繰り返しと
    「専門記号^^;」の意味も分かっていない状態で
    「手探り」でやっていますので
    こう言う事になるんですね…><
    でも「原因を解明」して頂きありがとうございましたmm
    上記を踏まえ、「ポチッと~~」の文章のみ
    「中央寄り」に設定出来ました!!
    「Ah~スッキリ」です^^
    ありがとうございました。
    まだまだ分からない事だらけですので
    その節は、宜しくお願い致します。

  62. こんにちは、初めまして。ブログのデザインが気に入りまして、これから使わせていただきます。
    本当ちょっとした質問なのですが、一番上の大きなヘッダー画像は自分で作った画像に変更してもよろしいのでしょうか? もしかしたら何処かにその事を書いたかもしれませんが、心配でしたので質問させていただきました。
    失礼いたします。

  63. はじめまして、こんにちは。
    私が作成したテンプレートは何も制限はありません。
    改変も再配布も全て自由です。
    お好きなようにカスタマイズしてご利用ください。

  64. 管理人さま、返信ありがとうございます、
    感謝しながら使用させていただきます!

  65. 初めまして。
    3カラムのテンプレートを使わせていただいております。
    共有プラグインの「Book Mark ! 」をダウンロードした後に削除しようとしたのですが、(現在左サイドバー上部に表示)プラグイン管理画面にプラグインそのものが表示されないうえに、HTMLの編集画面にもソースが表示されないので削除することができません。 画面上は表示されたままになっているのですが、削除するにはどうすればよいでしょうか?
    ※ブラウザ上を右クリックしてソースを表示させると、プラグインのソースが表示されます。
    お手数ですが、ご教示いただければ幸いです。

  66. はじめまして。
    もう解決されましたでしょうか?
    ご提示のURLを拝見しましたが、そのプラグイン(Book Mark ! )を確認する事ができませんでした。
    また、試しにこのブログにもそのプラグインを導入してみましたが、特に問題はありませんでした。
    他のプラグインと同じく普通に追加・削除ができました。
    基本的な事ですが、変更後にリロード(再読み込み)はしましたでしょうか?
    他のパソコンから見られる環境があれば、複数のパソコンで確認してみてください。
    もし特定のパソコンだけならキャッシュのクリア等の処理が必要になるかと思います。
    > 初めまして。
    > 3カラムのテンプレートを使わせていただいております。
    >
    > 共有プラグインの「Book Mark ! 」をダウンロードした後に削除しようとしたのですが、(現在左サイドバー上部に表示)プラグイン管理画面にプラグインそのものが表示されないうえに、HTMLの編集画面にもソースが表示されないので削除することができません。 画面上は表示されたままになっているのですが、削除するにはどうすればよいでしょうか?
    >
    > ※ブラウザ上を右クリックしてソースを表示させると、プラグインのソースが表示されます。
    >
    > お手数ですが、ご教示いただければ幸いです。
    >
    > URL:http://3dp3dd.blog.fc2.com/

  67. 管理人様
    迅速なご返答ありがとうございます。
    本日帰宅後にPCを立ち上げてみたところ、プラグインは削除されて問題なく表示できるようになっておりました。 自分でも何がどうなっているのかよく分からないのですが、大変お手数お掛けしました。

  68. はじめまして。
    とてもセンスのいいテンプレートに一目ぼれで使わせていただきたいのですが
    1.記事タイトルの横に新着マークの表示は可能ですか?
    2追記に記載した場合に閉じるボタンをつける事は可能でしょうか。
    お手数おかけして申し訳ございませんが
    ご教示いただけると助かります。

  69. はじめまして、こんにちは。
    1.記事タイトルの横に新着マークの表示は可能ですか?
    可能です。
    下記サイトが参考になると思います。
    http://rgrg.blog61.fc2.com/blog-entry-149.html
    もしくは、「fc2ブログ 新着マーク」等のキーワードで検索してみてください。
    2追記に記載した場合に閉じるボタンをつける事は可能でしょうか。
    可能です。
    下記サイトが参考になると思います。
    http://10plate.blog44.fc2.com/blog-entry-87.html
    もしくは、「fc2ブログ 追記 閉じる」等のキーワードで検索してみてください。
    折りたたみ式なら
    http://customizefc2blog.blog.fc2.com/blog-entry-18.html
    いずれも試してはいませんが、さらっと見た限りだと問題なく動作するはずです。
    当該テンプレートの機能ではありませんので、ご自身で試行錯誤してみてください。

  70. はじめまして!
    俺さんのテンプレートがとても見やすく、今カスタマイズを行っているところです。
    今回ご質問させていただきました内容はこちらのテンプレートにもある通り、プラグインのリンクやカテゴリ内に横点線の飾りがありますよね?
    こちらの点線を消したく、試行錯誤したのですがどこを変えればいいのか分からず教えいただければと思います。
    とあるツリープラグインを入れたとき、行の幅が違うのか横点線が二重になりとても見難くなってしまいます。
    画像で導入しているのかと思い、探したのですが解決せず・・・。
    初歩的なことかもしれませんがよろしくお願いいたします。

  71. はじめまして、こんばんは。
    スタイルシート編集の▼プラグイン共通にある次の1行を削除して更新してみてください。
    border-bottom: 1px dotted #999;
    /*************************************************
     ▼プラグイン共通
    *************************************************/
    .plg_header_description,
    .plg_footer_description{font-weight:bold;color:#666;}
    .sidemenu_body li,
    .plg3_body li{
    border-bottom: 1px dotted #999; ←この1行削除
    padding: 4px 0px 2px 0px;
    }

  72. 俺さんありがとうございます!
    無事消すことが出来ました!!
    とても助かりました!
    ありがとうございました。

  73. はじめまして。
    3カラムに惚れ込み、使わせて頂いています。
    お聞きしたいのは、投稿日付の位置についてです。
    記事タイトルの右下に、
    (西暦、月、日、曜日)が入るようにしたいのですが、
    教えて頂けますか?
    こちらのサイトで色々検索してみたのですが見当たらず、
    改めて質問させて頂きました。
    参考ページは、私の別ブログですがこんな感じです。
    http://happybirdwing.blog55.fc2.com/
    装飾などは必要なく、単に、記事タイトルの右下に表示したいのです。
    お時間のある時にでもご教授頂けると幸いです。
    よろしくお願いいたします。

  74. はじめまして、こんばんは。
    まず、<!–▽エントリー下部・記事情報▽–>の中にある次の1行を削除。
    <li><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi> <%topentry_hour>:<%topentry_minute> | </li>
    次に<!–▼記事エントリー▼–>の中の<h3>と<div class="entry_body">の間に次の1行を追加してください。
    <div style="margin-bottom:20px;text-align:right;"><%topentry_year>-<%topentry_month>-<%topentry_day>(<%topentry_wayoubi>)</div>
    サンプル
    http://cathausecattower.blog.fc2.com/

  75. 管理人様
    早々のご回答、ありがとうございました。
    おかげさまで希望の通りになりました。
    これからも大切に使わせて頂きます。
    ご報告とお礼まで。

  76. 管理人様
    こちらのテンプレを大事に使わせて頂いております。
    現在、glass_boardの3カラムを
    2カラムに変更して使用しております。
    お聞きしたいのは、
    こちらのサイトと同じように、
    カテゴリの一つをクリックすると
    プラグイン3にそのカテゴリの一覧が出るようにしたいのです。
    現在、私の使っているテンプレでも可能でしょうか?
    ご教授頂ければ幸いです。

  77. 以前、このカテゴリ記事一覧を導入したいというコメントがありましてアドバイスした事があります。
    その時にテストするために実装したのですが、気に入ってそのまま残してました。
    テンプレートを改良している場合、うまく動作するかはわかりませんが、方法はこのページの2013.02.22のコメントに記してありますので試してみてください。

  78. 管理人様
    早々のご回答ありがとうございました。
    色々とこちらのサイトで検索を掛けたのですが
    上手くヒットできずお手数をお掛けしました。
    おかげさまで、希望の一覧が表示されました。
    とっても嬉しいです!
    お忙しい中、早々のご回答ありがとうございました。
    これからも、大事に使わせて頂きます。

  79. 管理人様
    何度もお邪魔させて頂き申し訳ありません。
    タイトル通り、今度は月別の記事一覧リストをプラグイン3に
    表示できないものかとお伺いにきました。
    と、言いますのも、FC2さんより、
    「画像付き最新記事一覧プラグインを追加しました」
    とのことで、こちらを使用したいと考えております。
    今まで使っていた「表示中の記事」プラグインを外し実装してみたところ、
    先日教えて頂いたカテゴリの一覧が出なくなり、
    今回、月別も出ないことに気付きました。
    色々検索したり、探してみたりしたのですが、
    見付けられなかったり、思うような仕様にならずで、
    申し訳なく思いながらまたこちらにお邪魔させて頂いた次第です。
    なにせ基礎を持っていないもので、
    それが大変なことなのか、否かもわからずです。
    出来るようでしたら、お時間のある時にでもご教示下さい。
    現在、FC2のプラグインは外し、
    「表示中の記事」のプラグインを使用しております。
    私のアーカイブは、カレンダーと一体化したものを使っております。
    よろしくお願いいたします。
    【ブログ】画像付き最新記事一覧プラグインを追加しました

  80. ・表示中の記事(右サイドプラグイン)
    ・カレンダー(右サイドプラグイン)
    ・カテゴリーの一覧(カテゴリー記事上部)
    ・画像付き最新記事一覧(右サイドプラグイン)
    この4つを全て実装したいという事でしょうか?
    現在、このブログにて対象のプラグインを利用してみていますが、とくに不具合は無いようです。
    http://oreshiten.blog47.fc2.com/blog-category-12.html
    もう少し検証してみてくださいますか。

  81. 管理人 様
    言葉が足りず申し訳ありません。
    ・表示中の記事(右サイドプラグイン)を外し、
    ・画像付き最新記事一覧(右サイドプラグイン)を使用したいと
    考えております。
    それで、先日この様に設定した所、カテゴリ一覧が無く不便で
    プラグイン3にリストが出るように教えて頂きました。
    そして今回、カレンダーと一体化している月別の一つをクリックすると、
    これもリストが出ないことに気付きました。
    月別の一覧リストもプラグイン3で表示できないものかとご相談に来ました。
    実装させたいのは、
    ・カレンダー(右サイドプラグイン)
    ・カテゴリーの一覧(カテゴリー記事上部)
    ・画像付き最新記事一覧(右サイドプラグイン)です。
    カテゴリと、月別アーカイブをプラグイン3にてリスト表示にしたいのが希望です。
    (カテゴリの方は前回教えて頂いて使用しています)
    何度も申し訳ありません。
    よろしくお願いいたします。

  82. 5回くらい読んでやっと理解できました(笑
    月別の一覧はこの前実装したカテゴリーの一覧と基本的には同じでエリア変数を変えるだけです。
    <!–▲カテゴリーエリア・タイトルリスト▲–> の下にでも次のソースを追加してください。
    これで月別アーカイブプラグインのプルダウンリストから月を選んだ時に一覧が出るようになります。
    <!–▼月・日別エリア・タイトルリスト▼–>
    <!–date_area–>
    <div class="content">
    <p class="list_header"><%sub_title> の記事一覧</p>
    <ul class="list_body">
    <!–topentry–>
    <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
    <!–/topentry–>
    </ul>
    <p align="center">
    <!–prevpage–><a href="<%prevpage_url>" title="<%template_prevpage>">< PREV</a> <!–/prevpage–>
    <span style="color:#999;"> | <a href="<%url>" title="<%template_home>">HOME</a> | </span>
    <!–nextpage–> <a href="<%nextpage_url>" title="<%template_nextpage>">NEXT ></a><!–/nextpage–>
    </p>
    </div><!–/content–>
    <!–/date_area–>
    <!–▲月・日別エリア・タイトルリスト▲–>

  83. 管理人様
    お手数をお掛けしました。m(_"_)m
    そして、意味を理解して下さってありがとうございます。
    もぅ、用語がわからなくて、
    説明下手で本当に申し訳ないです。(^=^;
    おかげさまで気に入るようになりました。
    ありがとうございました。

  84. oiraseのテンプレートがとても気に入って使いたいと思っているのですが【新着コメント】と【新着記事】がカーソル充てても出てきません。
    このテンプレートが元々そういうことになっている?とは思えないのですが、使いたくても使えないのでとても残念に思っています。諦めようかと思いましたが、やはり使いたいと思って降ります。どうかよろしくお願いします。

  85. 教えていただく前にフリーエリアのところに「悪戯があるのでテンプレートを度々変えるかも知れません」という内容を書いていたら長くなって、丁度「管理者」のところのプルダウンメニューと「訪問者のリンク」が重なっていて、管理画面に入れなかったので凄く慌てましたが、URLを探してログインページを出すことが出来ました(笑)
    先ほど教えて頂いたところを見て、上記のコメントを短くして、下のリンクと重ならないようにしたあとに「新着コメント」がプルダウンで表示されましたがすぐ無くなりました。
    私に張り付いているハッカーの悪戯だと思います。先ほどは「新着記事」もプルダウンで出てきましたがすぐ無くなりました。
    こういう悪戯ばかりされています。わざと悪戯していることを私にわかるように見せているのです(笑)相手はプロの悪用ですし、私は度素人なのでホントに困ります[絵文字:v-356]
    スクロールすれば見ることができるので、コメントを残しておこうと思っております。
    とても素敵なテンプレート使わせて頂きます。有り難うございました。

A へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


コメントする