MENU

【JIN:Rカスタマイズ】シェアボタン左側に追加しました

こんばんは、JIN:Rは記事下にしかSNSシェアボタンが無いのですが、記事上にも追加してそれを左固定にしてみました。

シェアボタン〜追加しました〜(冷やし中華始めました風に〜)

[point_maker type=”simple_icon” base_color=”pearl_gray” title_icon=”info-circle-solid” title_color_background=”true” title_color_border=”true” content_type=”text” content_color_background=”false” content_color_border=”true” block_editor=”true”]

コードなんですが、自信がないし、途中な感じなんです・・・。メモとしてなら残しておきますが、真似はしないほうがいいと思います。。。ごめんなさい。

[/point_maker]

本日は体調がすぐれず、動きが超緩慢になってカクカク動いてました。金縛りみたいなのに、自律神経の関係なのか時々なるんです。

歩くのが超ゆっくりになって壁伝いに動いてました、これっていったいなんなんだろ?

話は変わりますが、夫氏に娘のこともあって、夜更かしをやめるように言われてしまったので、しばらくプログラミングの勉強ができないことになってしまいました。

もっと色んなことの知見を増やしたかったんですけど、しばらくは難しそうです。日付が変わる前に寝ることになったので、もう寝ますね。おやすみなさい。

PHPのコード

function insert_sns_share_buttons_at_content_start($content) {
    if (is_single() && jinr__sns_share_bottom_display() && !get_post_meta(get_the_ID(), '_jinr_snsbutton_display', true) == "1") {
        $sns_share_code = '
            <div id="snsShareTop" class="vertical-sns-share">
                <div id="snsShareTopInner">
                    <ul class="o--sns-share-inner">
                        <li id="snsShareLabel" class="c--sns-share-item ef d--bold-sp">SHARE</li>
                        <!--twitter-->
                        <li class="c--sns-share-item">
                            <a class="d--twitter" rel="nofollow" href="https://twitter.com/share?url=' . urlencode(get_permalink()) . '&text=' . urlencode(get_the_title()) . '&via=hiro_san777&related=hiro_san777"><i class="jif jin-ifont-twitter"></i><span class="a--sns-label">Twitter</span></a>
                        </li>
                        <!--Facebook-->
                        <li class="c--sns-share-item">
                            <a class="d--facebook" rel="nofollow" href="https://www.facebook.com/sharer.php?src=bm&u=' . urlencode(get_permalink()) . '&t=' . urlencode(get_the_title()) . '" onclick="javascript:window.open(this.href, \'\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600\');return false;"><i class="jif jin-ifont-facebook" aria-hidden="true"></i><span class="a--sns-label">Facebook</span></a>
                        </li>
                        <!--line-->
                        <li class="c--sns-share-item">
                            <a class="d--line" rel="nofollow" href="https://line.me/R/msg/text/?' . urlencode(get_permalink()) . '"><i class="jif jin-ifont-line" aria-hidden="true"></i><span class="a--sns-label">LINE</span></a>
                        </li>
                        <!--copy-->
                        <li class="c--sns-share-item">
                            <a id="jinrCopyUrl" rel="nofollow" class="d--copy" data-url="' . esc_url(get_permalink()) . '"><i class="jif jin-ifont-copy" aria-hidden="true"></i><span class="a--sns-label">URL copy</span></a>
                        </li>
                    </ul>
                </div>
            </div>';
        $content = $sns_share_code . $content;
    }
    return $content;
}

add_filter('the_content', 'insert_sns_share_buttons_at_content_start');

CSSやっつけなので間違っている可能性があリマス

.vertical-sns-share {
  display: none
}

@media (min-width:1200px) {
  .vertical-sns-share {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
  }
  .vertical-sns-share .o--sns-share-inner {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .vertical-sns-share .c--sns-share-item {
    margin-bottom: 20px;
  }
  .vertical-sns-share .d--twitter, .vertical-sns-share .d--facebook, .vertical-sns-share .d--line, .vertical-sns-share .d--copy {
    text-decoration: none;
    color: #f4ecdc;
    padding: 5px;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    border: 0px solid #9972b1;
  }
  .d--twitter i, .d--facebook i, .d--line i, .d--copy i {
    margin-right: 0px;
  }
  .d--twitter:hover, .d--facebook:hover, .d--line:hover, .d--copy:hover {
    color: #007bff;
  }
  .vertical-sns-share .a--sns-label {
    display: none;
  }
  .vertical-sns-share #snsShareLabel {
    display: none;
  }
}
よかったらシェアしてね!
  • URLをコピーしました!
目次