豆袋

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

最近のGoogleは進化しているらしいので小手先のSEO対策など無意味なのかも知れないが、h1タグの重要性ｎ関して、ちょっと気になっているので調べてみる。

あとで熟読してカスタマイズの参考にしよう。

titleタグとh1タグは完全同一がいい? 違ってもいい? どう使い分ける? など10+4記事
http://web-tan.forum.impressrd.jp/e/2013/09/06/15972

右クリックできず記事タイトルがコピーできない。
ユーザビリティーが・・・
http://shihouranus.com/wordpress-2/html/h1-title/


h1タグにブログタイトルではなく、記事タイトルをもってきたい。
https://ja.forums.wordpress.org/topic/28107

軽視してはいけない！SEOに効果的なh1タグの4つの使用法
http://viral-community.com/seo/seo-h1-54/

WordPressのタイトル・H1の個別設定編集とSEO
https://www.allegro-inc.com/seo/2898.html
やはり、ブログタイトルについているh1をはく奪してるな・・・


Seesaaブログの記事タイトルをh1に変更する方法
http://www.memorou.com/2014/10/seesaah1.html

シーサーブログの見出しタグ「hタグ」の最適化
http://affiliate150.com/tag-optimization
WordPressでは記事タイトルに「h1」が使われているテンプレートが多い、と書いてあるな。

h1 h2 h3などの見出しタグの重要性と正しい順序
http://www.lykaon-search.com/seo/whole/post-133/

2015年07月08日
Seesaaブログをレスポンシブ化するために参考になる記事と方法まとめ
http://araccoonathome.seesaa.net/article/421975132.html
ここに、参考文献がいっぱいリンク。
↓
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
http://freesoft.0hs.org/4169.html

初心者も分かる！レスポンシブ・デザインの作り方
https://syncer.jp/how-to-create-responsive-web-design


レスポンシブデザインサイトの作り方。たった2つのことを覚えておけば簡単に作れますよ！
http://www.panzee.biz/archives/4059

ウインドウ幅に合わせて画像サイズを変化させる方法
http://allabout.co.jp/gm/gc/400630/

----------------------------------------------------






-------------------------------------------------------------

Seesaaブログで、スマホから見てもPCと同じデザインで表示させるようにするカスタマイズ。

もっとはやく探せば良かった。
ただ、素人にはちょっと難しいな。ぜったいに自分では無理。

こうして、試行錯誤してレスポンシブ化に挑戦し、その方法を紹介してくれる方々にはホント感謝だな〜。

在宅ワークで生計を立てたい
2015年07月08日
Seesaaブログをレスポンシブ化するために参考になる記事と方法まとめ
http://araccoonathome.seesaa.net/article/421975132.html


とある秘密ブログの更新うぇぶろぐ
Seesaa ブログ レスポンシブ計画始動
2014年05月30日
http://www.myweblogblog.net/article/398289658.html

これが超気になる。
スーパー超シンプルSeesaaテンプレート
http://supersimple-template.seesaa.net/
現在はダウンロードできなくなっているようだけど、使ってみたい。

Seesaaブログの複数コンテンツを結合して高速化を図る
2015年09月13日
http://www.myweblogblog.net/article/399456920.html



