Home > Customize | WordPress > Layout Changer と Fontsize Switcherを導入

Layout Changer と Fontsize Switcherを導入

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

Layout Changer画面

フォントサイズの変更も以前他の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">直下に下記コードを挿入

PLAIN TEXT
PHP:
  1. <div class="functions">
  2. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fontsize-switcher.js"></script>
  3. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/layout-changer.js"></script>
  4. </div>

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

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

PLAIN TEXT
CSS:
  1. div#header ul#fontSizeSwitcher {
  2.     float: left;
  3.     margin: 12px 0 0;
  4.     padding: 0;
  5.     list-style: none;
  6. }
  7.  
  8. div#header ul#fontSizeSwitcher li {
  9.     margin: 0 0 0 10px;
  10.     padding: 0.2em 3px;
  11.     float: left;
  12.     width: 1em;
  13.     background: #000 url(images/fontsize.gif) left top no-repeat;
  14.     color: white;
  15.     font-size: 100%;
  16.     font-family: Arial, Helvetica, sans-serif;
  17.     font-weight: bold;
  18.     text-align: center;
  19.     cursor: pointer;
  20. }
  21.  
  22. div#header ul#fontSizeSwitcher li:hover,
  23. div#header ul#fontSizeSwitcher li:focus,
  24. div#header ul#fontSizeSwitcher li.current {
  25.     color: #ff0033;
  26.     background: #fff url(images/fontsize_hover.gif) left top no-repeat;
  27. }
  28.  
  29. div#header div.functions {
  30.     float: right;
  31.     padding-right:200px;
  32.     margin-top: -103px;
  33. }

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

Related Posts

Comments:2

marble 07-12-20 (木) 23:06

はじめまして～
10coin.comのmarbleです。TBされてたので遊びに来ました！
スクリプト使っていただいてありがとうございますー
しかもCSSカスタマイズされてたりして、とても嬉しい限りです！

これからもVicunaに特化したものをつくったりするのでよろしくお願いします。
では失礼します！

kecha 07-12-23 (日) 17:33

marbleさん はじめまして
わざわざコメントいただきありがとうございます。 wink

興味のあるスクリプトでしたので是非導入しようとローカル環境では導入していたのですが今回ようやく本サイトにも導入しました。
貴サイトの導入解説も丁寧に作られているので何の障害もなく導入できました。

今後の開発も楽しみにしておりますのでよろしくお願いします。

Comment Form
Remember personal info
wink warai5 warai1 vsign tenntenn poka namida2 memomemo ikari2 gu byebye banzai asease ase8

Trackback+Pingback:0

TrackBack URL for this entry
http://dxcode.com/archives/2007/121993.php/trackback
Listed below are links to weblogs that reference
Layout Changer と Fontsize Switcherを導入 from おじさんの備忘録-番外編-

Home > Customize | WordPress > Layout Changer と Fontsize Switcherを導入

Recent Entry
タグ
Category
Archive
Feeds
META

Page Top