WordPressでブログを作ってみるシリーズも「その3」です。今回は「カスタマイズ編」です。前回まででテーマをインストールしてそれを反映されることができました。WordPressの良いところはそのテーマを自分仕様にカスタマイズできることです。今回は私がSTRINGER 5というテーマに対して実施したカスタマイズを振り返ります。
画像はLightboxで開くようにした
ブログを読んでいると記事内の画像が小さく、その中の文字が読めないことが多々あります。拡大して表示させる動作を少しかっこよくしました。
■参考にしたサイト
http://wordpresscollege.org/plug-in/responsive-lightbox/
STRINGER 5はレスポンシブですので、それ用のLightboxである必要があります。「Responsive Lightbox」というプラグインがあり、それをインストールするだけで簡単に実装ができました。
注意が必要なのは上記参考サイト内の「Responsive Lightboxを検索する」をすると、似たようなプラグインが多数ヒットします。今回使用したのは「dFactory」さんという作者様のプラグインですのでご注意を。
ソーシャルアイコンを変更した
STRINGER 5はデザイン性の非常に高いテーマだと思いますが、唯一残念なのはソーシャルアイコンのデザインでした。大きさもマチマチですし、ほかのデザインが洗練されているだけに残念な印象がより強くなります。
■参考にしたサイト
http://shufulife.com/8type-snsbutton/
画像はオリジナルで作成して、上記のサイトからコードをいただいて反映しました。
[html]
<!--ツイートボタン-->
<ul>
<li class="twitter"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter <!--?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?--></a></li>
</ul>
[/html]
aの閉じタグの前にimageタグを挿入しました。↓こんな感じ。
[html]
<!--ツイートボタン-->
<ul>
<li class="twitter"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter <!--?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?--><img title="Tweet" src="https://blogs.fc-taka.net/wp-content/uploads/2015/04/twt.png" alt="Tweet" width="30" height="30" /></a></li>
</ul>
[/html]
これをsns.phpとsns-top.phpのliタグ内をそれぞれまるっと差し替えて反映させたら完了です。
サイドバーの見出しにアイコンをつけた
レスポンシブなのでテキスト中心になるのは仕方ないのですが、それでもサイドバーの見出しに主張がないなと思ったので、アイコンで少しだけ立たせました。
■参考にしたサイト
http://smart-phone.783783783.com/2014/11/09/stinger5-customize-sidebar/
ブログってどうしてもごちゃっとした印象になりがちなので、必要な機能は抑えつつも、極力シンプルでフラットなデザインになるようにしたつもりです。まだまだ触れる余地はあると思うので、運用しながらカスタムを続けたいと思います。
[amazonjs asin="4873116783" locale="JP" tmpl="Small" title="詳解 WordPress"]
[amazonjs asin="4844337092" locale="JP" tmpl="Small" title="いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)"]