Layout Changer と Fontsize Switcherを導入

特にLayout Changerが面白そうだったのでFontsize Switcherと併せて導入してみた。
右上にあるLayoutSettingボタンをクリックすると実際に変更できます。

フォントサイズの変更も以前他のCMSで導入した際には文字サイズを変更したスタイルシートをそれぞれ用意してJavaScriptで切り替えるというものだったが、今回はそんな面倒な事をしなくてもサイズ指定さえすればOKだったので手間もかからなかった。

詳しい導入方法は開発元にあります。
Fontsize Switcher » フォントサイズを切り替えるJS:改2
Layout Changer » Layout Changer レイアウト変更スクリプト

Layout Changer はWordPressやMovableTypeで非常に人気のあるテンプレートvicuna専用です。

以下はcss等の個人的なメモ

index.php 404.php archive.php category.php page.php search.php single.php
上記７つのテンプレートの<div id="header">直下に下記コードを挿入

<div class="functions">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fontsize-switcher.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/layout-changer.js"></script>
</div>

アドレス部分は適宜変更する必要がある。私に場合テンプレートディレクトリ直下に配置したので上記のようにしている。

cssも配布元さんのcssを覗いて拝借しました。 :asease: 表示位置のズレは要調整。

div#header ul#fontSizeSwitcher {
	float: left;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

div#header ul#fontSizeSwitcher li {
	margin: 0 0 0 10px;
	padding: 0.2em 3px;
	float: left;
	width: 1em;
	background: #000 url(images/fontsize.gif) left top no-repeat;
	color: white;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

div#header ul#fontSizeSwitcher li:hover,
div#header ul#fontSizeSwitcher li:focus,
div#header ul#fontSizeSwitcher li.current {
	color: #ff0033;
	background: #fff url(images/fontsize_hover.gif) left top no-repeat;
}

div#header div.functions {
	float: right;
	padding-right:200px;
	margin-top: -103px;
}

これで導入は完了したものの他所のサイトでもサイズ切り替えはよく見かけるが、私の場合見づらいからと言って変更する事ってないんですよね。 :tenntenn:

関連記事

• 2007 年 11 月 24 日 -- WordPress vs MovableType
• 2007 年 10 月 09 日 -- WordPressをインストール
• 2010 年 01 月 27 日 -- WordPress 2.9.1にアップデート
• 2009 年 12 月 16 日 -- Bluehostでのタイムゾーン設定
• 2009 年 11 月 20 日 -- 海外ホスティングサービス BlueHost.com