PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Loading...

関連記事Loaderをカスタマイズしてみる

 当ブログのテンプレート変更に伴い機能しなくなったプラグインの関連記事Loaderですが、新しく設定し直すことになったのを機に、ちょっとばかしカスタマイズしてみることに。

 カスタマイズする点は、

 ■ 表示される関連記事の文字の大きさ配置関連(上下左右のスペースなど)
 ■ タグ選択欄の文字の大きさと配置関連(上下左右のスペースなど)

 以上の2点です。以前導入した時はデフォルトのまま使用していたので、今回はブログデザインに少しでも合わせる方向で導入し直したいと思いまして。

 なお関連記事Loaderの導入については、プラグイン作者サイトの方を参照してもらった方が分かりやすいかと思います。
 割と導入手順が面倒ですが、一度設定してしまえば今回のようにテンプレート変更などさえなければその後はなにひとついじることなく使い続けられますので……。

 関連記事Loaderプラグインのカスタマイズは、FC2ブログ管理画面の

 ■ プラグイン → 関連記事Loader → HTMLを編集

 より行います。下手にいじって元に戻らなかった時のことを考えて、まずはデフォルト状態のHTML内容のコピーをメモ帳がどこかに取っておくようにしましょう。


【表示される関連記事の文字サイズを修正】

 まずはデフォルト状態の関連記事LoaderのHTML記述を確認してみると、

 #fthetfeed ~

 で表されているID表記が3種類あります。このうち以下の2つが、

 ■ #fthetfeed li : 表示されている関連記事に関するID
 ■ #fthetfeed li.imi-gfc-here : 現在表示している記事に関するID

 になります。これらのID内記述に

 font-size: ○○px; (○○には適当な数値を記入)

 を追加すると、表示されている関連記事の文字サイズが変更できます。実際の記述で表してみると、

 #fthetfeed li {
  margin: 3px 0 0 3px;
  list-style-type: none;
  text-align: left;
  line-height: 15px;
  padding-left: 18px;
  background-image: url(http://blog-imgs-30.fc2.com/w/i/n/winners7/listArwR.gif);
  background-repeat: no-repeat;
  font-size: 12px
 }

 となります(赤太字部分。サイズは12pxで設定)。[font-size:○○]の追加場所は、ID内({ ~ }内)ならどこでもOKです。


【表示される関連記事の位置を修正】

 表示される関連記事の位置等を調整するには、ID内にある

 #fthetfeed li {
  margin:3px 0 0 3px;
  list-style-type: none;
  text-align: left;
  line-height: 15px;
  padding-left: 18px;

  background-image: url(http://blog-imgs-30.fc2.com/w/i/n/winners7/listArwR.gif);
  background-repeat: no-repeat;
  font-size: 12px
 }

 上記赤字の部分の数値等を変えることで色々調整可能です。これは実際に自分のブログに合うように、少しずつ数値を変えながら確認してみるのが一番です。


【タブ部分の文字サイズを修正】

 今回一番苦労したのが、このタブ部分の文字サイズや位置の修正。これはデフォルトのHTML表記だけでは変更できないので、以下の表記を丸々HTMLに追加する必要があります。

 #fthetfeed .gfc-tabHeader {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-top: 2px solid #ff9900;
 }

 これは作者サイトの「4.カスタマイズ」にある「選択中のタブの文字色を変更する」のサンプル表記から、 .gfc-tabhActive と color: white; の記述を削除したものです。

 IDの #fthetfeed 指定に .gfc-tabhActive があるままだと、ここでカスタマイズする項目が現在選択しているタブにしか適応されないので、これを削除してID指定を #fthetfeed .gfc-tabHeader にしてやることでタブ全体の文字サイズや位置修正を適応できるようになります。

 color: white は見たまんまタブの文字色に関する項目なので、今回は必要なかったので削除しました。逆に言えば文字色をカスタマイズしたい場合、ここを変更すればOKです。

 上記の修正したものを関連記事LoaderのHTML記述に追加後、その中に【表示される関連記事の文字サイズを修正】で説明したのと同様に

 font-size: ○○px; (○○には適当な数値を記入)

 を追加してやれば、タブ部分の文字サイズを修正可能です。実際の記述で表すと、

 #fthetfeed .gfc-tabHeader {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-top: 2px solid #ff9900;
  font-size: 14px;
 }

 となります(赤太字部分。サイズは14pxで設定)。)[font-size:○○]の追加場所も同様にID内({ ~ }内)ならどこでもOKです。


【タブ部分の位置を修正】

 タブ内の文字の位置や枠の色、太さなどは、以下を変更して調整できます。

 #fthetfeed .gfc-tabHeader {
  border-left: 1px solid #e9e9e9; ←(タブ枠左線の太さ・色の詳細)
  border-right: 1px solid #e9e9e9; ←(タブ枠右線の太さ・色の詳細)
  border-top: 2px solid #ff9900; ←(タブ枠上線の太さ・色の詳細)
 }

 今回この部分はデフォルト設定のまま使用していますので、特に変更は加えていません。

 また今回はさらにタブ内の文字とタブ枠上部との隙間をもう少し空けたかったので、

 padding-top: ○○px;(○○には適当な数値を記入)

 を追加して調整してみました。実際の記述では

 #fthetfeed .gfc-tabHeader {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-top: 2px solid #ff9900;
  padding-top: 2px;
  font-size: 14px;
 }

 となります(赤太字部分)。これもID内ならどこに記述してもOKです。




 以上で関連記事Loaderの再導入とカスタマイズは完了です。一見難しそうですが、ほとんどがデフォルトの記述をいじる&作者サイトにある記述を追加・変更するだけなので、じっくりとやればOKです。
 万が一に備えて変更前の記述のバックアップさえしておけば、最悪の場合でもコピー&ペーストだけで元の状態に簡単に戻すことができます。




▼ ランキング参加中です。興味を持っていただけたら、応援よろしくお願いします!

にほんブログ村 PC家電ブログ パソコン・周辺機器へ 人気ブログランキングへ

Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。