2012年2月29日水曜日

Freeway セル内に配置した画像の余白を消す

セル内に画像を取り込む方法を紹介しましたが、なぜか画像の下に余白が出来てしまいます。
画像サイズを調整する事で無くそうと試みたのですが、セル自体の大きさも連動して変わる為無くせません。さほど気にする事は無いのですが、性格上気持ち悪いので無くす方法を調べてみました。

1.このように下端に余白が出来てしまいます。画像サイズの調整では無くなりません。

2.そこで、画像を選択し、インスペクタがら配置を上に変更します。

3.無事に余白が消えました。



2012年2月28日火曜日

Freeway カスタムテンプレート

Freewayでは最初からオシャレなサイトが作れるように何種類かのテンプレートが用意されていますが、最初からオリジナルサイトを作りたい場合があります。

新規ページ作成画面で、カスタムボタンを選択すると......

HTMLの種類や、ページサイズ等をお好みに調整できます。



2012年2月27日月曜日

Blogger 何人アクセスしているかリアルタイムでわかるカウンターを設置


Blogger編です。

1.まずはカウンターを配布しているサイトに行きます。

2.お好みのカウンターを選び、コードをコピーします。

3.bloggerのデザイン>レイアウト>ガジェットを追加よりHTML/JavaScriptを選択し、コードをペーストします。

4.以上で簡単に設置する事が出来ました。



Freeway リアルタイムアクセスカウンターを設置する

1.まずはカウンターを配布しているサイトに行きます。
Who's.amung.us

2.お好みのカウンターを選び、コードをコピーします。

3.Freewayで挿入>マークアップアイテムでコードをペーストします。

4.マークアップアイテムのサイズを整えて完成です。
5.こんな感じで表示されます。







Freeway googleにサイトを登録する

サイトをアップロードしても、検索されなければアクセスは増えません。
検索されるには、検索ロボットに巡回してもらって、サイトのデータをキャッシュしてもらう必要があります。
googleにおいて、サイトのURLを登録しておく事で優先的に巡回されるようになります。
登録手順は、次の通りです。

1.自分のサイトのURLをコピーしておく。
2.登録ページへ行き、URLを登録する
3.セキュリティー用に画像の文字を入力し、送信ボタンを入力する。

4.登録申請が問題無くすめば、『your request has been received and will be processed shortly』と表示されます。(あなたの請願書は受領されて、まもなく処理されます)


Freeway テーブルのパラメーター

テーブルを作成するときに出るパラメーターを調べてみました。
数値を変える事で、下記のように変化します。

セルの余白が0の時と10の時の違いがよくわかりませんね。
セルに色を付け、文字を入力してみると違いがよくわかります。
セル内の文字がオフセットされているのが分かりますね。
次に枠&セルの色付けです。枠の色付けは、テーブルアイテムを選択して色を指定します。
セルの色づけは、セルを選択して色指定します。
プレビューを見てみると、指定色以外にグレーの枠が表示されています。これは先ほど設定した、『ボーダー』の表示になります。

ボーダーは必要ないので、ボーダーの数値を0に変更してみました。
その他の数値を調整して、お好みのテーブルを作成して下さい。








2012年2月25日土曜日

Freeway テーブルのセルの中に画像を配置する

1.まずテーブルを作成し、セルをダブルクリックして、カーソルを点滅させます。

2.挿入>画像アイテムを選択します。
3.画像BOXがセルの中に作成されます。
4.画像BOXを選択し、ファイル>読み込み>画像を選択します。

5.画像BOXを調整して大きさを整えます。





2012年2月23日木曜日

Freeway コーナーを丸くする

画像や枠の角を丸くすると、何となく優しいイメージになりますよね。
ジョブズも角が丸い四角を好み、RoudRectと名付けて愛用したそうです。
iPhoneもiPadもApple製品はコーナーが丸いデザインになってますよね。

という事で今日のお題は『角を丸める』です。HTMLで作成した四角はデフォルトでは角を丸くする事はできません。しかし、CSS3 Cornerというactionを使えば可能になります。

1.まずは画像ツールで作成した四角の角の丸めから。こちらはインスペクタのシェイプの数値で簡単に丸められます。

2.次はHTMLツールで作成した四角を丸めてみたいと思います。使用するactionはCSS3 Cornersです。事前にインストールしておきましょう。

