ＣｕｓbｌO

忍者ブログテンプレートカスタマイズ　ブログテンプレートＣＳＳ／ＨＴＭＬカスタマイズ覚書　忍者用ブログテンプレート作成中

HOME≫2010年03月の記事

[2010/03/31] 行サイズ指定 (No.61)
[2010/03/31] これで良いのかテンプレート　チョＨＴＭＬ５・・・って　まずくなぁ～～い？ＳＥＯ (No.60)
[2010/03/30] 画像テキスト回り込みと解除 (No.59)
[2010/03/29] Ｇｏｏｇｌアドサイトマップテンプレートカスタマイズ (No.58)
[2010/03/28] Ｇアドメタタグ忍者ブログ用カスタマイズ (No.57)

[1][2][3][4][5][6]≫Ｎｅｘｔ

行サイズ指定

03/31(Wed) YESR2010

ＣＳＳに追加：数字を自分が使いたい幅に変更
/* 行幅 */

p.sample1 {text-indent: 10px;}

p.sample2 {text-indent: 5em;}

p.sample3 {text-indent: 5ex;}

p.sample4 {text-indent: -10px;}

ＨＴＭＬ：
<head>に書き加え
<link rel="stylesheet" href="sample.css" type="text/css">

＜ＢＯＤＹ＞内指定
指定したいタグや文章をここに来るようにする

記事編集

△ＵＰ

これで良いのかテンプレート　チョＨＴＭＬ５・・・って　まずくなぁ～～い？ＳＥＯ

03/31(Wed) YESR2010

私は常々ブラウザに疑問を抱いている

ＧｏｏｇｌｅがオープンソースChrome開発したってことは

やはりＧｏｏｇｌｅアドセンスの為？

そして、テンプレートを作ってみようと忍者ブログでスタートしたが

作ってみて思った

ＩＥはChrome　Firefox　Ｓａｆａｒｉの３兄弟とは

まさに別物

なぜ？

３兄弟はおとなしく言うことを聞いてくれるのに

ＩＥだけレイアウトめちゃくちゃ・・・

これでは今後もっとテンプレート作成が困難になるジャマイカ

・

何とか見よう見まねで作ったものを土台に違うデザインを組み立てると

やはりＩＥだけくずれてもうお手上げ意味不明

となってしまう

私の脳ではデザインイメージだけがワンサカ泉のごとく沸いているというのに

だんだんＩＥが恨めしゃ～～

カスタマイズのことで色んな検索をしている日々

そんな中私の疑問を解く鍵サイトを見つけた

ヒロカワズタイプ。さんというサイト

このかたは私も使いたいと思っていたＷｐサイトを作成している様

ぃ～なぁ～ＷＰ(о☯ฺд☯ฺо)

ヒロカワズタイプ。記事に目を通してみた。

テンプレート作成するときは

ｍｊｄGoogleChromeが便利すぎ

何が便利かってーと

ファイルアップ画面で画像クリックすれば小さい別窓で表示され

それをさらに右クリでＵＲＬコピれる

見学したサイト履歴もみやすいし

ただ、Chromeに対応していないサイトが多い・・・

そこでまた疑問・・なぁ～～ぜぇ～(゜☣ฺД☣ฺ)

ヒロカワズタイプ。さん記事によれｂ

ＨＴＭＬ５のマークアップが主流になるだろう
とか
ＨＴＭＬ５／ＣＳＳ３をサポートしているのはChrome
とか・・・

AppleHTML5に大きな期待を抱いている

とか

でもってＨＴＭＬ５ソース覗かせていただいたらこれまた・・・
単刀直入に・・・なっている＞＜
ブラウザと同じすなぁ～

大体＜Ｈｅａｄ＞上部が

<!doctype html>

<html lang="ja">
だけって
ｴｪｯ!?(* □ )~~~~~~~~☉☉；マジ(╬☉д⊙；)？！って目が飛び出たゎ

出てなぃけど

このタグたちがすでにＳＥＯっちゃっているから
ＳＥＯに必死にならずともＧｏｏｇｌｅ検索にテラギガ有利らしすなぁ～

３カラムテンプレートＨＴＭＬ基本ソースが
６０行弱で終わって
ここから色々入れていくから増えるが　アッカン！

ソースみたい！あなたゎ
ヒロカワズタイプ。サイトでご覧ぁ～れ～

そういえばこの前

ツウィッターで久々にホリエモンみつけた๑･ิ⋖⋗･ิ๑

さて、ここから重要
・
・
・
重要すぎて　"⊹⋛⋋(｡◕ ⋖⋗ ◕)⋌⋚⊹ "ピョッタ

Ｇｏｏｇｌｅアドセンスをされている方々はこれまさに重要っす

Googleの検索サービスを初めとするYouTube等の動画コンテンツも既に
HTML5版のページをデモで用意
バックグラウンドでは着々とHTML5への移行が図られている

はぁ・・

やはりＧｏｏｇｌｅ　ＹＯＵＴＵＢＥで稼いでいる人類にとっては

とぃぅか　ＩＥ　Cheers for good work
ってところか・・

このさいＩＥ９で基準をＧｏｏｇｌｅブラウザにあわせると言う案
いかが？と言いたい

Ｆｉｆｏは重くて読み込み遅いし
ＩＥは８になっても立ち上げたそばから・・・ＰＣ画面すら固まるときあるし

