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

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

関連記事表記にMilliard関連ページプラグインを導入しサイドバーに固定してみました

Web制作
スポンサーリンク

関連記事に関して、以前ははてなブログのブログカードをカテゴリごとに自動生成してくれるという神コードを使っていたのですが、ちょっと新たな気分にするために、Milliardの関連ページプラグインというものにしてみました。

どんなものかを紹介してみたいと思います。

f:id:ftmaccho:20150513160538j:plain

Milliard関連ページプラグイン

Milliardでこんな感じで関連記事が表示されます 

一般的に導入をすれば、こんな感じで関連記事を表示することができます。

PC画面

PCではこんな感じ(画像は全て「Milliard関連ページのよくあるカスタマイズについて(WordPressプラグイン)」から)

 

パネル表示

f:id:ftmaccho:20150513161706j:plain

画像なのでわかりづらいですが、本当はスクロールできます。

 

リスト表示

f:id:ftmaccho:20150513162038j:plain

モバイル版

モバイルでのパネル表記

f:id:ftmaccho:20150513162201j:plain

 

モバイルでのリスト表記

f:id:ftmaccho:20150513162209j:plain

ちなみに僕はPC版はフッターではなくてサイドバーにパネル表記の関連記事を差し込んでみました。モバイルは記事下にリスト表記で入れています。

PCのサイドバーに入れると、幅が狭くなるので自然とモバイル版の表記になるみたいです。

 

設定をする上でのデメリットは右下に「Milliard」へのリンクが貼られることのみ。それも文字が小さく薄くなっているので、そこまで気になりません。これは便利!

 

導入の仕方

導入の仕方もそこまで難しいものではありません。「Milliard」のリンクから、はてなブログのところを選びます。迷うとしたらツール設定画面かもしれません。

下の図は実際にこのブログでやっているものです。

f:id:ftmaccho:20150513164053j:plain

こんな感じでコード取得をします。コードを貼る場所に関しては、きちんと説明されているので迷うことはないと思います。

上のようにしてコードを貼ると、数時間すればきちんと表記されるようになってきます。これで「ページ/セッション」を改善!?

 

追記:記事書いて5分くらいですが、PCでの表記をパネルからリストにしてみました

 

サイドバーを固定

ここまでで基本的に関連記事に関するカスタマイズは終了なのですが、どうせならWordPressのブログみたいに関連記事がサイドバーに固定されたら面白いなあと思ったのでやってみました。

こんな感じです

スマホやタブレットの人は見えないと思いますが、実はPC画面ではいくらスクロールしてもサイドバーの「Hulu」と上で設定した「関連記事」が固定されるようになっています。こんな感じ

f:id:ftmaccho:20150513164733j:plain

スクロールしても

f:id:ftmaccho:20150513164808j:plain

サイドバーが固定!

どこまで効果があるのかは知りません。ちなみにGoogleアドセンスをサイドバーに固定するのは規約違反なのでできません。

やり方

やり方は、悠莉劇場さんのを参考にさせていただきました。ありがとうございます!

blog.pgmy.jp

この記事に書かれているコードは、ある程度のスクロールがされたときにサイドバーの一番下のものを表記するというものです。

コード内に書かれている50の部分が、いくつスクロールするという部分に該当します。なので自分のブログで表示されるように微調整をしていきます。ここでうまいこと数字を見つけないと、レイアウトが崩れてしまいます。結構根気がいる作業ですが頑張ります。

ちなみに僕の場合は1190とかでした。

 

問題というか注意点が2点

上までで一応PCでのサイドバーが固定されるようになるのですが、このままだと問題点が2つ発生しました。

 

1つめ 固定サイドバーの幅が広がってしまう

1つ目はスクロールしたときにあらわれるウィジェットの幅が固定されていないということです。幅が固定されていないので、表記されるウィジェットでレイアウトが若干崩れてしまいます。

例えば、まだサイドバーが純粋なサイドバーとして機能しているときには下のように普通に表示されるのに、

f:id:ftmaccho:20150513171344j:plain

