シリウスにはてなブックマーク、グーグルボタンの設置

SIRIUSシリウスがバージョンアップされて、ソーシャルボタンは「イイネ＋ツイート」ボタンを設置する事ができるようになりました。

しかし多くのサイトでは加えて「はてなブックマーク」「グーグル+1ボタン」が設置されているものが多いです。

このサイトで行っているように、SIRIUSシリウスにも合計で4種類のソーシャルブックマークボタンを簡単に設置してみましょう。

4種類のソーシャルボタンを設置するコード

「イイネ＋ツイート」ボタンを設置するだけなら、SIRIUSシリウスに組み込まれているパーツ挿入を選択するだけです。
（右クリック　→パーツ挿入　→いいね！＋Tweetボタン　　で出来ます）

今回これは使いません。
４つのソーシャルボタンを設置するには、挿入したい部分に下記コードをコピペするだけでOKです。

※下記コードをコピペすると改行が挿入されています。使用する際は改行を消してコードが全部隙間なくつながるようにしてください。

申し訳ございません。
12月中旬から会員ページに移動させました。

プレビューしても上手く表示されませんが、アップロードした画面ではきっちり表示されます。

コードが長すぎて編集画面がごちゃごちゃするのがイヤな場合

４つのソーシャルボタンが設置できるとはいえ、長いコードをSIRIUSシリウス編集画面に挿入すると見栄えが悪くなってしまいます。
そんな時は「モジュール機能」を使います。

・サイト全体設定　→モジュールの設定をクリック。

新規追加をクリックして、モジュール名を決めます（私は「ソーシャルB4」と付けています。
先ほどのコードを貼り付けてOKをクリック。

すると、SIRIUSシリウス編集画面で右クリック　→モジュール挿入を選択すると「ソーシャルB4」が表示されます。これを選択すると、

<% module(ソーシャルB４) %>

と表示され、編集画面がスッキリします。文章も見やすくなるので、長いコードを挿入する時はモジュール設定の使用がオススメです。

次回はより突っ込んだ方法として、「ページの前後に自動でソーシャルボタンが入るようにする方法」をご紹介します。

関連ページ一覧

購入者様専用（パスワード制）

今後このシリウスカスタマイズカテゴリ情報等はパスワード閲覧方式に致します。当サイトからのご購入者様で、購入時に発行しているメールマガジンにご登録頂いている方にはパスワードを発行しております。閲覧の際に入力のうえ、ご利用ください。

リンクを凹ました感じに見せる方法 | SIRIUSカスタマイズ

当SIRIUS紹介ホームページでも取り入れていますが、リンクが付いている文字列や画像の上にマウスカーソルをあてると下に動いて凹んだ感じに見えます。「リンクを押してる！」という感じを与える効果があります。その方法をご紹介します。スタイルシート...

マウスオーバー時に画像リンクの色を薄くする方法 | SIRIUSシリウスカスタマ...

当ホームページの画像リンクは、マウスカーソルを当てると画像が白っぽい色に変わります。この効果は訪問者に「この画像はリンクが貼ってあるんだ」という印象を与える効果があります。これも簡単なカスタマイズで可能です。スタイルシートに書き加えるSIR...

マウスオーバー時に画像を変える方法 | SIRIUSシリウスカスタマイズ

SIRIUSシリウスでマウスオーバー時に画像を変える方法を説明します。（ロールオーバーと言います）下に貼り付けた２つの画像はこのページにリンクを貼った画像ですが、マウスカーソルを載せる（マウスオーバー）と画像が変わるように工夫しています。右...

フリースペースを増やす方法1 | ＳＩＲＩＵＳシリウスカスタマイズ

２カラムテンプレートのフリースペースを通常の4個から6個へ増やす方法をご紹介します。フリースペースを多く設けることでプロフィール欄や広告欄としての活用スペースが広がります。　　　　HTMLテンプレートに書き加えて編集SIRIUS編集画面の上...

フリースペースを増やす方法2 | ＳＩＲＩＵＳシリウスカスタマイズ

フリースペースを増やす方法をもう一つご紹介します。（２カラムテンプレートのフリースペースを増やす方法その１はこちら）この方法ではHTMLテンプレートを編集する必要は無いので、簡単に出来ます。通常のフリースペース記述画面でタグを打ち込むSIR...

