自習室マイタスWebサイトのデザイン変更は一段落しました。ほとんど色関係ですが、自習室マイタスのイメージカラーを基調としたデザインにしました。今回はスマホでの閲覧を意識したデザインに変更しましたので、以前よりかなり見やすくなったと思います。先日不死鳥のように甦ったiPhone4Sが大活躍でしたよ。本当に復活してくれてよかった。

何を設定したか

さて、本題です。自習室マイタスのWebサイトは、WordpressとBizVekorというテンプレートからできています。BizVektorはとても高機能なテンプレートで、これだけでプラグインがいくつも不要になるくらいですが、さすがにCSSをいじらないとどうにもならない部分もたくさんあります。以下の項目は、自習室マイタスWebサイトのデザイン変更で設定をいじった部分です。

  • 使用できるフォント設定の追加
  • Powered by BizVekorを削除
  • カレンダーの体裁変更
  • ドロップシャドウをつけるクラスの追加
  • 横長のお問い合わせ表示エリアの体裁変更
  • blockquoteの体裁変更
  • ヘッダートップの体裁変更
  • パンくずエリアの体裁変更
  • ページタイトルバナーの体裁変更
  • ヘッダーメニューの体裁変更
  • 検索窓の設定変更
  • コンテンツエリア内の体裁変更
  • サイドバーの体裁変更
  • お知らせリストの体裁変更
  • PRエリアの追加と体裁変更
  • 囲い枠の体裁変更
  • 水平線の体裁変更
  • h2の体裁変更
  • h3の体裁変更
  • h4の体裁変更

結構な数を変更していますが、テンプレートの基本の体裁から大幅に変更せず、画像は必要最低限しか使わず、とにかく早く表示されるようしながら、割りとキレイになるように心がけてます。

どう設定したか

あまり大したこともしてませんし、ほかにもっとうまいやり方があるのかもしれませんが、とりあえずうちではこうしたらできたよってことで書きとどめておきます。まずは前提条件ですが、今のうちの環境は次の通りです。(2016-04-17)

  • WordPress 4.5
  • BizVeKtor 1.8.19
  • BizVektor 子テーマ 0.1.0
  • BizVektorのデザインスキンはDefault

このうち特に注意していただきたいのがデザインスキンです。デザインスキンが変わると、読み込まれるCSSが違ってくるので、同じように設定しても同じように表示されません。その場合はご自身の適用しておられるデザインスキンに合わせて調整してください。

フォント

BizVektorはどういうわけか初期状態では文字がギザギザしております。おまじないだと思ってstyle.cssに書き込んでおいてください。子テーマを適用しているなら、管理画面の[外観]→[テーマの編集]とすすむと、子テーマのstyle.cssに書き込む画面が出てきます。

@charset "utf-8";                           ←ここから
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: biz-vektor
Description: 
Author: midzuki
Tags: 
Version: 0.1.0
*/                                          ←ここまでは最初から書いてある
body       {
        font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}
 
 

最初から書いてある部分のうち、[ @charset “utf-8”; ]以外の部分は消しても構いません。[ body ]からコピペしてください。これで大多数の環境でギザギザがなくなるはずです。
ちなみに、ここに直接書き込んでも良いんですが、その後の見通しを良くするためと、手元に書き込んだCSSの設定を残しておかないと怖いので、テキストエディタで書いて、先ほどの画面の箱の中に貼り付けるようにしてくださいね。

Powered by~を削除?する

なにもしないままそのまま使うほうがいいんですけど、やっぱり消したいって方もおられるかと思い、中間点の策を書きます。
何もしないと、ページの一番下の黒い帯の部分の一番下、[ Copyright © 自習室 My + 【マイタス】 All Rights Reserved. ]の下に、[ Powered by WordPress & BizVektor Theme by Vektor,Inc. technology. ]という一文が入ります。BizVectorにはこれを消すためのプラグインが有料で用意されていますので、そちらを買ってあげたほうが製作者のためにもなると思います。でも、消しても良いよってライセンスなので、ちょっと心情的には複雑です。
本当に消し去ってしまうなら、この一文を出力しているphpを改造して出力しないようにすることもできますが、ここはあえて別の方法で消そうと思います。先ほどの続きにちょこっと書き加えてください。

@charset "utf-8";

/* 消してもいいよって部分は消してみました。
   スラッシュとアスタリスクに挟まれた範囲はコメントです。
   後から見てもわかりやすいようにメモを残しましょう */
 
/* フォントの追加 */
body {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;}
 
/* コピーライト表示の削除 */
#powerd {display:none;}     ←ここを追記

 
 

この方法はとても簡単ですが、実は出力されたHTMLソースを見るとコピーライト表記が残っています。でも、コピーライト表示部が[ powerd ]というCSSのidでくくられているので、[ powerd ]を非表示にしているだけなんです。なんだかペテンみたいですが、こうするには大きなメリットがあります。BizVeKtorは頻繁にバージョンアップします。バージョンアップでコピーライト表示を出力しているphpが上書きされると、せっかくの改造が元に戻ってしまいます。しかし、CSSで見えなくする方法だとBizVeKtor本体がいくらバージョンアップしても何もしなくていいので、とても楽です。idが変わったり、表示のしかたが変わった時はその時考えればいいですし、気が変わって「やっぱり表示する!」ってなっても1行削除するだけ。とても現実的なやり方だと思います。人間に見えてないだけで、機械には見えてますから、コピーライト表示を消すことへの罪悪感もちょっとだけ緩和されるかもしれません。
冗談はさておき、ライセンス表示に関する大本営の見解がBizVektorのFAQページに掲載されています。一度こちらでご確認の上、ご自身でご判断ください。
なお、コピーライト表示を消すプラグインは↓こちらです。

BizVektor FooterPoweredDelete
https://bizvektor.com/add-ons/footerpowereddelete/

冒頭のリストの上から順番にちょっとずつ書いていきます。
とりあえず本日はこの辺で。







Author Profile

midzuki
自習室マイタスの運営本部、ハシヅメアーキテック代表者。本業は建設業。自習室マイタスの内装デザインおよび施工はすべて本人が行っている。
何事も断らない性格から、とある学習塾の塾長を任されたり、講師を兼任したり、工事のついでにオフィス機器の導入や慣熟指導、研修会講師など、自分でお役に立てることならできうる限り対応してきた。オフィスの新築・改装の際にワンストップで事務所機能をすべて揃えられると喜んでいただいている。ちなみに塾講師としての専門分野は現国で、現国で満点を取らせる男。

【その他の特徴】
◆一級施工管理技士
◆二級建築士
◆ネットワークに繋がるデバイスならだいたいなんとかできる。
◆基本的に自前主義で自分できることなら何でも自分でやる。
◆とにかく機械が好きで、友人のリサイクル工場で一日楽しめる。
◆ご要望が多いので現国の短期集中セミナーやるかも。
◆趣味は料理とギターで、Facebookから自炊録の移行を計画中。
◆最近、頭髪のことを気にしている。
◆こちら側のどこからでも切れないタイプの人種。
◆極度の育メン