金田んち

スマホ表示の読者登録ボタンがどっか行きました。見かけた方はご連絡ください。至急引き取りに伺います。

記事本文のフォントサイズ変更ボタンをつけました

文字サイズ

文字を大きくする 文字を規定のサイズに戻す 文字を小さくする

ブログにフォントサイズを変更するボタンをくっつけたのでやり方を。といってもサイズを記憶するフォントサイズ変更ボタン - hatena chipsほとんどこのサイトのパクリです。

どこが違うかって、糞みたいなデザインセンスしかもってない俺がくっつけたボタンは不細工なものになったくらい・・だと思う。まぁご興味ある方は手順どおりコピペしていくとたぶんサイズ変更ボタンは付けられます。

んで、もしやってみてこんなオシャレなボタン出来たよって方がいたら教えてください。あと、こんなのに詳しい方でお前これ必要ないコードだろとかのアドバイスがあれば教えてください。

1.設定-詳細設定 -headに要素を追加

<script type="text/javascript"><!--
//ユーザー設定項目
var defSize = 100; //規定サイズ
var MinSize = 50; //最小フォントサイズ
var MaxSize = 200;//最大フォントサイズ
var Unit = '%'       //単位
var chWidth = 10;  //増減幅
var days = 30;     //クッキー保存日数

//設定項目終わり

function WriteCookie(key, value, days) {
   var str = key + "=" + escape(value) + ";";
   if (days != 0) {
      var dt = new Date();
      dt.setDate(dt.getDate() + days);
      str += "expires=" + dt.toGMTString() + ";";
   }
   document.cookie = str;
}
function ReadCookie(key) {
   var sCookie = document.cookie;
   var aData = sCookie.split(";");
   var oExp = new RegExp(" ", "g");
   key = key.replace(oExp, "");

   var i = 0;
   while (aData[i]) {
      var aWord = aData[i].split("=");
      aWord[0] = aWord[0].replace(oExp, "");
      if (key == aWord[0]) return unescape(aWord[1]);
      if (++i >= aData.length) break;
   }
   return "";
}
function DeleteCookie(key)
{
   var dt = new Date();
   var str = key + "=;expires=" + dt.toGMTString();
   document.cookie = str;
}

var x = defSize;
function SetFontSize(v)  {
   if (v > MinSize && v < MaxSize) {
      document.body.style.fontSize = v + Unit;
      if (defSize == v)
         DeleteCookie('FontSize');
      else
         WriteCookie('FontSize', v, days);
      x = v;
   }
}
function FontSizeChange(cv) {
   if (cv == 0)
      SetFontSize(defSize);
   else
      SetFontSize(x + cv);
}
function ReadFontSize() {
   fs = ReadCookie('FontSize')
   if (fs != '') SetFontSize(fs);
}

//--></script>

コピペしてください。何を記述してあるかは全然分かりませんが動きます。設定項目の部分は好きにいじっても壊れませんでした。このブログでは中を100%、大小をクリクック(タップ)するごとに10%ずつサイズが変わるよう設定してます。そして、最大が200%、最小が50%。試しに記事タイトル下にある大ボタンを連打してみてください。それが200%、中を一度クリックすると100%、小を連打したそのサイズが50%です。

 

2.デザインカスタマイズ-ヘッダ 

<script type="text/javascript">
ReadFontSize();
</script>
 

コピペします。またもや何を記述されてるのかは不明です。

 

3.デザインカスタマイズ-記事-記事上 

<p>文字サイズ</p>

 <p><a onclick="FontSizeChange(chWidth);" href="javascript:void(0);"><img src=" http://cdn-ak.f.st-hatena.com/images/fotolife/h/henohenoktmk/20140328/20140328141208.jpg " alt="文字を大きくする" width="50" height="50" border="0" /></a> <a onclick="FontSizeChange(0)" href="javascript:void(0);"><img src=" http://cdn-ak.f.st-hatena.com/images/fotolife/h/henohenoktmk/20140328/20140328141208.jpg" alt="文字を規定のサイズに戻す" width="40" height="40" border="0" /></a> <a onclick="FontSizeChange(-chWidth);" href="javascript:void(0);"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/henohenoktmk/20140328/20140328141208.jpg" width="30" height="30" alt="文字を小さくする" border="0" /></a></p>

青字部分は使いたい画像ファイルに置き換えてください。赤字部分は画像の大きさです。お好みの大きさで表示させちゃってください。ちなみにこのままコピペでも使えます。

 

4.デザインカスタマイズ-デザインCSS 

.entry-content  {
font-size : 100%;

 これを加えないとPC表示ではエントリータイトルだけがでっかくなっちゃったってことになります。小さくもなります。ただ肝心の本文のところが反応しないのでこいつをコピペしてください。

 

以上やり方終わり。

 

ちなみにデザインセンスが糞な俺が作ったさっきの画像ファイルをそのまま使うとこうなります。

文字サイズ

文字を大きくする 文字を規定のサイズに戻す 文字を小さくする