デザインが固まるまでいろいろとテンプレートを変更して自分に合うようなイメージを固める作業を行う。
テンプレートの変更時にこれまでいろいろと設定したことが白紙に戻ることがある。
その時の注意点をまとめる。
Google Analyticsを設定している場合
Google Analyticsを設定している場合トラッキングコードが抜け落ちることがある。
AdSence等と違い直接HTMLを編集してコードを挿入しなければならないため見落としがちになる。
また、Google Analyticsのレポートは２４時間後に集計がなされるのですぐには分からない。
もし、トラッキングコードが抜けていたら、Google Analyticsへログインして「Analyticsの設定」からプロファイルの表の該当ブログ(サイト)の操作で「編集」をクリック。
「プロファイル設定」ページに移動するので「データを受信しています」の横の「(ステータスの確認？)」をクリック。
「トラッキングコード」ページに移動するのそこでコードを取得し
該当のブログ(サイト)にトラッキングコードを設置する。
その他、テンプレートの変更での注意点は気が付いた時に追記していく。
2010年5月9日日曜日
2010年5月7日金曜日
GIMP portableのインストール
GIMP（ギンプ、GNU Image Manipulaiton Program）
GNU GPL（フリー）の下で配布されているビットマップグラフィック編集・加工ソフトウェア。
仕事上ではPSD（Photoshop）を使用しているが、SOHO、個人で使用するにはちょっと高価なのでGIMPを使ってみる。
仕事場、ネットブック、リビングのPCなどいろいろな環境での使用を考え、USBメモリー上で作動するProtable版にする。
まずはインストール
１．インストールファイルをダウンロードする。
・まずは最新版のインストールファイルをDLする。
(現時点ではGIMPPortable_2.6.8.paf.exe)
http://portableapps.com/apps/graphics_pictures/gimp_portableからGIMPPortable_2.6.8.paf.exeを適当なところにダウンロード。
２．USBメモリーにインストールする。
・DLしたGIMPPortable_2.6.8.paf.exeファイルをダブルックリック。
インストール画面になる。
「インストールコンポーネントを選択：」では、「Additional Languages」にチェックを入れ(77.5MB)
「インストール先フォルダ」にUSBメモリーを選んで(自分の環境ではG:\)
「インストール」ボタンを押す。
４～５分後セットアップ完了のメッセージが出るので「完了F:」を押す。
以上でインストール完了。
２．USBメモリーから起動する。
・USBメモリー内に「GIMP Portable」のフォルダができているのでその中のGIMP Protable.exe
をダプルクリックする。
起動画面になる。
立ちあがる。
GNU GPL（フリー）の下で配布されているビットマップグラフィック編集・加工ソフトウェア。
仕事上ではPSD（Photoshop）を使用しているが、SOHO、個人で使用するにはちょっと高価なのでGIMPを使ってみる。
仕事場、ネットブック、リビングのPCなどいろいろな環境での使用を考え、USBメモリー上で作動するProtable版にする。
まずはインストール
１．インストールファイルをダウンロードする。
・まずは最新版のインストールファイルをDLする。
(現時点ではGIMPPortable_2.6.8.paf.exe)
http://portableapps.com/apps/graphics_pictures/gimp_portableからGIMPPortable_2.6.8.paf.exeを適当なところにダウンロード。
２．USBメモリーにインストールする。
・DLしたGIMPPortable_2.6.8.paf.exeファイルをダブルックリック。
インストール画面になる。
「インストールコンポーネントを選択：」では、「Additional Languages」にチェックを入れ(77.5MB)
「インストール先フォルダ」にUSBメモリーを選んで(自分の環境ではG:\)
「インストール」ボタンを押す。
４～５分後セットアップ完了のメッセージが出るので「完了F:」を押す。
以上でインストール完了。
２．USBメモリーから起動する。
・USBメモリー内に「GIMP Portable」のフォルダができているのでその中のGIMP Protable.exe
使用感は、Photoshopと比べても遜色なしという感じか。
まだ、始めたばかりなのでよく分からないがこれからどんどん使って、問題箇所や小技などを書き込んでいく。
まだ、始めたばかりなのでよく分からないがこれからどんどん使って、問題箇所や小技などを書き込んでいく。
2010年5月5日水曜日
２０１０ゴールデン読書ウィーク
２０１０年のゴールデンウィークは、何処へ行く当ても無く５月２日から穏やかに始まる。
夏を思わせるぐらい暑い日差しが続いたこの４日間。
行楽とは言えない外出の合間に、買い貯めていた本を読んだ。
そのリストと感想は...
一冊目
最近気になる存在の堀江氏。
ブログやtwitterだけではなく、朝生などでよく見かけるようになり、よく行く本屋でこの書籍が目に留まり購入。
twitterかメルマガでの読者からの質問にＱ＆Ａ方式で答える形の内容で、堀江氏の誤解を恐れず自らの意見を率直に答えていておもしろい。
二冊目
続いても堀江氏。
「まな板の…」を読みかけてすぐ気になりアマゾンで購入。
これは実用書であり、Gmail、twitter、iPhoneをフルに駆使して、情報の荒波を乗り越え、戦うんだビジネスマン!!的書籍。
参考になるところ多し。実践でやってみようと思えた。
本は大変読みやすく、章末にまとめまでありとても親切な「教官」であった。
三冊目
ライトに「まんがで読破」シリーズ。
このシリーズは定期的に読んでいる。
世知辛い世の中で、人として忘れてはいけないものを、分かりやすく説く。
でも何故、牛？
順番的には堀江氏の間にまんがが入った順で読んだ。
移動の合間、食後のひととき、途切れ途切れではあったがかなりの時間を読書に当ることができた。
速読ではなく、遅読なのだが、今回は堀江氏の読みやすい様式であったので３作完読で終了。
マネジメントとFREEは、未だ読書中 非常に難しい(^^;
夏を思わせるぐらい暑い日差しが続いたこの４日間。
行楽とは言えない外出の合間に、買い貯めていた本を読んだ。
そのリストと感想は...
一冊目
最近気になる存在の堀江氏。
ブログやtwitterだけではなく、朝生などでよく見かけるようになり、よく行く本屋でこの書籍が目に留まり購入。
twitterかメルマガでの読者からの質問にＱ＆Ａ方式で答える形の内容で、堀江氏の誤解を恐れず自らの意見を率直に答えていておもしろい。
二冊目
続いても堀江氏。
「まな板の…」を読みかけてすぐ気になりアマゾンで購入。
これは実用書であり、Gmail、twitter、iPhoneをフルに駆使して、情報の荒波を乗り越え、戦うんだビジネスマン!!的書籍。
参考になるところ多し。実践でやってみようと思えた。
本は大変読みやすく、章末にまとめまでありとても親切な「教官」であった。
三冊目
ライトに「まんがで読破」シリーズ。
このシリーズは定期的に読んでいる。
世知辛い世の中で、人として忘れてはいけないものを、分かりやすく説く。
でも何故、牛？
順番的には堀江氏の間にまんがが入った順で読んだ。
移動の合間、食後のひととき、途切れ途切れではあったがかなりの時間を読書に当ることができた。
速読ではなく、遅読なのだが、今回は堀江氏の読みやすい様式であったので３作完読で終了。
マネジメントとFREEは、未だ読書中 非常に難しい(^^;
2010年5月2日日曜日
”続きを読む...”の設定 その２
先回の"続きを読む..."の設定で、はすべての記事に続きを読むが表示されるので少し修正。
長くなった記事にのみ"続きを読む..."を表示させるには、アンカーを特定の記事にのみ記述する方法をとり、記事本体のページではそのアンカーを表示させなくする。
設定内容は
１．スタイルシートの追記
「レイアウト」「HTMLの編集」に先回修正を加えた部分を次のように修正。
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
p.readmore {display:none;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
２．投稿記事部分（post）に続きを読むで記事を分割するコードを貼り付けた部分を修正。
この部分が、すべての記事で"続きを読む..."を表示させていた所なので、元のとおりに修正。
このコードを削除する。
<b:if cond='data:blog.pageType != "item"'>
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>"続きを読む…"</a></p>
</b:if>
３．記事を書く
「投稿」「投稿」で記事を書き分割する位置に次のコードを挿入。
<p class = 'readmore ' style='clear: both;'>
<a href='この記事のURL' >"続きを読む…"</a> </p>
<span class="fullpost">
</span>
リンク先のURLは、一度投稿してから再度入れなおすのが確実。
長くなった記事にのみ"続きを読む..."を表示させるには、アンカーを特定の記事にのみ記述する方法をとり、記事本体のページではそのアンカーを表示させなくする。
設定内容は
１．スタイルシートの追記
「レイアウト」「HTMLの編集」に先回修正を加えた部分を次のように修正。
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
p.readmore {display:none;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
２．投稿記事部分（post）に続きを読むで記事を分割するコードを貼り付けた部分を修正。
この部分が、すべての記事で"続きを読む..."を表示させていた所なので、元のとおりに修正。
このコードを削除する。
<b:if cond='data:blog.pageType != "item"'>
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>"続きを読む…"</a></p>
</b:if>
３．記事を書く
「投稿」「投稿」で記事を書き分割する位置に次のコードを挿入。
<p class = 'readmore ' style='clear: both;'>
<a href='この記事のURL' >"続きを読む…"</a> </p>
<span class="fullpost">
</span>
リンク先のURLは、一度投稿してから再度入れなおすのが確実。
2010年5月1日土曜日
”続きを読む...”の設定 その１
投稿数も上がってきたので長くなりすぎたページを、"続きを読む…"を使ってコンパクトにまとめる。
追記機能は標準でもできるようだが、こちらの考え方を参考にさせてもらいカスタマイズする。
設定方法は至って単純で、記事を2分割し続きの部分は記事のページ以外では表示しなくする方法をとる。
手順としては
１．スタイルシートの追記
以下の記述を「レイアウト」「HTMLの編集」でHEADER部分(<head>と</head>の間)に記述する。
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
記事のページではインラインで表示し、それ以外では非表示にする。
２．投稿記事部分（post）に続きを読むで記事を分割するコードを貼り付ける。
同じく「レイアウト」「HTMLの編集」で「ウィジットのテンプレートを展開」にチェックを付け、投稿記事（post）部分に相当する次の記述を探す。
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
そのすぐ下に次のコードを貼り付ける。
<b:if cond='data:blog.pageType != "item"'>
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>"続きを読む…"</a></p>
</b:if>
３．記事を書く
「投稿」「投稿」で記事を書き分割する位置に次のコードを挿入。
<span class="fullpost">
</span>
この間に書かれたものが記事自身のページ以外では非表示になり"続きを読む…"の表示が出るようになる。
毎回のことなので「設定」「フォーマット」から「投稿テンプレート」に先のコードを書き込みテンプレート化しておく。
追記機能は標準でもできるようだが、こちらの考え方を参考にさせてもらいカスタマイズする。
設定方法は至って単純で、記事を2分割し続きの部分は記事のページ以外では表示しなくする方法をとる。
手順としては
１．スタイルシートの追記
以下の記述を「レイアウト」「HTMLの編集」でHEADER部分(<head>と</head>の間)に記述する。
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
記事のページではインラインで表示し、それ以外では非表示にする。
２．投稿記事部分（post）に続きを読むで記事を分割するコードを貼り付ける。
同じく「レイアウト」「HTMLの編集」で「ウィジットのテンプレートを展開」にチェックを付け、投稿記事（post）部分に相当する次の記述を探す。
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
そのすぐ下に次のコードを貼り付ける。
<b:if cond='data:blog.pageType != "item"'>
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>"続きを読む…"</a></p>
</b:if>
３．記事を書く
「投稿」「投稿」で記事を書き分割する位置に次のコードを挿入。
<span class="fullpost">
</span>
この間に書かれたものが記事自身のページ以外では非表示になり"続きを読む…"の表示が出るようになる。
毎回のことなので「設定」「フォーマット」から「投稿テンプレート」に先のコードを書き込みテンプレート化しておく。
2010年4月29日木曜日
bloggerでgoogle mapを使ってみる
このブログ内で、GoogleMapsAPIを使う事ができるのか検証
クッリクしたところの住所を表示します。
問題なく使用することができた。
使用方法は「google maps について」で詳しく記述する
クッリクしたところの住所を表示します。
問題なく使用することができた。
使用方法は「google maps について」で詳しく記述する
2010年4月26日月曜日
レイアウトのカスタマイズ
カスタマイズしてオリジナリティを演出
これまでは、いろいろと内容についてや設定方法をざっと見てきた。
これからは、オリジナリティのあるサイトの構築をすすめる。
商業ベースのサイトにするのであれば、やはり、他との差別化は必須。
自らの個性、商材、店の雰囲気にあったサイトを構築し、統一されたデザインにすることで、ブランディングとして一体感を持つことになる。
カスタマイズの方向性を決め、デザインの統一感をめざす。
レイアウトの重要性
投稿記事の内容がブログの価値を決めることは、当然ではあるがまずは、サイトを訪問してくれるか、目にした後印象に残るかが重要になる。
如何に面白い記事が投稿されていても、読みにくいレイアウトや色ではどうしようもない。
ブランディングを意識しつつ、読みやすく印象的なレイアウトを検討する。
カスタマイズプラン
ベースレイアウト
ベースプランで印象を決定し、徐々に細かくカスタマイズしていく。
これまでは、いろいろと内容についてや設定方法をざっと見てきた。
これからは、オリジナリティのあるサイトの構築をすすめる。
商業ベースのサイトにするのであれば、やはり、他との差別化は必須。
自らの個性、商材、店の雰囲気にあったサイトを構築し、統一されたデザインにすることで、ブランディングとして一体感を持つことになる。
カスタマイズの方向性を決め、デザインの統一感をめざす。
レイアウトの重要性
投稿記事の内容がブログの価値を決めることは、当然ではあるがまずは、サイトを訪問してくれるか、目にした後印象に残るかが重要になる。
如何に面白い記事が投稿されていても、読みにくいレイアウトや色ではどうしようもない。
ブランディングを意識しつつ、読みやすく印象的なレイアウトを検討する。
カスタマイズプラン
ベースレイアウト
- テンプレートはTicTac
- Navberはシルバー
ベースプランで印象を決定し、徐々に細かくカスタマイズしていく。
2010年4月24日土曜日
HTMLの編集の設定
テンプレートによって決められているHTMLを直接編集することによりオリジナルカスタマイズが可能となる。
編集を行う前にはバックアップを取っておく。
設定項目
編集を行う前にはバックアップを取っておく。
設定項目
- テンプレートのバックアップ／復元
- テンプレートの編集
フォントと色の設定
各要素に対して細かくフォントや色を設定することができ、設定内容を実際に見ながら確認できる。
テンプレートによって異なるが、設定項目は下記のとおり。
テンプレートによって異なるが、設定項目は下記のとおり。
- メインの背景色
- テキストの色
- 投稿タイトルの色
- 日付ヘッダーの色
- 投稿の枠の色
- リンクの色
- 表示済みリンクの色
- ページヘッダーの背景色
- ブログのタイトルの色
- トップサイドバーのタイトルの色
- トップサイドバーの背景色
- トップサイドバーのテキストの色
- トップサイドバーのリンクの色
- トップサイドバーの表示済みリンクの色
- テキストフォント
- ブログタイトルのフォント
- ブログ詳細のフォント
- サイドバーのタイトルのフォント
- 投稿タイトルのフォント
2010年4月22日木曜日
レイアウトタブの内容
レイアウト
レイアウトによってページの印象を決める。
どのような内容のページにするのかによってそれに沿ったレイアウトを心掛ける。
内容
テンプレートやページの要素を管理する。
レイアウトによってページの印象を決める。
どのような内容のページにするのかによってそれに沿ったレイアウトを心掛ける。
内容
テンプレートやページの要素を管理する。
- ページ要素
- フォントと色
- HTMLの編集
- 新しいテンプレートを選択
2010年4月21日水曜日
OpenID・許可の設定
OpenIDの設定
OpenIDのURLを使用して、他のOpenID対応サイトにログインできる様に設定する。
許可の設定
投稿ユーザや閲覧者を許可する。
ブログの投稿ユーザー
ブログの閲覧者
OpenIDのURLを使用して、他のOpenID対応サイトにログインできる様に設定する。
許可の設定
投稿ユーザや閲覧者を許可する。
ブログの投稿ユーザー
- 100人まで投稿ユーザーを追加できる。
ブログの閲覧者
- 100人まで許可できる
- すべてのユーザー
- 選択したユーザー
- ブログの投稿者のみ
メールとモバイルの設定
メールを使った投稿の通知や、モバイル端末(携帯)からの投稿オプションを設定する。
メール通知 （ブログの公開(投稿？）を通知する。）
投稿オプション （メールによる投稿の設定）
携帯端末
メール通知 （ブログの公開(投稿？）を通知する。）
- BlogSendアドレス （10個までカンマで区切って登録する。）
投稿オプション （メールによる投稿の設定）
- メールによる投稿アドレス flat.design.lab.XXXXXXXX.@blogger.com テキストと画像（１０MB)を直接投稿する。
- 今すぐメールを公開
- メールを投稿の下書きとして保存
- 無効
携帯端末
- 追加と詳細
登録:
投稿 (Atom)
