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

login

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

2019 09 < 12345678910111213141516171819202122232425262728293031 > 2019 11

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

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

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

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
スポンサーサイト



fc2 ブログテンプレートを作りました

ブログテンプレートを作りました。まだ未完成ではありますが、えいやっ☆で公開してしまいます。
もう年末だしね。うかうかしてたら年が明けちゃうしね。

snowflakes

細かなところで修正しなければならないところは多々あり。
中でもコメント覧の Javascript が機能しないところは皆さまにご迷惑をお掛けしますが、今しばらくおまちくださいませ~

私は派遣社員で大きな会社で働いているのですが、このところ人件費の予算消化とやらで残業することが多くなり、趣味時間も削られる日々だったりします。
それだけじゃなく、年末は何かと忙しいですよね~
忙しいけど負けないぞ~!おぅ!(と、ひとりで気合い入れてみる)


皆さまも体調など崩しませんように。応援クリックお願いします カエル
web拍手 by FC2

Web なこと勉強中

12月のデザインテーマ「冬の光」

ある日、これに応募しようかな?と思いつきました。

デザインはだいたいこんな感じでー、と頭の中にほわわーんとあるんですが、、
じゃあ何で作ろうか?とスクリプトに迷っていました。

XHTML + CSS は趣味レベルですが、一応マスターしています。でもこれから Web やるならやっぱり HTML5 + CSS3 ですよね。

HTML5+CSS3


HTML5 + CSS3 について調べてみると、またしてもマイクロソフトの嫌がらせが。。

HTML5 + CSS3 に対応してる Internet Explorer は、9 以降っていうじゃないですか!まだまだ 8 のシェアがあるというのに、なんてこったい。

あーもー、猛烈にヤル気なくした。

_ノ乙(、ン、)_

と、ヤル気なくしながらも調べてみたら、html5.js とか Modernizr とかでいろいろ救済方法があるんですね。なんとかなりそうな気がしてきましたよ?

よし!明日からがんばろっと!

え?そんな調子じゃ、締切り間に合わないって?
そうなったらそうなったでいいんですよ。趣味は楽しまなきゃね♪


そうそう。
テンプレートを作るために、Web 実験ブログをこっそり開設しました。
同じアカウントで複数ブログ持てると思いきや、fc2は 1アカウントにつき、1ブログしか持てないんですね。知らなかったよ。複数ブログを運営しているブロガーさんには面倒この上ないですね-。最もそこが狙いなんでしょうけどね。


ゆるーいぐらいが調度いい。応援おねがいします カエル
web拍手 by FC2

 home