働くアラフォーママの多趣味日記

login

多趣味な主婦の全部のせ日記。日常ネタから専門的な話まで。ハンドメイド、西洋占星術、Webデザイン、色彩検定など。

2017 10 < 123456789101112131415161718192021222324252627282930 > 2017 12

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

春のテンプレートを作りました。

テンプレートを作りました。
今更ですが桜です アセアセ

桜が咲いてから作り始めたんじゃ遅いのはわかってたんですが、桜が咲かないと創意も湧かないというか。
そんな感じで(滝汗)

sakurasaku

この素敵な写真は私が撮ったのではないですよ~
こちらからお借りしたのです キラキラ
緑みがかった空と赤みの強い桜の色が、補色対比で目に鮮やかに映りますよね。なーんてちょっとだけ色彩検定の知識を持ち出してみたりw

最近のWebデザインはダークが流行らしいので、うちもダークにしてみました。


カレントページに対応したグローバルナビ


今回のテンプレート作成で苦労したのはなんといってもグローバルナビです。

ただリンクを並べるだけなら簡単なんですが、「今ここを開いてるよ」っていうメニュー画像(メニュー下のピンクの下線)に切り替えるとなると、ちょっとややこしくなります。というのも、fc2だけでなく他のブログサービスもそうですが、テンプレートの編集ができるのはhtmlとCSSの2ファイルのみなのが一般的。この二つのファイルだけで全ページの表示方法を設計します。ページ毎に設計できるホームページとは違い、一つのhtmlだけで条件分岐して表示をコントロールしなければならないのです。

そして私がやりたかったのは、カテゴリ「ソーイング」を開いたときにはグローバルナビの「handmade」に下線を、「Web デザイン」を開いたときには「web design」に下線を付けるようにすること。

でもfc2ブログの変数は、カテゴリページ表示時や月間アーカイブ表示時というように、なんともザックリした条件でしかコントロールできません。細かなカテゴリ毎の表示設定には対応できないんですよね。

そこでカレントページ判定を Javascript でやってみました。
どんなことをしているのかざっと説明しますね。


  1. 現在表示しているhtmlのファイル名を取得する。

  2. 取得したファイル名が、グローバルナビに表示したいページかを判定する。

  3. 判定の結果グローバルナビ対象のページのとき、そのページ用のタグ生成処理に分岐する。

  4. 判定の結果グローバルナビ対象外のときは強制的に home とするため home用のタグ生成生成に分岐する。



グローバルナビの現在のページへのリンクには<em>を付けているので、あとはCSSで画像を切り替えるなり装飾を変えるなりのコントロールをして完了です。

興味のある方はこのページのソースを表示してご覧くださいね。


SEO対策もしてるんです


そしてそして~!何を隠そうこのテンプレート、SEO対策をバッチリしているんです。
簡単にいうと、Googleとか(最近はYahoo!とか)の検索エンジンで上位にランクしやすいような工夫のことですね。

こちらもどんなことをしているのかざっと説明しますね。


  1. 正しい文書構造。

  2. 文書構造はナビバー(fc2ではプラグイン)の位置に関わらず、ヘッダー部、本文、ナビバー1、ナビバー2の順とする。

  3. 記事タイトルには、記事の個別ページへのリンクを付ける。

  4. 記事個別ページを表示時、<title>は "記事タイトル" "ブログタイトル" の順とする。

  5. 記事本文のタイトルは<h1>を設定。

  6. 記事本文用に<h2>以下のタグ装飾もサポート。

  7. 記事本文の背景色は明度の高い色を設定。



SEO対策の基本は検索エンジンのボットが見やすい正しい文書構造と、重要なキーワードを見つけやすいようにする配慮、それだけですね。

検索ボットはhタグを重要視するというのは有名な話ですよね。そしてhタグでも数字の小さいほうがより重要度が高いと認識されます。一昔前まではブログタイトルは<h1>に、記事タイトルは<h2>もしくは<h3>とするのがセオリーでした。でも今はSEOを意識してかブログタイトルも記事タイトルも<h1>とする流れのようです。これを知ったとき少し違和感を感じましたが、文書構造として間違ってはいないので、私もこの流れに乗っかってみましたw

アフィリエイターさんのブログでよく好まれる3カラムのテンプレート。しかしここに落とし穴があるのをご存知ですか?
検索エンジンではクロール時にhtmlの上から200文字を特に重要視すると聞きます。もしこれが本当なら、記事本文をできるだけhtml構造の上にした方が重要キーワードとしてインデックスされやすいということになります。しかし一般的な3カラムのhtmlは、ヘッダー、ナビバー1、本文、ナビバー2の順になっているため、ボットはナビバー1のリンクばかりをインデックスし、肝心の本文にたどり着いたときには200文字を超えていて重要視されないという事態も!?ナビバーにリンクが多ければ多いほどSEO的に不利になってしまうのでは、アフィリエイターさんにとって一大事ですよね。なにより質のよい記事を書いても重要記事としてインデックスされないのはとてももったいないことです。

これをhtmlの文書構造はヘッダー、本文、ナビバー1、ナビバー2の順にしたままで、見た目は従来どおりの3カラムをCSSで実現できるんです!

このブログテンプレートは左にナビバーがある2カラムですが、上に書いた理屈でSEOを意識したhtml構造的にしているんですよ~

でもSEOはテンプレートさえ変えればいいっていう話じゃありません。やはり質のよい記事を書くことは大切ですね。そして検索ボットに「ここ重要!」と気づいてもらうためには記事タイトルにキーワードを埋め込むことが大切ですね。更に記事本文の中にも<h2>や<h3>などを使ってセクションを区切って記事を書くといいですね。hタグは検索ボットにインデックスされやすいですから。


このところ、これを作るのに徹夜の日々でしたアセアセ みなさま訪問が滞ってしまいスミマセン! >_<
よかったら応援クリックお願いします カエル
関連記事
web拍手 by FC2

Comment

No title

ご自分でテンプレートを作られてるんですか~!!
すごい~。

sahi さん、ありがとうございます^^

そうなんですよ~
頑張りましたよ~ ^^

No title

テンプレート 新しくなりましたね~*
相変わらず スゴぃ-っ!!! 今の流行はダークなんですかぁ?
桜も とってもキレいで 今の季節にぴったりですね(〃∪〃-♪
徹夜に早出.. ほんと頑張られてますよ-!! 尊敬e-420
休養も取りつつ.. お疲れが出ませんように~~* (^^/~~

しーちゃんさん、いらっしゃいませ♪

褒めていただいてありがとうございますv-411

そうなんです。ちょっと前までは白背景に鮮やかな色の立体的なロゴを置くのが流行りだったんですが、今は黒背景でフラットなデザインが流行りみたいです v-410

体調まで心配していただいてありがとうございます ^^
しーちゃんさんもお仕事お忙しそうですよね >_<
どうぞ無理せずスローテンポでv-343

やっと金曜日。あくびを噛み殺しつつ今日も一日頑張ります〜!

毎度なんだぜえ~。

 おろ~!
 ガラっと雰囲気変わりましたね~。
 イイじゃないですか!
 そして何と言っても自分で作れるのがスゲエ~~。
 記事の内容も途中からテクニカルすぎて
 ローテクOYAJIには…(一生出来んな)

 ご自分で仕事できるのでは~
 (テンプレに限らずそっち系全般で)
 

SAKU さん、毎度どーもです!

ガラッと変えてみました〜 v-411

もしかしたらこのブログテンプレートと同じ仕掛けを作ってみたい人がいるかも?と思い、ついマニアックに解説してしまいました v-356
お恥ずかしい (*ノ∀ノ)

こういう仕事したかったんですけど、今更感が強いですよね〜
年齢的に v-356

No title

うわ~、すっごく素敵なテンプレートですね~
まさに、今!のテンプレート♪
見ていてウキウキしちゃいますね!!
こちらは、まだまだお花が咲かないので(といっても、そろそろの気配はしますが)見ていて癒されます!
私からすると、テンプレートを自分で作れること自体がスッゴイことなんですが、さらにその何倍も凄いことをされているんですね~
全くついていけてませんが、凄いことだけは分かります!
お疲れ様です~
きっと、こんなに苦労して作ったテンプレート、もう可愛くって仕方が無いんじゃないですか?
そして、私は癒されてます!
今は、季節の変わり目で体調を崩しやすい季節なので、この疲れが出て体調を崩さないように気をつけてくださいね♪

aki さん、いらっしゃいませ♪

aki さんのお住まいの所にも桜の木があるんでしょうか?
まだ咲かないって事は、やっぱりそれだけ気温が低いんでしょうね。開花が待ち遠しいですね ^^

このテンプレートで aki さんを癒せるなんて思っても見ませんでした ^^
素材(写真)に寄るところが多いですけどね ^^

No title

よくわからないけど、素晴らしい(拍手)
SEO対策がばっちりでいいですね。
何を勉強すると作れるようになるんでしょうか?

Happy Yuan さん、ありがとうございます。

お褒めいただきありがとうございます ^^
HTML とCSS、それと JavaScript を少々勉強しました。そう難しくはないですよ ^^

Post comment

Secret

Trackback

 home 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。