• MENU ●●●●
  • SNS投稿ボタンまとめて取り付け


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    横か、縦かで複数のSNS投稿ボタン配列

    ここでは、SNS投稿ボタンをシリウスサイト内で複数配列表示させる方法を
    解説してまいりますが、CSS記載....jqueryなど組み込んで形成するもので
    はなく...ほとんど我流ではありませんでHTMLのみで作る..

     

    ですので、推奨する手法というレベルにはなく...何だこりゃと思われましたら
    クレームのお便りなど不要ですので..忘却してください..

     


     

    SNS投稿ボタンは、ブログ等に標準装備..サイトにもあるかな?

     

    あたし理解ではありますが、記事を新設、更新後公開画面でボタンをポチ
    すると該当のSNSに記事が読み込まれ 投稿ページに移動...
    投稿ポチするで...フェイスブック、ツイッターに開設の自分ページに更新情報が
    追加される...便利なので装着しています...

     

    その他の意味合いは知りません...未熟者?

     

    以外の使用法はご自身でお調べください...

     

    表示例...はてなBMだけは仕様違いで、おまけで付けています..

    このエントリーをはてなブックマークに追加

     

    上例は、各SNSのシェアリンクコードに画像アイコンを組み合わせた...
    アイコンはその辺のブログから切り取ってきた画像なんですね

     

    jquery&CSSも含めて構築する手段もございますが、面倒なんで...
    簡単にやってますが理由...

     

    横一列ですが、tdタグで各列を囲むと横配列され、はずすと縦配列になります..
    (コピーコードでご確認頂けます)

     

    横配列
    画像ではなく、フォントのみで形成すると以下例で表示されます

    facebook twitter google+ linkedin pinterest

     

    上上例は、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人ほど...申しわけございません
    でした。

     

    リンクコード及び画像は一度作っておけばページを追加するごとに末尾だけ
    張り替えるだけで簡単に使えるとは思いますが、毎回の記載追加が
    良いでしょうね

     

    後回しにするとなんか面倒ですよ...

     

     

    では、さいなら...

     

     

    SNS投稿ボタンまとめて取り付け|ほとんどジョークカスタマイズ
    トップページ

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト