★サイト作り★カスタマイズ,テクニック: 豆袋

2015年10月15日

h1タグをブログタイトルではなく記事タイトルに持ってくるべきか？

最近の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/

タグ： h1タグ

posted by mamebukuro at 21:35 | ★サイト作り★カスタマイズ,テクニック

Seesaaブログのテンプレートをレスポンシブ対応化させるカスタマイズ

編集

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

posted by mamebukuro at 13:23 | ★サイト作り★カスタマイズ,テクニック

FC2ブログのヘッダーに画像を入れる

簡単な方法と、より細かくカスタマイズできる方法、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;

posted by mamebukuro at 12:47 | ★サイト作り★カスタマイズ,テクニック

ヘッダーナビを設置に関するメモ

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

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

わざめーばさん
ヘッダーメニュー(グローバルナビ)を設置する方法(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

タグ：ヘッダーナビ

posted by mamebukuro at 07:36 | ★サイト作り★カスタマイズ,テクニック

2015年10月13日

Seesaa、FC2などの無料ブログもファビコンを設定すれば見違えるほど良くなる

編集

用意する画像のサイズ
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

タグ：ファビコン

posted by mamebukuro at 20:16 | ★サイト作り★カスタマイズ,テクニック

FC2ブログには超カッコいい「テーマ（デザインテンプレート）」がいっぱい

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

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

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

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/

posted by mamebukuro at 12:11 | ★サイト作り★カスタマイズ,テクニック

FC2ブログを始めたらまず最初にやっておくこと

環境設定
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週間後くらいから非表示になる。

posted by mamebukuro at 11:30 | ★サイト作り★カスタマイズ,テクニック

2015年10月08日

アクセスごとにランダムに画像を切り替える方法

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

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

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

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

posted by mamebukuro at 21:52 | ★サイト作り★カスタマイズ,テクニック

2015年05月08日

相互RSSについて「rel=”nofollow”」問題

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

こちらの方法だと、広告が入らない。
↓
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/

posted by mamebukuro at 13:18 | ★サイト作り★カスタマイズ,テクニック

2015年02月08日

googleで『ファンブログ　カスタマイズ』を検索してみた。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

posted by mamebukuro at 13:03 | ★サイト作り★カスタマイズ,テクニック

1 2 最後へ