TOP > ブログいぢり(カスタマイズ) > FC2ブログに関連記事の表示をする(関連エントリー) 1の2

FC2ブログに関連記事の表示をする(関連エントリー) 1の2

2009.04.13(00:03)

FC2ブログに関連記事の表示をする(または関連エントリー)カスタマイズ方法ということで、 タグのRSSとGoogle AJAX Feed APIを使用してこんなやつを作ってます。

関連エントリーサンプル

目的:【個別記事に関連記事を表示する】

説明手順
  1. 下準備
  2. 基本の表示
  3. 関連記事(タグを使った一覧)の表示
  4. 表示の調整
  5. よくあるカスタマイズ

FC2ブログに関連記事の表示をする(関連エントリー) 1の1」で3までできました。前回の状態で実行すると、サンプル画像と全然違うぞ、ってことで、今回は[4.表示の調整]からです。


4.関連記事の表示

前回のヒントはもう答えですね。 「スタイル設定。余分なものは見えなくすればいい」。

これはスタイルにて、「display:none;」を設定しちゃえばいいのです。

そのためにどんな中身なのかをまず確認です。google.feeds.FeedControlがタブモードで表示する(DRAW_MODE_TABBED)動的HTML構成はこんなかんじ。

4-1.1
<DIV class=gfc-control>
    <DIV class=gfc-tabsArea>
        <DIV class=" gfc-tabHeader gfc-tabhActive">[フィードタイトル名]/*タグ:選択状態*/</DIV>
        <DIV class=" gfc-tabHeader gfc-tabhInactive">[フィードタイトル名]/*タグ:非選択状態*/</DIV>
        /*:(以降追加したaddFeedの分繰り返し)*/
    </DIV>
    <DIV class=gfc-resultsbox-visible>
        /*ひとつめのエントリ一覧*/
        <DIV class="gfc-resultsRoot gfc-tabData gfc-tabdActive">    /*エントリ一覧:表示状態*/
            /*▼ライン&タイトル*/
            <DIV class=gfc-resultsHeader>
                <DIV class=gfc-title>[フィードタイトル名/*display:none*/]</DIV>
            </DIV>
            /*▲ライン&タイトル*/  /*▼エントリリスト*/
            <DIV class=gfc-results>
                /*▼行内容*/
                <DIV class=gfc-result>
                    <DIV class=gf-result>
                        <DIV class=gf-title>
                            <A class=gf-title href="[リンク先]" target=[設定:setLinkTarget/*未設定時は_self*/]>[エントリタイトル]</A>
                        </DIV>
                        <DIV class=gf-author>by&nbsp;[エントリ筆者]</DIV>
                        <DIV class=gf-spacer>-</DIV>
                        <DIV class=gf-relativePublishedDate>[エントリ日時/*ex:2分前*/]</DIV>
                        <DIV class=gf-snippet>[エントリ概要]</DIV>
                    </DIV>
                </DIV>
                /*▲行内容*/
                /*:(【行内容】繰り返し)*/
            </DIV>
            /*▲エントリリスト*/
        </DIV>
        /*ふたつめのエントリ一覧*/
        <DIV class="gfc-resultsRoot gfc-tabData gfc-tabdInactive">  /*エントリ一覧:非表示状態*/
            /*(【ライン&タイトル】と同じ)*/
            /*(【エントリリスト】と同じ)*/
        </DIV>
        /*:(以降追加したaddFeedの分【エントリ一覧】繰り返し)*/
    </DIV>
</DIV>
→別画面で開く(javascript)

今回は、[エントリ筆者]~[エントリ概要]あたりまで、いらないです。

結論

4-1.2 *CSS*
    #feed .gf-snippet {display:none;} /* 概要 */
    #feed .gf-relativePublishedDate {display:none;} /* 日付 */
    #feed .gf-spacer {display:none;} /* スペーサー */
    #feed .gf-author {display:none;} /* 筆者 */

#feedは 前回の2-1で設定した表示場所のidです。 リンクの色なんかは、ブログのテンプレートに設定した全体のスタイルが適用されたので いじらなくても私の場合はいけました。

ちょっと左端カツカツっぽいのであとはこんな感じかな?

4-1.3 *CSS*
#feed .gfc-results {
    margin-bottom:5px;
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 10px;
}

これでSampleと同等になったはず。タブの色を変えたりいろいろ設定してみてください!
現行のCSS「default.css」は以下のとおり。

4-1.4 *CSS*
/** google.feeds.FeedControl classes
 *  - very similar to .gsc-XXX from ajax search
 */
 
.gfc-resultsHeader {
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom : 4px;
  }
  
.gfc-resultsHeader .gfc-title{
  color: #676767;
  display: inline;
  }

.gfc-tabsArea {
  margin-top: 6px;
  }

.gfc-tabsAreaInvisible {
  display : none;
  }

.gfc-tabHeader {
  display: inline;
  cursor: pointer;
  padding-left: 6px;
  padding-right: 6px;
  margin-right: 2px;
  }

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

.gfc-tabHeader.gfc-tabhInactive {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-top: 2px solid #e9e9e9;
  background: #e9e9e9;
  color: #676767;
  }

.gfc-tabData.gfc-tabdActive {
  display: block;
  }

.gfc-tabData.gfc-tabdInactive {
  display: none;
  }

/* tab specific results header supression */
.gfc-tabData .gfc-resultsHeader .gfc-title {
  display: none;
  }

/* the results for each section
 * .gfc-resultsbox-{visible,invisible} : a complete-collection 
of results including headers
 * .gfc-results : the collection of results for a given feed
 * .gfc-result : a generic result within the control
 */
.gfc-resultsbox-visible {
  display : block;
  }

