jQueryフォントサイズの変更

フォントサイズを変更するのを作ってみました。

プログの場合、タグリストで分類すると、同じクラス属性がでてくるのでこの場合便利な(idで振分けるのも可能ですが)汎用性考えて、

index(subject)

※ jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す。インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る。

を使ってクリックされた項目内だけのプログ内容の文字サイズを変更するようしました。

$("h2.date-header").append("<span>[小]</span><span>[並]</span><span>[大]</span><span class=\"font\" style=’_display:none’></span><div>文字サイズ</div>"); //h2タグのクラスdate-header内にhtmlを追加

var fontchange = $("h2.date-header span").not(“span.font”);
$(fontchange).mouseover(function(){$(this).css("color","red")}).mouseout(function(){$(this).css("color","")}); //必要なspanタグだけaタグのようにリンクぽく振舞わせ・・・

$(fontchange).click(function(){
varFontSize=13; //初期のフォントサイズ
var index = Math.ceil(($(fontchange).index(this)+1)/3)-1; //インデックス番号の取り出し0から始まるので1足して3で割って切捨ててから1戻してます。
if(!index){index = 0;}

var Base = $("div.post-body:eq("+ index + ")");
var BaseFontsize = $(Base).css("font-size").replace("px", "");

if ($(this).is(":contains(‘小’)")){FontSize = BaseFontsize*0.9;} //小がクリックされると・・
else if($(this).is(":contains(‘大’)")){FontSize = BaseFontsize*1.1;}
FontSize = Math.round(FontSize);
$(Base).css(‘font-size’,FontSize+"px");
$("div.textarea",Base).css(‘font-size’,FontSize+"px");
$("span.font:eq("+ index + ")").text(FontSize+"px").show("slow").fadeOut("2000");
});