Ｓａｆａｒｉはサイト見学するくらいしか便利じゃないし・・・
裏を返せばＳａｆａｒｉは軽くてサイト見学にもってこい|ｮ-ิ⋖⋗-ิ๑)ﾉ

ぐーぐるＣｈｒブラウザて
作業の為の小さい別窓出ても
他のタブ見れる　これがかすぽがＣｈｒブラウザの好きなところ

たとえば保存窓がでて　なんだっけーって他のブラウザ見る為に
ブラウザ２つ立てておかないと動かないだろータブ

そんな不便さまったく感じずＤＬ保存しやすさ便利さもグッド

ちょっと話題がそれた

とりあえず、テンプレ作りながら独学ッ歩

記事編集

△ＵＰ

画像テキスト回り込みと解除

03/30(Tue) YESR2010

回り込みとは：正式には　行揃えと呼ばれている。

回り込みをさせるとどのようになるか？
テーブルを使わなくても
左右に画像と文字をならべてきれいに配置できる
以下参照

行揃えを左回りこみ指定した場合
画像が左に配置される。文章を書くとこのように表示され
すっきりとまとまりのある配置になる。

タグはＨＴＭＬで制御する。記事の場合　簡素版のエディタ　で変更する

<img alt="画像オンマウスで表示される文字を記入　上の画像にマウスをあててみるとボーダーと表示されることがわかるく" align="left" src="http://file.cusblo.atgj.net/ba-b.gif" /> 行揃えを左回りこみ指定した場合

回り込みのデメリット
文章行数より画像が縦に長い場合、回り込ませたくないものまで回り込んでしまう

解除する方法スタイルシート

文章は画像の下側になっているはずです。

right　center leftで文字位置を指定

もしくは
回り込ませた文章の最後か解除したい文章の先頭に

記事編集

△ＵＰ

Ｇｏｏｇｌアドサイトマップテンプレートカスタマイズ

03/29(Mon) YESR2010

サイトマップとは：サーチエンジンにあなたのサイトを自動的に知らせるもの。
これを１サイトにつきたった一度設定すれば良いだけ

用意するもの：メモ帳

準備：
①メモ帳を開く　内容はまだ空のまま

②名前をつけて保存：sitemap.xml　とつけデスクトップにでも保存しておく

③ SitemapDoc - Google Sitemap
Max entries in sitemap =
Url to map　
の下http://www.が記入されている場合消す
あなたのサイトＵＲＬを書き込む

④右横　ＮｅｗＭａｐ　をクリック
数分時間がかかるので次の準備をしながら待つ

⑤ＧｏｏｇｌｅＡｄｓｅｎｓｅにログイン⇒ヘルプ情報⇒リファレンスのウェブマスターのためのガイドラインを開く
Google ウェブマスターツールへアクセス
わからない場合検索で！

⑥サイトを追加：あなたのサイトＵＲＬをコピペ入力⇒続行
サイトが登録されたら、みぎ端の確認をクリック
メタタグを選択コピー

⑦ＨＴＭＬ編集：あなたのサイトテンプレートＨＴＭＬ編集でメタタグをペースト（貼り付け）

メタタグ記入
＜／ｈｅａｄ＞　

テンプレート保存

⑧SitemapDoc - Google Sitemap でサイトマップが出来上がったら
Ｇｏｏｇｌｅ　ＳｉｔｅＭａｐ　をクリック
↓
Ｍａｘｕｍｕｍ　５００・・・・と言う文字の下に膨大な長さのタグができている

<?xml version="1.0" encoding="UTF-8" ?>　から　</urlset>　までをコピー

デスクトップに保存したメモ　sitemap.xmlを開き　ペースト（貼り付け）　上書き保存

⑨メモのアップロード：忍者ブログ管理ページ⇒左サイドバー　ファイルのアップロード⇒メモ　sitemap.xmlを保存

⑩検索エンジン登録：sitemap.xmlができている
http://ブログＵＲＬ/sitemap.xml　があればＯＫ

⑪Ｇｏｏｇｌｅウエーブマスターツールに戻る
追加したサイトＵＲＬをクリック　例＞cusblo.atgj.net
ダッシュボードと言うページが現れたら左サイドバーをご覧ください

＋サイト設定　をクリック　⇒　サイトマップをクリック

サイトマップ
＋サイトマップを送信する　を開く

http://ブログＵＲＬ/の後ろに　⑩の忍者検索エンジン登録で作成された　sitemap.xml部分を入力　送信

補足：ページ左上のウェブマスターツールをクリックで戻り
追加されている　サイトＵＲＬ　のみぎ　確認済みになっていることを確認できる

記事編集

△ＵＰ

Ｇアドメタタグ忍者ブログ用カスタマイズ

03/28(Sun) YESR2010

SEO対策体験記　が、忍者用にメタタグをカスタマイズしていたので
早速使わせていただいた。

カスタマイズ方法
テンプレート編集ＨＴＭＬ上部　＜ｈｅａｄ＞　に　">　とあり、直下に
<meta name="description" content="">　とある。
これを
<meta name="description" content=" ">

に書き換え

ＣｕｓbｌO

行サイズ指定

これで良いのかテンプレート チョＨＴＭＬ５・・・って まずくなぁ～～い？ＳＥＯ

画像テキスト回り込みと解除

Ｇｏｏｇｌアドサイトマップテンプレートカスタマイズ

Ｇアドメタタグ忍者ブログ用カスタマイズ

これで良いのかテンプレート　チョＨＴＭＬ５・・・って　まずくなぁ～～い？ＳＥＯ