【はてなブログ向け】Milliard関連記事プラグインのHTML構造を図解してみた

こんにちわ、野良ジニアです。

ブログカスタマイズを放置気味でしたが、「関連記事を記事の下に表示したいなー」と思いMilliardを設置しました。

Milliardはデフォルトでオシャレな見た目なのですが、色々とカスタマイズしようと思うと、どういうHTML構造なのかを理解する必要があります。 「もう誰かまとめてるだろう」と思ったのですが、調べた感じでは記事が見付からなかったので、自分なりにまとめてみました。

「Milliardを使っていて、オリジナルのカスタマイズをしたい！」という方の参考になればと思います。

Milliardについて
- そもそもMilliardってなに？
  - Milliard公式より引用
- Milliardの使い方
Milliardのカスタマイズについて
- はてなブログ向けカスタマイズ
- 本題：MilliardのHTML構造を図解してみた
  - ゆきひーさんカスタマイズ編
  - 初期設定そのまま編
まとめ
その他参考になるページ
- 【公式】Milliardカスタマイズ方法
- 関連記事の設置方法のまとめと比較

Milliardについて

そもそもMilliardってなに？

ざっくり言うと「WordPressやブログサービスなどで、関連記事をオシャレに表示することのできるツール」です。

はてなブログに初期設定のままで導入すると、こんなイメージになります。おしゃれ！

f:id:ryota-17:20170205152528p:plain

Milliard公式より引用

Milliard関連ページプラグインについて | シスウ株式会社

上記公式ページより、説明を一部引用しておきます。

Milliard関連ページとは？

関連ページを「スタイリッシュかも？」くらいに綺麗に表示できるツールです。

３つの特徴と用途

画像のタテ・ヨコ比が違ってもきれいに並ぶ

ガジェット、グルメ、バイラルメディアのデザイン性が向上

スクロールで多くの記事を推薦できる

テキスト中心、画像中心、記事数が多いサイトのPV増

スマホ / PC / タブレットあらゆるサイズのデバイス対応

制作系、検索に強い等のPCでもアクセスされやすいサイトのPV増

Milliardの使い方

公式ページに書いてあるので、そちらを参照するのが良いかと思います。

corp.shisuh.com

基本的には、以下のページに情報を入力して、出力されたタグをブログに埋め込めば完了です。

Milliardのカスタマイズについて

はてなブログ向けカスタマイズ

ゆきひーさん(id:ftmaccho)が素敵な記事を投稿されているので、そちらを使わせてもらうことにしました。

www.yukihy.com

本題：MilliardのHTML構造を図解してみた

ゆきひーさんカスタマイズ編

上記カスタマイズをほぼそのまま使わせてもらい、ほぼ満足なのですが「以下の2点をどうにかできないかなー」と思いました。

画像の縦横比がおかしくなるので、縦横比を維持したままリサイズしたい
記事タイトルが短いものは上下中央に配置したい

自分でカスタマイズやろうと思ったのですが、構造が分かりづらかったのでまずは図に整理。

以下の画像は、ゆきひーさんの手順で出力された構造になります。実際に出力されている HTMLタグ と クラス名 を図中に記載しています。

f:id:ryota-17:20170205152529p:plain

雑に整理をすると、以下のような構造イメージになります。

<div>
  <!-- 「関連記事」のヘッダ部分 -->
  <div class="ssLimitedContainerHeader limited offScroll">
    <div>
      <div>
        <div>
          関連記事
        </div>
      </div>
    </div>
  </div>

  <!-- ここから関連記事の本体部分 -->
  <div class="ssArticlesContainer">
    <!-- 1記事分 -->
    <div class="ssOriginalTemplateArticle ssPanel">
      <!-- サムネイル画像 -->
      <div class="ssOriginalTemplateImgContainer">
        <a class="sstitleAnchor">
          <img class="ssImg">
        </a>
      </div>
      <!-- 記事タイトル -->
      <div>
        <a class="sstitleAnchor">
          <div class="ssTitle">
            記事タイトル
          </div>
        </a>
      </div>
    </div>

    <!-- 関連記事数分、上のHTMLタグが出力される -->
    ...
  </div>
</div>

色々といじりたいと思ったら、この クラス名 や HTML構造 を意識してCSSを書けばいけそうな気がします。

初期設定そのまま編

参考までに、Milliardの設定値を何も変えなかった場合についても整理してみました。

f:id:ryota-17:20170205152530p:plain

クラス名やHTML構造が微妙に異なっています。ざっくりイメージは以下の通りです。

<div>
  <!-- 「関連記事」のヘッダ部分 -->
  <div class="ssLimitedContainerHeader">
    <div>
      <div>
        <div>
          関連記事
        </div>
      </div>
    </div>
  </div>

  <!-- ここから関連記事の本体部分 -->
  <div class="ssArticlesContainer limited">
    <!-- 1記事分 -->
    <div class="ssArticle img">
      <div class="ssArticleContent">
        <!-- 記事タイトル -->
        <div class="ssArticleTitleContainer">
          <a class="double">
            記事名
          </a>
        </div>
        <!-- サムネイル画像 -->
        <a class="ssArticlePhotoContainer centerParent">
          <div class="centerChild">
            <div class="ssArticlePhotoParent">
              <img class="articlePhoto">
            </div>
          </div>
        </a>
      </div>
    </div>

    <!-- 関連記事数分、上のHTMLタグが出力される -->
    ...
  </div>
</div>