css は
.date-header span{float:right;cursor:pointer;color:#009;font:12px MS UI Gothic;}
.date-header div{float:right;color:#009;font:12px Arial;}

こんな感じです。

先頭の文字を大きくする

先日タグリストを造る時に、先頭の文字を強調するよう
BLOGGERからの移行完了にphpで取り出しを書いたが、

css で 

a:first-letter{font-size:125%;}

なんて簡単なのもあるが、思うようにできず、サクッとjqueryでやってみた。

$("a[rel=’tag’]").each(function() {#a タグに rel=tagをつけた場合で、$("a")ならリンクタグ全て、$("a.inpact")ならclass=inpactのあるaタグという意味です。
var first_letter = $(this).text().substr(0,1);
var after_letter = $(this).text().substr(1,$(this).text().length);

// ランダムカラーの場合 右サイドのタグリスト
//var color = Math.round(0xffffff * Math.random());
//$(this).html("<b style=’color:rgb(" + (color >> 16) + "," + (color >> 8 & 255) + "," + (color & 255)+");font:bold 120%/1.2em \"HG丸ゴシックM-PRO\"’>"+first_letter+"</b>"+after_letter);

//英数字と日本語を分ける場合。
if(first_letter.search(/\w/i) != -1){
$(this).html("<b style=’color:#c09;font:130%/1em \"Comic Sans MS\",\"Times New Roman\"’>"+first_letter+"</b>"+after_letter);
}else{
$(this).html("<b style=’color:#60f;font:bold 125%/1em \"HG丸ゴシックM-PRO\"’>"+first_letter+"</b>"+after_letter);
}

});

BLOGGERからの移行完了

どうにか、完成しました。
後は、適当にレイアウト弄うのみです。

いつものようにphpでゴリゴリ書いてあるので、後で見直すは一苦労ですが、とりあえず一通りcheckして 漏れ はないでしょう。

やるとしたら、タグクラウドをアクセス順に文字の大きさや色を変えたりですが、javascriptでやったほうが軽そうな気がして・・・

とりあえず、タグの1文字だけを

$labeltitle="タグネーム";

print "<b>".mb_substr($labeltitle,0,1,"utf-8")."</b>".mb_substr($labeltitle,1,-1,"utf-8").mb_substr($labeltitle,-1,1,"utf-8");

とかで、1文字目は、取れたけど残り全部がわからずこんな風になっています。

まっ自分専用ですので、投稿フォームなんかは、結構手抜きですけど、コメント入れてもらうときには、スパム防止用に、画像認証機能を
KCAPTCHA | freshmeat.net
からDLして使っています。

BLOGGER ftp公開廃止に伴う移行 その3 rssの書式

atom rss2.0 rss1.0は以下の感じで作っています。

if(isset($_GET[‘feed’]) && $_GET[‘feed’]){$xml=$_GET[‘feed’];}

if(isset($xml)){
$rss_title="ヘアサロン店長の独り言♂/奈良県橿原市/アトリエヘアピークス";
$rss_description="奈良県橿原市の美容室AtelierhairPeaksの店長の独り言プログです、ヘアケア、スタイルは勿論、車やプログラムを綴っています。";
$year=date("Y");

if($xml=="rdf"){
print <<<EOF
<?xml version="1.0" encoding="utf-8" ?>
<rdf:RDF xmlns="http://purl.org/rss/1.0/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xml:lang="ja">
<channel rdf:about="$BASE_URL/rdf.xml">
<title>$rss_title</title>
EOF;
}elseif($xml=="rss"){
print <<<EOF
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
<title>$rss_title</title>
<link>$BASE_URL/rss.xml</link>
<description>$rss_description</description>
<language>ja</language>
<copyright>Copyright $year, PeaksDesign</copyright>
EOF;
}elseif($xml=="atom"){
print <<<EOF
<?xml version="1.0" encoding="utf-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ja">
 <title type="text">$rss_title</title>
<subtitle type="text">$rss_description</subtitle>
<link rel="self" type=’application/atom+xml’ href="$BASE_URL/atom.xml"/>
<link rel=’alternate’ type=’text/html’ href=’$BASE_URL/’/>
<author><name>PeaksDesign</name></author>
EOF;
}}

foreach( $bloglogDATA as $key => $value) {list($date,$title,$tag,$url,$text)=split("<>",$value);
$rss_title=$title;
$rss_link="$BASE_URL/$url";
$description ="<![CDATA[<b>$text</b>]]>";
$ctime2 =$date;
$rss_category = ereg_replace(",", "</category><category>", $tag);
$rss_term = "<category term=’" .ereg_replace(",", "’/><category term=’", $tag)."’/>";
if(!$toptime){$toptime =$ctime2;}

if(isset($xml) && $xml =="rdf"){
$items_list .= " <rdf:li rdf:resource=’$rss_link’/>\n";
$item_rdf .="
 <item rdf:about=’$rss_link’>
  <title>$rss_title</title>
   <link>$rss_link</link>
   <description>$description</description>
   <dc:date>$ctime2</dc:date>
 </item>";
}elseif(isset($xml) && $xml =="rss"){
$item_rss2 .="
 <item>
  <title>$rss_title</title>
   <description>$description</description>
   <link>$rss_link</link>
   <guid>$rss_link</guid>
   <category>$rss_category</category>
   <pubDate>$ctime2</pubDate>
 </item>";
}elseif(isset($xml) && $xml =="atom"){
$item_atom .="
 <entry>
  <title>$rss_title</title>
    <link rel=’alternate’ type=’text/html’ href=’$rss_link’ title=’$rss_title’/>
  <content type=’html’>$description</content>
  <published>$ctime2</published>
  <updated>$ctime2</updated>
  <author><name>PeaksDesign</name><uri>https://www.peaks.jp/</uri></author>
  $rss_term
  <id>$rss_link</id>
 </entry>";
}
}

if(isset($xml) && $xml =="rdf"){
print"
<link>$rss_link</link>
<description>$rss_description</description>
<items>
<rdf:Seq>
$items_list
</rdf:Seq>
</items>
</channel>
$item_rdf
</rdf:RDF>
";
exit;
}elseif(isset($xml) && $xml =="rss"){
print"
<lastBuildDate>$toptime</lastBuildDate>
<generator>PeaksDesign</generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
$item_rss2
</channel>
</rss>
";
exit;
}elseif(isset($xml) && $xml =="atom"){
print"
 <updated>$toptime</updated>
 <id>http://example.com/atom1.xml</id>
$item_atom
</feed>
";
exit;
}

BLOGGER ftp公開廃止に伴う移行 その2 タグリスト

BLOGGER ftp公開廃止に伴う移行 その1の続きというか、タグリストを作るにあたって、大事な事は、BLOGGERの場合、

BLOGGER FTP公開サイトのラベルでの分類方法

に書いてあるとおりbase64_decodeで日本語変換しておかないと
キャシュされているリンクからのアクセスが途切れてしまいます。
例)44OA44Oh44O844K444OY44Ki44O8 → ダメージヘアー

変換書き出し用のsampleは以下の感じです。

<?php
$dir = ‘/var/www/~~/labels/’;#ラベルのパス
if($handle = opendir($dir)){#ディレクトリハンドルを獲得
while(false !== $file = readdir($handle)){#ファイル名獲得
list($filename,$html) = split("\.", $file);#ファイル名と拡張子を分割
if($html!="html"){continue;}
$filename = str_replace("__", "/", $filename);#ファイル名にするため__を/に戻す

if (preg_match("/=([A-F0-9]{2})/",$filename)) {#quoted_printable_decodeでローマ字+日本語に変換
$labellist = quoted_printable_decode ($filename);
}elseif(mb_detect_encoding(base64_decode($filename)) == "UTF-8"){#encodingがUTF-8ならbase64_decodeで日本語変換
$labellist = base64_decode($filename) ;
}else{#ローマ字はそのまま表示
$labellist = $filename ;
}
$ar[$labellist] = "$file";
}
closedir($handle); #ディレクトリハンドルを閉じる
}
foreach( $ar as $key => $val ){$insertlog.="$key<>$val;";print"$key–>$val<br />";}

$pointer=fopen("./labellist.log", "w");#’w’ 書き出しのみでオープンします。ファイルが存在しない場合には、 作成を試みます。
flock($pointer, LOCK_EX);#ファイルをロックします
fputs($pointer, $insertlog);#書込みです
flock($pointer, LOCK_UN);#ロックを解除します
fclose($pointer);#ファイルを閉じます
?>

とかで、変換テーブルを作っておいて、.htaccessで
RewriteRule ^labels/(.*)\.html$ /?labels=$1.html
として、飛ばしてリンク切れを防いだりしています。