VIVABlog

各ジャンル多数のイラストを使用して、それなりに見えるロゴを即席で作ることが出来るロゴメーカーサービス。

LogoMakerの使い方

使用したいアイコンのジャンルを選択します。
後々変更が可能なのでなんでもOK。

Continue reading…

Googleロゴからコカコーラ、スターウォーズやスパイダーマンなど有名どころのフォントをつかってそれ風のロゴを作成出来るサービス。

google風

一応スターウォーズ

古いけどグーニーズ

映画紹介サイトとかにいいかもね。

[ Logo Maker : Search Engine Maker ]

WEB2.0系というか、グラデーション文字と水面に反射したような例のロゴがジェネレーターですぐに作れるサービスです。以前あったWEB2.0ロゴジェネレーターWeb2.0 Logo Creatorは消滅していたので新しいものを探しました。

Logo Maker : Web 2.0 Stylr
WEB2.0スタイルのロゴメーカー。
グラデーションの始まりと終わりの色指定と、フォント指定、画像ファイルを読み込んでロゴと組み合わせることが出来る。
出力されるロゴが小さい。

web2logo
Flash版のWeb2.0 Logo Creatorっぽい感じのサイト。

下のフォーム部分のタグを改変すると画面に反映されます。
画像出力はされないので自分でキャプチャーする必要あり。

Web2.0 – Logo Creatr
よくある3タイプから選択できます。

一枚の画像とCSSでフォームボタンをWiiブラウザのボタンっぽくする方法。
IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9に対応していて、タグもシンプル。

1. 画像とCSSをダウンロード
2. 画像をアップロードして、round-button.cssのbackground:url(btn0.png) 100% 0 no-repeat;部分を自サイト用に変更。現在使用しているCSSにコピペするか、round-button.cssをアップロードして、ヘッダー内にリンクを貼る。
3. formのinputボタンを以下に書き換え

   <span class="button"><button type="submit" name="foo" value="yout text">yout text</button></span>

[Simple Round CSS Links ( Wii Buttons )]

マイクロソフト謹製のブログパーツ。
Windows Liveサーチと連動したサービスで、検索語を覚えたら小鳥が歌ったりする遊びの要素と、ブログへの誘導も行える一石二鳥なブログパーツです。

• ブログのURLとあいことばを設定して、生成されたコードをキャロルを呼びたいブログエントリー毎に埋め込みます。
• 初めての場合は、木の矢印をクリックして、設定したあいことばを入力。するとキャロルが飛んできます。
• 「キャロルに言葉を教える」で検索すると、同じワードで検索された他のブログのキャロルが飛んできます。言葉をいろいろ教えていって育つと、合唱したりするらしい。

自分のキャロルをクリックしたら、フクロウが出てきてなんかの動画が・・・

[ Carol キャロル ]

サンエックスの人気キャラ「リラックマ」のブログパーツ。

ドル箱だけあって、有料会員コースやアイテムショップでアバター風カスタマイズが可能になっていますが、そのままでも十分かわいいです。

無料登録後、ブログ設定から自分のブログURLやRSSを指定することでリラックマがそれなりにしゃべります。

[ サンエックスブログキャラ ]

それぞれ、EPS,SVGなどベクター画像形式で配布されている（PNG,JPGもアリ）ので、そのまま使わなくてもベースにしていろいろカスタマイズできる画像素材です。

Web2.0風でよくあるギザギザボタン。

MacのAqua風ボタン素材。

[ Free Vector Downloads ]

< >をそのまま入力するとコードとして認識されるので、 < を &lt; に、> を &gt; にそれぞれ書き換えなければいけません。
基本的にhtmlコードなどをブログなどに記載する場合は、<pre>タグを使うようになっています。

<pre>タグタグを使う場合

<pre><code>
ソースコード
</code><pre>

という風に、<pre>タグで<code>タグを囲って使います。
ただ、このままだと折り返さないコードの場合は、横幅がスゴイことになってしまうのでcssでちゃんと折り返されるようにします。

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

WordPressプラグインを使用してコードを表示する場合

• PHP Hilight Stringインストール方法 | Download
• 使い方は簡単で、コードを専用のタグで囲うだけ。

同梱されているcssはテンプレートcssに入れればOK。
このcssを編集すればフォントの大きさやボーターカラーの変更ができます。

/*
ハイライトする色の指定
*/
.hl-surround{
    -moz-border-radius: 5px;
    background-color: #F9FBFC;
    border: 1px solid #C3CED9;
    padding: 8px;
    margin-bottom: 5px;
    width: 500px;
    overflow: auto;
    text-align: left;
}

.hl-surround, .hl-surround pre, .hl-surround span{
	font: normal 10pt 'Courier New', monospace;
}

.hl-default{
	color: Black;
}
.hl-code{
	color: Gray;
}
.hl-brackets{
	color: Olive;
}
.hl-comment{
	color: #ffa500;
}
.hl-quotes{
	color: #8b0000;
}
.hl-string{
	color: Red;
}
.hl-identifier{
	color: Blue;
}
.hl-builtin{
	color: Teal;
}
.hl-reserved{
	color: Green;
}
.hl-inlinedoc{
	color: Blue;
}
.hl-var{
	color: #00008b;
}
.hl-url{
	color: Blue;
}
.hl-special{
	color: Navy;
}
.hl-number{
	color: Maroon;
}
.hl-inlinetags{
	color: Blue;
}
.hl-main{
	background-color: transparent;
}

.hl-main pre{
	margin: 0; padding: 0;
}

MovableType用プラグインを使用する場合

エントリー投稿画面に追加される「&」ボタンを押すだけで、選択した文字列を実体参照化してくれる便利なプラグイン。

[MovableType用EntityRefButtonプラグイン v0.0.5 ]