更新履歴の位置を変更する方法 | SIRIUSシリウスカスタマイズ

SIRIUSシリウスの更新履歴表示は、デフォルト設定ではトップページの下部に表示されます。これを上部に持っていくこともできます。SIRIUSシリウストップページの更新履歴表示場所の変更方法上部リボンバーの編集　→　HTMLテンプレート編集　...

クラス設定でHTMLをスッキリ！ | SIRIUSシリウスカスタマイズ

SIRIUSシリウスにはクラス設定機能があります。クラス設定とは、スタイルシートでspanで設定してから、タグ入力を簡略化するためのものです。HTMLファイルはなるべく簡素化した方が見やすく、ページの読み込みスピードも速くなる為、検索エンジ...

グーグルアナリティクスを導入する | SIRIUSシリウスカスタマイズ

自分のホームページやサイトにどのくらいアクセスがあったか、訪問者がどんなページを見ているか等を解析する「アクセス解析」を導入しましょう。いろんなアクセス解析サービスがありますが、中でも1番使われているのが「グーグルアナリティクス（Googl...

意外と知られていないプレビュー機能 | SIRIUSシリウス小技

SIRIUSシリウスでサイト作成を作り続けていると、レイアウトが気になってよくプレビューをします。すると、ブラウザのタブがいつの間にか凄い数に増えてしまいます。「このタブの無限増殖、なんとかならない？」と感じている人の悩みを一発で解消する機...

canonical属性を付加する | SIRIUSシリウスカスタマイズ

2009年にグーグルが導入したcanonical属性というものがあります。これはURLを正規化して検索エンジンに迷わせない目的の為のものです。グーグルウェブマスターツールでも公式説明が掲載されているので参考にしてみてください。→Google...

画像を軽くして表示スピードを速くする | SIRIUSシリウス小技

画像の多いページを開くと、表示スピードが遅くて待つのがイヤだな～と感じた経験はありませんか？PCスペックが高くなってネット回線が速くなったとはいえ、大きくて重い画像が多いサイトだと見る側にとっては不便さを感じてしまいます。「じゃぁ画像の大き...

スマホと携帯サイトでこれは気を付けよう | SIRIUSシリウス小技

SIRIUSシリウス上位版ではスマートフォン用サイト自動生成機能が使えます。画像やその他のサイズも自動でスマホ用に最適化されるので、素晴らしい機能です。しかし、訪問者にとって必要な「ある表示」が自動で出来ない欠点を持っています。SIRIUS...

ソーシャルボタンを追加・設置する方法 | SIRIUSシリウス小技

SIRIUSシリウスに「はてなブックマーク」「グーグル+1ボタン」を設置する方法です。SIRIUSシリウスがバージョンアップされて、ソーシャルボタンは「イイネ＋ツイート」ボタンを設置する事ができるようになりました。しかし多くのサイトでは加え...

ページの前後に自動でソーシャルボタンを挿入する方法 | SIRIUSシリウスカス...

ソーシャルボタンを1ページごとに挿入するのは面倒という人は、今回紹介する方法を試されてはいかがでしょうか。前回の記事：「ソーシャルボタンを増やす方法」で作成したソーシャルボタンモジュールを応用すれば、ページに簡単にソーシャルボタンを自動挿入...

SIRIUSシリウスにメールフォームを作る方法 | SIRIUSシリウス小技

SIRIUSシリウスに無料でメールフォームを設置してみます。ロリポップなどのレンタルサーバーに加入していれば無料メールフォームCGIを利用出来るのですが、CGIを利用出来ない場合無料でメールフォームを設置する方法をご紹介します。当ホームペー...

SIRIUSビジネステンプレートのドット柄を消す方法 | SIRIUSシリウスカ...

SIRIUSシリウスのビジネステンプレートはデフォルトでヘッダー横にドット柄が入っています。これを消してスッキリ見せる方法をご紹介します。スタイルシートを編集します今回は簡単、スタイルシートを1か所編集するだけです。SIRIUSシリウス上部...

