Site Design

本ブログ「ZERO のメモ」は、WordPress に「Frontier」というテーマを適用して運営しています。ブログの定番 WordPress ですから、ネット上にその「Know-How」が溢れていて、何かに困れば直ぐに解決できる・・・はずです。だから、本ブログで詳細を説明する必要はないでしょう。ただ、Theme である「Frontier」に関しては、それほど情報が多くなさそうです。

そこで、本ページをWordPress に適用している「Frontier」に関する備忘録として公開します。

はじめに

「Frontier」は、私が運用している他のブログでも利用していて、その使い易さは群を抜いていると感じています。「ZERO のメモ」では、「Frontier」の解説ウェブページで推奨されているように「子テーマ」を設定、「Frontier Child」というテーマに変更を加えています。

「Frontier」には、「子テーマ」が準備されていますが、基本的に必要最低限の style.css と functions.php のみの提供です。本ページでは、style.css に関連する内容をメモしておきます。

初期の「子テーマ」用 style.css は、以下のコードが記述されているだけです。

/*
Theme Name:     Frontier Child
Theme URI:      http://ronangelo.com/frontier/
Description:    Child theme for Frontier.
Author:         ronangelo
Author URI:     http://ronangelo.com/
Template:       frontier
Version:        1.0
*/

/* Your modification goes here */

上記コードの「/* Your modification goes here */」を消去して必要に応じて、オリジナルのコードを記入していくことになります。

テーマ「Frontier」の標準 Options を決める

WordPress をインストールして、「Frontier」をインストール。カスタマイズするために「Frontier Child」を設定する。これで、標準の「Frontier」の設定が引き継げるようになりますが、何はともあれ「Frontier」の標準で実装されている「Options」を決めていきます。

Layout の設定

最初は「Layout」です。ブログのコラム数とその横幅を決定します。本ブログでは、自分が最も使い易くなければ意味がありませんから、利用している「Microsoft Surface 3」の解像度、1980 x 1280 をベースに考えます。参考にしたウェブ情報は以下の通り。

• 「サイトデザインの横幅の基準はこれだ！お役立ち記事まとめ＆事例9選で何ピクセルかもう迷わない | プロモニスタ」
• 「デザインは8の倍数でできている｜1 pixel｜サイバーエージェント公式クリエイターズブログ」

上記を参考に「解像度：1980 x 1280 に収まる 8 の倍数でスクロールが必要ないサイズとして、1200 をブルグの固定幅」としました。レイアウトは、ちょっとクラシックですが 2 コラム（コンテンツ部分と右サイドバー）にすることにしました。

上記の参考サイトから、コンテンツ部分とサイドバーが 8 の倍数・・・ということでコンテンツ部を 816、右サイドバーを 384 とすることにしました。

「Frontier」の Options、Layout における設定

項目	独自の解説	実際の設定
Main Layout	コラム数（形式）を決定する	コンテンツ部と右サイドバー形式
Container Width	ブログ全体の幅の決定	1200px
Two Column Widths	コンテンツ部とサイドバーの幅を決定する	コンテンツ部（68%）：サイドバー（32%）

上記の設定によって、コンテンツ部 816px、サイドバー部 384px に設定される。

Custom CSS を利用する

「子テーマ」を利用している場合、スタイルの変更は「子テーマ」にある style.css に変更を加えていくのが常套手段なのですが、なぜか変更が反映されないスタイルもあるんです（ってか、無知なために変更方法が間違っているのかもしれませんが・・・）

「Frontier」には、Options として「Custom CSS」が準備されていて、このセクションに変更したいスタイルを記述することもできるので、style.css で反映されない場合、「Custom CSS」へ記入しています。

以下は、style.css で変更が反映されないため「Custom CSS」へ移行しているコードです。

/* 投稿記事のタイトルに関するスタイル */
.entry-title {
	line-height: 1;
	font-size:22px; font-size:1.375rem;
	font-weight: bold;
	margin-bottom: 5px; }
/* カテゴリー別、タグ別等のページのタイトルを変更する */
.archive-info {
	background-color: #dad4f3;
	border: 1px solid #008000;
	box-shadow: 0 0 2px #333;
	margin: 0 0 10px;
	-ms-word-wrap: break-word;
	word-wrap: break-word; }
.archive-info h3 {
	font-size: 20px; font-size: 1.250rem;
	color: 	#322081;
	font-weight: bold; }
.archive-description {
	color: #322081;
	font-size: 16px; font-size: 1.000rem;
	border-top: 2px dotted #322081;
	margin-top: 8px;
	padding-top: 5px; }
.entry-content h4.subtitle { /* 新規で作成 */
	clear: none;
	line-height: 1.5;
	color: #201067;
	font-size: 16px; font-size: 1.000rem;
	font-weight: bold;
	background-color: #fff;
	margin-top; 20px;
	padding: 4px 0px 1px 5px;
	border-left: 10px solid #483698;
	border-bottom: 1px solid #483698; }
/* 投稿記事のタグに関するスタイル変更 */
.entry-tags {
	font-size:14px; font-size:0.875rem;
	font-weight: bold;
	color: #201067;
	background-color: #dad4f3;
	margin: 13px -10px -10px -10px;
	padding: 8px 5px 5px 15px; }
/* 「前の投稿記事へ」や「次の投稿記事へ」ナビゲーション */
.link-prev a, .link-next a {
	background-color: #483698;
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #555;
	box-shadow: 0 0 2px #333;
	color: #dad4f3; }
.link-prev a:hover, .link-next a:hover {
	color: #dad4f3; }
/* ソースコードに関するスタイル */
pre, code {
	font-size: 16px; font-size: 1.000rem;
	background-color: #dad4f3;
	line-height: 1.5; }

時間の経過と共に、コード量が多くなってきました・・・ちょっと気になるな～

本ブログのカラー設定

本ブログの色彩は「紫」をベースにしようと考えて、微調整したカラーコード「#483698」を基準に「カラーパレット」で推奨された色を組み合わせています。

参考にしたのは「Paletton – The Color Scheme Designer」で、下表の「Primary color 1」が「#483698」をベースに、更に同様に薄い色彩として「#8779C5」をベースにした「Primary color 2」を掲載します。

Primary color 1 base: #483698	#8779c5 #8779c5	#6050a9 #6050a9	#483698 #483698	#322081 #322081	#201067 #201067
Primary color 2 Base: #8779c5	#dad4f3 #dad4f3	#b0a6df #b0a6df	#8779c5 #8779c5	#6354a9 #6354a9	#483891 #483891

ブログのトップ画像変遷

本ブログの生命線！？であるトップ画像の変遷を示しておきます。基本は、1200px X 384px の画像になります。