SQLの窓

2012年05月25日


Eclipse から SIM フリーの実機( Rstream A1 : Android 2.1 ) を使ってアプリのテスト

関連する記事

Android エミュレータ単独利用
Eclipse から Android エミュレータを使う

関連するページ

スマートフォンをインターネットにつなぐ方法 | BUFFALO バッファロー

Rstream A1(Android 2.1) は、ソフマップで売られている 7,980円の SIM フリーの Android 機です。
ドライバのインストール PC からアクセスする為に、なんらかのドライバが必要のようです。詳細な裏付けを取ったわけではありませんが、経験則的にそのようです。USB で接続すると、エクスプローラからアクセスできるので、以下のようにして setup.exe を起動します 実行すると、以下のようなダイアログが表示されて、何故かプログレス表示が止まってしまいます。この後『次』を選ぶとまた同様のダイアログが表示されて、最後にはツールのダイアログが表示されますが、これは閉じて下さい。( 次回からは、Setup.exe を実行するとこのツールダイアログが出ますが、その時に PC から認識されます / 内部から何か呼び出しているようです ) たぶんこの過程のどこかでドライバがインストールされたものと思われます。 minSdkVersion の設定 AndroidManifest.xml を選択して、Manifest タブから設定します Android 2.1 は、API Version 7 なので、ここがこれより大きい数字になっていると転送されません。この値の初期値は、プロジェクトを作成した時のターゲットバージョンなので、他のプロジェクトを転用した時に注意が必要です。( ターゲットのバージョンは、プロジェクトのプロバティから変更できます ) デバッグ可能にする Application タブから設定して下さい ( 画像の位置とは限らないので注意して下さい ) デバイスを選択して実行する デバイス側の設定 アプリを自由に登録できるように、提供元不明のアプリにチェックを入れます。さらに開発メニューから USB デハッグをチェックして、充電中に画面をスリープにしないようにしておけば、USB をつないでいる間は画面が消えなくなります。USB 接続中は左側二つの設定で良いですが、カメラ等で USB を外してテストする場合の為、バックライトを常時点灯にしておきます( そうするとトップ画面以外では自動的にはスリープしないと思います )
実行結果
package lightbox.test;


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.TextView;
import android.view.*;

public class LightActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1);
        for( int i = 0; i < 10; i++ ) {
            adapter.add( ((Integer)(i+1)).toString() );
        }
        ListView listView = new ListView(this);
        this.addContentView(
        		listView, 
        		new ViewGroup.LayoutParams (
        				ViewGroup.LayoutParams.FILL_PARENT,
        				ViewGroup.LayoutParams.FILL_PARENT
        		)
        );
        listView.setAdapter(adapter);
        
    }
}

画面のキャプチャ

デバッグ用のツールとして DDMS が利用できますが、Eclipse から使うと簡単にキャプチャが可能になります。









関連する記事

7,980円の Rstream A1 をソフマップで買っちゃいました



posted by lightbox at 2012-05-25 20:33 | Android | このブログの読者になる | 更新情報をチェックする

2012年05月23日


Windows8 で SkyDrive にアップロードするサンプル


起動後の画面です。サインインを実行してからアップロードボタンをクリックしてアップロードするファイルを選択します



まずはサインイン





サインインが完了したのでメッセージを表示しています。
( ここまでで、▲ リンク先と同じです )



▲ アップードボタンをクリックすると、▼ に画面が切り替わります。





ファイルを選択し終わりましたので、『開く』でアップロードが開始されます。終了メッセージの表示を実装していないので、Debug.writeln の結果で確認します。






ソースコードを見る
posted by lightbox at 2012-05-23 10:59 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年05月21日


Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行

Live SDK のダウンロードとインストール

まず、『Live SDK for Windows and Windows Phone』をダウンロードしてインストールします。



アプリを登録

Windows8(コンシューマ) + VisualStudio 11 でプロジェクトを作成してから、Live Connect のアプリ管理 (英語) サイトで、Metro スタイル アプリをマイクロソフトのクラウド サービスにアクセスするように構成します。( アプリケーション名を登録して、ID を取得する ) 

以下の画像の一番下の部分(2つ)に、アプリケーション名( ここでは SkyApp )と、サンプル通りの Publisher として CN=lightbox と入力しました。



この後でパッケージ名が表示されるので、それを Visual Studio のほうにセットします。この内容は記録しなくても、以下のページで確認できます。

▼ 登録後の状態です。



Visual Studio より参照設定

SDK を使用するように構成します



実際の実行の画面遷移





Windows Live から見たアプリの管理画面

プロフィールから『管理』へ移動するとアプリの一覧が表示されて個別に管理できます。最初のほうの詳細情報はアプリを作った開発者が利用する画面で、こちらは使用するユーザが管理する画面です( Twitter と同じです )



ソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <title>SkyApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <script src="///LiveSDKHTML/js/wl.js"></script>

    <!-- SkyApp references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>JavaScript Code Sample</h1>
    <div id="signin"></div>
    <label id="info"></label>
    <script>
        WL.Event.subscribe("auth.login", onLogin);
        WL.init({
            scope: ["wl.signin", "wl.basic"]
        });
        WL.ui({
            name: "signin",
            element: "signin"
        });
        function onLogin() {
            WL.api({
                path: "me",
                method: "GET"
            }).then(
                function (response) {
                    document.getElementById("info").innerText =
                        "Hello, " + response.first_name + " " + response.last_name + "!";
                },
                function (responseFailed) {
                    document.getElementById("info").innerText =
                        "Error calling API: " + responseFailed.error.message;
                }
            );
        }
    </script>
</body>
</html>

※ こちらにあったソースでテストしました

関連する Microsoft のページ

Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携



posted by lightbox at 2012-05-21 16:09 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです

注意するのは、プロジェクトのプロパティの『機能』のタブで、カメラとマイクロフォンを使えるようにチェックするところです。

サンプルコードをそのままで、簡単に写真撮影やビデオ撮影が可能ですが、ただそれだけでどう使えるかは良く解りません。古い WEBカメラを使ったのでただプロジェクタで表示しただけです。もし、WEB カメラが接写できるならリアルタイムでプロジェクタに手元のモバイル(iPhone や Android)の状態を表示できるので試してみました。
    function scenario1CapturePhoto() {
        try {
            var dialog = new Windows.Media.Capture.CameraCaptureUI();
            var aspectRatio = { width: 16, height: 9 };
            dialog.photoSettings.croppedAspectRatio = aspectRatio;
            dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) {
            }, function (err) {
            });
        } catch (err) {
        }
    }

これだけで、画面いっぱいにカメラ表示になります。どうもダイアログらしいのですが、Microsoft のサンプルには、ビデオのほうのサンプルもありますが、基本的には同じようなもので、.done で画像化されたファイルを受け取って、対象要素にセットするというものです。( img や video )

このへんは、非常に HTML5 が都合よくなっています。ただ、このアプリのテストは、Three.js で 3D モデルを表示したり、カメラを使ったりというメニュー処理になっているのですが、そちらの処理を実行してからカメラを実行して戻って来ると、メニューリンクがクリックできなくなるという不具合が出ています。Windows Metro で画面切り替えして戻って来るとクリックできるので、OS の問題か、何か復帰処理がいるかどちらかですが、Microsoft のサンプルでは特になにもしていませんでした。


posted by lightbox at 2012-05-21 15:14 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年05月19日


Eclipse から Android エミュレータを使う

Android エミュレータ単独利用 ( SDK はインストール済です )

まず、日本語された Eclipse を使いたい場合は Pleiades を使う手もありますが、まずは検証の為、素の Eclipse である eclipse-java-indigo-SR1-win32.zip を使います。( Java の SDK はインストール済という前提です )
※ eclipse-java-indigo-SR2-win32.zip が最新のようです。

Eclipse 使う時のセオリーとして、できるだけ短いパスにする為、c:\ にダウンロードして eclipse.zip にリネームして解凍します。解凍すると中に再び eclipse フォルダができてしまうので、中身をすべて c:\eclipse に移動します。

起動して最初に表示されるワークスペースはデフォルトのフォルダのままで、Eclipse が表示されたら、Welcome タブは閉じます。

『HELP』 メニューから Install New Software を選択すると以下のダイアログの、インストール対象が表示されていない状態のものが表示されます



Work with に、 https://dl-ssl.google.com/android/eclipse/ を入力 して Add ボタンをクリック。



そのまま『OK』



続けると、確認等の後インストールが始まって以下のようなダイアログが出るかもしれませんが、そのまま OK



完了すると以下が表示されるので OK すると、Eclipse がリスタートしてワークスペースの確認になるのでそのまま継続します。



Eclipse が開始されると、SDK の場所の確認になります。
(SDK がインストールされていない場合は、上のラジオボタンでインストールが可能のようです。)
※ Window メニューの preference の Android の項目で、SDK の場所は変更できます



プロジェクト作成

File メニューの New => Other から Android Project を選択します



プロジェクト名を決定します( アプリの名前 )



対象とする OS のバージョンを選択します。



バッケージ名を正しく決定します



実行します。
( エミュレータが起動されていない場合は自動的に起動されます )



実行結果です



アプリケーションが登録されています


package lightbox.test;

import android.app.Activity;
import android.os.Bundle;

public class MyAndroidActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}
リソースの編集画面です



テキストを変更して、再実行すると自動的にエミュレータに転送されます( エミュレータは実行したままです )



関連する記事

Android エミュレータで、Web カメラを使って撮影して画像を取り出す。