SIRIUSシリウスで行間を変更する方法 | SIRIUSシリウス小技

SIRIUSシリウスの文字行間を変更する方法をご紹介します。超簡単ですのであっという間に終わってしまいます。SIRIUSシリウスのデフォルト行間はこのくらいSIRIUSシリウスデフォルトの行間はこのくらいです。フォントサイズで見え方が違いま...

ページタイトルと表示されるタイトルを変える方法 | SIRIUSシリウス小技

ページタイトルと表示されるタイトルを変える方法です。シリウスでは超簡単に設定できるので、まだ活用していない人はチェックしてみてください。もうちょっと具体的に・・・「ページタイトルと表示されるタイトルを変える」というのを具体的に説明します。こ...

シリウスのサイトにフェイスブックコメント欄を設置する方法 | SIRIUSシリウ...

このホームページでも使っていますが、シリウスのサイトにコメント機能を設置する方法をご紹介します。facebookのコメント欄になってしまうのですが、現在利用者は多いことと、誰でも簡単に設置できることから利便性は高いと思います。こんなコメント...

画像にアフィリリンクを貼る方法 | シリウス小技

シリウスで画像にアフィリエイトリンクを貼る方法です。今回の説明では、A8.netからアフィリリンクを取得した方法をご紹介します。画像の用意アフィリエイトリンクを貼りたい画像を用意しましょう。今回はシリウスで作成したボタン画像を使って説明しま...

ビジネステンプレート上部にロゴ画像を差し込む方法 | SIRIUSシリウスカスタ...

シリウスビジネステンプレートの上部にロゴ画像を差し込む方法です。何も設定しないとH1タグの文章だけが表示されて、あっけらかんとします。このロゴ画像差し込みは、企業ロゴや、トレードマークを入れたりするのに役立ちます。背景が白ですので、ロゴ文字...

簡単！シリウスにメールフォームを作る方法 | SIRIUSシリウス小技

以前SIRIUSシリウスにメールフォームを作る方法を紹介していますが、もっと簡単にSIRIUSシリウスにメールフォームを設置する方法をご紹介します。→こんなメールフォームです。無料で超簡単なかわりに広告が入ってしまいますが、有料にバージョン...

スマホサイトにソーシャルボタン設置を忘れるな | SIRIUSシリウスカスタマイ...

SIRIUSシリウス使用者は上位版ユーザーが９割に上ります。スマホでネット見る人増えていますしね。ブログやサイト運営者で無い限り、家でPCを触る人は年々減少傾向です。だからこそ、スマホや携帯サイトなどのモバイルサイトに、ソーシャルボタン設置...

特定のページだけに特定のスタイルを割り込ませる方法 | ＳＩＲＩＵＳシリウスカス...

「　シリウスであるページだけ、マウスオーバーした時に画像が白っぽくなるようにしたいんです　」というお問い合わせがありました。なるほど、そういう風にしたい人もいるんですねと思い、方法を記載しておきます。シリウスの上級者向け設定に書き込むだけ以...

スタイルシートで変えられない色を変える方法 | SIRIUSシリウスカスタマイズ

私のSIRIUSシリウスサイト閲覧してくださっている方から質問があったので、返答としてやり方をアップします。SIRIUSシリウスでは文字やちょっとした背景の色等は、スタイルシートでの変更が可能です。しかし、画像をはめ込んでいる部分はスタイル...

シリウスSIRIUSにFeedlyボタンを設置する方法 | SIRIUSシリウス...

RSSリーダーとしてメジャーだったGoogleリーダーが終了しました。その代りにFeedly利用者が増えています。今日から当サイトにもFeedlyボタンを設置しました。今回のSIRIUSシリウスカスタマイズでは、以下の解説を行います。RSS...

シリウスにRSSボタンを設置する方法 | SIRIUSシリウスカスタマイズ

SIRIUSシリウスにRSSフィードボタンを設置する方法を解説します。当サイトのｻｲﾄﾞﾒﾆｭｰにも設置しています。Feedlyが流行しつつあるとはいえ、RSSリーダーを使用している人はまだまだ多いものです。スマホのRSSリーダーも未だ多く...

シリウスSIRIUSでaltタグ（アルトタグ）の使い方 | SIRIUSシリウス...