（旧）URAKOTA BLOG
2015年02月19日
seesaaブログをレスポンシブ化のメモ書き
http://urakota.seesaa.net/article/414332450.html
2015年05月14日
ロリポップ！は重いのかもしれない。ページ読み込み速度とプラグイン｜Seesaaブログから移転するかも(しないかも
http://urakota.seesaa.net/article/418922840.html

簡単な方法と、より細かくカスタマイズできる方法、2通り。

簡単なのは、シンプルにヘッダーの背景にCSSで画像を設定するだけ。
気を付けるのは画像の高さや、乗っかる文字の色、

ヘッダー背景を画像にする
http://10plate.blog44.fc2.com/blog-entry-28.html

#header {
background: #ffffff;
background-image: url(http://〜);
height: 300px;
}

リピートさせるのかどうか。
横幅ピッタリの画像を作って、センターに配置するのが一番いいのかな。
#header {
background-image: url(http://〜);
height: 300px;
background-repeat: no-repeat;
background-position: center;
}




ちょっと難しい方法。大変そうだけど、挑戦してみたいな。

basic_whiteテンプレート ヘッダー全体に背景画像を入れる
http://fc2blogtemplate.com/blog-entry-16.html

div id="head-img"をこしらえて、headerの中に入れる。

CSSでhead-imgのほうを細かくカスタマイズすれば分かり易い。

ウインドウに合わせて画像を表示する方法
#head-img {
background-size: cover !important;
padding: 20px 0 80px 0; min-height: 1px;

ヘッダーナビはどうしても設置したいパーツだ。

一時的に設置方法を覚えても、次のブログを始める時にはいつも方法を忘れている。
物忘れがひどくて最近はホント大変だ。

わざめーばさん
ヘッダーメニュー(グローバルナビ)を設置する方法(V4)
http://ameblo.jp/wazameba/entry-11773998603.html

ワケ分からなくなりがちなz-indexの整理法
http://blog.katty.in/2043

らぼ
ヘッダーメニューをカスタムしてみる。
http://ameblo.jp/tesblo1/theme-10086876375.html

CSSレイアウトを学ぶhttp://ja.learnlayout.com/toc.html

レスポンシブECサイトのレイアウトで使える！position:「absolute」「relative」の違いとは
http://www.aiship.jp/knowhow/archives/18053

CSSでフッターを画面下部に固定する
http://webnonotes.com/css/footer/

position:fixed; コンテンツの固定表示 ◆
http://www.neconote.jp/neconote/dojo/html/css_fixed.html

右下に「TOPに戻る」を表示する時に使えそう
CSS : positionの「absolute」「relative」「fixed」のリファレンス
http://www.css-lecture.com/log/css/037.html

編集

用意する画像のサイズ
16x16
32x32
48x48
だいたい、この3サイズ用意すれば、それほどゆがみも発生しないだろう。

まずは１６の倍数で大きい画像を作成、
今回は192px四方のサイズで元の画像を作成。
それをコピーして、各サイズに縮小。
あとは、それをそれぞれ透過させる。（減色するので注意）
あとは、サイズ違いの各画像を
ファビコン作成サイトで投入。


ファビコンを作成できるサイト

背景が透過したファビコンを作ろうと思って
こっちのサイトで作成してみた
↓
半透過マルチアイコンfavicon.icoを作ろう!　
http://ao-system.net/alphaicon/index.php

・・・結果、うまく表示されない。
真っ黒な感じになってしまった。
使用した画像は、
3種類の大きさの画像で、
背景を透過させたpngの画像。
何がいけなかったのか・・・？
サイトには、
PNG36(PNG24アルファチャンネル付き)画像を使用してください
と書いてあるのだが、その規格の意味がよく分からないし、
自分が使っている画像加工ソフトでは多分指定できないっぽい。

ということで、結局、ダメもとで
その同じ画像を使ってこっちのサイトでつくってみた。
↓
ファビコン favicon.icoを作ろう!
http://ao-system.net/favicon/index.php

htmlに記入する時の厳密な指定はコチラを。
↓

お気に入りアイコン（ファビコン）を指定する
http://www.tagindex.com/html_tag/page/link_favicon.html

例えば、ファビコンで使用する画像がICO形式で作成されている場合は、以下のように記述します。
type="image/vnd.microsoft.icon"

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">

結果、一応ちゃんと背景が透過したファビコンをつくることができた。
そもそも、
ファビコンになる以前に輪郭の処理がイマイチだったのだが、
まぁ、実際に表示されているものを見ると
まずまずの出来栄え。
もっと完璧にしたければ、
ペイントソフトで背景を透過させるときに、
「許容値」の設定をもっとシビアにすべきなのかもしれない。
自分は、許容値４０でつくってみたが、
もっと高い数値にすれば良かったのかも知れない。
まぁ、とりあえず、今回はこれで良しとする。


参考文献

シーサーブログにファビコンを設置しよう
http://gazocustomize.blog.fc2.com/blog-entry-23.html

ファビコン用の画像を綺麗に見えるように作る。　たりほん
http://talihon.seesaa.net/article/412279491.html

かっこよすぎて選べない・・・。

特に、共有テンプレートの方はやばい。

これ、タダで使えるなんて・・・。

vanillaice000さんの作品
http://admin.blog.fc2.com/control.php?mode=design&process=user&author=vanillaice000
これはもう、芸術だな。
http://vanillaice000.blog.fc2.com/
BeHappyリニューアルリリースのお知らせ
http://vanillaice000.blog.fc2.com/blog-entry-241.html
(旧)BeHappy
http://vanillaice000.blog.fc2.com/blog-entry-207.html

16162chさんの作品
http://admin.blog.fc2.com/control.php?mode=design&process=user&author=16162ch
実用的な感じかな。


dithisさんの作品
http://admin.blog.fc2.com/control.php?mode=design&process=user&author=dithis
超大好き。
最近は自分のサイトにて配布しているようなので、そっちも見てみよう。
http://dithis.fem.jp/

環境設定
http://admin.blog.fc2.com/control.php?mode=setting&process=1
↓
ブログの設定
http://admin.blog.fc2.com/control.php?mode=setting&process=2
↓
↓

検索バーの設定
http://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar
ブログ上部の広告付き検索バーを消す
「利用しない」を選択


スマートフォン版の表示設定
http://admin.blog.fc2.com/control.php?mode=setting&process=2#sp_sup
「無効にする」を選択
ただし、レスポンシブ対応のテーマを選んでおくことが必須


高速画像表示の設定
http://admin.blog.fc2.com/control.php?mode=setting&process=2#ads
「利用しない＆広告を表示しない」を選択することで、
記事下の広告が1週間後くらいから非表示になる。

これを読めば、できそうだ。

あとで時間がある時に熟読しよう。

アクセスされるたびに画像をランダムに切り替える方法
http://allabout.co.jp/gm/gc/23805/
http://allabout.co.jp/gm/gc/23805/2/

オールアバウトは、他にも興味深い記事がたくさんありそうなので、今度しっかり見よう。

まずは相互ＲＳＳに関して。

こちらの方法だと、広告が入らない。
↓
20131201
相互RSSを「アカウント登録不要・広告なし」で表示する方法
http://178.hatenablog.jp/entry/2013/12/01/120239

今まで、livedoorの相互RSSの使ってきたが、
今後は、コチラの方法を試してみるのもいいかもしれない。
というのも、
こういう記事を見たからだ。
↓
SEOに影響の出ない相互RSSを設置する方法
2013/12/10 2015/04/17
http://mizuka123.net/5029/

リンクに「rel=”nofollow”」を書き込めないので
SEO対策を考えると相互リンクはマイナスだと書いてある。
実際のところはどうなのか分からんけど。

そのへんのことは、コチラに書いてあるようだ。
↓
Googleが相互リンクをスパムとする理由と、新たな時代の相互リンクとは？
13/08/22
http://www.wakatta-blog.com/google-spam-new-link.html

やはり、リンクにはnofollowを設定した方がいいのだろうか。






参考文献　追記
ゆとり世代のブログ運営論 > HTML > nofollowとは？
rel=”nofollow”の利用用途と使い方をまとめてみた
http://viral-community.com/seo/nofollow-2793/

このブログ・・・
タダのメモ書きくらいのつもりでいたけれど、
続けているうちに愛着がわいてきてしまいました(笑)

もうちょっと分かり易く、
ヘッダーにナビのボタンを取り付けたいな〜とか
無駄（？）にカスタマイズしたくなってしまいました。

ということで、グーグルで検索してみました。
『ファンブログ　カスタマイズ』で検索して上位にきたサイトを載せます。

時間があるときにでも、少しずつ目を通していこうと思います。

ファンブログでタイトルをオシャレに変えよう | A8スタッフブログ

【A8.net】一歩先行くブログ・サイト作りに！ステップ アップ テクニック

ファンブログ カスタマイズ ぽあろの休日

ﾌｧﾝﾌﾞﾛｸﾞのｶｽﾀﾏｲｽﾞ(その1) - [アフィリエイトで稼ぐためのASP比較]

売り上げ3倍！A8ファンブログのSEO簡単カスタマイズの方法

ファンブログカスタマイズのまとめ

ファンブログ カスタマイズ | Facebook

ファンブログカスタマイズ: ファンブログ雑記帳

ファンブログには危なくてAdSenseを貼れない件 | Big Bang

ファンブログ カスタマイズ - YouTube



う〜〜ん・・・
グーグルの１ページ目にも関わらず、
正直、あまり参考にならないサイトも多いような・・・。

かなり古い記事もあったり、更新が止まってたり・・・。

思うに、「ファンブログのカスタマイズ」というのは
それほど開拓されていないキーワードなのかも。

なんか・・・
ファンブログのカスタマイズのまとめ記事みたいなのを
自分で書いていこうかな・・・ってちょっと思い始めております。