読者です 読者をやめる 読者になる 読者になる

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

はてなブログのデザインをjQueryで変えたい人のための超簡単な解説

ブログ ブログ-カスタマイズ

sponsor

こんにちは。できです。

みなさんjavascriptやjQuery、cssなどちゃんと使ってますか?

プログラミングに慣れていない人がいきなりいじろうとしたらとても大変な苦労になると思います。そこで、初心者の人がこれだけ覚えると、もうはてなブログデザイナーになれるよ、くらいのレベルまで到達できるテキストを作りました。

f:id:hiroyoshi-deki:20151202060800j:plain

要素の検証を覚える!

これがめちゃめちゃ大切なんです。Google chromeを使っているとデフォルトで入っていたと思います、要素の検証。ショートカットは「cmd+opt+i」です。

使うと次のような画面になります。

f:id:hiroyoshi-deki:20151202061217p:plain

この画面でできることは次の通りです。

  • 実際にjavascript、jQueryを打ち込んで試せる
  • CSSを一時的に変更して試せる

この二つ。

これがめちゃめちゃ便利です。実際に使って見ましょう。

要素の検証:CSS編

このページで要素の検証を実際に試して見てください。まずはCSSをいじってみましょう。

step1: 特定の要素の色を変えてみる。

やることはウェブページにおいて、色や大きさなどを設定しているcssという言語をブラウザ上でいじって、その場で確認してみるということです。

では、「要素の検証:CSS編」という見出しの上で右クリックをして要素の検証をしてみてください。実際にhtmlとcssを見ることができます。

f:id:hiroyoshi-deki:20151202065420p:plain

要素の検証画面で、選択した見出しの部分が青くハイライトされて、右側の小さい窓に「.entry-content h3」と表示されていませんか?画像は別ページのものなので文言が違います。

それでは「.entry-content h3」の「border-left」の右側をクリック。水色にハイライトされていじれるようになります。

f:id:hiroyoshi-deki:20151202065552p:plain

そして、その中でも一番右のローマ字と数字が合わさったところにキーカーソルを合わせて、キーボードの上下を押してみてください。

f:id:hiroyoshi-deki:20151202071717p:plain

変わりますね?

今度は、そのまま、実際の見出しを見てください。

f:id:hiroyoshi-deki:20151202071852p:plain

僕は青くしてみました。

わかりずらい人は「#oooooo」を#抜きで「red」としてみましょう。赤く変わります。これがCSSに関する要素の検証の使い方です。

step2: 文字のサイズを変えてみる

次は文字の大きさを変えてみましょう。先ほどと同様に「.entry-content h3」のCSSをいじりましょう。今度は「font-size」を変えてみてください。こちらはサイズなので変化がわかりやすいと思います。

 

f:id:hiroyoshi-deki:20151202072108p:plain

すごい大きな見出しの完成です。

step3: 高度な指定方法

リストのように同じ要素が繰り返される要素の場合、CSSにその要素のデザインを変える指定を書き込んでしまうと、すべての要素について変更を適用できます。例えば、当ブログのサイドバーにはカテゴリーがありますが、一つ一つの要素に下線が引いてあります。

ですが、要素がめちゃめちゃ多かったとしたら、偶数番目と奇数番目の色を変えてわかりやすくするなんてこともありそうです。

f:id:hiroyoshi-deki:20151202064154p:plain

例えばこんな感じですね。こんな指定もできると便利です。

この指定はこの記事でも使った指定方法に似た方法を使います。

 

www.dekihiroyoshi.com

この記事では「:last-child」を使いましたが、今回は「nth-child(n)」を使います。みてわかる通り、n番目の要素を指定します。

実際にやってみます。サイドバーの最新記事の一つを右クリックして要素の検証してみてください。おそらくアンカーが選択された状態になっていると思います。htmlの部分で<li>をクリックしてハイライトの位置を変更しましょう。「.hatena-module-body ul li:nth-child(2n)」これをコピーしておいてください。

f:id:hiroyoshi-deki:20151202072723p:plain

この状態でCSSの「.hatena-module-body ul li」の部分をクリックし、要素名をハイライトさせて「.hatena-module-body ul li:nth-child(2n)」に変更しましょう。

f:id:hiroyoshi-deki:20151202073011p:plain

このようにできたら次はCSSを変更します。

「border-bottom: 1px ...」の下当たりをクリックしてみてください。見つかりにくいですが、新しいハイライトがされます。

f:id:hiroyoshi-deki:20151202073529p:plain

こんな感じにしたいです。まずハイライトされたら「background」と入力してtabを押しましょう。すると新しい入力になるので「#333」と入力してください。変わりましたね。

その後、画面を変えたり、エンター押したりすると記入した部分が消えると思います。でも、安心してください。2n番目しか指定しないようになっているのに1番目の要素を見ているからです。2個目の<li>をみてみればちゃんといます。

以上で、要素の検証に関してCSSのある程度の考え方が身につきます。

CSS3リファレンスこちらのページがCSSについてよくまとまっているので、他にもいろいろな指定を調べてみてください。

次にjQuery編いきます。

要素の検証:jQuery編

jQueryは初めに一つだけ基本文法を覚えてください。

$("element.className").method()

です。

これを覚えておくと、要素の検証でいろいろ試せます。

  • element : htmlタグ
  • className : class or id ( .className or #idName )
  • method : いろいろあります。ex.) .css('background','#333')

以上のように対応しています。

実例としては

$("div.hatena-module-body ul li").css('background','#333')

これで先ほどのCSSと同じ効果があります。もちろん

$("div.hatena-module-body ul li:nth-child(2n)").css('background','#333')

の指定も可能です。

あとは、プログラミングをしていくことになります。例えば

 

www.dekihiroyoshi.com

こちらの記事で書いたように、見出しの数をh3を指定して数えることで、ちょうど中央あたりにアドセンスを表示することができます。

それでは、いくつか他の例を出していきます。

アニメーション

$('.j-animation').hide('slow')

このコードを実行してみてください。消えましたね?

気がつかなかった人のために今度は表示させましょう。

$('.j-animation').show('slow')

現れました!

わかりやすく10回ほど繰り返します。

for(i = 0; i < 10; i++) {
  $('.j-animation').hide('slow').delay(800).show('slow')
}

このコードを実行してみてください。ついたり消えたりしてますね。止める方法はないので、終わるのを待ってください。全部で10秒程だと思います。

これで、少しプログラミングっぽくなってきました。

次は要素の消えるスピードをだんだん変えてみます。

for(i = 0; i < 15; i++) {
  $('.j-animation').hide('slow').delay(i*i*i).show('slow')
}

これで、だんだん遅くなってきました。

こんな感じで、少しずつ練習していけばすぐに書けるようになります。まずは、いろいろな要素を取得して、少しずつ形を変えたり、値を出力してみてください。

semooh.jp

jQueryはこちらのサイトがよくまとまっています。ですが、HTMLとCSSほどは簡単にいかないと思うので、当サイトでも少しずつ説明を加えていきます。

© 2015 かんがえちゅう!