「ブログカスタマイズ」のカテゴリー

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

検索結果のページ
他のブログさんを見ていて、検索結果のページが同じブログ内(テンプレート内)に表示されているのに、このブログでは上の画像のように検索結果が専用のページに移動しているのに気付き、ちょっとしたことですが、カスタマイズしてみました。

カスタマイズといってもテンプレートに<!--search_area--><!--/search_area-->を入力するだけ!

続きを表示 »
スポンサーサイト

木のある風景
ブラウザソフト(IE7)で画像を縮小表示した際に、CSSを使って画像を劣化させずに表示する方法。結構いろいろなサイトで紹介されているので知っている人も多いかも。

以下をCSSに追加するだけでIE7で表示した際、キレイな画像で表示できます。バイキュービック法をCSSに指定するということなんだそう。

img.thumb { -ms-interpolation-mode: bicubic; }

続きを表示 »

MT-Cumulus
MT4.2で試してみたかったFlashタグクラウド。「MT-Cumulus」というんですが、ちょっとしたカスタマイズで日本語タグにも対応していました。

まず「MT-Cumulus」の設置はとても簡単、mt-staticとpluginsにダウンロードしたファイルを放り込むだけ!少し戸惑ったのはMTのプラグインの管理画面から「Enable MT-Cumulus for this blog」をチェックしなければブログにFlashが表示しない・・・というだけ。

タグの日本語化ですが下記のサイトを参考させていただいたというかダウンロードさせていただきました。手持ちのtagcloud.swfと入れ替えて使います。

WP-Cumulusの日本語化
http://darts-team.com/dartsblog/archives/360

MT-Cumulus
http://plugins.movabletype.org/mt-cumulus-2/

FC2ブログって標準ではMETAタグ部分で「 <meta name="keywords"・・・」がないですよね、あまり重要性はないんですが一応カスタマイズして追加することができるので試してみました。ここで紹介するのは「トップページ」「個別記事」「カテゴリ」でmeta keywordsを追加する方法です。

続きを表示 »

CSS Library
以前「トップレベルカテゴリーの横型メニューをCSSで作る」で横に並ぶカテゴリーを作ったんですが、今後バナー部分全体を変更するのでメニューのデザインも変えてみたいと思います。参考と利用させてもらったサイトは前回と同じでCSS Libraryです、 Solid Block Menuを使ってMovableTypeの横並びのカテゴリーを作りました。設置後に細かなデザインとレイアウトを変更すれば簡単にメニュー部分を作ることができます。サンプルもあるのでそちら参考にMovableTypeでのメニュー部分を記述してみます。トップレベルのカテゴリーのみの表示です。

続きを表示 »

以前Collect Pluginを利用してMovableTypeサイドバーに「写真付き最近のエントリー 」 の表示方法を紹介しました。サイドバーにCollect Pluginを使って画像を表示する。今回は少し応用で写真のない記事も含めてサイドバーに最近のエントリーを表示させます。

<MTEntries lastn="4">
<MTCollect tags="img">
<MTCollectThis show="0">
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" lastn="1">
<a href="<$MTEntryLink$>"><img src="<$MTCollectedAttr attr="src"$>" alt="<$MTCollectedAttr attr="alt"$>"
width="160" style="margin:5" /><br /><$MTEntryTitle$></a><hr />
</MTCollected>
<MTElse>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
<hr />
</MTElse>
</MTIfCollected>
</MTCollect>
</MTEntries>

通常のタグの使い方に太字の部分を追記しました。画像がなければ記事のタイトルのリンクを表示するというタグを足します。使い方次第でかなり応用が利きそうです。

ちょっと前からこのブログでも利用させてもらってますが、画像の表示に「Litebox 1.0」というJavaScriptを利用しています。「Litebox 1.0」を利用すると同一ウインドウ内に画像をフェード効果で表示させることができます。Movabletypeで適用する方法を紹介していきます。

 まずLiteboxをダウンロードします。
このブログではダウンロードしたファイルを解凍した後、css、images、jsのフォルダをそのままindex.html があるディレクトリにアップロードしましたが、その前に「lightbox.css」「litebox-1.0.js」を少し修正します。

ダウンロードしたファイル「lightbox.css」「litebox-1.0.js」を修正します。

cssフォルダ内の「lightbox.css」をメモ帳などエディターを使って開きます
「lightbox.css」の48行目と53行目と54行目辺りの三箇所のgifファイルを絶対パスに変更します。
(たとえばhttp://www.boomlabo.net/images/prevlabel.gifといった感じに変更)

jsフォルダ内の「litebox-1.0.js」を同じくメモ帳などで開きます
23行目と23行目の二箇所のgifファイルを絶対パスに変更します。

css、images、jsのフォルダをindex.htmlがあるディレクトリにアップロード。

 

Movabletypeテンプレートの修正箇所 <head>~</head>内に以下を記述します。

<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>

bodyの要素にonload 属性を追加します。 太字の部分を追加します。

<body class="○○○-column-○○○" onload="initLightbox()">
続きを表示 »
スポンサード リンク
≪PrevNext≫

nao

Author:nao
オンラインゲームが中心、無料ツールやフラッシュゲームを紹介していきます。

全記事数
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。