SIRIUSシリウスで画像を挿入する時に、altタグを挿入する部分が1番上に出てきます。この部分、ちゃんと入れてますか？楽して横ボタンのMETAキーワードとか押しちゃいけませんよ。altタグのSEO効果検索エンジンは日々優秀になってきている...

SIRIUSシリウスで画像メニューを作成 | SIRIUSシリウス小技

SIRIUSシリウスのサイトでたまに見かける画像メニュー作成方法を解説します。シリウスに慣れたら挑戦してみてはいかがでしょうか。このコンテンツ詳細はシリウス・ルレア・バナープラス購入者会員専用ページへ移動しました。画像メニューを使うことで、...

シリウスにツイッターを設置・連携する方法 | SIRIUSシリウスカスタマイズ

SIRIUSシリウスにツイッターウィジェットを設置する方法です。当ホームページにも今日からサイドバーに設置してみました。簡単ですので、ホームページ・サイトとツイッターの相性が良ければ設置してみてはいかがでしょうか。訪問者様との双方向の交流が...

シリウスで記事途中に飾り枠を入れる方法 | SIRIUSシリウスサイト作成

SIRIUS（シリウス）の記事作成画面、右側にある、「記事１～記事１０」の使い方、記事の途中に飾り枠を入れる方法を解説します。この使い方、意外と悩まれる人が多いようなので今回シェアしておきます。記事の途中に飾り枠を入れる方法、例えばこうです...

シリウスで関連ページ一覧を消す＆表示方法 | SIRIUSシリウスカスタマイズ

先日、当SIRIUS（シリウス）サイトにこんな質問を頂きました。「カテゴリ内にエントリページを30ページ作りました。30ページ全てに同じキーワードが入っているので、スパム判定されないか心配です。この一覧部分を消す方法はありませんか？SIRI...

シリウスでヘッダー画像にトップへのリンクを貼る方法 | SIRIUSシリウスカス...

SIRIUS（シリウス）でヘッダー画像にトップページへ戻るリンクを貼る方法をご紹介します。本当はデフォルトだと嬉しかったんですよね。ユーザビリティ向上を考える方はトップページリンクを貼っても良いと思います。グローバルメニューにわざわざ「トッ...

シリウス(SIRIUS)で自動ループする画像の設置方法 | シリウスSIRIUS...

※こちらはマナからの購入者様専用サイトにて、設置方法を公開しています。ビジネスや企業サイトで上記のような切り替わり画像を見たことがありませんか？実はシリウス(SIRIUS)でも設置出来ます。これを利用して、ビジネス・企業向けホームページサン...

シリウスでスマホ専用サイトの作成方法 | シリウスSIRIUS小技

シリウス(SIRIUS)でスマホサイトを作成する方法をシェアしておきます。iPhoneサイト自動生成のことではなく、PCで見た時でもスマホサイトが表示されるようにするサイトを構築する方法です。私がシリウスでスマホ専用サイトに処理したサンプル...

シリウスでフッターにリンクを追加する方法 | シリウスSIRIUSカスタマイズ

シリウス(SIRIUS)でサイト下の部分のフッターに、リンクを追加する方法をシェアしておきます。編集　→　HTMLテンプレートを開きます。「★フッターここから～～～フッターここまで★」の部分を探します。上記の場所に、リンクタグを挿入して保存...

シリウスの特定ページにnoindexタグを挿入する方法 | SIRIUSシリウス...

SIRIUS（シリウス）での特定のページにnoindexタグ、noarchiveタグ等を挿入する方法をシェアしておきます。同じドメインサイト内に質の低いページや同じような内容のページがある場合、SEO上ではマイナス要素になる場合があります。...

シリウスでテーブルの幅や位置を調整する方法 | SIRIUSシリウスカスタマイズ

シリウス(SIRIUS)のテーブル機能で、テーブルの横幅と位置を調整する方法をご紹介します。通常、シリウスでテーブルを挿入するとカラム横幅いっぱいに表示されてしまいます。これを好みの幅や位置に合わせたい方もいるようですので、やり方をシェアし...

シリウス新バージョンのレビュー | SIRIUSシリウスカスタマイズ

