長すぎるカテゴリー欄をアニメーションですっきりさせてみた
こんにちは鬱太郎です。ブログを書いているとついつい色々なカテゴリーが増えてしまいますよね？私もそうなんです。カテゴリー数が増えてしまうと、サイドモジュールのカテゴリーが占める割合が大きくなってしまいます。他のモジュールが見えなくなってしまいます。
そんな悩みを解決してみたので記事にしたいと思います。
右のカテゴリー欄にマウスカーソルを合わせると…？
スマホの方はカテゴリー欄のタイトルをタップすると…？
アニメーションで開いたり閉じたりします！
何もしないとカテゴリー欄のサイズが小さくなります。カーソルを合わせると、カテゴリー欄がすべて表示されます。
使い方
下のコードをデザイン→カスタマイズ→サイドバー→モジュール追加→HTMLのコード欄に追加します。タイトルは不要です。一行目はjQueryの読み込みです。既にヘッダー等に同様の記述がある場合は必要ありません。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ var normalHeight = "300px"; $(".hatena-module-category").height(normalHeight).css("overflow","hidden").hover(function(e){$(this).animate({height:$(this).get(0).scrollHeight},{duration:"slow"})},function(e){$(this).animate({height:normalHeight},{duration:"slow"})}); }) </script>
私は既にヘッダーにjQueryの読み込み記述があるため、上の画像では同様の記述がありません。注意してください。
var normalHeight = "300px";の数値はタイトルを含んだカテゴリモジュールを表示させる高さです。好きな値に変更してください。
はい。これだけで完成です！簡単ですね！
終わりに
何かと応用がききそうなのでぜひ試してください！何より楽しいです(*'ω'*)
スターやブックマーク、読者登録等いつもありがとうございます！大変励みになっています！
またね('ω')ノ
画面上に常に画像を表示させる方法
こんにちは鬱太郎です。昨日書いた記事
で画面の左上や左下に画像を常時表示させてみました。その方法があまりにも簡単だったため、記事にしてご紹介したいと思います。
スマホなど画面が小さい方は申し訳ありません。画面がうるさいですが、少し許してください...お願いします！
画面上に何かを常時表示させる
画面上に何かを常時表示させる場合はJavaScriptなどのプログラム技術は一切いりません。多少のHTMLコードをかける知識（コピペ等で十分）があれば大丈夫です！
基本はこれposition:fixedを使用していきます。
<div sylte="position:fixed; 位置指定"> </div>
です。これで常時表示させたい要素を囲むだけでOKです！
位置指定には
- top
- bottom
- left
- right
という上下左右から何ピクセルという指定方法があります。
実装例
画面左上に画像を常時表示させる
HTMLコードの場合（そのまま記法など）はHTML閲覧ページから、画像を表示しているタグ<img>を見つけ、それをdivで囲みましょう。
<div style="position:fixed; top:50px; left:0px;"> <img class="hatena-fotolife" width="50px" title="f:id:neet-utsu-taro:20171031222939p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20171031/20171031222939.png" alt="f:id:neet-utsu-taro:20171031222939p:plain" /> </div>
Markdown記法の場合は特に簡単で、はてな記法の画像表示部分を<div>で囲むだけです。
<div style="position:fixed; top:50px; left:0px;"> [f:id:neet-utsu-taro:20171031222939p:plain:w50] </div>
topやleft等を指定をしないと、親の位置を元に初期値が決まります。
左下に読者登録ボタンを常時表示する
勿論、画像の部分を他のものに変えることもできます。文章だったり、読者登録ボタンだったり...
という事で、読者登録ボタンを左下に常時表示させてみましょう。読者登録ボタンは設定->詳細設定ページからコピペできます。
<div style="position:fixed; bottom:0px; left:0px;"> <iframe src="https://blog.hatena.ne.jp/neet-utsu-taro/neet-utsu-taro.hatenablog.jp/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe> </div>
はい。左下に読者登録ボタンが見えているかと思います。
応用編
マウスオーバーした時のアクションを消したい
ブログのテーマ等の影響で、画像ファイル等にマウスカーソルを合わせた場合にいろいろなアニメーションが表示されることがあります。
それを消したい場合は、pointer-events: none;を追加しましょう。
<div style="position:fixed; top:120px; left:0px; pointer-events:none;"> <img class="hatena-fotolife" width="50px" title="f:id:neet-utsu-taro:20171031222939p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20171031/20171031222939.png" alt="f:id:neet-utsu-taro:20171031222939p:plain" /> </div>
画面の左上の1番目が、何もしてないものです。2番目がpointer-events:none;を追加した画像です。マウスを使づけても影が表示されず、タイトル（ID）も表示されません。
完全に背景としたい場合はおすすめです。ただ、読者登録ボタンなどのクリックしてアクションをするものと組み合わせる場合はそちらのアクションも停止させる恐れがあるため、注意が必要です。
真ん中に表示させる
中央揃えで表示させたい場合はまず表示させたい要素のサイズを調べる必要があります。表示させたいもののサイズが分からない場合は難しいので今回は省きます。
今回表示させたいのは画像幅50pxのものです。
左右に対して中央に表示させたい場合は、left:50%; margin-left:-25pxという風にします。
<div style="position:fixed; bottom:0px; left:50%; margin-left:-25px; pointer-events:none;"> <img class="hatena-fotolife" width="50px" title="f:id:neet-utsu-taro:20171031222939p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20171031/20171031222939.png" alt="f:id:neet-utsu-taro:20171031222939p:plain" /> </div>
margin-left: -○
○は幅/2ですね。
上下に対して中央に表示させたい場合も同じです。高さが68pxのため、margin-top:-34px;にしています。
<div style="position:fixed; right:0px; top:50%; width:60px; margin-top:-34px;"> <p style="font-size:10px;">いつも見ていただき、ありがとうございます！</p> </div>
こんな感じですね。
いつも見ていただき、ありがとうございます！
要素のサイズを調べるには
要素のサイズといってもどんくらいの大きさかわからない！という方はブラウザのデベロッパーツールをお勧めします。
chromeの例：
調べたい要素を右クリックし、検証を選択します。
すると、下のように要素の範囲を色付けし、詳細な情報を見ることができます。
左下の読者登録ボタンのdivは幅150px高さ36pxですね。
動かないといった場合は
うまく表示されない場合は、
- HTMLのタグが完全に閉じられていない
styleやposition、fixed等のスペルミスstyle="..."が正しいが、style="...という風になっているstyleの記述を;区切りで行っていない
などが考えられます。
注意
この手法は、ウィンドウのサイズや見ているユーザーの機種に関係なく表示させるものです。例えばスマホなどの画面が小さいものでも左上や左下に表示させてしまいます。
そういった場合分けを考慮すると、CSSやJavaScript等で動的に場合分けする必要があります。
ただ、特に何も考えずに表示したい場合はこの手法でOKです。
終わりに
ここまで読んでくださってありがとうございます！
ハロウィンやクリスマスなどのイベントの記事にこういった飾りつけをしてみてはいかがでしょうか？
ぜひ試してみてくださいね！
またね('ω')ノ
祝！ ブログ継続2か月目！ ありがとうございます！
こんにちは鬱太郎です。今日はブログ継続2か月の節目です！2か月目のブログの活動をまとめて反省していきます。
ん？ハロウィン要素…？安心してください！画面の左上と左下に可愛いカボチャさんを映しておきますから大丈夫ですって…（スマホなどで目障りな方…すみません。）
カボチャさんを削除する場合はこちらをクリックorタップするとページをリロードするまで永遠に消えます…さらばカボチャさん…
それでは決算開始！
てっててってててー♪（ちゃららん♪） てーっててててててってっててー♪
ブログでの1か月
この1か月をブログに関することでまとめてみました。
ダッシュボードで見てみる
継続日数63日(*'ω'*)ホクホク
10月の実績は
| 名目 | 値 | 9月分 | 先月分との差 |
|---|---|---|---|
| アクセス数 | 4053 | 4605 | 552 |
| 投稿数 | 30 | 34 | 4 |
| コメント数 | 4 | 6 | 2 |
| 総スター数 | 979 | 282 | 697 |
| 読者数 | 75 | 71 | 4 |
| 総ブックマーク数 | 112 | 34 | 78 |
アクセス数は若干落ちてますが、十分です！十分です！
何より、2か月間継続できたことがよい！お休み2回使ってしまったのは内緒...
ブログに訪問してくださった方々、スター、ブックマーク等を下さった方々、読者登録してくださった方々のおかげでここまで続けられました。ありがとうございます！
AtCoderにはまったよ
今月はAtCoderにはまった1か月でした。
記事のほとんどがそれに関することでしたね。
ようやくブログのタイトル通りの記事になってきました。
来月の目標
- 忘れられたAndroid君を開発する
- AtCoderのレートを上げる
- 継続を3か月に伸ばす
終わりに
ここまで読んでくださってありがとうございます！
スターやブックマーク、読者登録等いつもありがとうございます！おかげさまで2か月継続できました
本当にありがとうございます！
可愛いカボチャさんの画像はhttp://frame-illust.com/?p=4140さんのものを使わせてもらいました。ありがとうございます。
来月もよろしくお願いします。
またね('ω')ノ
スターフレンドを使ってブログ巡りをしよう！
こんにちは鬱太郎です。今日はブログ巡りをする際に便利なものを見つけたので、その紹介をしたいと思います。
背景
よーし、AtCoderの問題の記事も終わった！よっしゃブログ巡りしよう！
よーし・・・
ん？
未読267件
あ…
これ読み切れないやつだ…( ﾟДﾟ)
という事で、どうにかしようと思いました。
色々悩んだ結果、スターやブクマをしてくださった読者さんを優先に見て回ろうという結論に至りました。
そこで役に立ったのははてなスターのページです。
はてなスターでスターフレンドを見つけよう
はてなスターのマイページにはスターフレンドというものがあります。
このスターフレンドという欄には、一か月以内にお互いの記事にスターを付けた人が表示されます。
ワタシ、アナ、タト、トモダチ、ニ、...なってた！?こんなに簡単に友達できたら引きこもりのニートになってないよ
という事で、スターやブクマを付けてくれた人と、スターフレンドの人を優先的にブログ巡回したいと思います（記事を書いた時はまだ未巡回）。
終わりに
ここまで読んでくださってありがとうございます！
スター、ブックマーク、読者登録等いつもありがとうございます!すごい励みになっています。
いつの間にか読者登録も130人越えしていて驚きました！本当にありがとうございます！少し時間がかかるかもしれませんが、新しい読者さんも読者登録していきたいと思います。
またね('ω')ノ
次のタグをアニメーションで表示非表示にできるようにしました
こんにちは鬱太郎です。先日作ったnext-hiddenを改良しました。良ければ見て言って下さい！
そう！アニメーションで動作をできるようにしました。
前の記事
改善のコメントありがとうございます。
要件見た感じもっとコンパクトにできそうな気がするけど気のせいかも
ghostbassさん
コメントありがとうございます！確かにそうですね！つぎのkathewさんのコメントを元にコードを改良したら確かにコンパクトになりました。でも要件追加して、コードが伸びましたｗｗ
eachで回さなくて大丈夫だよ。jQueryでイベントを仕込んだらセレクタにヒットする全ての要素にイベントが適用されるよ/初期状態で非表示化するのは$(セレクタ).next().hide() おすすめ
kathewさん
コメントありがとうございます！そうなんですね！教えていただいてありがとうございます！私はjQueryについて詳しくなくて、逆引きで調べて作って動けばOKみたいな感じでしたので本当に助かりました。
コメントから学んだことを書いていきますね。ありがとうございます。
end()を使ってメソッドチェーンが書ける
end()はjQueryのメソッドの一つです。一つ前の選択状態に戻すという効果があります。
$(".next-hidden").next().hide();
は、hide()のところでは$(".next-hidden).next()を選択しています。end()を付けることで、一つ前の$(".next-hidden")の選択状態に戻すことができます。
$(".next-hidden").next().hide().end().click(function(){
$(this).next().toggle();
});
こんな感じにつなげて記述することができます。
これをメソッドチェーンと言うらしいです。
セレクタ.eachは必須じゃない
私が逆引きでいろいろとjQueryについて調べていた時に、セレクタ.eachで処理しているコード例が多かったので初めて知りました。nullの場合とかはエラーを吐かないんですね。
今回のコードのように中にif文とか書いてる場合はさすがにeachでいいのかな？
今回の改善の流れ
コメントで指摘を受けて、いろいろとjQueryについて調べているときに、
ん・・？
.toggle() 表示、非表示を切り替える。
デデーン！
そんな便利なものあったのか！
if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $(this).next().show(); }
これが
$(this).next().toggle();
一行に！
そして、ふと上を見ると？
アニメーション…だと…？
という事で、next-hiddenはコードがシンプルになった途端にアニメーションも追加できる要件が追加されましたｗ
参考サイト
動作デモ
前回の動作
前回の動作に加え、新たに二つの動作が追加されました。
スライド表示非表示
jQueryのslideToggle()を使った動作を追加しました。
フェードイン・アウト表示非表示
jQueryのfadeToggle()を使った動作を追加しました。
ソースコードと使用例
実際の使い方を説明していきます。
1.スクリプトコードを記事に張りつける
下記コードを使用する記事の中に記述してください。そのまま記法の方はHTML編集タグから追加できます。先頭の1行はjQueryの読み込みコードなので、既にヘッダー等に同様の記述がある場合は不要です。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ var classSelector = ".next-hidden"; var attrForNext = "data-display"; var attrNextClass = "data-next-class"; var attrType = "data-type"; var attrTime = "data-time"; $(classSelector).next().hide().end().each(function(){ if($(this).next().length){ var time = $(this).attr(attrTime); var toggleArgument = (isNaN(time))?time:Number(time); switch($(this).attr(attrType)){ case "slide": $(this).click(function(){ $(this).next().slideToggle(toggleArgument); }); break; case "fade": $(this).click(function(){ $(this).next().fadeToggle(toggleArgument); }); break; default: $(this).click(function(){ $(this).next().toggle(toggleArgument); }); break; } $(this).next().css("display",$(this).attr(attrForNext)).addClass($(this).attr(attrNextClass)); } }); }) </script>
2.イベントを登録したいタグにクラス名や属性を追加する
ソースコードをコピペした後はタグにクラス名を付けるだけで機能します。
そのまま記法の方は、HTML編集ページから、Markdown記法の方は直接記述できます。
通常の動作
class="next-hidden"を記述することで、そのタグに次のタグを表示非表示にさせるイベントを追加します。このとき、デフォルトで次のタグの要素を非表示にします。
<p class="next-hidden"><a>ここをクリック</a></p> <p>タグに<code>class="next-hidden"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。</p>
タグにclass="next-hidden"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。
スライドしつつ表示非表示にさせる
class="next-hidden"を記述し、属性data-type="slide"を追記することで、スライド動作を有効にします。
<p class="next-hidden" data-type="slide"><a>ここをクリック</a></p> <p>タグに<code>class="next-hidden" data-type="slide"</code>を追加することで、クリックすると次のタグをスライド動作で表示非表示させるイベントを追加できます。</p>
タグにclass="next-hidden" data-type="slide"を追加することで、クリックすると次のタグをスライド動作で表示非表示させるイベントを追加できます。
フェードしつつ表示非表示にさせる
class="next-hidden"を記述し、属性data-type="fade"を追記することで、フェード動作を有効にします。
<p class="next-hidden" data-type="fade"><a>ここをクリック</a></p> <p>タグに<code>class="next-hidden" data-type="fade"</code>を追加することで、クリックすると次のタグをフェード動作で表示非表示させるイベントを追加できます。</p>
タグにclass="next-hidden" data-type="fade"を追加することで、クリックすると次のタグをフェード動作で表示非表示させるイベントを追加できます。
オプション
最初に次のタグを表示しておきたい場合
さらにdata-display="block"という属性を追記することで、初期状態を表示状態にすることができます。通常の動作、スライド動作、フェード動作のすべてに追記することができます。次の例はフェード動作に初期状態を表示させる属性を追加します。
<p class="next-hidden" data-type="fade" data-display="block"><a>ここをクリック</a></p> <p>タグに<code>data-display="block"</code>を追記することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグは最初から表示されます。</p>
タグにdata-display="block"を追記することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグは最初から表示されます。
次のタグにクラスを追加したい場合
さらにdata-next-class="hogehoge"という属性を追記することで、次のタグにclass="hogehoge"を追加します。もちろんhogehogeの部分には好きなクラス名を記述できます。
これも動作に関わらず追記することができます。次の例はスライド動作にクラス名を追加します。
<style>.hogehoge{background-color: gray;}</style> <p class="next-hidden" data-type="slide" data-next-class="hogehoge"><a>ここをクリック</a></p> <p>タグに<code>data-next-class="hogehoge"</code>を追加することで、次のタグにクラス名<code>hogehoge</code>を追加できます。この例ではCSSで背景を変更しています。</p>
タグにdata-next-class="hogehoge"を追加することで、次のタグにクラス名hogehogeを追加できます。この例ではCSSで背景を変更しています。
アニメーション動作にかかる秒数を指定したい場合
全ての動作にかかる時間をミリ秒単位で指定できます。例えば、data-time="3000"を追記することで、表示非表示に掛かる動作を3秒に指定できます。
通常の動作で3秒
<p class="next-hidden" data-time="3000"><a>ここをクリック</a></p> <p>タグに<code>data-time="3000"</code>を追記することで、クリックすると3秒かけて次のタグを表示非表示させるイベントを追加できます。</p>
タグにdata-time="3000"を追記することで、クリックすると3秒かけて次のタグを表示非表示させるイベントを追加できます。
スライド動作で3秒
<p class="next-hidden" data-type="slide" data-time="3000"><a>ここをクリック</a></p> <p>タグに<code>data-time="3000"</code>を追記することで、クリックすると次のタグをスライド動作で3秒かけて表示非表示させるイベントを追加できます。</p>
タグにdata-time="3000"を追記することで、クリックすると次のタグをスライド動作で3秒かけて表示非表示させるイベントを追加できます。
フェード動作で3秒
<p class="next-hidden" data-type="fade" data-time="3000"><a>ここをクリック</a></p> <p>タグに<code>data-time="3000"</code>を追記することで、クリックすると次のタグをフェード動作で3秒かけて表示非表示させるイベントを追加できます。</p>
タグにdata-time="3000"を追記することで、クリックすると次のタグをフェード動作で3秒かけて表示非表示させるイベントを追加できます。
動作のまとめ
class="next-hidden"で機能を追加data-type="slide"でスライド動作data-type="fade"でフェード動作data-typeを記述しない、もしくは上記2つ以外の値の場合は通常の動作- 読み込み時はデフォルトで次のタグを非表示にします。
data-display="block"で読み込み時に表示 data-next-class="..."で次のタグにクラス名を指定data-time=...で表示非表示にそれぞれかかる秒数を指定できる。1秒の場合はdata-time="1000"
過去の記事も参考に
過去の記事で書いてあることはこの改良型でも動作します。
終わりに
次のタグをアニメーションで表示非表示にできるようにしました！
アニメーションの選択肢が3倍に増えたので3倍遊べますよ！ふふふ(*'ω'*)
スターやブクマ、コメント、読者登録ありがとうございます！すごい励みになってます。
またね('ω')ノ
祝！読者登録100人突破
こんにちは鬱太郎です。先日読者登録が100人を突破しました！
ありがとうございます！
正直プログラムのことをただべちゃくちゃしゃべっているだけなので、普通のブログが好みの方々には申し訳ないと思っています。
こんな私のブログをたまにちょっと見て「ふーん」と思っていただければ嬉しいです！
本当にありがとうございます。
嬉しさのあまりプログラムを作りました（3秒ごとに名前が変わります！）↓↓
さん 本当にありがとうございます！
これからもよろしくお願いします！
またね('ω')ノ
次のHTMLタグを非表示表示できるjavascriptを作ってみた
こんにちは、鬱太郎です。先日あるものを作りました。
そう！クリックすると次のHTMLタグを表示非表示にできるプログラムを作りました。
あれ？デジャヴ・・・？
追記:改良型を作りましたこちらの記事をご覧ください
次のタグ表示非表示モジュール(next-hidden.js)
名前は相変わらずです。そもそもhideとhiddenの違いや使い方もよくわかっていませんｗ
hideよりもhiddenの方がかっこいいよね！
何ができるかというと、
- クリック（タップ）すると次のHTMLタグを非表示や表示できる
- 最初から次のHTMLタグを非表示にするか表示したままかを選べる
この2点です。文章力なくてすみません。
前回のプログラムとの違い
前回は見出し間を表示非表示にするものでした。今回のは、表示非表示させる部分を次のHTMLタグのみに限定することで、見出しだけでなく、すべてのタグにイベントを追加できるようになりました。
次のHTMLタグというのは親と子の関係でなく、兄弟の関係を指します。
<p class="next-hidden">ここをクリック</p> <div> .... </div>
上の例では<p>と<div>は兄弟関係にあります。<p>をクリックすると次のタグの<div>を表示非表示にできるイベントを<p>に追加します。
<div class="next-hidden"> <p>あいうえお</p> </div> <ul> ... </ul>
上の例では<div>と<p>は親子関係、<div>と<ul>は兄弟関係にあります。ですので、<div>をクリックすると<ul>を表示非表示にできるイベントを<div>に追加します。
動作デモ
pタグにイベントを追加して、次のpタグを隠す
<p>タグというのは文章を表示する際のタグですね。
<p class="next-hidden">ここをクリックすると、次のタグが表示非表示します</p> <p>ちらっ |ω・`）</p>
ちらっ |ω・`）
次の画像を表示非表示にさせるイベントを追加する
<p class="next-hidden"><a>ここをクリックして画像を見る</a></p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20170907/20170907193330.jpg" title="サンプル画像" class="hatena-fotolife" itemprop="image">
Markdown記法の方はこのように簡単に書けます
<p class="next-hidden"><a>ここをクリックして画像を見る</a></p> [f:id:neet-utsu-taro:20170907193330j:plain]
次のli要素を隠す
<ul> <li>未経験者歓迎</li> <li class="next-hidden">福利厚生充実（クリックしちゃダメ）</li> <li>残業代なし</li> <li>笑顔の絶えない職場です</li> </ul>
- 未経験者歓迎
- 残業代なし
- 笑顔の絶えない職場です
コードと使用例
実際の使い方を説明していきます。
1.スクリプトコードを記事に貼り付ける
次のコードを記事に貼り付けてください。最初の1行はjQueryの読み込みです。既にヘッダー等に記述してある方は必要ありません。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ var classSelector = ".next-hidden"; var attrForNext = "data-display"; var attrNextClass = "data-next-class"; var display ="display"; var none="none"; $(classSelector).each(function(){ if($(this).next().length){ var init = $(this).attr(attrForNext); $(this).next().css(display,(init)?init:none); $(this).click(function(){ if($(this).next().css(display) == none){ $(this).next().show(); }else{ $(this).next().hide(); } }); var nextClass = $(this).attr(attrNextClass); if(nextClass){ $(this).next().addClass(nextClass); } } }) }) </script>
2.イベントを登録したいタグにクラス名や属性を追加する
ソースコードをコピペした後は、タグにクラス名を付けるだけで機能します。
そのまま記法の方は、HTML編集ページから、Markdown記法の方は直接記述できます。
デフォルト動作の記述方法
class="next-hidden"を記述することで、そのタグに次のタグを表示非表示にさせるイベントを追加します。このとき、デフォルトで次のタグの要素を非表示にします。
<p class="next-hidden"><a>ここをクリック</a></p> <p>タグに<code>class="next-hidden"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。</p>
タグに
class="next-hidden"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。
最初に次のタグを表示しておきたい場合
さらにdata-display="block"という属性を追記することで、初期状態を決定できます。
<p class="next-hidden" data-display="block"><a>ここをクリック</a></p> <p>タグに<code>class="next-hidden" data-display="block"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグが表示されたまま読み込まれます。</p>
タグに
class="next-hidden" data-display="block"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグが表示されたまま読み込まれます。
次のタグにクラス名を付けたい場合
CSSなどで非表示にさせるタグにデザインを追加したい場合があるかもしれません。その場合はdata-next-class="hogehoge"の様に記述することで、クラス名が次のタグに追加されます。
<style>.hogehoge{background-color: gray;}</style> <p class="next-hidden" data-next-class="hogehoge"><a>ここをクリック</a></p> <p>タグに<code>class="next-hidden" data-display="block"</code>を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグが表示されたまま読み込まれます。</p>
タグに
class="next-hidden" data-next-class="hogehoge"を追加することで、クリックすると次のタグを表示非表示させるイベントを追加できます。また、次のタグにクラス名が追加されます。これを使ってデザインを変更できます。
上の例ではクラス名hogehogeに背景を灰色にするCSSを追加しています。
機能のまとめ
class="next-hidden"で機能を追加- 読み込み時はデフォルトで非表示。
data-display="block"で読み込み時に表示 data-next-class="..."で次のタグにクラス名を追加
応用
基本的にどんなタグでも追加できる
基本的にはどんなタグでもイベントを追加できます。ただし、クリック(タップ)できるものでないとイベントは発生しません。
<div class="next-hidden"></div> <p>ここが隠れます</p>
ここが隠れます
この場合でも正常にイベントが追加されますが、ユーザーが<div>タグをクリック(タップ)できないため表示非表示をさせることができません。
CSSなどを駆使して、ユーザーがクリック(タップ)できるサイズにする必要があります。
<div class="next-hidden" style="width:30px;height:30px;background-color:blue;"></div> <p>ここが隠れます</p>
ここが隠れます
上記の例は<div>にサイズを設定して、色を付けました。青色の部分をクリックするとイベントが発生し、下のタグが表示・非表示されます。
複数のタグを表示・非表示にさせる
このプログラムは次のタグだけしか表示・非表示にできません。
<p class="next-hidden"><a>募集要項はこちら</a></p> <p>具体的な内容を下に並べました。</p> <ul> <li>未経験者歓迎</li> <li class="next-hidden">福利厚生充実（クリックしちゃダメ）</li> <li>残業代なし</li> <li>笑顔の絶えない職場です</li> </ul> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20170907/20170907193330.jpg" title="サンプル画像" class="hatena-fotolife" itemprop="image" width="200" height="200">
具体的な内容を下に並べました。
- 未経験者歓迎
- 残業代なし
- 笑顔の絶えない職場です
本当は画像まですべて非表示にさせたいと思っても、そのままでは次のタグしか非表示にできません。
しかし、<div>で囲むとまとめて非表示にできます。
<p class="next-hidden"><a>募集要項はこちら</a></p> <div> <p>具体的な内容を下に並べました。</p> <ul> <li>未経験者歓迎</li> <li class="next-hidden">福利厚生充実（クリックしちゃダメ）</li> <li>残業代なし</li> <li>笑顔の絶えない職場です</li> </ul> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/neet-utsu-taro/20170907/20170907193330.jpg" title="サンプル画像" class="hatena-fotolife" itemprop="image" width="200" height="200"> </div>
具体的な内容を下に並べました。
- 未経験者歓迎
- 残業代なし
- 笑顔の絶えない職場です
終わりに
ここまで読んでくださってありがとうございます！
前回の見出し間の表示非表示プログラムよりも、汎用性は高いかなと思います。前回のは見出しが不必要に増えてしまうため、目次等が荒れてしまいました(´;ω;｀)。今回はすべてのタグに追加できるものなので、見出しにする必要もありません。好きなタグに追加しましょう！
興味のある方はぜひこのスクリプトで遊んでください！私が発情した犬のようにソーラン節を踊りまくりつつ喜びます。
読者登録ありがとうございます。スターやブックマーク、コメント等もありがとうございます！励みになってます。
またね('ω')ノ
追記:改良型を作りましたこちらの記事をご覧ください
記事の見出し間を表示非表示にできるjavascriptを作ってみた
こんにちは、鬱太郎です。昨日一昨日とJavaScriptとjQueryをいじりつつ、あるものを作っていました。
こんなのを作ってみました クリックしてみてください
そう！見出しをクリックするとその内容を表示非表示にできるモジュールを作りました。今日はこれについて話していきたいと思います。
見出し間表示非表示イベントモジュール（toggle-header.js）
名前は私のネーミングセンスの結晶の塊です。あまり責めないでくださいｗ具体的に何ができるかというと、
- 見出しをクリックするとその見出しから次の見出しまでを表示非表示にできる
- 最初から見出しの次の内容を非表示にできる
この2点です。自分で説明しててもよくわかりません。（文章力がなくて申し訳ないです）
動作デモ
動作デモの見出しの中身のすべての見出しは先ほど説明したモジュールが組み込まれています。見出しを色々とクリックしてみてください。
読み込み時は見えているが、見出しをクリックすると消えたり見えたりするよ
あああああああああああああああああああああああああああああああああああああああああああああああああ
読み込み時には見えていないけど、見出しをクリックすると見えたり消えたりするよ
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ「ようこそ」
実は動作デモの見出しもクリックすると開いたり閉じたりするよ！
何に使うの？
といっても、何に使うと便利なんでしょうか？私がいろいろと考えてみました。
ソースコードなど、とにかく長い文章を書くとき
私はプログラムを作ってそれを乗っけたりしています。するととても長い文章を表示しなくてはいけない時もあります。
皆さんも原因は違えど、とても長い文章や写真の羅列などをしたことがあるのではないでしょうか？
その時にこのモジュールを使うと、読者の方も見やすいのではないでしょうか？
下はその例です。
サンプルソースコードをクリックして見る
問題の回答など隠したい要素があるとき
例えば読者に問いかけるような内容の記事の場合には、このモジュールは有効かもしれません。
1+1は？
クリックして答えを見る
2!
ロマン
はい。ロマンですそれ以上に何もないです。皆さんも何かに使ってみませんか？
コードと使用例
実際の使い方を説明していきます。
1.スクリプトコードを記事の先頭に貼り付ける
次のスクリプトコードを記事の先頭に貼り付けてください。
- 見たまま記法の方はHTMLモードの先頭に貼り付けてください
- Markdown記法の方は先頭に直接貼り付けられます
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ //<h2,h3,h4... class="toggle-header" [data-display="none"][data-clink="1"]></h2,h3,h4,...> //セレクタ用 var headerClass=":header.toggle-header"; var headerAttrForDiv="data-display"; var headerAttrForP="data-clink"; //閉じるボタンのクラス CSS用に必要かも var closeLinkClass = "close-link"; //閉じるリンクの説明文字 var linkTextPre="<p class='"+closeLinkClass+"'><a>ここをクリックすると『"; var linkTextPost = "』が閉じます</a></p>"; $(headerClass).each(function(){ var level = this.nodeName.toLowerCase().slice(-1); var nextHeader = "h1"; for(var i=2;i<=level;i++){ nextHeader += ",h" + i; } if($(this).nextUntil(nextHeader).length){ $(this).click(function(){ if($(this).next().css("display")=="none"){ $(this).next().show(); }else{ $(this).next().hide(); } }); var init = $(this).attr(headerAttrForDiv); var divStr = "<div style='display:"+((init)?init:"block")+"'>"; var linkStr = linkTextPre + $(this).text() + linkTextPost; $(this).nextUntil(nextHeader).wrapAll(divStr); if($(this).attr(headerAttrForP)){ $(this).nextUntil(nextHeader).last().append(linkStr); $(this).next().children(":last").click(function(){ $(this).parent().hide(); }) } } }); }) </script>
1行目はjQueryの読み込みです。既にヘッダー等に同様の記述がある場合は必要ありません。
2.見出しにクラス名や属性を追加する
ソースコードをコピペした後は、見出しにクラス名を付けるだけで機能します。
そのまま記法の方はHTML編集のページから非表示させたい見出しh1,h2,h3...などを見つけてクラス名や属性を追加してください。Markdown記法の方はHTMLコードを直接記述できます。
デフォルト動作の記述方法
class="toggle-header"を記述することでその見出しにクリックのイベント機能が追加されます。
<h5 class="toggle-header">デフォルト動作</h5> <p>見出しタグに<code>class="toggle-header"</code>を追加することでクリックすると非表示表示させる機能が付きます</p>
デフォルト動作
見出しタグに
class="toggle-header"を追加することでクリックすると非表示表示させる機能が付きます
最初に非表示からスタートさせる記述方法
最初から内容を非表示にしたい場合はdata-display="none"をさらに追加します。
<h5 class="toggle-header" data-display="none">最初に表示させない</h5> <p>見出しタグに<code>class="toggle-header" data-display="none"</code>を追加することで最初に表示はさせずに、クリックすると表示非表示させる機能が付きます</p>
最初に表示させない
見出しタグに
class="toggle-header" data-display="none"を追加することで最初に表示はさせずに、クリックすると表示非表示させる機能が付きます
末尾に非表示にさせるリンクを追加する
末尾にクリックすると見出しをクリックしたときと同じように非表示にできるリンクを追加します。data-clink="1"をさらに追加します。例ではdata-display="none"を使っていませんが、もちろん両方使えます。
<h5 class="toggle-header" data-clink="1">末尾にリンクを追加</h5> <p>見出しタグに<code>class="toggle-header" data-clink="1"</code>を追加することで、末尾にクリックすると非表示させるリンクが付きます</p>
末尾にリンクを追加
見出しタグに
class="toggle-header" data-clink="1"を追加することで、末尾にクリックすると非表示させるリンクが付きます
機能のまとめ
class="toggle-header"を追加したいヘッダーにつけるdata-display="none"で初期状態は非表示data-clink="1"で末尾に非表示リンクを追加
です。少し難しいですが、ぜひ試してください！
注意事項
このプログラムはclass="toggle-header"を指定した見出しレベルを読み取って動作しています。<h3 class="toggle-header">ならば見出しレベルは3ですね。
プログラムはclass="toggle-header"を指定した見出しレベルを含むそれ以上の見出しが出るまで、それを非表示にさせる内容ととらえます。見出しレベルが3ならば、<h1><h2><h3>が次に出るまでの内容をまとめて表示非表示にさせるイベントを追加します。<h4><h5><h6>の内容がかかれていてもそれもまとめて非表示にさせてしまうことがあります。下がその例です。
<h3 class="toggle-header" data-display="none">見出し3</h3> <p>見出し3の内容</p> <h4 class="toggle-header" data-display="none">見出し4</h4> <p>見出し4の内容</p> <h5 class="toggle-header" data-display="none">見出し5</h5> <p>見出し5の内容</p> <h3 class="toggle-header" data-display="none">見出し3-2</h3> <p>見出し3-2の内容</p> <h4 class="toggle-header" data-display="none">見出し4-2</h4> <p>見出し4-2の内容</p> <h5 class="toggle-header" data-display="none">見出し5-2</h5> <p>見出し5-2の内容</p> <p>ここは非表示にさせたくない！</p>
見出し3
見出し3の内容
見出し4
見出し4の内容
見出し5
見出し5の内容
見出し3-2
見出し3-2の内容
見出し4-2
見出し4-2の内容
見出し5-2
見出し5-2の内容
ここは非表示にさせたくない！
この動作は仕様なのですが、レベルが下の見出しもまとめて表示非表示にさせたくない場合もあるでしょう。
その場合は対応した見出しレベルのダミーを追加することで、問題を解決できます。対応する見出しにstyle="display:none"を付けることでうまく動作します。
<h3 class="toggle-header" data-display="none">見出し3</h3> <p>見出し3の内容</p> <h3 style="display:none"></h3> <h4 class="toggle-header" data-display="none">見出し4</h4> <p>見出し4の内容</p> <h4 style="display:none"></h4> <h5 class="toggle-header" data-display="none">見出し5</h5> <p>見出し5の内容</p> <h5 style="display:none"></h5> <h3 class="toggle-header" data-display="none">見出し3-2</h3> <p>見出し3-2の内容</p> <h3 style="display:none"></h3> <h4 class="toggle-header" data-display="none">見出し4-2</h4> <p>見出し4-2の内容</p> <h4 style="display:none"></h4> <h5 class="toggle-header" data-display="none">見出し5-2</h5> <p>見出し5-2の内容</p> <h5 style="display:none"></h5> <p>ここは非表示にさせたくない！</p>
見出し3
見出し3の内容
見出し4
見出し4の内容
見出し5
見出し5の内容
見出し3-2
見出し3-2の内容
見出し4-2
見出し4-2の内容
見出し5-2
見出し5-2の内容
ここは非表示にさせたくない！
終わりに
ここまで読んでくださってありがとうございます！
ここ最近はjavascriptやjQueryを触りまくっていました。ほぼほぼ初心者でしたが、今では少しはコードも書けるようになったと思います。
興味のある方はぜひこのスクリプトで遊んでください！私が泣いて喜びます！
読者登録ありがとうございます。スターやブックマーク、コメント等もありがとうございます！励みになってます。
またね('ω')ノ
はてなブログは何で書く？ Markdownで決まりでしょ！
皆さんはどの方法ではてなブログを書いていますか？見たままですか？それとも硬派にHTML直打ちですか？
Markdown教に入信して約1か月がたった私、鬱太郎がMarkdown記法の魅力についてお伝えしたいと思います。
PCで書かれる方向けに想定してます。スマホで記事を書かれる方はディスプレイの大きさ的に見たまま記法の方がいいのかもしれません。
はてなブログの編集方法
はてなブログの編集方法は4つありますよね
- そのまま
- はてな記法
- Markdown
- HTML
皆さんはどれが好きですか？Markdownを使っている人は私とお仲間ですね(*'ω'*)
Markdownの疑問
Markdownって何？
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
Markdownはいわゆるホームページ（HTML）を簡単に作る書き方のことです。HTMLを書いたことがある方はわかると思いますが、HTMLはタグを閉じたりするのにとても面倒です。そういった面倒を解消するために作られた手段というわけですね。
Markdownって難しいんじゃないの？
そんなことありません。確かに最初は戸惑いますが、慣れれば見たまま記法よりも早く書くことができます。
また、見たまま記法のようにツールバーやサイドメニューのモジュールも普通に使うことができます。
画像の追加から、目次の追加、文字の拡大縮小、太文字等の基本的な機能はMarkdownでする必要もなく、はてなブログのインターフェースからも使うことができます。いいね！
また、書きながら記事の完成を見ることができます。見たまま記法のように完ぺきではありませんがある程度のデザインを見ながらできます。
さあ、Markdown教に入信したくなってきましたか？
Markdownにしていいことあるの？
もちろんです！これから説明していきますね！
堅苦しいからこその安定感がある
MarkdownはいわゆるCUI（文字ベース）でブログを書いていきます。再現性があるということです。また、記事にする際に無駄な部分を省いてくれるため記事ごとの無駄な表記ズレがなくなります。
見たまま記法ですと、見出しを入れるときに少しずれてしまったりなどよくありませんか？ありますよね！（食い気味）そういったGUI（マウスなどでドラッグなどして操作する方法）にない利点があります。
はてなブログのMarkdownはちょっと特殊
はてなブログのMarkdownはいわゆる正規のMarkdownとは違います。方言みたいのものが組み込まれていると考えてください。Markdown記法でも使えるものによってははてな記法のものも使えます。
両者のいいとこどりというわけですね！
Markdownを覚えておけば他のブログを使ったときに便利
Markdownを使っておけばMarkdownに対応している他のブログに移った時に便利です。いわゆるMarkdownはブログ界の共通語のようなものです。（大げさに言いました）
環境が変わっても同じものがあるというのはいいものですよ！
MarkdownはHTMLも書ける
Markdown記法ではHTMLコードも書くことができます。HTMLで記述したい部分があるけど、HTML記法ですべて書くのはちょっと…といった方にピッタリですね！
HTMLコードがかけるという事は<script>も埋め込むことができます。javascriptで便利なモジュールを見つけたけどどうしよう？といった方はMarkdown記法を使ってみるのはいかがでしょうか？
きっとあなたの役に立つことでしょう！
Markdownはネットがない場所でも編集できる
せっかくブログを書いたのに、書きたかったのに、ネットにつながらない！という方いませんか？
外出してノートパソコンだけど、ブログ書こうかな？無料Wifiないし、テザリングか…でも通信制限大丈夫だっけ？…といった経験ありませんか？
ありますよね！
Markdown記法でブログを書けば、画像の貼り付け以外のほとんどをネットのない環境で作ることができます。
もちろんフリーソフトでありますよ！
ネットが必要でない部分を手元で書いておいて、あとではてなブログの方にコピペするだけで完成です！簡単！
あ！入信してくださるんですか？ありがとうございます！
よく使うMarkdownの記述方法
どうやら入信される決心がついたようですね！そこで、私がよく使うMarkdown記法について説明していきます。
見出し
見出しは基本！Markdown記法では#で見出しを表せます。#の個数が見出しのレベルと対応しています。
そのまま記法では、ブラウザのアドイン等を入れない限り、見出し3~5のレベルしか使えません。Makrdown記法はそんな束縛をものともしないでしょう。
##見出し2 ###見出し3 ####見出し4 #####見出し5 ######見出し6
見出し2
見出し3
見出し4
見出し5
見出し6
あれ？じゃあ#を表示したいときはどうするの？と思う方もいるでしょう！
安心してください！エスケープ文字というのがあります。Markdownのエスケープ文字は\バックスラッシュです。
\# \#\#
#
##
また、`バックコーテーションで囲むと<code>タグとみなされ、中身のmarkdown記法がすべてエスケープされます。バックコーテーションはキーボードのShiftキーを押しながら@で出ます。
`\`や`####`といったものもこんな風にエスケープできます。
\や####といったものもこんな風にエスケープできます。
改行
改行する際は必ず二回以上改行しないと改行とみなされません。1行開ける必要があります。
改行したつもりでも、 つながってしまいます。
改行したつもりでも、 つながってしまいます。
改行したい場合は、 1行開けましょう。
改行したい場合は、
1行開けましょう。
箇条書き
箇条書きはツールバーからも書けますよ！初心者にも安心!
* 箇条書きは、アスタリスク`*` * や`-`、`+`などを書き、半角スペースを空けて、 * 内容を書くと書けます。
- 箇条書きは、アスタリスク
* - や
-、+などを書き、半角スペースを空けて、 - 内容を書くと書けます。
その際上下に1行空行を空けておくといいでしょう。
表を書く
ちょっと調査不足なのですが、そのまま記法で表って書けますか？上のツールバー見ても見当たらないのでもしかしたらかけないのかもしれません。
しかし、Markdown記法を使えば表を入れることができます！
左揃え|中央ぞろえ|右揃え :-|:-:|-: 01|02|03 Markdown記法は|あなたのブログ作りに|光を指すでしょう！
| 左揃え | 中央ぞろえ | 右揃え |
|---|---|---|
| 01 | 02 | 03 |
| Markdown記法は | あなたのブログ作りに | 光を指すでしょう！ |
これもまた上下に1行開けておきましょう。|で要素を区切ります。キーボードのバックスペースキーの左にあります。Shiftキーを押しながら円記号を押すと出ます。
2行目にその列の文字揃えを記述する必要があります。その内容は上記の例を参考にしてください。
画像の詳細を記述する
これははてな記法になるのですが、Markdownでもできます！
画像をサイドバーから選ぶと、このような形式のものが出てきます。
[f:id:neet-utsu-taro:20170924085633j:plain]
これはそのままですとこのような縦長の写真が出てきてしまいます。
長い！すみません。
はてな記法では写真の高さや幅を調節できます。
[f:id:neet-utsu-taro:20170924085633j:plain:h200]
これは高さ200のサイズで画像を表示させる方法です。plainの後ろに:hと続けて設定したい大きさを書きましょう。
幅を指定したい場合は:wに指定したいサイズを書きます。幅200のサイズで画像を表示させてみました。
[f:id:neet-utsu-taro:20170924085633j:plain:w200]
また、画像のタイトルや説明をtitle要素とalt要素を使い盛り込むことができます。
[f:id:neet-utsu-taro:20170924085633j:plain:w200:title=カーソルを合わせると画像のタイトルが表示されます:alt=これは画像の説明です。画像の代わりを文字で表しましょう]
画像にカーソルなどを合わせると、タイトルが表示されます。タイトルを設定しないと、画像ファイルのIDが表示されます。上の画像で試してみてください。
え？画像が左寄りばかり？
先ほども言ったようにHTMLコードも記述できますよ！という事は…？<center>等のタグも使えますよ！といっても<center>タグは非推奨なので<div align="center">を使っていきます。
<div align="left"> [f:id:neet-utsu-taro:20170924085633j:plain:h200] </div> <div align="center"> [f:id:neet-utsu-taro:20170924085633j:plain:h200] </div> <div align="right"> [f:id:neet-utsu-taro:20170924085633j:plain:h200] </div>
HTMLの書き方になれていない方は難しいかもしれませんが、できればこんな風に綺麗に画像をそろえることができます。
Markdown教への入信、してくださいますよね？
コードを書く
コードとはプログラミング言語だけでなく<code>のことです。この記事もかなりの数を使っています。エスケープ文字の時でもちょろっと出ましたね。バックコーテーションで囲むことで文中に特殊な表示の仕方をさせることができます。
私のメールアドレスは`teineiteineiteinei@ahoo.co.jp`です。
私のメールアドレスはteineiteineiteinei@ahoo.co.jpです。
表示のさせ方は各ブログのテーマやCSSによって変わります。フォントも強制的に変わる場合があり、数字やアルファベットも見やすくなったりする場合もあります。
バックコーテーション`はShiftキーを押しながら、@を押しましょう。
また、じゃあ`を表示したいときはどうすればいいんだろう？と思う方もいるでしょう。HTMLタグの中に書くことでエスケープできます。
この場合は<span>`</span>で文字を囲みます。
この場合は`で文字を囲みます。
ただ、あんまり`を文字として使いたいことは少ないと思うので気にしなくていいですね。
引用をする
引用はツールバーからも追加できますが、とても簡単なので直接記入しましょう。>だけです。
>これは引用文です。 >>2重に引用させることもできます。
これは引用文です。
2重に引用させることもできます。
引用文が続けば、隙間を空けてもくっつきます。（改行はされます）また、>を重ねることで引用の中に引用を持ってくることもできます。
他にも画像にも引用を付けることができます。
>[f:id:neet-utsu-taro:20170924085633j:plain:h200] >これは私がとった早朝の空の写真です。
これは私がとった早朝の空の写真です。
さあ！Markdownを使いたくなってきましたよね！
まとめ
最後にこんな人はMarkdown記法をしてみてはいかがでしょうかというのをまとめてみました。
- Texが好きな人
ってTexが好きな人は既にMarkdown使ってそう…
- 見出しから書いていく方
見出しから書いていく方は、Markdownがぴったりかもしれません。Markdownでは見出しは#を使い簡単に書け、またMarkdown記法ではフォントサイズが一定のため、見出しの数が多くなった場合に確認しやすいという利点があります。
- Markdown教に入信希望の方
皆さんMarkdown教に興味を持ってくださいましたよね？という事で、ぜひ触ってみてください。
下にこの記事のmarkdown表記を載せておきました！入信希望の方は是非参考にしてくださいね！
クリックすると開きます↓↓
この記事のMarkdown
終わりに
ここまで読んでくださってありがとうございます！
Markdown。ぜひお試しあれ！
実際のところはてなブログの記法の使用率ってどんなんでしょうね？ちょっと気になります。
読者登録ありがとうございます！スターやブックマーク等もありがとうございます。励みになってます！
またね('ω')ノ
はてなブログの記事一覧ページにスターとブックマーク数を表示させてみた
こんにちは、鬱太郎です。先日、テーマを変更してはてなブログをカスタマイズしました。
ふとトップページ（記事一覧ページ）を見ていると、
あれ？スターが表示されてない！あとブックマーク数も！
おそらくテーマを変更していろいろカスタマイズしていたら、はてなスター等が記事一覧ページに表示されなくなってしまったようです。
私のように困っている方もいるかもしれません。
でも大丈夫！表示されてないなら表示すればいいじゃない！という事で、今日ははてなブログの記事一覧ページにはてなスターとブックマーク数を表示させる方法をまとめてみました。
同じような現象の方も表示されるかもしれません！
はてなスターを記事一覧ページに表示させる
結論から、「デザイン」→「カスタマイズ」→「デザインCSS」に下のコードを追加します。
div.archive-entry-body>span.social-buttons{ display:inline }
これについて詳しく説明していきます
記事一覧のHTML構造を解析する
デベロッパーツールを使い記事一覧ページに表示される1記事の要素を解析します。
ありましたね！この<section class="archive-entry ...">...</section>の中身を調べて構造を把握します。これをまとめると、次のようになります。
<!--1--><section class="archive-entry ..." data-uuid="..."> <!--2--> <div class="archive-entry-header">...</div> <!--3--> <div class="categories">...</div> <!--4--> <a href="http://www.neetaro.com/entry/month-summary" class="entry-thumb-link">...</a> <!--5--> <div class="archive-entry-body"> <!--6--> <p class="entry-description">...</p> <!--7--> <span class="social-buttons"> <!--8--> <span class="star-container">...</span> <!--9--> <div class="hatena-star-metadata" style="display: none">...</div> <!-- --> </span> <!-- --> </div> <!-- --></section>
となります。これを図で示すと、
こうなります。ソースコードの番号と要素が関係していることがわかります。ここで、7番の<span class="social-buttons">...</span>が表示されていないことに気づきました。この要素のCSSをデベロッパーツールを用いて確認すると、
.social-buttons { display: none; }
となっていました。display:noneはそのタグを（含む中の要素すべてを）表示しないという意味を持ちます。つまり、CSSで画面に表示されない設定になってるんですから、当たり前のことというわけですね。このコードを打ち消すようなCSSを作り、はてなブログのデザインCSSに登録すれば表示されます。
実行確認
「デザイン」→「カスタマイズ」→「デザインCSS」に下のコードを追加します。
div.archive-entry-body>span.social-buttons{ display:inline }
ソースコードの説明
これから、CSSの説明をします。
div.archive-entry-body>span.social-buttons{ display:inline }
div.archive-entry-bodyはclass=archive-entry-bodyを有する<div>タグという意味です。
同様にspan.social-buttonsはclass=social-buttonsを有する<span>タグという意味です。
cssにおいて>は要素の中（下）という意味です。
つまり、1行目の
div.archive-entry-body>span.social-buttonsは
class=archive-entry-bodyを有する<div>タグの中にあるclass=social-buttonsを有する<span>タグを意味しています。
.social-buttons{display:inline}でも同じですが、先ほどの表記の方がより限定されます。social-buttonsというクラス名は他のモジュール等でも使われそうなものですので、CSSによる汚染が心配です。記事一覧ページのsocial-buttonsクラスのデザインだけを変更したつもりでも、ほかにも悪影響が出てしまう可能性を考慮してより限定的な表記を用いました。
display:inlineはテキストのように行内に続けて表示させるという意味です。今回は、display:noneの対義語として用いました。
はてなブックマーク数を記事一覧ページに表示させる
はてなスターが表示されたけれども、ブックマーク数が表示されていない！と思いました。ですので、はてなスターの前にブックマーク数を表示するように試行錯誤してみました。
結論から、「デザイン」→「カスタマイズ」→「フッター」に下のコードを追加します。jQueryを使用します。
<script> /*記事一覧のそれぞれのはてなスターの前に、はてなブックマーク数を表示させる*/ $(function(){ var archiveEntries = $(".archive-entry"); archiveEntries.each(function(){ var archiveEntry = $(this) var entryTitleLink = archiveEntry.find(".entry-title-link"); var href = entryTitleLink.attr("href") var starContainer=archiveEntry.find(".star-container"); var html="<img src='https://b.hatena.ne.jp/entry/image/"+href+"'>"; //console.log(html); starContainer.before(html); }); }); </script>
「デザイン」→「カスタマイズ」→「ヘッダー」にjQueryのロードを追加（既にある場合は不要）
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
これについて詳しく説明していきます。
追加する要素を確認する
はてなスターを表示させたことで、記事一覧ページのHTML構造が分かりました。
<!--7--> <span class="social-buttons">
の前に、はてなブックマーク数を表示したいですね。画像で言うとこんな感じです。
はてなブックマーク数を調査
そもそもはてなブックマーク数のこれ
って何だろうと思い、デベロッパーツールで調べてみました。
ブックマーク数は画像
なんと意外！それは画像！
はてなブックマーク数のあれはgif画像だった。
はてなブックマーク数の取得システム
はてなブックマーク数の画像ファイルの取得方法が調査したところ判明したのでまとめたいと思います。
- 特定のURLにリクエストする
- 指定された記事のブックマーク数の画像が返される
これだけです。
この特定のURLというのが肝です。
https://b.hatena.ne.jp/entry/image/{記事URL}
です。私の記事の例ですと、
https://b.hatena.ne.jp/entry/image/http://www.neetaro.com/entry/use-feedly
ですね。
これをうまくプログラムに組み込めば、記事一覧ページにはてなブックマーク数を表示させることができます。
JavaScriptを作る
上の方が作ってくださったJavaScriptの記事を読み取る部分を使わせてもらいました。
実行確認
「デザイン」→「カスタマイズ」→「ヘッダー」にjQueryを読み込むコードを追加します。すでに追加してある方は必要ありません。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
「デザイン」→「カスタマイズ」→「フッター」に次のコードを追加します。
<script> /*記事一覧のそれぞれのはてなスターの前に、はてなブックマーク数を表示させる*/ $(function(){ var archiveEntries = $(".archive-entry"); archiveEntries.each(function(){ var archiveEntry = $(this) var entryTitleLink = archiveEntry.find(".entry-title-link"); var href = entryTitleLink.attr("href") var starContainer=archiveEntry.find(".star-container"); var html="<img src='https://b.hatena.ne.jp/entry/image/"+href+"'>"; //console.log(html); starContainer.before(html); }); }); </script>
やったぜ！
ソースコードの説明
私はJavaScriptにあまり詳しくないので詳細な説明はできません。
archiveEntries.each(function(){});で記事一覧ページに表示されてるここのエントリーに対して中の関数を実行しているのでしょう。
var href = entryTitleLink.attr("href")で記事のURLを変数hrefに格納し、前述のはてなブックマーク数をリクエストするURLに追加しています。
リクエストURLをsrcに含んだ<img>タグを.star-containerの前に追加します。それがstarContainer.before(html)
です。
終わりに
ここまで読んでいただき、ありがとうございます！
読者登録していただき、ありがとうございます！
今回はちょっと気になったことから、大勉強となりました。CSSやJavaScriptを逆引きのような形で実践的な勉強ができてよかったです。
もしも私と同じような悩みを持っていた方は、この記事が解決の手助けとなれば幸いです。
またね('ω')ノ
