ユーティリティ

2017年08月

- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoに忍者おまとめボタンを設置する

最近はソーシャルメディアのボタンが増えて、1つずつ設置するのが面倒なので、「忍者おまとめボタン」を利用する方が便利みたいです。当サイトでも導入してみました。

  1. 忍者ツールズ のアカウントでログインし(忍者ツールズのアカウントがない場合は新規登録してください)、忍者おまとめボタンのトップ からスタイルを選んで「上記セットで新規作成」か「設置ボタンを1つずつ選択して作成」のボタンを押します。
  2. 「利用規約に同意して次へ」を押します。
  3. 「設置するWebサイトを選んでください。」と出たら、「その他のブログ」をクリックします。
  4. プレビューで位置などを確認後、「コードをコピーする」を押してスクリプトコードをコピーします。
  5. コードの貼り付け
    • エントリーの場合
      templates/internals/default/default.html または templates/internals/view/default.html の任意の部分にコードを一旦貼り付けます。
      貼りつけたコード(xxx~はコード番号)を
      <div class="ninja_onebutton">
      <script type="text/javascript">
      {literal}
      //<![CDATA[
      (function(d){
      if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)=='undefined'){
      				document.write("<sc"+"ript type='text¥/javascript' src='http:¥/¥/omt.shinobi.jp¥/b¥/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'><¥/sc"+"ript>");
      }else{ 
      		window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.ONETAGButton_Load();}
      })(document);
      //]]>
      {/literal}
      </script><span class="ninja_onebutton_hidden" style="display:none;">{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}</span><span style="display:none;" class="ninja_onebutton_hidden">{$entry.title}</span>
      </div>
      に編集(赤字を追加)します。
    • ページの場合
      templates/internals/page/default.html の任意の部分にコードを一旦貼り付けます。
      貼りつけたコード(xxx~はコード番号)を
      <div class="ninja_onebutton">
      <script type="text/javascript">
      {literal}
      //<![CDATA[
      (function(d){
      if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)=='undefined'){
      				document.write("<sc"+"ript type='text¥/javascript' src='http:¥/¥/omt.shinobi.jp¥/b¥/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'><¥/sc"+"ript>");
      }else{ 
      		window.NINJA_CO_JP_ONETAG_BUTTON_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.ONETAGButton_Load();}
      })(document);
      //]]>
      {/literal}
      </script><span class="ninja_onebutton_hidden" style="display:none;">{$freo.core.http_file}/page/{$page.id}</span><span style="display:none;" class="ninja_onebutton_hidden">{$page.title}</span>
      </div>
      に編集(赤字を追加)します。

    ※タイトル部分にサイトのタイトルを表示させたい場合は上記の{$entry.title}または{$page.title}の部分に適宜{$freo.config.basis.title}を加入してください。

※基本的には一度設置した管理画面でボタンを変更する時でもコードの張り替えを行う必要はありません。

ページ移動

関連エントリー

コメント

木耳 空旭

こちらの記事、大変世話になっております。ありがとうございます。

「freoで幅可変の2カラムのスキンを作るには」
http://cccabinet.jpn.org/view/14
とこちらの「freoに忍者おまとめボタンを設置する」を組み合わせ、おまとめボタンを記事下部に設置しましたら、意図しない表示になりました。
最初の記事のおまとめボタンの位置が、ユーティリティ最下部の長さまで引っ張られてしまうようです。
忍者の問題なのかはちょっとわかりかねました。
設置の仕方の問題でしたらお恥ずかしい限りですが、良い対処法がおありでしたらお教え頂けたらありがたいです。

  • URL
  • 2013/08/02 18:01:00

ccc

どうやら忍者のcssの設定で「clear:both;」が入っているためそのような現象になるようです。

css/default.cssのユーティリティ⇒div#utilityで変更した
float: right;

position: absolute;
right: 30px;
に変えれば回避されるようです。

ただし、ユーティリティをposition:absoluteで固定した場合ユーティリティが、コンテンツ部分より長い場合はフッターに被ってしまうかもしれません。
参考:スタイルシートによる崩れない 2カラム 3カラム・レイアウト
http://desperadoes.biz/style/dan/

  • URL
  • 2013/08/02 21:34:00

木耳 空旭

お早いお返事ありがとうございます。
忍者のCSSが原因でしたか。
positionを試してみました。仰るとおりの挙動になりました、本当にありがとうございます。
フッダーに被るのは大変なので、もう少し色々やってみようかと思います。

  • URL
  • 2013/08/02 21:49:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)