はてなブログ 関連記事 カスタマイズ プラグイン 「Milliard」
プラグインとはアプリケーションソフトウェアの機能を拡張するために追加するプログラムの一種である。
はてなブログでかんたんに使用できるプラグインの紹介をする。
Milliard関連記事とは？
シスウ株式会社が提供している無料の関連記事プラグインのことです。
簡単オシャレなのに、無料で使える「Milliard」という外部プラグインをご紹介いたします。
特徴
美しいスタイル、見やすいリスト表示、PCではタイル、スマホではリスト表示など、各デバイスにレスポンシブにも対応している。
いちいちスクリーン幅指定しなくても、Milliardなら自動でやってくれます。
カスタマイズ性にも優れている。
Milliard関連記事プラグイン導入方法
Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
後述するが様々なブログでプラグインが導入できる優れもののサービスである。
今回導入するはてなブログの設定方法についてリンクと方法を書いていく。
http://www.shisuh.com/statics/relatedPageSetting/
上記のサイトで必要事項を入力する。
必要事項を入力してコードを作成する。
<script>//<![CDATA[
window.Shisuh = (window.Shisuh) ? window.Shisuh : {};Shisuh.topUrl='http://www.cucumberking.com';Shisuh.type='Hatebu';Shisuh.alg='Related';Shisuh.insertAfterScript='1';Shisuh.showInsert='1';Shisuh.originalTemplateTypeWide='Panel';Shisuh.originalTemplateTypeNarrow='Panel';
//]]></script><script id="ssRelatedPageSdk" type="text/javascript" charset="utf-8" src="https://www.shisuh.com/djs/relatedPageFeed/"></script>
生成された自分のスクリプトコードを記載しました。
管理画面のデザイン→記事下にコピペ。
スマホ画面はデザインのスマホの記事下に入力。
CSSカスタマイズ
CSSは、スマホの場合、Milliard関連プラグインのコードを挿入した箇所、パソコンの場合は、「デザインCSS」に追加すればOKです。
.ssImg{
height: 80px;
width: 80px;
padding: 0;
border-radius: 0em;
border: solid 1px rgb(61, 61, 61);
}
.ssTitle{
font-size: 90%;
}
.ssPanel{
border-top: 1px solid rgb(228, 228, 228) !important;
border-bottom: none !important;
width: 49% !important;
height: 100px !important;
float: left !important;
margin-right: 1% !important;
}
.ssLimitedContainerHeader > div > div > div{
color: #ffffff;
background: #1ABC9C;
font-size: 16px;
padding: 10px 5px 10px 10px !important;
margin-top: 15px;
}
まとめ
「Milliardプラグイン」の導入についてのお話でした。 まだ今回のこの処置がPV数にどう影響しているのかはわかりませんが、以前よりも見やすくなったのではないかな、と思います。
使用できるブログ
- Blogger
- Word Press
- Hatena Blog
- livedoorBlog
- FC2
各ブログの使用方法
BloggerやWordpressなど他のブログでも使用すること後できます。。
下記リンクを参照にして下さい。
