このサイトはWordPressテーマ「JIN」を使用しています。
JINはシンプルで使いやすくデザインも柔らかくて、とても良いテーマだと思います☆
サイト制作に当たって少しカスタマイズした部分があったのですが、ここでは
プロフィールのSNSボタンをカスタマイズする方法
を紹介したいと思います。
カスタマイズは自己責任でお願いします。不具合が出た時に、テーマやプラグイン製作者に直接質問もしくはSNSで発信するのはやめましょう！
どんなことが出来るの？
こんな感じでJINのSNS設定では表示出来ないボタンを作れたり、上部メッセージを変更できたりします(本サイトではでプロフィールページ、上部メッセージは削除しています)。
カスタマイズ方法
functions.php にスマホ判定用のショートコードを追加
// スマホフラグ
function showSp($atts, $content = null) {
$content = do_shortcode($content);
if(wp_is_mobile()) return $content;
}
add_shortcode('sp', 'showSp');
外観 > テーマファイルエディタ > テーマのための関数（functions.php）
に上記を追加。カスタマイズの際にスマホだと余白が足りなくなるので、スマホの時だけ改行を増やすために追加しました(PHPが使えないのでショートコードを登録)。
プロフィールの説明にSNSボタンのコードを直接入れる
外観 > カスマイズ > ウィジット > サイドバー > プロフィール
SNSボタンの表示設定は非表示に。
説明に以下を入れます。
会社でゲームを作りつつ、<br>
個人で『チャリで来た。カメラ』を作ってたらいつの間にかフリーランスに🌈<br>
<br>
面白そうなものなら何でも作ります🌟<br>
<br>
マンガとネコが好きです😄<br>
[sp]<br><br><br>[/sp]
<div class="profile-sns-menu">
<div class="profile-sns-menu-title ef">＼ メッセージ ／</div>
<ul>
<li class="pro-tw"><a href="https://tempura-kingdom.jp/profile/"><i class="jic jin-ifont-smile"></i></a></li>
<li class="pro-tw"><a href="https://twitter.com/okamura0510" target="_blank"><i class="jic-type jin-ifont-twitter"></i></a></li>
<li class="pro-fb"><a href="#" target="_blank"><i class="jic-type jin-ifont-facebook" aria-hidden="true"></i></a></li>
<li class="pro-insta"><a href="#" target="_blank"><i class="jic-type jin-ifont-instagram" aria-hidden="true"></i></a></li>
<li class="pro-youtube"><a href="#" target="_blank"><i class="jic-type jin-ifont-youtube" aria-hidden="true"></i></a></li>
<li class="pro-line"><a href="#" target="_blank"><i class="jic-type jin-ifont-line" aria-hidden="true"></i></a></li>
<li class="pro-contact"><a href="https://tempura-kingdom.jp/contact/" target="_blank"><i class="jic-type jin-ifont-mail" aria-hidden="true"></i></a></li>
</ul>
</div>
＼ メッセージ ／に変更したいメッセージ入れます。メッセージが不要の場合は
<div class="profile-sns-menu-title ef">＼ メッセージ ／</div>を削除。
ボタンの追加は
<li class="pro-tw"><a href="https://tempura-kingdom.jp/profile/"><i class="jic jin-ifont-smile"></i></a></li>
のように追加して、JINアイコン一覧を参考に
jin-ifont-smile
の部分を変更してください。
ボタンの上限数はデザイン上6個のようなので、それに収まるように。
上の例だと7個になってるので1つ削る必要があります。
注意点
このカスタマイズはJINで生成されたHTMLコードを解析して表示させています。
なのでJINのバージョンアップで動作しなくなる可能性もあるのでご注意ください。
パッと見、変更が加わるようなとこではないので大丈夫だとは思いますが・・・。
なんでカスマイズしたの？
＼ Follow me ／
↑ このメッセージを変えたかったんですよね(結局削除しちゃいましたが)。
あとお問い合わせリンクが
<a href="https://tempura-kingdom.jp/contact/" target="_blank" rel="noopener">
のようにtarget="_blank"が入ってて別タブで開くのがちょっと嫌だったり(細かいですが)。
あんまり変えすぎると統一感がなくなるのでアレですが、メインのSNS以外にプッシュしたいサイトがある場合に使える機能かなって思います♪
最後に
〜オセロを作りながらゲームのプログラムを学ぼう〜
そんな人のためにこの本を作りました。
オセロを一から作りながら実践形式でプログラムを学べる本です。
すでに完成したプロジェクトを説明するのではなく、実際に作りながら説明していきます。
一緒に手を動かしながら、プログラムを覚えていきましょう🌟
