シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも？横か、縦かで複数のＳＮＳ投稿ボタン配列
ここでは、ＳＮＳ投稿ボタンをシリウスサイト内で複数配列表示させる方法を
解説してまいりますが、ＣＳＳ記載....jqueryなど組み込んで形成するもので
はなく...ほとんど我流ではありませんでＨＴＭＬのみで作る..
ですので、推奨する手法というレベルにはなく...何だこりゃと思われましたら
クレームのお便りなど不要ですので..忘却してください..
SNS投稿ボタンは、ブログ等に標準装備..サイトにもあるかな？
あたし理解ではありますが、記事を新設、更新後公開画面でボタンをポチ
すると該当のSNSに記事が読み込まれ 投稿ページに移動...
投稿ポチするで...フェイスブック、ツイッターに開設の自分ページに更新情報が
追加される...便利なので装着しています...
その他の意味合いは知りません...未熟者?
以外の使用法はご自身でお調べください...
表示例...はてなBMだけは仕様違いで、おまけで付けています..
上例は、各SNSのシェアリンクコードに画像アイコンを組み合わせた...
アイコンはその辺のブログから切り取ってきた画像なんですね
jquery&CSSも含めて構築する手段もございますが、面倒なんで...
簡単にやってますが理由...
横一列ですが、tdタグで各列を囲むと横配列され、はずすと縦配列になります..
（コピーコードでご確認頂けます）
横配列
画像ではなく、フォントのみで形成すると以下例で表示されます
上上例は、HTMLコードのみで形成されますので、以下に配置のコードを
コピーし、画像とリンクをあなたのモノに張り替えてください
facebook twitter google＋ linkedin pinterestで.組み合わせており
ますが....
他のSNSを使いたい場合は、シェアコードを書き替えるか、追加してください...
数は増やせます..
アイコン画像は、各SNSとも横サイズにずれがありますが縦サイズは切り取り
時点でずれが生じますので、heightコードで数値を合わせてください...
ただ、横サイズにずれがあるとスマホ閲覧では、きれいに整列しませんので
できれば、縦横ともすべて同サイズで数値指定してください..
ここ大事...
この仕様は、SNSボタンを作動させると発信ページの読み取りが行われる
のですね...
ですので、リンクコードを張り付ける際は、毎回その取り付けたページの
リンクに書き換えてください
www.affiliateno1.comは、当サイトURL、ここを張り替え
カテゴリーページまではコード末に/を付けますが、エントリーページコードは
file60.html のようにファイル名の後に.htmlを付けること...
そして / は付けないでください..無しですよ。
付けるとページが読み込まれなくなります。
コピーして貼り付ければ整列します..
<td><a href="https://www.facebook.com/sharer/sharer.php?u=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_238.jpg" style="width:101px;height:25px;" alt="" /></a></td>
<td><a href="http://twitter.com/share?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_239.jpg" style="width:87px;;height:25px;" alt="" /></a></td>
<td><a href="https://plus.google.com/share?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_242.jpg" style="width:106px;;height:25px;" alt="" /></a></td>
<td><a href="https://www.linkedin.com/shareArticle?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_241.jpg" style="width:95px;;height:25px;" alt="" /></a></td>
<td><a href="https://www.pinterest.jp/pin/create/button/?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_245.jpg" style="width:87px;;height:25px;" alt="" /></a></td>
アイコン...備考
アイコンは、四角でも丸でもいろんなデザインを見る機会がありますね
自主製作してもよいんじゃないかな？とは理解します...
サイドバー表示
サイドバー、フリースペースに入れ込みはできますが、ページではないが
理由で、各個別ページで反応しない..です。
イチカラムのレイアウト枠で分配しサイドバー風に表示させれば可能かと？
通常構築では取り付け不能？
後書き
カテゴリーページなんら問題なく反応していたので、エントリーページでも？
当然、と思いきや..ページが見当たりませんと表示される始末でした。
.htmlで終わる記載でなければ反応しない...
/は無しとは気が付きませんで、導入した方10人ほど...申しわけございません
でした。
リンクコード及び画像は一度作っておけばページを追加するごとに末尾だけ
張り替えるだけで簡単に使えるとは思いますが、毎回の記載追加が
良いでしょうね
後回しにするとなんか面倒ですよ...
では、さいなら．．．
