テーマにNishikiを採用したところで、いよいよ再構築作業に入ります。この段階ではまだ記事のサルベージはせず、ある程度テーマの体裁を整えてから行います。…んが、前の記事でも書いた通り、装飾が必要最低限レベルでしかされていないのでデフォのままだとダサいですし、SNSのリンクを出力する機能は有料版でないと付いていません。しかしSNSのボタンくらいなら特に難しい事をしなくとも自力で実装できるし、無料版だと公式が子テーマを配布している為、それを利用して弄くれば問題ないので、子テーマでゴリゴリカスタマイズしていくことにしました。
今回はSNSのリンクボタン(+筆者紹介)をつけるカスタマイズをば。ごくごく簡単なものであればPro版の使用/プラグイン無しで実装できます。
HTML
子テーマ側に、親テーマのparts/footer/content.phpをコピペしてそこに書いてもいいのですが、ダッシュボードの「ウィジェット」から設定する方が簡単なのでこちらで。フッターにウィジェット「カスタムHTML」を有効化させて、その中に以下を記述。
<dl class="main">
<dt class="two m-thumbnail m-thumbnail-round"><img src="/common/img/twitter.png" width="128" height="128" alt="prof.png"></dt>
<dd class="ten">
<h3 class="widget-title">かむり/Camri</h3>
<p>気まぐれに絵描いてたりゲーマーしていたり。たまにガンダムでファイヤーしたりしますが、基本アニメジャンルは疎い方。</p>
<p>Scrapは自分用のメモも兼ねてるので、CMSの話からMacの話まで雑多。何か少しでもお役に立てるものがありそうでしたら、どうぞ使ってやって下さい。ただし、バッドノウハウがないとも限らないので、ご利用の際は自己責任でお願いします。</p>
<ul class="widget-social-icons">
<li class="twitter"><a href="https://twitter.com/lohengrine" title="twitter@lohengrine"><i class="fa fa-twitter"></i></a></li>
<li class="tumblr"><a href="https://lohengrine.tumblr.com/" title="tumblr@lohengrine"><i class="fa fa-tumblr"></i></a></li>
<li class="pixiv"><a href="https://www.pixiv.net/member.php?id=141332" title="pixiv"><img src="https://la-lune.org/common/img/dummy.png" width="16" height="16" alt="pixiv" /></a></li>
<li class="tinami"><a href="https://www.tinami.com/creator/profile/15161" title="TINAMI"><img src="https://la-lune.org/common/img/dummy.png" width="18" height="18" alt="TINAMI" /></a></li>
</ul>
</dd>
</dl>
twitterとTumblrのアイコンはアイコンフォントを利用します。Nishikiにはicomoonが組み込まれているのでおそらく使えるはずです(きちんと確認してないけどTumblrはないかも…)。うちではBootstrapで慣れ親しんでいる事もあって、FontAwesome4を使っています。読み込み方はここでは省略するので申し訳ないがグーグル先生にお尋ねしておくれ…。pixivとTINAMIはアイコンフォントにあるはずがないので自分で用意しました。ここでは透過PNGのダミー画像を挿入して、ロゴ画像は後述のCSSで表示します。
※SNSへのリンク先URIはご自分のアカウント用に書き換えてご利用ください。
CSS
このままだとPCで見た時にスマートではないので、更に子テーマのstyle.cssに以下を追加。
.textwidget { line-height: 1.6; }
.textwidget h3 {
color: #C0C0C0;
font-weight: 600;
margin: 0.2em 0;
letter-spacing: 0.5px;
position: relative;
padding-bottom: 0;
font-size: 1.2rem;
}
.textwidget ul.widget-social-icons {
font-size: 0;
margin: 0;
padding: 0.1em;
line-height: 24px;
}
.textwidget ul.widget-social-icons li {
font-size: 16px;
display: inline-block;
margin: 0 0.2em;
border: none !important;
}
.textwidget ul.widget-social-icons li:first-child { margin-left: 0; }
.textwidget ul.widget-social-icons li a {
width: 40px;
height: 40px;
line-height: 1.45;
display: block;
border-radius: 50%;
border: 1px solid;
text-align: center;
color: #fff;
}
.textwidget ul.widget-social-icons li a:hover {
color:#fff;
border-color: #fff !important;
}
/* for twitter */
.textwidget ul.widget-social-icons li.twitter a {
background: #55acee !important;
border-color: #55acee !important;
}
/* for Tumblr */
.textwidget ul.widget-social-icons li.tumblr a {
background: #36465d !important;
border-color: #36465d !important;
}
.textwidget ul.widget-social-icons li img { line-height: 1 }
/* for pixiv */
.textwidget ul.widget-social-icons li.pixiv a {
border-color: #0097FA !important;
background: #0097FA !important;
}
.textwidget ul.widget-social-icons li.pixiv img {
height: 24px !important;
width: 24px !important;
}
.textwidget ul.widget-social-icons li.pixiv a img {
background: #0097FA url("/common/img/css/pixiv_logo.png") center 0 no-repeat !important;
background-size: 24px 24px !important;
}
/* for TINAMI */
.textwidget ul.widget-social-icons li.tinami a {
border-color: #307EA7 !important;
background: #307EA7 !important;
}
.textwidget ul.widget-social-icons li.tinami img {
height: 24px !important;
width: 24px !important;
}
.textwidget ul.widget-social-icons li.tinami a img {
background: #307EA7 url("/common/img/css/tinami.png") center 0.2em no-repeat !important;
background-size: 18px 18px !important;
}HTML側でダミー画像を設定していたpixivとTINAMIは、ここでロゴ画像を表示させるための設定をします(ダミー画像の背景として表示させる仕組み)。TINAMIは自作、pixivはガイドラインの「pixiv登録商標の利用ガイドライン」からロゴとアイコンのセットをダウンロードできます。
pixivのロゴやアイコンは、以下の禁止事項にある通り、加工及び改変が禁止されています。
pixiv登録商標の利用ガイドライン > 禁止事項
- 白黒印刷などのカラー制限があるような場合を除いて、pixivロゴ・アイコンに変更を加えてはいけません。他の言葉や画像と組み合わせたり、一部分を切り離す、縦横比を比例しない値に変更する等の加工は禁止します。
- pixivロゴ・アイコンを使って独自のボタンやマーク、ロゴ、アイコンを作成する事は禁止します。
以前はpixivロゴのイラレ用ベクターファイル(背景色が何も付いていないもの)が開発者ブログからダウンロード出来るようになっていて、当サイトでもこれを利用していたのですが、今回の再構築より当該ガイドラインに沿った形での使用に切り替えています。
今回のカスタマイズで実装したもの
凝ったものでなければHTMLとCSSだけで簡単に設置できるので、プラグインを使うよりはお手軽ですし、PHPの変数を挟まないので(効果は微々たるものではありますが)負荷も減らせます。なお私はやってないのでつけていませんが、facebook/Instagram/YouTubeも同様の方法で設置できます。なおLINEはFontAwesome5が必要(無料版でOK)、はてブは画像を用意して使うしかないです。