ミギムキ

[WordPress] 自由なデザインのソーシャルボタンをプラグインなしで設置したい

やりたいこと

サンプルコード

functions.php

function enqueue_my_scripts() { wp_enqueue_style('font_awosome_brands', 'https://use.fontawesome.com/releases/v5.5.0/css/brands.css'); } add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
スポンサー広告

html

<nav class="btn_share"> <a href="http://www.facebook.com/share.php?u=<?php echo the_permalink(); ?>" rel="nofollow" target="_blank" class="btn_share_fb"></a> <a href="https://twitter.com/share?url=<?php echo the_permalink(); ?>&text=<?php the_title(); ?>" rel="nofollow" target="_blank" class="btn_share_twitter"></a> <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" class="btn_share_hatena"></a> </nav>

CSS

.btn_share { display: flex; justify-content: center; } .btn_share > a { display: flex; position: relative; justify-content: center; align-items: center; width: 90px; height: 90px; margin: 0px 10px; border-radius: 50%; color: #fff; font-size: 45px; text-decoration: none; } .btn_share > a:before { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Font Awesome 5 Brands"; font-weight: 400; } .btn_share > .btn_share_fb { background-color: #3b5998; } .btn_share > .btn_share_fb:before { content: "\f39e"; } .btn_share > .btn_share_twitter { background-color: #1da1f2; } .btn_share > .btn_share_twitter:before { content: "\f099"; } .btn_share > .btn_share_hatena { background-color: #008fde; } .btn_share > .btn_share_hatena:before { font-family: Verdana; font-weight: bold; content: "B!"; }
スポンサー広告

仕組み、解説、補足など