.gfc-resultsbox-invisible {
  display : none;
  }

.gfc-results {
  padding-bottom: .2em;
  }

.gfc-result {
  margin-bottom: .5em;
  }

.gfc-result .gf-title {
  height: 1.4em;
  overflow: hidden;
  }

.gf-result .gf-author,
.gf-result .gf-spacer,
.gf-result .gf-relativePublishedDate {
  color: #6f6f6f;
  display : inline;
  }

.gf-result .gf-spacer {
  margin-right : 3px;
  margin-left : 3px;
  }

/**
 * undo common generic table rules
 * that tend to impact branding
 */
table.gf-branding td,
table.gf-branding {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border : none;
}

table.gf-branding {
  border-style : none;
  border-width : 0px;
  border-spacing : 0px 0px;
  width : 100%;
}

td.gf-branding-text {
  vertical-align : top;
}

td.gf-branding-text div.gf-branding-text {
  padding-bottom : 2px;
  text-align : right;
  color : #676767;
  font-size : 11px;
  margin-right : 2px;
}

td.gf-branding-img-noclear {
  width : 51px;
  vertical-align : bottom;
}

td.gf-branding-img {
  width : 65px;
  vertical-align : bottom;
}

table.gf-branding-vertical td.gf-branding-text div.gf-branding-text {
  margin-right : 0px;
  text-align : center;
}

table.gf-branding-vertical td.gf-branding-img-noclear {
  text-align : center;
}

div.gf-branding-img,
div.gf-branding-img-noclear,
img.gf-branding-img,
img.gf-branding-img-noclear {
  padding-top : 1px;
}

img.gf-branding-img,
img.gf-branding-img-noclear {
  margin : 0 0 0 0;
  padding-right : 0;
  padding-left : 0;
  padding-bottom : 0;
  border : none;
  display : inline;
}

a.gf-branding-clickable {
  cursor : pointer;
}
→別画面で開く(javascript)

(お断り:FC2ならびにGoogle AJAX Feed APIも仕様変更の可能性があります。)


次回は今回のにもうちょっとカスタマイズを追加します。スタイルはやらないよ。
本日はここまで。

  

この記事の写真を大きなサイズ(原寸)で全部見る。
うめ成長記録part.12 | | 決闘


◆新着・関連記事
Loading...(Javascript)
コメント
コメントの投稿












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://cat2neko2cafe2.blog102.fc2.com/tb.php/106-fd9e55f7

[PR]
エコキッチンさんのランキングベスト3にはいるシリコンカップカバー。 猫ぱんちさんでみてすっごい気になってました。お値段も、手ごろ。

【シリコンカバー】MOM Kitchen(マムキッチン) シリコン製カップカバー

雑貨屋さんが好きなので、ここのサイトは楽しい。 私の勘所をよく知っていらっしゃる(違)欲しいのいっぱい出てくる。 料理しないくせにキッチン用品欲しい~。プレゼントにも最適な商品がいっぱいです。
[エコキッチン]


うめ成長記録part.12 | | 決闘
プロフィール
双葉そら

Author:双葉そら

ひとつきに一度は猫かふぇに行かなければ、猫欠乏症及びもっふもふ禁断症状に陥ります。

猫カフェにいる人々をみてるのも楽しかったりします。

普段はSE関連のお仕事。
WEBやデザイン系は苦手です。
配色って何?おいしいの?

本サイトにて、癒しと、猫カフェの認知&"布教"の一端を担えれば最高です。

肉球礼賛 ビバ肉球


カテゴリ
最近の記事
猫喫茶
ねこかふぇリンク。

*猫カフェ情報猫カフェ一覧(自内)


肉球 マウスパッド 【ねこきゅう マウスパッド】 [マウスパッド にくきゅう 猫 ネコ]肉球 マウスパッド
 ぷにっぷにっ!

*猫カフェブログ(自内)


当サイトへのリンクはご自由に。
「猫とカフェオレ、ときどき仕事」バナー

お気に入り

*猫カフェブログ(自内)
店舗ブログではなく、一般の人の猫カフェブログを集めてみました。

*ネコキャバではない。
東京の猫カフェ【ねこのみせ】ブログ。店内の徒然にとどまらず、開店の原点エピソードや、経営者視点からの猫カフェ動向の感想だったり読み応えあり。(→移転前)

*関西 猫 カフェめぐりの日々
→更新終了。いままで素敵な写真で楽しませてくださりありがとうございました!!
主に関西圏猫カフェのにゃんこ写真が盛りだくさん。 やさしい表情のにゃんこから、アクロバティックな姿まで生き生きした写真は必見。

*赤ソマ狂の詩
旧題「coco壱!」。飼い猫coco(ソマリ)ちゃんのブログ。ブリーダさんの頃から見てるので 個人的に愛着が強いのですが、ソマリ好きさんも是非。
赤ソマ狂の詩バナー

*這いつくばって猫に近づけ
猫写真家、荻窪氏が書く猫の撮影といろんなデジカメのレビュー。

*【実録】隠れ?ヲタギャルの日常【4コマ】
イラストレータさんの4コマブログ。わからないネタもあるかもしれませんが、 猫漫画は秀逸。
「08冬コミ参加おめでとうございます」 ←この意味が分かる人なら猫ネタ以外でも全部面白いとおもいます。
【実録】隠れ?ヲタギャルの日常【4コマ】バナー

*ミシュニャン
タイトルは、レストランガイドミシュランをもじったもの。世界をまたにかけた猫探訪録。

*猫の肉球が素材-ダ・ジ・ポン
猫モチーフのフリー素材。めっさかわいくて、全部散りばめたい衝動に駆られます。

[tag cloud]