soukenWordPressテーマ「Lightning」をカスタマイズ(その3)フォントの変更・クレジットの非表示ツイートシェアはてブ送るPocket「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ前回に引き続き、Lightningのカスタマイズ「その3」。今回はCSSによるカスタマイズを扱います。前回は、WP管理画面からあれこれ設定をいじってみました。これを最終回までに、以下の状態にまでカスタマイズします。北福岡駅より徒歩2分の痛くない歯医者(架空のサンプルサイトです)*2017/10/28のアップデートにより、コードを一部書き換えました。「Lightning」は秀逸なWP無料テーマだとは思いますが、幾つか致命的に気にくわない点があります。その一つがフォント(字体)です。親テーマのCSSを覗いてみると、フォント設定は以下のようになっています。}この設定だと各端末でのフォント表示はこのようになります。◇Windows:メイリオ◇Mac:ヒラギノ角ゴシック◇スマホ・タブレット:OSのデフォルトフォントそして、私のWin10パソコンだとフォントは以下のように表示されます。「メイリオ」というフォントで表示されてますね。メイリオって嫌いじゃないけど、あの丸っこい感じがなんとも軽々しくて、真面目なサイトや重々しい法人サイトなどでは不向きだと思います。士業の堅物サイトなどでメイリオで表示されているところを見かけますが、いかにもチグハグで残念な感じを受けますね。逆に、ノリが軽妙なサイトや、可愛い系のサイトなどでは向いてると思います。当ブログもWindowsで見ると「メイリオ」で表示されます。この歯科サイトでは真面目さを重視して、フォントは「游ゴシック」をメインにしたいと思います。子テーマの「style.css」に以下のように記述します。Lion以前):ヒラギノ角ゴシック◇スマホ・タブレット:OSのデフォルトフォントで、表示されます。私のWin10パソコンでは以下のように変更されます。「游ゴシック」で表示されました。真面目な感じが良いです。Sans」を使うという選択肢もありましたが、今回は「游ゴシック」を使用しました。フォントの大きさ・太さを変更PCで見るとPタグのフォントが小さく感じるので、PC閲覧時(画面幅992px以上)のフォントサイズを変更します。}さらに、「游ゴシック」に切り替えるとメニュー(ナビゲーション)の文字が見づらくなったので、太字にします。「Lightning」で気に食わない点の2番目ですが、背景色がWordPressの設定画面から変更できないんです。なんでしょうね、この残念仕様は。変更させたきゃ有料プラグイン買いなさいという策なんでしょうけど。Lightningの背景色はデフォルトでは白です。これを最近の歯科サイトに多い、淡い明るい色に変えたいと思います。子テーマの「style.css」に以下のように記述します。}フッターの空白を非表示にこの時点で、フッターの上半分が空白になってます。「フッターウィジェットエリア3」これらが左・中央・右と平行3列に入るエリアです。ウィジェットは何も入れてないためにぽっかりと空白になってます。「ユーザーは絶対ここにウィジェットを入れます!」と確信して作ってるのでしょうね。私は入れませんw小規模サイトの場合はわざわざ何かを入れる必要性を感じません。よって、ここはCSSで無理矢理に非表示に変えます。セクションの余計な区切り線も消します。technology.」というLightningのクレジット表記があります。これが邪魔なので消します。「いやいや、消して大丈夫なの?」というそこの貴方!消して大丈夫です。LightningもWordPress自体もGPLライセンスなので、こういうのは表示しなくて問題ありません。邪魔者は消しましょう。削除専門の有料プラグインを買いなさい、ということなので却下します。◇CSSで消すの2パターンあります。ここは簡単な後者でいきます。}すっきり消えました。今回はここまでさて、ここまでのカスタマイズ結果です。背景色が変わると、受ける雰囲気も一気に変わりますね。次回もCSSでのカスタマイズで、見出しの変更などを行います。2017年9月RECOMMENDこちらの記事も人気です。Unlimited」で良書を探してみた:まとめページランサーズ定点観測:まとめページランサーズでWEBデザイナーが仕事を受注するには?:まとめページカラーミーショップにてサイト制作中:まとめページschoo授業感想:まとめページブログ主プロフケンです。