Blogger Discrp

どぅーしてココに着ちゃったの？！
  ここは redo_chan という、よく分らない匿名ユーザーが鉄則から外れてブログっている Blog です。
文字を大きくする　Ctrl or Cmd + ＋　小さくする　Ctrl or Cmd + －　元に戻す　Ctrl or Cmd + 0

memo

Other リンク/ブログパーツ紹介
My Blogger で使用するブログパーツや、投稿時に使用する設定等を記載しています。

--------------------------------------------------------
カスタマイズCSS
--------------------------------------------------------

body, textarea { font-family: "meiryo UI","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; }

.post blockquote {
border-top: 1px solid #ff8c3f;
position: relative;
padding: 5px 50px;
background: url(http://24.media.tumblr.com/tumblr_m0wcv9s8xz1rnmt42o1_100.gif) no-repeat 2px 2px;
border-bottom: 1px solid #fe6601;
}

h5{
border-left: 8px #FF9900 solid; font-size: 110%; font-weight: bold; margin: 5px 0;
padding: 5px 0 5px 10px; border-bottom: 1px #FF9900 solid;
}

.videos-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.videos-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

--------------------------------------------------------
Blogger設定メモ
--------------------------------------------------------
ブログの URL
2012年から国別ドメインへのリダイレクトが成されるが、URL アクセスのリダイレクトが上手くいかず「ページがありません」と表示される場合が多い（ブラウザ：Firefox）。
なのでURL掲載の際は、http://*****.blogspot.jp/ ではなく、http://*****.blogspot.com/ の方が良い。
・アップロードした画像を横に並べて表示する強引な記述。　（アップロードした２枚の画像を横に並べる）。※記事部分の幅を充分取っておくこと。幅サイズ(px)を考慮して画像サイズを設定（リサイズ）アップロードすること。

通常のアップロードを行う。画像表示サイズは”小”、画像配置は”真ん中/センター”
２枚のアップロードが済んだら、編集画面を”HTML”に切り替える。画像を張った HTML の記述を以下のように配置し直す。

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="240" src="http://～（、JPG/PNGなどアップロードした左サイド写真のURL）～JPG" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">左サイド 写真の説明</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="240" src="http://～（、JPG/PNGなどアップロードした右サイド写真のURL）～JPG" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">右サイド写真の説明</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://～（、JPG/PNGなどアップロードした左サイド写真のURL）～JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://～（、JPG/PNGなどアップロードした右サイド写真のURL）～JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a></div>

・BloggerでAAを正常表示させるHTML表記。

<div style="font-family:'ＭＳ Ｐゴシック','ＭＳＰゴシック','MSPゴシック','MS Pゴシック';font-size:16px;line-height:18px;" >
ここにAAを描く
</div>

・HTMLをそのまま表示させる
投稿のオプション欄で出来る事ですが、コチラも紹介
ソースを「そのまま表示する為のHTMLソース」に変換｜FlatLabs
http://blogtool.flatlabs.net/source.html
>HTML特殊文字変換｜ Tech-Unlimited
http://tech-unlimited.com/escape.html

・YouTube埋込み動画を中央配置する
<center><コード></center>

・[共有] ボタンを表示するには？（2011年頃より標準搭載）
デザイン（レイアウト）＞ページ要素＞ブログの投稿（欄右下の）＞編集＞別ウィンドウ
ここで、 ☑[共有] ボタンを表示する　とチェックを入れても、ブログに表示されない場合は
使用中のブログテンプレートが非対応。
  1. そこで、デザイン（レイアウト）＞HTML の編集
  2. テンプレート編集欄の右上　☑ウィジェットのテンプレートを展開　をチェックして
  3. HTML構文内から下記の一文を検索。
    4. <div class="post-footer-line post-footer-line-3">　　※無ければ・・・line-2'>
  4. 見つかったら、上記構文の上に、以下のコードを貼り付ける。
    5. <div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div>
  5. 挿入箇所が正しければ、[テンプレートの保存]クリック後、正常保存されブログの記事コメント欄上に、[共有] ボタンが表示される。
参考：psk@blogger/Blogger 公式の「共有ボタン」が表示されない
http://pskmemo.blogspot.com/2011/03/blogger.html

・自分のページビューを追跡しない　Firefox限定
  1. 自分のブログURLをコピー。
  2. Firefox＞オプション＞プライバシー＞サイトから送られてきたCookieを保存する(A)にチェック＞例外サイト(E)＞サイトのアドレス(D)＞ URLをペースト＞不許可(B)＞閉じる(C)
  3. ドラフト画面　
  4. 統計＞[自分のページビューを追跡しない]＞[自分のページビューを追跡しない]　にチェック
※カウントされる場合もあるので正確さを問い過ぎない事

・ログイン中、投稿を編集するボタンを表示させる設定　Firefox限定
Firefox＞オプション＞プライバシー＞サードパーティーのCookieも保存する(C)にチェック

・Blogger にタグクラウド備えるには
Bloggerのラベル(カテゴリ)とタグとその他あれこれ - 65Record
ラベルを使って「カテゴリ」と「タグ」とを使い分ける方法。これ、なかなか面白いです。表示ラベルを限定した 2 つのラベルガジェットをサイドバーに置くというところが肝ですね。
(via: クリボウのBlogger Tips : Blogger 関連のつぶやき 2012-01 より)

ページ部分の使い方
  • 固定表示なので、これを利用してTOPページ。
  • http://*****（自分のブログ名）*****.blogspot.jp/search/label/***（ラベル～カテゴリ）****　とリンクを張って誘導も出来る。

--------------------------------------------------------
ウェブマスター ツール
--------------------------------------------------------

Google　http://www.google.com/webmasters/tools/?hl=ja
Google+ページを設けると以下の作業は自動で連携/紐付けされます。
  1. ログイン：Googleアカウントでログイン
  2. 登録：http://***（自分のブログ名）***.blogspot.com/
  3. 確認の仕方：HTML ファイルをサーバーにアップロード（旧Draftでは可能でした）
  4. サイトマップ：サイトの設定＞サイトマップ＞サイトマップの追加/テスト＞（自分のBloggerアドレス後の）空白に[ atom.xml?redirect=false ]
[参考]　「マップのステータスが×印に変わっているのを発見し、驚いています。」
https://groups.google.com/a/googleproductforums.com/forum/#!category-topic/webmaster-ja/%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97/8W-0lCUe13Q

Bing　http://www.bing.com/toolbox/webmaster
  1. ログイン：Windows LiveID にサインアップ（登録）またはWindows LiveID にサインイン（ログイン）
  2. 登録：http://***（自分のブログ名）***.blogspot.com/
  3. [追加]をクリックすると、サイトマップの入力欄が出ます。
  4. *初回登録は名前や住所、会社名 などの入力欄が出ます。面倒です
  5. *電話番号や詳細住所は省略可ですが、なぜか会社名や所属、役職欄は必須、面倒です。
  6. 確認の仕方：metaタグ。発行されたタグを指示に従って、ブログのテンプレにペースト。
  7. HTML更新後、Bingウェブマスターページに戻り[確認] をクリック。
  8. 直ぐサイトの状態が報告されます
テンプレート＞HTMLカスタマイズ、HTMLコードが表示されない
ブラウザの表示幅を変えてみると、規定フレーム内に表示される場合がある。
何も表示されていない場合でも、全て選択（Ctrl+A）＞コピー＞（メモ帳などに）ペーストするとコードが貼り付け出来る

--------------------------------------------------------
Blogサービス
--------------------------------------------------------
ブログに設置する　My Google+ へのコネクトバッチ（リンクバナー）作成
概要：https://developers.google.com/+/plugins/badge/
バッジ作成ツール：https://developers.google.com/+/plugins/badge/config

各SNS の投稿をブログに添付する～Socialditto
http://www.socialditto.com/
各ブログへ添付するコードを発行していないSNSサイト（twitter以外）でもポストURLを入力することで、添付コードを作成するツール。主要SNSを全てカヴァー。


feedping.com http://www.feedping.com/
PING送信を限定（Weblogs.com）して行うBlogger。PING送信を手早く気休め程度に行ってくれるサービスサイト。※Blogger（blogspot）ユーザーはGoogle+及びGoogleウェブマスターとの連携でping送信は不要となりました


--------------------------------------------------------
Blogger用テンプレート提供サイト
--------------------------------------------------------
Blogger Templates http://btemplates.com/
Premium Blogger Templates|Blogspot Themes http://www.premiumbloggertemplates.com/
Zoom Templates http://www.zoomtemplate.com/
New Blogger Themes | Professional Blogspot Templates http://newbloggerthemes.com/
Mas Template | Beauty template for you http://www.mastemplate.com/
Best Blogger Templates | Responsive Themes | Wordpress Themes http://www.btemplates4u.com/


--------------------------------------------------------
セキュリティサービス
--------------------------------------------------------
Google web mastertool でもマルウェアチェック可能

Gumblar/GENO/8080系チェックサイト
http://www.aguse.jp/
http://www.gred.jp/

--------------------------------------------------------
Blogパーツ
--------------------------------------------------------

twitpic　オフィシャルブログパーツ http://twitpic.com/widgets/designer
現行使用。汎用性有、比較的安定。

Twitterオフィシャルブログパーツ http://twitter.com/badges
ツイートをブログに転載。アレンジ可能。

Youtube Favortie Player by crusher1251 http://www.widgetbox.com/widget/youtubefavplayer
ブログ最下部、大画面プレイヤー用に設定出来る優れたウィジェット。
用意した設定項目だけで十分ですた。

Thank you for reading!
    Let's hit the road another blogs! Enjoy, GL
aBowman : http://abowman.com/google-modules/dog/ FLASHガジェット。
これほどのガジェットは他にないと思います。ワンコの動きが超リアルです
登録: 投稿 (Atom)