【CSS3】「斜め掛け半透明リボン」をサイトの上部左右に配置してテキストや共有ボタンを組み込む方法

サイト横幅

フルスクリーン

トップページ

サイトの上部左右に配置してある…

「斜め掛け半透明リボン」の実装方法の解説です…

「position」プロパティを使用しますので…

閲覧者のブラウザサイズによって…

表示位置が変化します…更には…

左側の「斜め掛け半透明リボン」は…

トップページでは…サイト名を表示し…トップページ以外では…

Blogger の共有ボタンを…

「斜め掛け半透明リボン」に組み込んで表示させています…

当サイトの共有ボタンは自作していますが…

 Bloggerの共有ボタンを自作ソーシャルブックマークボタンと入れ替える方法と必要性


勿論…自作の共有ボタンじゃなくて…

Blogger のデフォルトの共有ボタンでも配置できます…

「CSS Sprites」で絵文字などの画像を表示させても OKですね…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


先ずは…過去記事を参照して…

 jQuery UI 縦スクロール発生時にヘッダーのナビゲーションをページ上部に移動して固定する


任意の名前で…上部に固定された領域を作成して下さい…

仮に…「hidden-top」という領域を作成して…

「HTML/JavaScript」ガジェットを…「Ribbon」というタイトルで…

中身は適当に…「test」とでもして追加し…

「デザイン」「HTMLの編集」から見てみると…こんな感じになりますので…

上部に固定された領域の HTML

<b:section class='hidden-top' id='hidden-top' showaddelement='yes'>
  <b:widget id='HTML10' locked='false' title='Ribbon' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>

<b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>

タイトル表示とクイック編集のための黃文字部分を削除して準備完了です…

以下…「斜め掛け半透明リボン」の仕組みについては…

煩雑になりますから 割愛しますが興味がある方は…

「css3 rotate」などで…Google 先生に聞いてみると良いでしょう…

右側の「斜め掛け半透明リボン」は全てのページで表示されますので…

「HTML/JavaScript」ガジェットの中身に以下のコードを記述します…

【半透明リボン】右側用共通コード

<div style='position:absolute;top:75px;right:-260px;width:600px;padding:5px;font-size:16px;font-style:italic;text-align:center;color:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform-origin:50% 0px;-webkit-transform-origin:50% 0px;-o-transform-origin:50% 0px;-ms-transform-origin:50% 0px;background-color:#000;border:1px solid #aaa;-webkit-opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;-ms-filter:&quot;alpha(opacity=50)&quot;;opacity:0.5;'>
<span style='margin-left:50px;'>ここにテキスト</span>
</div>

お好きなテキストや「CSS Sprites」の画像タグに差し替えて下さい…

改行は…「<br />」タグで行います…

左側の…トップページにだけ表示する「斜め掛け半透明リボン」は…

「if」の条件式を使いますので「デザイン」「HTMLの編集」から…

下記のように…7行目～11行目を直接記述します…

【半透明リボン】トップページ用コード

<b:section class='hidden-top' id='hidden-top' showaddelement='yes'>
  <b:widget id='HTML10' locked='false' title='Ribbon' type='HTML'>
    <b:includable id='main'>
      <div class='widget-content'>
        <data:content/>
      </div>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div style='position:absolute;top:75px;left:-225px;width:600px;padding:5px;font-size:16px;font-style:italic;text-align:center;color:#fff;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform-origin:50% 0px;-webkit-transform-origin:50% 0px;-o-transform-origin:50% 0px;-ms-transform-origin:50% 0px;background-color:#000;border:1px solid #aaa;-webkit-opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;-ms-filter:&quot;alpha(opacity=50)&quot;;opacity:0.5;'>
      ここにテキスト
      </div>
      </b:if>

</b:includable>
  </b:widget>
</b:section>

同様に…お好きなテキストや「CSS Sprites」の画像タグに差し替えて下さい…

改行は…「<br />」タグで行います…

左側の…トップページ以外で共有ボタンを表示させる「斜め掛け半透明リボン」は…

テキストや「CSS Sprites」の画像タグを表示させるだけなら…

【半透明リボン】トップページ用コード…の…7行目の…

「<b:if cond='data:blog.url == data:blog.homepageUrl'>」を…

「<b:if cond='data:blog.url != data:blog.homepageUrl'>」

…に変更すれば OKですが…

共有ボタンを「斜め掛け半透明リボン」に組み込むには…

共有ボタンを表示するタグ…

　<b:include data='post' name='shareButtons'/>

…を…「斜め掛け半透明リボン」の「div」タグで…

このように…ラップしてやる必要があります…

【半透明リボン】共有ボタン用コード

<div style='position:fixed;top:75px;left:-225px;width:600px;padding:5px;font-style:italic;text-align:center;color:#fff;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform-origin:50% 0px;-webkit-transform-origin:50% 0px;-o-transform-origin:50% 0px;-ms-transform-origin:50% 0px;background-color:#000;border:1px solid #aaa;-webkit-opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;-ms-filter:&quot;alpha(opacity=50)&quot;;opacity:0.5;'>
ここにテキスト<br/>
<b:include data='post' name='shareButtons'/>
</div>

共有ボタンを表示するタグは…

通常…記事フッターの「post-footer-line-1」にありますが…

共有ボタンは複数箇所に表示しても問題ありませんので…

追記する形で大丈夫ですが…そもそも論として…

私のように…トップページに記事を表示させないのは少数派でしょうから…

記事を表示している方は…「div」タグを更に「if」の条件式でラップするか…

左側の「斜め掛け半透明リボン」を…どちらか一方にして下さい…

以上です…最後までお読みいただきましてありがとうございます…

jQuery jQuery / Extra JavaScript Current-Label : Design