当サイトテンプレート、「３フェイス・ブラック」を徹底的に改造していくコーナーです。
ヘッダー画像、全体的な色、背景パターン素材、アイテムの移動、ブックマークアイコン・ランキングアイコンの設置方法、広告の設置の考え方、読みやすいテンプレート構築、等々、ブログ初心者の方でも改造できるように解説していきます。
一番のスタイルシートをマスターする近道は、出来合いのテンプレートをいじること。色々いじって、カッコイイブログを作って下さい！
ヘッダー部分のカスタマイズ
まずはブログの顔、ヘッダー部分を改造していきます。ロゴの配置の仕方、背景画像の設定の仕方、アイテム配置方法（「当サイトについて」「RSS」「お知らせ」等のナビゲーションや広告などの配置方法）を、どこをどう、どういう構文でいじればいいのかを解説します。
ナビゲーションバーのカスタマイズ
3faith-blackでは、デフォルトでナビゲーションバーの部分へ「カテゴリページへのリンク」が配置されています。
しかし、これは「カテゴリごとの最新記事順表示ページ」へのリンクです。よりベストな「検索エンジン最適化」をするなら、静的なメニューページを新しく制作する方が効果が高いと思われます。
ここでは、ナビべーションバーに、任意のリンク先を設定する方法の解説をします。
色調のカスタマイズ
日付表示のカスタマイズ。特徴的な日付表示をノーマルに、記事フッター部分へ表示する方法です。
[3Faith徹底改造]日付表示のカスタム
色調のカスタマイズ
スタイルシートの色調を変更する場所の詳しい説明です。
一括で基本色を変える方法もご紹介します。
また、背景に使われているパターンをオリジナルに変える方法もこちらで。
アイテムの移動
サイドバーの移動、プラグイン3の移動、そして、日付表示の移動とタグリストと関連記事表示のカスタマイズ例を紹介します。
■プラグイン３をトップに移動させるには、こちらを参照してください。現在ダウンロードできるバージョンは「新バージョン」になります。
ブックマークボタン・ランキングボタンの配置
本文下部、或いは本文上部へブックマークアイコンを配置する方法を紹介。本文上部に配置する場合、本文前のHTMLを汚さない方法でブックマークアイコンを表示させます。
広告配置
訪問者の邪魔にならない、かつ訴求効果が見込まれる本文下部、サイドバートップに効果的に広告配置するカスタマイズ方法の紹介です。
本文のスタイルシート構築
本文の太字、斜体文字、引用ブロックを効果的に使用し、余裕があれば新たに「Hタグ」を使用した仕切りを利用し、検索エンジン最適化を図りつつ、訪問者に分かりやすい本文構築を目指します。
また、滅多に使わないテーブルタグを例に取り、その記事ページ専用のスタイルシートを当てる方法も解説。
※テンプレートをカスタマイズするときは「画面内検索」を使うと作業効率が飛躍的にアップします。
画面内検索は「Ctrl」＋「F」キーを押すと使うことが出来ます。
ヘッダー画像、全体的な色、背景パターン素材、アイテムの移動、ブックマークアイコン・ランキングアイコンの設置方法、広告の設置の考え方、読みやすいテンプレート構築、等々、ブログ初心者の方でも改造できるように解説していきます。
一番のスタイルシートをマスターする近道は、出来合いのテンプレートをいじること。色々いじって、カッコイイブログを作って下さい！
■3faith-blackテンプレートとは？
テンプレートを素直に最適化しています。ヘッダー、ナビゲーション、本文、コメント、サイドバー、フッターの順にアイテムを配置。アイテム（ページ内リンク数、カテゴリへのリンクやタグへのリンクなど）数もなるべく削り、「このページで重要なものが何か」を検索エンジンにアピールするつもりで。というのをモットーに。当サイトでは、本文を最重視。本文タイトル、本文カテゴリに「Hタグ」を利用しています。
カスタマイズ概要とメニュー
ヘッダー部分のカスタマイズ
まずはブログの顔、ヘッダー部分を改造していきます。ロゴの配置の仕方、背景画像の設定の仕方、アイテム配置方法（「当サイトについて」「RSS」「お知らせ」等のナビゲーションや広告などの配置方法）を、どこをどう、どういう構文でいじればいいのかを解説します。
ナビゲーションバーのカスタマイズ
3faith-blackでは、デフォルトでナビゲーションバーの部分へ「カテゴリページへのリンク」が配置されています。
しかし、これは「カテゴリごとの最新記事順表示ページ」へのリンクです。よりベストな「検索エンジン最適化」をするなら、静的なメニューページを新しく制作する方が効果が高いと思われます。
ここでは、ナビべーションバーに、任意のリンク先を設定する方法の解説をします。
色調のカスタマイズ
日付表示のカスタマイズ。特徴的な日付表示をノーマルに、記事フッター部分へ表示する方法です。
[3Faith徹底改造]日付表示のカスタム
色調のカスタマイズ
スタイルシートの色調を変更する場所の詳しい説明です。
一括で基本色を変える方法もご紹介します。
また、背景に使われているパターンをオリジナルに変える方法もこちらで。
アイテムの移動
サイドバーの移動、プラグイン3の移動、そして、日付表示の移動とタグリストと関連記事表示のカスタマイズ例を紹介します。
■プラグイン３をトップに移動させるには、こちらを参照してください。現在ダウンロードできるバージョンは「新バージョン」になります。
ブックマークボタン・ランキングボタンの配置
本文下部、或いは本文上部へブックマークアイコンを配置する方法を紹介。本文上部に配置する場合、本文前のHTMLを汚さない方法でブックマークアイコンを表示させます。
広告配置
訪問者の邪魔にならない、かつ訴求効果が見込まれる本文下部、サイドバートップに効果的に広告配置するカスタマイズ方法の紹介です。
本文のスタイルシート構築
本文の太字、斜体文字、引用ブロックを効果的に使用し、余裕があれば新たに「Hタグ」を使用した仕切りを利用し、検索エンジン最適化を図りつつ、訪問者に分かりやすい本文構築を目指します。
また、滅多に使わないテーブルタグを例に取り、その記事ページ専用のスタイルシートを当てる方法も解説。
※テンプレートをカスタマイズするときは「画面内検索」を使うと作業効率が飛躍的にアップします。
画面内検索は「Ctrl」＋「F」キーを押すと使うことが出来ます。
スポンサーリンク
Fri.06.17.2011
Comment
125
トップページの仕様について
はじめましてです。
「3フェイス・ブラック」のスタイリッシュな構成に惹かれ使用してみたいと思ったのですが、トップ画面でよく見られる追記部分「続きを読む」や「コメント」、「トラックバック」の表示がスクロールする場所によって表示されたり表示されなかったりします。
自分は初めからこれらが表示されている方が好みなので、初めからこれらが表示されるようカスタマイズを試みたのですが、HTMLやCSSのどこに手を加えればいいのか全然分かりませんでした。
よろしければ、トップページにおける「続きを読む」や「コメント」、「トラックバック」の表示の固定化の改善策の方を教えてもらえれば幸いです。
長文で分かりにくい文章で申し訳ありませんがよろしくお願いしますm(__)m
「3フェイス・ブラック」のスタイリッシュな構成に惹かれ使用してみたいと思ったのですが、トップ画面でよく見られる追記部分「続きを読む」や「コメント」、「トラックバック」の表示がスクロールする場所によって表示されたり表示されなかったりします。
自分は初めからこれらが表示されている方が好みなので、初めからこれらが表示されるようカスタマイズを試みたのですが、HTMLやCSSのどこに手を加えればいいのか全然分かりませんでした。
よろしければ、トップページにおける「続きを読む」や「コメント」、「トラックバック」の表示の固定化の改善策の方を教えてもらえれば幸いです。
長文で分かりにくい文章で申し訳ありませんがよろしくお願いしますm(__)m
126
Re: トップページの仕様について
申し訳ない、ちょっとどういうカスタマイズなのか解らなかったのですが、例えばどちらかのブログで採用されている方法ですか？
もし難しいカスタマイズであれば、特別に…と言うわけにもいきませんが、テンプレートのどこがどの部分か、というのは記事などでも紹介できると思います。
もし、見本になるようなブログがあるのであれば、そちらを見てみてば、どういうカスタマイズなのかが解ると思いますので、お教えいただくと幸いです。
もしかしたらこういうことかな？…と言う記事もあり、それは、以下に示しておきますが…違うような気もします…
http://designlabolatory.blog16.fc2.com/blog-entry-157.html
もし難しいカスタマイズであれば、特別に…と言うわけにもいきませんが、テンプレートのどこがどの部分か、というのは記事などでも紹介できると思います。
もし、見本になるようなブログがあるのであれば、そちらを見てみてば、どういうカスタマイズなのかが解ると思いますので、お教えいただくと幸いです。
もしかしたらこういうことかな？…と言う記事もあり、それは、以下に示しておきますが…違うような気もします…
http://designlabolatory.blog16.fc2.com/blog-entry-157.html
127
Re: Re: トップページの仕様について
考察していただきありがとうございました。
自分も色々と原因を探っていたんですが、どうやら使用していたブログパーツのインラインフレームとIE8の相性が悪かった為にトップページの表示の仕方に不具合が生じていたみたいです。
Firefox4では問題がなかったので原因が付きとめられました。
現在は「3フェイス・ブラック」のテンプレートを使用していても質問したような問題はなさそうです。
要らぬ心配をかけてしまい申し訳ございません。
完全に自分の初歩的なミスが原因です(T_T)
もし、違う用件で困った事があったら今後も連絡するかもしれないのでよろしくお願いします!!
自分も色々と原因を探っていたんですが、どうやら使用していたブログパーツのインラインフレームとIE8の相性が悪かった為にトップページの表示の仕方に不具合が生じていたみたいです。
Firefox4では問題がなかったので原因が付きとめられました。
現在は「3フェイス・ブラック」のテンプレートを使用していても質問したような問題はなさそうです。
要らぬ心配をかけてしまい申し訳ございません。
完全に自分の初歩的なミスが原因です(T_T)
もし、違う用件で困った事があったら今後も連絡するかもしれないのでよろしくお願いします!!
131
リスト化について
何度も質問して申し訳ありません。
自分の所のブログを見てもらえれば分かりやすいと思うんですが、サイドバーにある「最新記事」や「最新コメント」の文字の出だしの所に●や■といったマーカーを表示させようとCSSを色々といじっているのですがなかなか上手くいきません。
もちろん、sakilabさんの作った他のテンプレートを参考に色々と考察してはみたものの、どれも構成が違うという事でダメでした。
失礼ですが今回も助言の方よろしくお願いします(T_T)
自分の所のブログを見てもらえれば分かりやすいと思うんですが、サイドバーにある「最新記事」や「最新コメント」の文字の出だしの所に●や■といったマーカーを表示させようとCSSを色々といじっているのですがなかなか上手くいきません。
もちろん、sakilabさんの作った他のテンプレートを参考に色々と考察してはみたものの、どれも構成が違うという事でダメでした。
失礼ですが今回も助言の方よろしくお願いします(T_T)
132
Re: リスト化について
リストスタイルでしたら、3FaithBlackの場合、サイドバーのCSSにさらに追加のCSSを上書きしています。
アレンジする場合は、スタイルシート編集の以下の場所を画面内検索で探してみて下さい。
---------------------------------------
#side ul li,.left_box ul li{
list-style:none;
padding:0;
margin:0;
}
---------------------------------------
この打ち消しの部分を変えていくと、リストスタイルのアレンジが出来ます。
例えばですが、
■のリストマークであれば「square」
●は「disc」
○は「circle」
などなどがあります。色々調べてみてください。
実際に変えてみると…
---------------------------------------
#side ul li,.left_box ul li{
list-style:square;
padding:0;
margin-left:10px;
}
---------------------------------------
こんな感じになるでしょうか？
marginに関してなんですが、もしかしたらIE、Chrome等で若干位置が変わってしまうかも知れません。確か回避のCSSを記述していたはずなので、多分大丈夫だと思うのですが、確認してみてください。
アレンジする場合は、スタイルシート編集の以下の場所を画面内検索で探してみて下さい。
---------------------------------------
#side ul li,.left_box ul li{
list-style:
padding:0;
}
---------------------------------------
この打ち消しの部分を変えていくと、リストスタイルのアレンジが出来ます。
例えばですが、
■のリストマークであれば「square」
●は「disc」
○は「circle」
などなどがあります。色々調べてみてください。
実際に変えてみると…
---------------------------------------
#side ul li,.left_box ul li{
list-style:square;
padding:0;
margin-left:10px;
}
---------------------------------------
こんな感じになるでしょうか？
marginに関してなんですが、もしかしたらIE、Chrome等で若干位置が変わってしまうかも知れません。確か回避のCSSを記述していたはずなので、多分大丈夫だと思うのですが、確認してみてください。
135
Re:Re: リスト化について
sakilabさんの分かりやすい説明でリストスタイルのカスタマイズが上手くいきました♪
とりあえず、ちゃんとIEでも表示されてるから大丈夫みたいです。
自分はCSSの「レイアウト」の所ばかりをいじっていたのでダメだったのね(+_+)
今回も分かりやすいご説明ありがとうございました!!
とりあえず、ちゃんとIEでも表示されてるから大丈夫みたいです。
自分はCSSの「レイアウト」の所ばかりをいじっていたのでダメだったのね(+_+)
今回も分かりやすいご説明ありがとうございました!!
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