固定サイドバーになった瞬間に広がってしまいます。

f:id:ftmaccho:20150513171428j:plain

これを解消するためには、先ほどのリンクで貼られているコードの

                target.css({position:"fixed", top: 20});

を、

                target.css({position:"fixed", top: 20, width: "「サイドバーの幅」"});

と幅を指定してあげるとできます。僕の場合は336pxなのでそのように設定しています。多くの方は300pxですかね?

 

2 1カラムになったときのレイアウトを修正する必要がある

結構問題ですこっちは

こちらの方が重大です。使っているブログの仕様によるのですが。

何が起こるかというと、タブレットやブラウザを縮めたPCで見たときに、サイドバーが下に回り込むおかげで記事を読んでいると謎の固定サイドバーが出現してしまうのです。

例えば、タブレットで記事を読んでいたとします。

f:id:ftmaccho:20150513173440j:plain

ふむふむ(記事を読む)

そしてある程度スクロールをすると…

f:id:ftmaccho:20150513173501j:plain

ふぁ!!??なんか左上に変なの出てきた!!

2カラムでブラウザの幅を縮めたときにサイドバーが下に回り込むようにしているブログは、この問題にあてはまります。レスポンシブデザイン採用時のスマホでもまずいかも。

これを解消するためにはいろいろと方法があるのかもしれませんが、僕は1カラムになったときにはこの「Hulu」と「関連記事」を消すという方法をとりました。

どっちにしろ記事の下に回り込んでしまうので、あんまり見られないかなあと(単純に技術がないというのもありますが)。

 

固定するモジュールの名前をつける

その方法をとるためには、まずはHTMLに名前をつける必要があります。「最新記事」や「人気記事」など、はてなで元から準備されているものを固定するときは、元から名前がついています。(固定するものはサイドバーの一番下に設定してください)

どれがどんな名前かをいくつか書くと、

.hatena-module-profile
.hatena-module-entries-access-ranking
.hatena-module-recent-entries 
.hatena-module-archive

 上から

  • プロフィール
  • 人気記事
  • 最新記事
  • アーカイブ

に対応しています。上のものから固定したいものを選んで、したの「cssで1カラムのときに表示されないようにする」に移ってください。

 

固定したいものが「カスタムHTML」の場合は、それ自体に名前をつける必要があります。僕も固定したいのは「広告」と「関連記事」なので、カスタムHTMLに名前をつけます。

つけ方は下の図のような感じです。名前はなんでも良いのですが今回は「fixed-module」をしました。

f:id:ftmaccho:20150513180153j:plain

上のように、固定したいHTMLを

<div class="fixed-module">
</div> 

のように囲います。 

当たり前ですが、固定したいモジュールは、サイドバーの一番下に設定してくださいね。

 

cssで1カラムのときに表示されないようにする

名前がわかったら、cssで1カラムのときに表示されないようにします。書くところは「デザインcss」のところです。

f:id:ftmaccho:20150508205301j:plain

 

入れるコードですが、こんな感じ

@media screen and (max-width:954px){
.fixed-module{
display: none;
}
}

 ここで編集する点は2点

1点目は先ほど決めた名前。上のコードでは「.fixed-module」となっていますがこれは上で決めた「カスタムHTML」人用の設定です。

たとえば最新記事にしたかったら、「.fixed-module」を「.hatena-module-recent-entries」に変えてください。

 

もう1点は、(max-width:954px)のところ。僕のブログではだいたい954pxぐらいで2カラムから1カラムに変わるので、この値を入れています。ブログによって1カラムになるタイミングは違うと思うので、その辺りは自分で編集といったところです。

 

面倒な人は、iPadとかを縦に持ったときの横幅が768pxなので768って入れておけばとりあえずiPadよりも小さい横幅では大丈夫になります。

 

こんな感じです

以上が僕が行ってみたカスタマイズです。実際の効果はよくわからず、変えたくなったら変更しますが、参考になれば幸いです。

いずれにしてもありがたいサービスです!

ブログカスタマイズ記事 

www.yukihy.com