ブロとも一覧をカスタマイズ

そこで気になるのがやはりレイアウトです。なんちゅーかなー。バッラバラなんですよ(笑)
ある人はサムネイルが大きかったりある人は小さかったり、もう私個人の美的センスとしてはありえないレイアウト(笑)

というわけでコピペでできる「ブロとも一覧」プラグインカスタマイズのソースコードを2つ作成してみました。ごくオーソドックスで簡単なものです。

「フリーエリア」プラグインのダウンロード

拡張プラグイン「フリーエリア」

以降の内容は 弊テンプレートをご利用の方 へ向けてのカスタマイズ指南です。私が制作したもの以外のテンプレートで行う場合への言及はできません。ということで

• html5テンプレートであること
• IE非対応

この2点が条件です。「ブロとも一覧」プラグインのhtmlを変更するのは抵抗があるでしょうから、フリーエリアを利用した方が良いと思います。「ブロとも一覧」は非表示にし、こちらの「フリーエリア」の方を適切な名称に変更した上で表示させるという方法をおすすめします。

「ブロとも一覧」のデフォルトスタイル

プラグインなのでサイドメニュー部に掲載されることが多いかな、と思います(テンプレートによります)
これがデフォルトスタイルで、各ブロともの画像の下にはブログ名が表示されます。スクリーンショットは説明のために創作してあり、今回は便宜上「ブログ名」ではなく「名前」にしてあります。ブログ名を創作するのは容易でないもので ^^;

私の言う「バラバラ」というのはこの見た目のことです。画像表示は長辺100px という決まりがありますので、プロフィール画像の縦横比によって横幅がまちまちになってしまうんですね。全員が全員横長画像をプロフィールに指定しているわけではないもので。

各ブロガーのプロフィールをありのまま表示させたい、という場合はデフォルトのまま利用すると良いでしょう。画像の見た目を揃えるということは「場合によっては見切れが生じる」ことを意味します。こういう場面でもやはり プロフィール画像は正方形 というセオリーに従っておくと他者にとっても有益です。

プロフィール画像に正方形を勧める2つの理由

以前にも一度書いたんですけども。 SNSやブログで利用するプロフィール画像は正方形が最適解 というお話。...

vanillaice000.blog.fc2.com

導入の仕方

ブロともプラグインをダウンロードし、内容を差し替えます。htmlとCSSをひとまとめ にしており、CSSをstyle要素で記載するとバリデートエラー(不正な構文)になりますのでCSSはJSでheadに差し込むようにしてあります。
公式プラグイン「フリーエリア」

<div id="sns-friends">
  <!--sns_friends-->
  <a class="blotomo-anchor" href="<%friend_url>" target="_blank" rel="noopener noreferrer nofollow" title="<%friend_blog_name>">
    <img class="blotomo-image" src="<%friend_image>" title="<%friend_name>">
    <span class="blotomo-name"><%friend_name></span>
  </a>
  <!--/sns_friends-->
</div>

<script>
var styleElm = document.createElement('style');
styleElm.innerHTML = `
#sns-friends {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.blotomo-anchor {
  position: relative;
  width: calc(100% / 3 - 6px);
  margin-bottom: 10px;
  overflow: hidden;
  color: white !important;
}
.blotomo-anchor:nth-child(3n+2):last-child {
  margin-right: calc(100% / 3 + 3px);
}
.blotomo-anchor::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.blotomo-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blotomo-name {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .3em .6em;
  background: rgba(0,0,0,.6);
  line-height: 1.2;
  font-size: 11px;
}
.last-anchor:hover {
  color: white;
}
`;
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

lazyloadingをご利用の方はソース内のimg要素をlazyloading用記述に変更してください。

カスタマイズ

デフォルトは横に3つ並びます。

2列にするには

width: calc(100% / 3 - 6px);

緑部位の 3 を 2 に変更。続きまして

.blotomo-anchor:nth-child(3n+2):last-child {
  margin-right: calc(100% / 3 + 3px);
}

を 削除。レスポンシブテンプレートでの利用を想定していますので3列並びが限度ではないかと思います。

まとめ

ブロとものプロフィール画像は各ユーザーがアップロードした画像をオリジナルサイズで取得してCSSで表示サイズ調整を行っています(この点は「ブロとも一覧」プラグインと同じです)

ともかく今はスマホでの表示を最優先で考えなければいけない時代ですから、プロフィール画像のセオリー

• 正方形にする
• サイズを小さくしすぎない

ユーザーが各々この2つに留意してくれると良いんですけどね。「サイズを小さくしすぎない」に関しては高dpiデバイスでぼやけないよう500pxないし600px四方を目安にされると良いと思います。ただこれは各人の選択になりますのでブロとも一覧を掲載する本人ではどうにもできません。せいぜい表示サイズをコントロールする程度。あと背景透過の画像や円形の画像も地味に困ったりします(笑)
円形表示はCSSのborder-radius(ボーダーレイディアス)で容易にできますので素直に四角でアップロードするのが万人にとって優しい、ということで(笑)

「ブロとも一覧」プラグインのデフォルトスタイリングでは右が空いて間の抜けた感じになるのと、縦に場所を取りすぎてスマホ表示向けではありませんので今回「横に並べる」というスタイリング提案をしてみました。

旧Yahoo!ブロガーさんはやっぱり既存FC2ブロガーとは意識が全く違うんだなぁ、と感じます。1つアドバイスできるとしたら 欲張って多くのサイドメニュー(プラグイン)を入れない ことです。例えば「時計」とか「お天気」などのウィジェットであったり、「好きなアーティストの動画」であったり、「長い長い長いプロフィール文」であったり。それらを求める閲覧者が本当に居るかどうかの再考を。サイドメニューには本当に必要なものだけを厳選して掲載しましょう。フラッシュの掲載は問題外です。

拝見していると「全てを管理画面を経由させずに行いたい」と希望するむきもあるようなんですが、そうなるとなんでもかんでも自分のブログに追加することになるんですよね。自分のブログではあっても基本は 閲覧者のため のページですから、あまり自分の使い勝手ばかりを優先するのはいかがなものかと思います。ただ「ブロとも一覧」については流入経路になりますのでまぁ有っても良いのかな、とは思います。

サイドメニューはあくまでも「副情報」「補足情報」であって最も大事なのはメインコンテンツです。メインに集中できる環境づくりを心がけると良いですね。そして繰り返しになりますが 最も大事なのはスマートフォンでの表示 であることをお忘れなく。