きゅうりの王様

きゅうりの王様

雑記・日記

はてなブログ 関連記事 カスタマイズ プラグイン 「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など他のブログでも使用すること後できます。。
下記リンクを参照にして下さい。

http://corp.shisuh.com/milliard関連ページプラグインについて/