2013年10月18日、シリウス(SIRIUS)が1.200に大幅バージョンアップされました。今回のバージョンアップのレビューや使い方をレビューします。ご参考になれば幸いです。１．サイト生成時間が大幅に高速化今回のバージョンアップで、サイト...

シリウスサイト引っ越し301リダイレクトをする方法 | シリウスカスタマイズ

シリウス(SIRIUS)で作ったサイトから他のサイトへの引っ越しをする際、301リダイレクトという方法があります。例えば以前のサイトが上位表示していた場合、新しいサイト引っ越しをする際に、301リダイレクトをすることで前のサイトから新サイト...

シリウスビジネステンプレートロゴ画像を高さ100pxまで変更する方法 | シリウ...

シリウス(SIRIUS)ビジネステンプレート上部のロゴ画像の高さを変更して、最大100pxまで使用する方法です。今回の方法はご購入者様からご質問があったカスタマイズです。一応やり方をシェアしておきます。ロゴ画像を100ｐｘのものに変更シリウ...

シリウスの記事コンテンツ背景を変更する方法 | シリウスカスタマイズ

今回のサイト作成ソフト「シリウス(SIRIUS)」カスタマイズでは、記事コンテンツ部の背景を変更して、イメージをガラリと変える方法をご紹介します。シリウス(SIRIUS)の場合、コンテンツ背景部分は白の一色のみですが、この方法を使えば黒にし...

シリウスのサイトにyoutube動画を貼り付ける方法 | シリスウソフトネタ

購入者様からの質問コーナーです。シリウス(SIRIUS)のサイトにYoutube動画を貼り付ける方法です。シリウス問わず、WordPressなどのHTMLサイト全てに利用できる方法です。youtube側の仕様がコロコロ変わってしまう為、20...

シリウスに画像貼り付けの小技 | シリウス（ソフト）カスタマイズ

知ってたらごめんなさい。SIRIUS(シリウス)に画像貼り付けるちょっとした小技をご紹介します。知ってたらちょっと便利になるかもしれない小技通常、シリウスのサイト作成時に画像をインポートする時は、外部フォルダからドラッグ＆ドロップを使う人が...

シリウスのクロスリンクを無効化する方法 | SIRIUSシリウスカスタマイズ)

シリウスのクロスリンクを無効化する方法をご紹介します。グーグルがかしこくなりつつあるので、シリウスのクロスリンク手法はもはや廃れたと言って良いと思います。自動的に自サイトに貼られるリンクが低品質なものが多いので、今後は手動で自演被リンクを付...

シリウスでcanonicalタグ使い方おさらい | シリウスカスタマイズ

　先日当サイトにcanonicalについてのお問い合わせがありました。canonicalについては私も100%の理解ではないかもしれませんが、知り得る限りで情報をシェアしたいと思います。１．シリウスのサイトオプションで設定できるwww有り無...

シリウスであまり知られていない内部構造改善対策 | シリウスカスタマイズ

今回のシリウスカスタマイズ記事は、特典用の会員専用にしていないので、誰でも見ることができます。久々の更新ですのでサービスです。では早速本題。シリウス(SIRIUS)はサイト作成を効率的に行える素晴らしいソフトなんですが、内部構造は特に気にし...

Monputiテンプレの効果的、かもしれない使い方１ | シリウスカスタマイズ

先日シリウスであまり知られていない内部構造改善対策でH2とH3の使い方を軽く説明したのですが、私の説明力不足で意図が伝わりにくかったようですので補足します。シリウスのデフォルト構造Monputiテンプレでは、記事２～記事１０のタイトル部はH...

シリウス記事の途中に自動でアドセンスを入れる方法 | シリウスカスタマイズ

シリウスはサイトアフィリエイトに向いている手法ですが、サイトによってはブログのように利用してアドセンスを貼っている方もいると思います。（私がそうです）WordPressには、moreタグの部分に自動でアドセンスを挿入してくれるプラグイン「M...

アフィリエイトやるなら必須

「AF」を知らずにアフィリエイト作業をしているのは
「超非効率」だと思います

⇒レビュー＆当サイトオリジナル特別特典付き