元ＤＱＮの話したいことＯｋｉｓｓｔａ.com

ブロガーの本文にSmarter Related Posts Widget for Google Blogger - v2.0

Posted at: 6/25/2012｜


FC2やライブドアにあるような「関連記事」表示の便利なものないかなーとお気に入りのブロガーカスタムサイトを巡回しているとありました。http://www.sunabox.net/
すなふさんのところです。とても詳しく書いてあるので、上記URLから設置してください。本題はそのあとなんです。そのあと



blogger本文に直接いれるとサムネイルが表示される


というより、設定した全ての項目がパーなんです。ｈ２に入れたい項目名すらデフォルトのまま。悩みました。ググリました。でも、答えが出てきません。そもそもそんなところで悩んでいる人すらいない。

Smarter Related Posts Widget for Google Blogger - v2.0を入れました！やり方はこうです！どうです？簡単でしょ？これで関連記事も表示されます！どうぞやってみてね！

こんな感じのブログばかり。

いんたーねっつ初心者のわっちにはハードルが高いのか・・・もうだめぽ・・・

ん？そういえばブロガーはジャバスクリプト入れるときエンティティにしなきゃだめだったような・・・でも解説ブログにそんな記述はないし、どうしたものか。


！？

ちょろめ翻訳によると

あなたは、HTMLのコメントとのオプションを配置した場合も、Bloggerのテンプレート内の埋め込 ​​みコードを、このようにHTMLコメントをエスケープする必要があります。

つまり「ブロガーのHTML内に直接ぶち込むときはエンティティ文字に変換してから入れろよ」と書いてあることが分かります。

インターネット初心者のために他のブログにはない解説

まず、すなふさんの記事
こちらを参考にしてSmarter Related Posts Widget for Google Blogger - v2.0を導入しましょう。

おきすたこむのコード例


<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
&lt;!-- {
blog_url:&#39;http://www.okissta.com&#39;
,related_title:&#39;この記事を読んだ方はこちらも読んでいます&#39;
,recent_title:&#39;こちらの記事もオススメです&#39;
,thumbs:0
} --&gt;
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


今現在上記のようなコードになっているみたいです。赤字のところに注意して入れてみましょう。たぶんできます。＆＃３９;はHTML内に入れて更新を押したら勝手に変換されたので、無視します。変更するのはあくまでも赤字の部分だけです。



related_title:'関連記事表示、項目タイトル'
,recent_title:'関連記事がない場合の最新記事表示、項目タイトル'
,thumbs:0

ちなみに上記を後入れしても変更できます。「'」これで囲われているので忘れないでください。Shift+７で出現する半角小文字の「'」ですからね。直接＆＃３９；と記述してもよさそうです。

ｃｓｓでの表示設定　Smarter Related Posts Widget for Google Blogger - v2.0

おきすたこむではこうなっています。

.related-posts-widget h2 {
color: #307AD5;
font-size: 1.16em;
font-weight: bold;
height: 34px;
background-image: url('タイトル項目横画像ｊｐｇ');
background-repeat: no-repeat;
background-position: left 8px;
border: none;
margin: 20px 0 0px 0;
padding: 10px 0 0 33px;
border-bottom: 1px dotted #AAA;
}

Smarter Related Posts Widget for Google Blogger - v2.0では項目が「ｈ２」になっていたので、これを「ｈ３」に合わせたいと思って、「ｈ３」と同じｃｓｓに設定しています。「.related-posts-widget h2」にｃｓｓを設定してやればOKなようです。

.rpw li {
border-bottom: 1px dashed #AAA;
line-height:1.5!important;
}

こちらはリストのｃｓｓです。これらの方法もすなふさんのところに書いてますね。


ということで、困ってた人は少ないと思いますが、こんな感じで解決しました。よかったよかった。ではまた！
TOPに移動
SPONSORED LINK

loading..
loading..

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)