3.アイテムを選び、アイテム>アクション>CSS3 Cornersを選択し、アクションパレットでRの大きさを指定します。

4. こんな感じで作成されました。





2012年2月22日水曜日

Bloggerの文中にAmazonアフェリエイトを挿入するガジェットを見つけたのだが.....

bloggerの文中にAmazonのアフェリエイトが挿入できるガジェットを見つけました。

これはいいや!と思い、さっそくガジェットをインストールしようとした所........。

なんと日本語に対応していませんでした.......残念。


※こちらで手動で挿入する方法をご紹介しています。

Bloggerの文中にAmazonアフェリエイトを手動で挿入する





Feeeway 文章の余白を設定する

お問い合わせメールを送信頂いた後の、Thank youページを作りました。
htmlツールで作成したのですが、枠と文章が近すぎて不格好です。
そこでオフセットしてもう少し文章を内側に配置します。

1.右側を見ると、枠と文章が接近しすぎて不格好です。


2.インスペクタのパティングの数値でオフセット距離を調整できます。


Freeway 画像の縦横比をそのままに拡大、縮小

小ネタをひとつ。
画像の縦横比をそのままに拡大or縮小するには、画像を選択してShift & Optionを押しながら四隅をドラックします。画面内部をドラックすれば画像がコピーされます。


2012年2月21日火曜日

Freeway テキストフィールドの幅がおかしい

バグなのか仕様なのかは分かりませんが、挿入>テキストフィールドの幅がページ画面とプレビュー画面で違うのに四苦八苦しました。
ページ画面で任意のサイズにしても、プレビュー画面では半分の幅になってしまいます。
これではデザインレイアウトが大きく崩れてしまうので何とか解決したいと思い、色々調べてみた所、Freeze Form Itemというアクションで解決できる事が分かりました。

ページ画面のテキストフィールド

プレビュー画面のテキストフィールド
1.Freeze Form Itemをダウンロード&インストールします。

2.作成したテキストフィールドにFreeze Form Itemを適用します。

3.以上でページ画面とプレビュー画面のテキストフィールドの幅が一致します。
デフォルトでは出来ない縦長のフィールドも作成できたりします。

Freeway Metaタグを設定する


MetaタグとはHTMLファイルで利用できるタグの一つで、スパイダーとよばれる検索エンジンロボットの巡回を制御するためのタグです。多くのロボット型検索エンジンはMetaタグを認識し、検索結果に反映させますが、このMetaタグを悪用したサイトが多くなったこともあり、Metaタグの不適格な利用を検索エンジンはスパム行為と判断するようになりました。そのため昔ほどMetaタグ記述により検索結果の順位を大きく上げることはできなくなりましたが、ロボット型検索エンジンの多くはこのMetaタグの記述を反映している部分もあるため、Metaタグは設定しておきましょう。

1.ページ>Metaタグを開きます。

2.新規ボタンよりMetaタグを作成します。

3.とりあえずMetaタグの内容をまとめてみました。


これ以外にも様々なMetaタグがあるので、自分のサイトに最適なMetaタグを設定してください。
特に、descriptionに関してはスペニット(検索エンジンの検索結果ページで、該当WebページのタイトルとURLとの間に表示される説明文)として利用されるようなので、簡潔に40〜60文字程度にまとめるのが良いようです。長すぎたり、何度も繰り返される重複したdescriptionはペナルティーを受ける可能性があるので注意しましょう。
単語を並べて行くときは(, コンマ)でつなげて行きます。例『Freewa,Mac,iPhone』

※修正 keyword→keywordsとした方が良いようです。


BloggerをGoogleAnalyticsで解析する。

さすがBloggerと GoogleAnalyticsは同じ会社だけあって導入がとても簡単です。

1.まずはGoogleAnalyticsにログインして、解析したいBlogのアカウントを作成します。

2.こんな感じでアカウントを作成します。

3.作成できたらアカウントホームに戻り、先ほど作成したアカウントのプロパティーIDをコピーします。

4.次にBlogに移りまして、右上の『デザイン』ボタンより設定>その他>アナリティクスのウェブプロパティーIDに先ほどコピーしたIDをペーストすれば完了です。

5.アカウントのトラッキングコードのページを開いてみて下さい。ちゃんと設定できていればトラッキングステータスが『データ待機中』になっていると思います。その後24時間ぐらいで『データ受信中』にステータスが変わり解析が始まります。