バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


このブログ(JUGEM)のZenback導入方法など

カテゴリー:ブログいぢり・・・
先日の記事[Zenbackはそれなりに広がる?]で書いたとおり、相当遅ればせながらもこのブログにZenbackなる、一見したところブログの各記事をソーシャルメディア化してくれる魔法のよなブログパーツを導入いたしました。

参考にしたページが休止中なので、私の方で手順をご紹介したいと思います。

参照:Zenback導入記3 -JUGEM | 借金女王の裏日記


①まずは本家のサイトで「新規登録」、コードを取得しませう!! 細かい設定は後からでも出来ますので。

参照:Zenbackであなたのブログに全てのフィードバックを。


②次に、取得したコードをテンプレート内に挿入する作業ですが、直接HTMLを編集してもいいんですが、JUGEMではブログパーツとかの定形のスクリプトを容易に挿入できるように「フリースペース」っていうインクルード型のスクリプトをライブラリーのように5つまで保存できるツールが用意されておりやすので、そちらを利用します。

※フリースペースについては下記ページなどをご覧あれ。

参考:フリースペースの使い方(PC) by JUGEM 管理者ページ・マニュアル

参考:フリースペースの位置を変えたい!! by ブログカスタマイズ講座「ロベルトとポリンのStepUp!JUGEM」

で、具体的には、フリースペースの編集画面で「内容」のところで、取得したコード
<!-- X:S ZenBackWidget -->・・・・・<!-- X:E ZenBackWidget -->を入力します。「タイトル」は何でも構いません。『Zenback』とか判りやすいものでいいと思います。


③いよいよHTMLとCSSの編集ですが、設定(選択)されてるテンプレートによってもいろいろなので一概にはこのとおりにはいかない可能性もありますのでご了承くださいまし。フリースペースの独自タグ{freespace_contents1}とかの末尾の数字は必ず②で設定したフリースペースのIDナンバーと一致させてくださいねー!
あと、デフォルトやと多分、本文表示のところじゃなくてサイドバーのところとか、本文表示以外のところに元々埋め込まれてるフリースペース用のタグがあったりすると思うので、その中のどれか一つ(Zenback用として使う分)を移動させてから下記の要領で利用してください。

<body id="{eid}"> <!-- {eid}は個別の記事ページを表示させた時にURL末尾が /?eid=記事IDになってる場合に有効な独自タグ -->
<div id="zenback">
<!-- BEGIN freespace1 -->
{freespace_contents1} <!-- {freespace_title1}は不要なので削除してます! -->
<!-- END freespace1 -->
</div>

<!-- END entry -->
/* Zenback */
#zenback { display:none} /* 各記事ページ以外の時は非表示 */
body#eid #zenback { display:block} /* 各記事ページの時は表示 */
#zenback-widget .zenback-module-item { margin:0 !important} /* 基本的に不要〜お好み設定です */
#zenback-widget .zenback-module-item .zenback-module-item-content { font-size:88% !important} /* 基本的に不要〜お好み設定です */
※JUGEMの独自タグについてはこちらの公式ページをご参照くださいまし

とまぁ、こんな感じでございます。

あと気になったことは、投稿してからその記事ページにアクセスがないままやと一向に「関連する記事」も「関連するみんなの記事」も表示されましぇ〜ん!! なので、投稿後は表示確認も兼ねて、一度自分でその記事ページを表示させて2分〜5分くらい経ってからリロードさせてみませう・・・そうすると少しは機能し始めるよな感じがしますので。
0
     | ブログいぢり・・・ | | | pookmark

    スポンサーサイト

    カテゴリー:-
    0
       | - | | | pookmark
      コメント欄
      コメントする


      ※メールアドレスは公開されません

      ※Name:欄に入力したお名前にリンクが設定されます




      この記事のトラックバックURL
      http://stressful.jugem.jp/trackback/195
      トラックバック

      Button of Go to Home

      Button of Back to Top