▼ 試した実行オプションです
-XX:MaxPermSize=256m
-Xss2m
-Xms256m
-Xmx1024m
-startup
plugins/org.eclipse.equinox.launcher_1.2.0.v20110502.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.100.v20110502
-product
org.eclipse.epp.package.java.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-vmargs
-XX:MaxPermSize=256m
-Xss2m
-Xms256m
-Xmx1024m
-Dosgi.requiredJavaVersion=1.5



posted by lightbox at 2012-05-19 21:32 | Android | このブログの読者になる | 更新情報をチェックする

Android エミュレータで、Web カメラを使って撮影して画像を取り出す。

この記事は古い記事で、最新の情報とはかなり異なっている可能性が高いです。( 当時から、カメラデバイスによってうまくいったりいかなかったり、PC によっても違ったりと環境の裏付けがなかなか取りにくい内容でした。)


2012/11/26 今日実行してみると、-webcam という引数が無いと言われます(当時よりSDKは更新しています)。-webcam-list はありますが、自宅環境ではエラーになるので、ものによって動かない可能性は十分にあります。おそらく動く環境ならば、カメラ指定は必要なくなっているようです。

エミュレータのインストールは Android エミュレータ単独利用 です。

バージョンは、4.0.3 で動作確認しました。( 4.0 以降で動作するそうですが、4.0 は未確認です )



4.0.3 用の仮想 PC を作成して、emulator -avd Android403 -webcam name=webcam0 で起動します。emulator -avd Android403 -webcam-list で対象 device の名前を確認できます。

List of web cameras connected to the computer:Camera 'webcam0' is connected to device 'AndroidEmulatorVC0' on channel 0 using pixel format 'BGR4'

ハードの設定名の一覧は、"C:\Users\ユーザ\.android\avd\Android403.avd\hardware-qemu.ini" にあります。


( 鏡に映ったように逆になっていますが、画像は正しくなっており、カメラによって違うようです )

上の画像はエミュレータ全体ですが、以下は adb.exe で取り出したものです。
( platform-tools\adb.exe )



adb shell でプロンプトが表示されるので、linux のつもりで画像の場所を ls で確認しました。exit で adb を終了させて、以下のコマンドで取り出します。

adb pull /sdcard/DCIM/Camera/IMG_20120519_052443.jpg
( IMG_20120519_052443.jpg は、テスト環境での画像名です )

※ Webカメラは、ヤマダで 980円で買った 『BUFFALO  BSW20K06H USB PC Camera』です。
iBUFFALO 【USBに挿すだけ簡単】 Cmos200万画素 UVC対応 ヘッドセット付 シルバー BSW20K06HSV





posted by lightbox at 2012-05-19 15:18 | Android | このブログの読者になる | 更新情報をチェックする

Android エミュレータ単独利用

この記事は古い記事で、最新の情報とはかなり異なっている可能性が高いです。( 2.3.3でのテスト内容となっています )

Eclipse に登録して利用するとアプリが作成できますが、とりあえず単独で。

http://developer.android.com/sdk/index.html から android-sdk_r18-windows.zip を C:\ にダウンロードして、android.zip にリネームして解凍します。

android-sdk-windows というフォルダが中に作成されて、さらにその中にすべてが入っています。その中の SDK Manager.exe を起動して、OS のバージョンを選択して利用できるようにします。ここでは、2.3.3 を使用しています。( Google Web Driver は必要そうなので追加しましたが、デフォルトではチェックされていません )

※ 途中、もしログインを求めらたらすべてキャンセルします。



終了すると、以下のようなダイアログが出ます。もう一度使う場合は、いったん終了して下さい、というような意味だと思います



次に、AVD Manager.exe を起動して、仮想PC を作成します。



『new』から作成します



C:\android\android-sdk-windows\tools に移動してコマンドプロンプトを開きます( Windows7 なら フォルダを選択して SHIFT キーを押しながら右クリックして、『コマンドウインドウをここで開く』)

emulator -avd Android233

と実行すると、エミュレータが起動します。



向きを変えるのは、CTRL+F11 か CTRL+F12 です。

終了は『閉じる』ボタンから。


SDK 更新時のログです
posted by lightbox at 2012-05-19 10:34 | Android | このブログの読者になる | 更新情報をチェックする

2012年05月18日


CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

Google Chrome で背景を合わせたら、他のブラウザでは拡大率が同じでもかなり結果が違いました。透過の適用具合も実際は違う結果になっています。
div

<style>
#css3_target2 {
	background: no-repeat url(https://lh5.googleusercontent.com/-r1QTJQeGzSo/T6jFAQ-P7LI/AAAAAAAAGEE/-L2qcPOCkbw/s470/win8_three.png);
}
#css3_target2 * {
	zoom: 0.97;

	background: rgba(180, 180, 144, 0.1);

	border:1px solid #000;
	color: #000;
	border-radius: 6px;
	-webkit-box-shadow: 0px 2px 2px 0px #000000;
	box-shadow: 0px 2px 2px 0px #000000;
            
</style>
<div id="css3_target2">
<table><tr><td>
<select>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td>
<div style='width:100px;height:100px;'>div</div>
</td>
<td>
<button>ボタン</button>
</td>
<td>
<textarea style="height:80px;">テキストエリア</textarea>
</td>
<td>
<input type="text" value="入力" style='width:100px;' />
</td>
</tr>
<tr>
<td>
<select size=5>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td style='padding:10px;'>
<input type="range" style='width:80px;'/>
</td>
<td colspan="2">
<input type="file" />
</td>
<td>
<input type="date" style='width:100px;' />
</td>
</tr>
</table>
</div>
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Opera 11.64



Safari(Windows) 5.1.5



関連する記事

ブラウザ別の角丸とグラデーションの適用状態の比較画像
CSS3 と HTML5 で実装具合の表示テスト

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator



posted by lightbox at 2012-05-18 10:46 | CSS3 | このブログの読者になる | 更新情報をチェックする

CSS3 と HTML5 で実装具合の表示テスト


div

<style>
#css3_target * {
	border:1px solid #000;
	color: #000;
	border-radius: 6px;
	background: -moz-linear-gradient(top, #888, #aaa);
	background: -webkit-linear-gradient(top, #888, #aaa);
	background: -o-linear-gradient(top, #888, #aaa);
	background: -ms-linear-gradient:(top, #888, #aaa);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#888888, endColorstr=#aaaaaa)";
	-webkit-box-shadow: 0px 2px 2px 0px #000000;
	box-shadow: 0px 2px 2px 0px #000000;

}
</style>
<div id="css3_target">
<table><tr><td>
<select>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td>
<div style='width:100px;height:100px;'>div</div>
</td>
<td>
<button>ボタン</button>
</td>
<td>
<textarea style="height:80px;">テキストエリア</textarea>
</td>
<td>
<input type="text" value="入力" style='width:100px;' />
</td>
</tr>
<tr>
<td>
<select size=5>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td style='padding:10px;'>
<input type="range" style='width:80px;'/>
</td>
<td colspan="2">
<input type="file" />
</td>
<td>
<input type="date" style='width:100px;' />
</td>
</tr>
</table>
</div>

入力コントロールへの CSS の適用の程度と、HTML5 の要素を幾つか並べてみました。type=range と type=date はとても使いたいコントロールですが、まだまだ実装の程度は低いようです。

※ Firefox のリストボックスは少し異様です
※ IE だけ TD を無視するように見えますが、filter のせいでうまくいってないようです。
※ ここでは、box-shadow を追加しています。
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Opera 11.64



Safari(Windows) 5.1.5



iPhone



関連する記事

ブラウザ別の角丸とグラデーションの適用状態の比較画像
CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator


posted by lightbox at 2012-05-18 03:10 | CSS3 | このブログの読者になる | 更新情報をチェックする

2012年05月17日


ブラウザ別の角丸とグラデーションの適用状態の比較画像


IFRAME 内に実装したツールですが、どうせなら CSS3 を使って見栄えを簡単に良くしようと思って設定したのですが、検証できるブラウザの見栄えをとりあえず全部チェックしてみました。

角丸 に対しては、ブラウザ依存では無く border-radius: 10px; とだけ指定していますが、一応どのブラウザでも認識しています。ただ、Opera は 入力コントロールは対象では無いようです。Opera Next でも同じです。

当然ですが、IE8 は適用されません。グラデーションは IE4 の時からあるフィルタの IE8 用の記法を使っています。IE9 もその記法が適用されていますが、IE10 は他のブラウザと同様の記法ができるはずです。

※ グラデーションは、ブラウザ依存の記法でないと適用されませんでした。
※ テキストエリアには、resize:none; を指定しています
※ IE のフィルタの色指定は、6ケタで書かないと正しく色が設定されません
※ IE のテキストエリアのスクロールバーの非表示は overflow: auto;
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Safari(Windows) 5.1.5



Opera 11.64



IE8



iPhone



localStorage は、iPhone でも動作しています。
input,textarea {  
	border-radius: 6px;
}
.btn {  
	background: -moz-linear-gradient(top, #aaa, #eee);
	background: -webkit-linear-gradient(top, #aaa, #eee);
	background: -o-linear-gradient(top, #aaa, #eee);
	background: -ms-linear-gradient:(top, #aaa, #eee );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#aaaaaa, endColorstr=#eeeeee)";
}

関連する記事

CSS3 と HTML5 で実装具合の表示テスト
CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator


posted by lightbox at 2012-05-17 22:16 | CSS3 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり