Home > FC2ブログ > basic_white > basic_whiteテンプレート 記事下プラグイン3のタイトルなどのデザイン調整

basic_whiteテンプレート 記事下プラグイン3のタイトルなどのデザイン調整

 basic_whiteテンプレートの記事下に設置されているプラグイン3のタイトルのデザインを調整する方法です。

 2013年10月31日以降にテンプレートをダウンロードされた方はプラグイン3の見出しのスタイルが無効になっています。

 記事下のプラグイン3を2列表示にする方法を利用している場合は調整の必要はありません。

スタイルシート

 場所はCtrl+Fキーで『h3.sub_header』を検索。次の強調部分のコード「,#main_contents .plg_header」を追加します。

#main_contents h3.sub_header,#main_contents h3.plg_header {
  margin: -15px 0 20px;
  padding: 10px 20px 10px 35px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 15px 10px; /* メインカラムのプラグインタイトル前のアイコン */
  border-bottom: 1px dotted #B5B5B6;
}

 以上で完成です。


文字サイズの変更

 font-sizeの行を追加して数値を調整してください。

#main_contents h3.sub_header,#main_contents h3.plg_header {
  margin: -15px 0 20px;
  padding: 10px 20px 10px 35px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 15px 10px; /* メインカラムのプラグインタイトル前のアイコン */
  border-bottom: 1px dotted #B5B5B6;
  font-size: 100%;
}

 サイズを小さくすると左のマークが少しずれます。これを調整する場合はbackground行の最後の数値「10」を増減させてください。8pxにする(数値を減らす)とマークが上に移動します。

#main_contents h3.sub_header,#main_contents h3.plg_header {
  margin: -15px 0 20px;
  padding: 10px 20px 10px 35px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 15px 8px; /* メインカラムのプラグインタイトル前のアイコン */
  border-bottom: 1px dotted #B5B5B6;
  font-size: 100%;
}

 プラグインコンテンツ本文の文字サイズを調整する時は以下を追加します。

#main #main_contents .plg_body {font-size: 90%;}

プラグイン3を有効にする

 記事下にプラグイン3が表示されていない場合はメニューの【プラグインの設定】から表示させたいプラグインのカテゴリを【3】に変更します。

※間違って別のプラグインを移動させてしまうと元の順番に戻すのに手間がかかるので注意しましょう。元の順番がわからなくなると困るので移動させる前に別タブで変更前のブログページを開いておくのも一考です。

 サイドバーと記事下両方に最新記事を表示したい時は公式プラグイン追加ページで挿入先を【プラグインカテゴリ3】に変更してから最新記事プラグインの【追加】をクリックします。

プラグインコンテンツの余白を変更

 プラグインの本文を表示する部分の余白を調整する時は以下のコードをスタイルシートに追加します。

/* プラグイン3余白調整 */
#main #main_contents .plg {padding-bottom: 0;}
#main #main_contents .plg_body {
  margin: 15px 15px 15px 15px;
}

 15pxの数値を増やすと余白が広がります。左から上余白、右余白、下余白、左余白の順に指定します。次のようにすると上下が15pxで左右が20pxになります。

margin: 15px 20px 15px 20px;

リスト表示のスタイルを変更

 最新記事などのリストを表示する際のデザインを変更します。必要な場合は次のどちらかをスタイルシートに追加してください。

下線を入れるデザイン

左に黒丸を入れるデザイン

関連記事
スポンサー リンク
コメント
#137 : No title
下線をいれるデザインなのですが、これはplugin1、plugin2でもできないでしょうか?
よろしくお願いします。
#138 : お久しぶりです!
いつもカスタマイズ参考にさせてもらっています。

本当にmayさんのおかげで自分のブログが出来たようなものです!
また不具合が発生してしまい、トップページは大丈夫なのですが
記事ページに行くとサイドバーが下に崩れてしまうようになりました。

記事によっては大丈夫なのですがこちらの対策を教えていただきたいです。
もしかしたら画像が大きすぎたりするだけですかね?
それともカスタマイズで修正可能でしょうか?
#140 : プラグインリスト下線&崩れ
コンニチハ。

#137 プラグインリスト下線
プラグイン3リストにある3つの「#main」をすべて「body」に変更すればすべてのプラグインでそのスタイルが適用されます。
#main .plg_body li {

body .plg_body li {
「body」で適用されない場合は「#container」に変更してください。


#138 崩れ
管理人以外はテンプレートHTMLがどうなっているかを把握できないので、問題のある記事blog-entry-73.htmlのテーマスレッド・ジャンルの指定を外す、記事内容に崩れの原因がないかを探す、テンプレートHTMLに追加したテーマ・ジャンルを表示するタグを崩れないように修正するとしか答えられません。
問題が起きた場合は問題が起こる前の状態に戻せば不具合は修正されるものと思われます。

コメントフォームにも掲載しておりますが、現在は基本的に“記事と直接関連のある事柄のみコメントで受け付けています”。
こちらで紹介しているカスタマイズによって発生した不具合には対応致しますが、それ以外のご自身で投稿した記事やテンプレート改造によって発生した崩れなどの不具合には対応致しかねます。
単純な崩れの場合はすぐに特定できますが、変数などの状態によっては問題の場所を特定するのが困難となります。
ご了承くださいませ。
#141 : No title
大変失礼しました。

may様のおかげで原因が特定できました。
本当に感謝しています。

記事と直接関連のある事柄でのコメントを気を付けます。
申し訳ございませんでした。
#143 : No title
mayさんありがとうございます^^
早速実施させてもらいました。
が・・・、カテゴリには反映されないんですね。
もしカテゴリにも反映できる方法があればご教授していただければ嬉しいのですが。
無理ばっかり言ってごめんなさい。
#144 : カテゴリプラグイン
コンバンハ。

#141:ゆう様
それほど時間がかからない内容の場合は例外的に数回程度受け付けている状態ですが、継続するとなるとサポートの範囲がどうしても広くなってしまうので申し訳ないです。
返信には時間を要するかもしれませんが、記事と関連のある不具合等であればお気軽にコメントくださいませ。

#142:プラグインカテゴリ下線
下線が入るのは“リスト表示のスタイル”なので、<li>が使われていないプラグインには下線は入りません。
通常のカテゴリプラグインを使用している場合はプラグインのHTMLにあるdivをulとliに変更する必要があります。またはカスタマイズ向けのカテゴリ公式プラグインを追加してください。
<ul>
<!--category-->
<li &align>
<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->
<!--category_sub_end-->┗<!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
┣と┗が不要の場合はsub_hasnextとsub_endの2行を削除します。
#147 : No title
無事にカテゴリ下線できました。

忙しいのにほんとにいつも対応をありがとうございます。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered