freoテンプレートをだれでも簡単にリンゴっぽくする方法

これは古い記事です。
freoテンプレート
対応バージョン freo Ver 1.19.3
対応ブラウザ IE 10+, Firefox 4+, Google Chrome 12+, Opera 11+, Safari 5+
レスポンシブ -
概要 旧アップル風のテンプレートを作る方法です。
画像は使わず、なるべくデフォルトの仕様を崩さないようにしています。
テンプレート編集の参考などにどうぞ。

目次

  1. 全体の背景と文字色を変える
  2. 構造を変える
  3. ヘッダー部分
  4. メニュー部分
  5. 記事・ユーティリティ部分
  6. 記事部分
  7. ユーティリティ部分
  8. フッター部分
  9. よりそれっぽく
  10. カレンダーをシュッとさせる
  11. インフォメーション部分

1. 全体の背景と文字色を変える

全体の背景と文字色を変える

リンク色を黒(#333333)に変更

css/common.css 176行目。
※common.cssは管理画面にも適用されます。 

a:link, a:visited {
	color: #0000CC;
	text-decoration: underline;
}

※グレーの部分 が編集前、水色の部分 が編集後です。

a:link, a:visited {
	color: #333333;
	text-decoration: underline;
}

背景をグレー(#F2F2F2)に変更

ついでに文字の影や余白も変更します。
css/default.css 5行目。 

body {
	padding: 10px;
	background-color: #999999;
}

body {
	padding: 30px 0;
	text-shadow: 0 1px 0 #FFFFFF;
	background-color: #F2F2F2;
}
  • ざらざら背景にしたい場合、以下のような画像を用意します。imagesフォルダにbg.gifで保存します。

背景

body {
	padding: 30px 0;
	text-shadow: 0 1px 0 #FFFFFF;
	background: #F2F2F2 url(../images/bg.gif);
}

目次へもどる

2. 構造を変える

構造を変える

ヘッダー・メニュー

全体を囲う <div id="container"> からヘッダーとメニューを外します。
templates/header.html 21行目。 

<div id="container">
	<div id="header">
<h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1>
<p>{$freo.config.basis.description}</p>
	</div>
	<div id="menu">
<h2>メニュー</h2>
<ul>
	<li><a href="{$freo.core.http_file}">トップページ</a></li>
	<li><a href="{$freo.core.https_file}/login">ログイン</a></li>
	<!--{if isset($smarty.session.freo.agent.type|smarty:nodefaults)}-->
	<li><a href="{$smarty.server.PHP_SELF}?freo%5Bagent%5D%5Btype%5D=iphone">iPhone版</a></li>
	<!--{/if}-->
</ul>
	</div>

<div id="container"> を一番下へ

<div id="header">
	<h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1>
	<p>{$freo.config.basis.description}</p>
</div>
<div id="menu">
	<h2>メニュー</h2>
	<ul>
<li><a href="{$freo.core.http_file}">トップページ</a></li>
<li><a href="{$freo.core.https_file}/login">ログイン</a></li>
<!--{if isset($smarty.session.freo.agent.type|smarty:nodefaults)}-->
<li><a href="{$smarty.server.PHP_SELF}?freo%5Bagent%5D%5Btype%5D=iphone">iPhone版</a></li>
<!--{/if}-->
	</ul>
</div>
<div id="container">

フッター

フッターも同様にcontainerから外します。
templates/footer.html 1行目。 

	<div id="footer">
<address>Created by <a href="http://freo.jp/">freo</a>.</address>
	</div>
</div>
</div>
<div id="footer">
	<address>Created by <a href="http://freo.jp/">freo</a>.</address>
</div>

目次へもどる

3. ヘッダー部分

ヘッダー部分

横幅を指定

css/default.css 34行目。
（ここでは横幅を940pxにしていますが、任意の大きさで構いません。その場合フッター等も同じ大きさに変更します。） 

div#header {
	clear: both;
}
div#header {
	width: 940px;
	margin: 0 auto;
}

サイト名部分

css/common.css 56行目。
フォントサイズを250%に変更します。

h1 {
	font-size: 200%;
	font-family: "Arial Black", Arial;
}
h1 {
	font-size: 250%;
	font-family: "Arial Black", Arial;
}

サイトの説明部分

css/default.css 50行目あたりに追加します。

div#header p {
	margin: 3px 0 10px 0;
	color: #808080;
	font-size: 80%;
}

目次へもどる

4. メニュー部分

メニュー部分

横幅・背景を指定

css/default.css 68行目。
この部分をアップルのメニューっぽく変更します。
Ultimate CSS Gradient Generatorを使うと簡単です。 

div#menu {
	background-color: #666666;
}
div#menu {
	overflow: hidden;
	width: 940px;
	margin: 0 auto 10px auto;
	height: 40px;
	font-size: 110%;

	border-radius: 5px;
	border: 1px solid #5E5E5E;
	box-shadow: 0 1px 3px #999999;
	-webkit-box-shadow: 0 1px 3px #999999;

	background: #767676; /* Old browsers */
	background: -moz-linear-gradient(top, #767676 0%, #6c6c6c 50%, #5e5e5e 51%, #727272 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#767676), color-stop(50%,#6c6c6c), color-stop(51%,#5e5e5e), color-stop(100%,#727272)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #767676 0%,#6c6c6c 50%,#5e5e5e 51%,#727272 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #767676 0%,#6c6c6c 50%,#5e5e5e 51%,#727272 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #767676 0%,#6c6c6c 50%,#5e5e5e 51%,#727272 100%); /* IE10+ */
	background: linear-gradient(top, #767676 0%,#6c6c6c 50%,#5e5e5e 51%,#727272 100%); /* W3C */
}

リンクをブロック化

css/default.css 91行目。この部分のグラデーションも同じサイトで簡単に作成できます。

div#menu ul {
	margin: 0;
	padding: 5px 10px;
}
div#menu ul li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}

div#menu a:link, div#menu a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
div#menu a:active, div#menu a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
div#menu ul {
	margin: 0;
	padding: 0;
}
div#menu ul li {
	float: left;
	list-style: none;
}

div#menu a:link, div#menu a:visited {
	display: block;
	height: 19px;
	padding: 11px 15px;
	color: #F2F2F2;
	text-shadow: 0 -1px 0 #444444;
	text-decoration: none;
	border-right: 1px solid #858585;
}
div#menu a:active, div#menu a:hover {
	color: #FFFFFF;
	text-decoration: none;

	background: rgb(89,89,89); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(89,89,89,1) 0%, rgba(59,59,59,1) 50%, rgba(46,46,46,1) 51%, rgba(79,79,79,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(89,89,89,1)), color-stop(50%,rgba(59,59,59,1)), color-stop(51%,rgba(46,46,46,1)), color-stop(100%,rgba(79,79,79,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(89,89,89,1) 0%,rgba(59,59,59,1) 50%,rgba(46,46,46,1) 51%,rgba(79,79,79,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(89,89,89,1) 0%,rgba(59,59,59,1) 50%,rgba(46,46,46,1) 51%,rgba(79,79,79,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(89,89,89,1) 0%,rgba(59,59,59,1) 50%,rgba(46,46,46,1) 51%,rgba(79,79,79,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(89,89,89,1) 0%,rgba(59,59,59,1) 50%,rgba(46,46,46,1) 51%,rgba(79,79,79,1) 100%); /* W3C */
}

目次へもどる

5. 記事・ユーティリティ部分

記事・ユーティリティ部分

全体を囲う

css/default.css 24行目。

div#container {
	width: 760px;
	margin: 0 auto;
	padding: 20px;
	border-bottom: 5px solid #666666;
	background-color: #FFFFFF;
}
div#container {
	overflow: hidden;
	width: 900px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #DDDDDD;
	background-color: #FFFFFF;

	box-shadow: 0 1px 3px #CCCCCC;
	-webkit-box-shadow: 0 1px 3px #CCCCCC;
}

目次へもどる

6. 記事部分

記事部分

記事の枠

css/default.css 129行目付近と139行目付近。横幅を100px大きくし、ボーダーは削除します。

div#content {
	float: left;
	width: 550px;
}

～略～

div#entry div.entry {
	width: 550px;
	margin: 15px 0;
	border: 1px solid #999999;
}
div#content {
	float: left;
	width: 650px;
}

～略～

div#entry div.entry {
	width: 650px;
	margin: 15px 0;
}

余分な線を削除

css/default.css 161行目付近の border-top: 1px solid #CCCCCC; を削除します。

見出しを大きく

css/default.css 144行目付近のh3に font-size: 140%; を追加します。

div#entry div.entry h3 {
	margin: 0;
	padding: 10px 10px 0 10px;
	font-size: 140%;
}

記事に下線を追加

css/default.css 170行目付近。

div#entry div.entry ul.link {
	margin: 0;
	padding: 10px;
	text-align: right;
}
div#entry div.entry ul.link {
	margin: 0 0 30px 0;
	padding: 10px 0 30px 0;
	text-align: right;
	border-bottom: 1px dotted #DDDDDD;
}

ページ移動を中央揃え

css/default.css 209行目付近に追加します。

div#page {
	text-align: center;
}

目次へもどる

7. ユーティリティ部分

ユーティリティ部分

幅を広げる

css/default.css 267行目付近。

div#utility {
	float: left;
	width: 200px;
	margin-left: 10px;
	margin-bottom: 20px;
}
div#utility {
	float: left;
	width: 220px;
	margin-left: 30px;
	margin-bottom: 20px;
}

見出しを小さく

css/default.css 276行目付近に追加します。

div#utility h3 {
	font-size: 110%;
}

背景を削除

css/default.css 279行目付近div#utility div.utilityの background-color: #EEEEEE; を削除します。

css/default.css 319行目付近div#utility div.utility table.calender tr th ～略～の background-color: #EEEEEE; を削除します。

css/default.css 319行目付近に追加します。

div#utility div.utility table.calender tr th {
	background-color: #FFFFFF;
}

カテゴリーの2階層以降の余白を調整

css/default.css 292行目付近。2階層以降をcircleにします。

div#utility div.utility ul li ul {
	margin-top: 0;
	margin-bottom: 0;
}
div#utility div.utility ul li ul {
	margin: 0 0 0 5px;
}
div#utility div.utility ul li ul li {
	list-style: circle;
}

新着エントリーなどの日時部分

css/default.css 298行目付近に追加します。

div#utility div.utility dl dd {
	margin-bottom: 5px;
	color: #808080;
	font-size: 80%;
	text-align: right;
}

検索部分

css/default.css 313行目付近。検索ボックス・検索ボタンを調節します。

div#utility div.utility form dl dd input {
	width: 170px;
}
div#utility div.utility form p {
	margin: 0 0 10px 0;
}
div#utility div.utility form dl dd input {
	width: 200px;
	border: 1px solid #DDDDDD;
}
div#utility div.utility form p {
	margin: 10px 0;
	text-align: right;
}
div#utility div.utility form p input {
	width: 80px;
	cursor: pointer;
	border: 1px solid #DDDDDD;
	background-color: #F2F2F2;
}

目次へもどる

8. フッター部分

フッター部分

幅・余白を調節

css/default.css 63行目付近。

div#footer {
	clear: both;
}
div#footer address {
	padding-top: 10px;
	border-top: 1px solid #999999;
}
div#footer {
	width: 940px;
	margin: 20px auto;
	text-align: center;
	border-top: 1px solid #DDDDDD;
}
div#footer address {
	padding-top: 10px;
	border-top: 1px solid #FFFFFF;
}

余裕があれば「カレンダーをシュッとさせる」もどうぞ。

目次へもどる

よりそれっぽく

おまけ

メニューとヘッダーを反転

templates/header.html 21行目付近。
ヘッダーとメニューを反転させてよりアップルっぽく。 

<div id="menu">
	<h2>メニュー</h2>
	<ul>
<li><a href="{$freo.core.http_file}">トップページ</a></li>
<li><a href="{$freo.core.https_file}/login">ログイン</a></li>
<!--{if isset($smarty.session.freo.agent.type|smarty:nodefaults)}-->
<li><a href="{$smarty.server.PHP_SELF}?freo%5Bagent%5D%5Btype%5D=iphone">iPhone版</a></li>
<!--{/if}-->
	</ul>
</div>
<div id="header">
	<h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1>
	<p>{$freo.config.basis.description}</p>
</div>

css/defauld.css 39行目付近。
さらに余白を調節するといい感じになります。この場合サイトの説明は消したほうがバランスが良いかも？ 

div#header {
	width: 920px;
	margin: 20px auto 0 auto;
}

目次へもどる

カレンダーをシュッとさせる

カレンダーをシュッとさせる

構造を変更 その1

templates/utility.html 3行目付近の <div class="utility"> を <div id="calendar"> に変更します。

構造を変更 その2

css/default.css 331行目付近に追加します。

div#calendar {
	padding-bottom: 10px;
	border-radius: 5px;
	border: 1px solid #E5E5E5;
	background-color: #F7F7F7;
}

構造を変更 その3

css/default.css の 「div#utility div.utility」 をカレンダー部分のみ 「div#calendar」 に変更します。併せてテーブルのpaddingも変更します。

div#utility div.utility table.calender {
	margin: 0;
	border: 0px solid #000000;
}
div#utility div.utility table.calender tr th {
	background-color: #FFFFFF;
}
div#utility div.utility table.calender tr th, table.calender tr td {
	padding: 5px;
	border: 0px solid #000000;
	font-weight: normal;
	text-align: center;
}
div#utility div.utility table.calender tr td span.day {
	color: #222222;
}
div#utility div.utility table.calender tr td span.satday {
	color: #2222CC;
}
div#utility div.utility table.calender tr td span.sunday {
	color: #CC2222;
}
div#calendar table.calender {
	margin: 0;
	border: 0px solid #000000;
}
div#calendar table.calender tr th {
	background-color: #FFFFFF;
}
div#calendar table.calender tr th, table.calender tr td {
	padding: 2px;
	border: 0px solid #000000;
	font-weight: normal;
	text-align: center;
}
div#calendar table.calender tr td span.day {
	color: #222222;
}
div#calendar table.calender tr td span.satday {
	color: #2222CC;
}
div#calendar table.calender tr td span.sunday {
	color: #CC2222;
}

月送りを削除

templates/utility.html 34行目付近の以下の部分を削除します。

<ul class="calender">
	<li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender_previous}">前の月</a></li>
	<li><a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender_next}">次の月</a></li>
</ul>

css/default.css 359行目付近の以下の部分を削除します。

div#utility div.utility ul.calender {
	margin: 10px 0;
}
div#utility div.utility ul.calender li {
	display: inline;
	list-style: none;
	margin-right: 10px;
}

年月の左右に月送りの矢印を表示

templates/utility.html 4行目付近。

<h3>{$plugin_entry_calender_year}年{$plugin_entry_calender_month}月</h3>
<h3><a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender_previous}">&#171;</a> {$plugin_entry_calender_year}年{$plugin_entry_calender_month}月 <a href="{$freo.core.http_file}/entry?date={$plugin_entry_calender_next}">&#187;</a></h3>

css/default.css 341行目付近に追加します。

div#calendar h3 {
	text-align: center;
	font-size: 100%;
}

テーブル

css/default.css 337行目付近。

div#calendar table.calender {
	margin: 0;
	border: 0px solid #000000;
}

div#calendar table.calender {
	line-height: 1.0;
	margin: 0;
	width: 100%;
	font-size: 90%;
	border: 0px solid #000000;
}

css/default.css 348行目付近。曜日の背景を変更します。

div#calendar table.calender tr th {
	background-color: #FFFFFF;
}
div#calendar table.calender tr th {
	background-color: #F7F7F7;
}

目次へもどる

インフォメーション部分

インフォメーション部分

インフォメーションの下に線を表示

css/default.css 257行目付近。

div#information {
	margin-bottom: 30px;
}
div#information {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #EEEEEE;
}

見出しの上下線を削除

css/default.css 262行目付近に追加します。

div#information h2 {
	border: 0;
}
共有
カテゴリー
タグ
最終更新日2018.10.31
投稿日2011.06.11