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

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

カスタマイズ HTML, CSS, JavaScript
2019/05/30
10
vanillaice (Akira)
vanillaice (Akira)
初心者向けHTMLCSS引っ越しInstruction

正直これまではあまり見かけなかった「ブロとも一覧」プラグイン。Yahoo!ブロガーさんの移転が増えて度々目にするようになりました。

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

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

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

2020.5.27
純正「ブロとも」プラグインを非表示にするとフリーエリアの方のリストが表示されなくなることが判明しました。
(以前はそんなことはなかったはずなので仕様変更かもしれません)
なので純正プラグインのhtml内容を「差し替える」という方法をお取りください。本章の内容は記録として残しておきます。

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

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

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

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

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

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

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

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

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

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

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

導入の仕方

ブロともプラグインをダウンロードし、内容を差し替えます。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つ並びます。

デフォルト設定3列
カスタマイズで2列に

2列にするには

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

緑部位の 32 に変更。続きまして

.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つアドバイスできるとしたら 欲張って多くのサイドメニュー(プラグイン)を入れない ことです。例えば「時計」とか「お天気」などのウィジェットであったり、「好きなアーティストの動画」であったり、「長い長い長いプロフィール文」であったり。それらを求める閲覧者が本当に居るかどうかの再考を。サイドメニューには本当に必要なものだけを厳選して掲載しましょう。フラッシュの掲載は問題外です。

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

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

Related post

Comments  10

-
2019/10/31 (Thu) 19:32

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/10/31 (Thu) 22:22

To ブロとも一覧の件 内緒さん

こんばんは。

私は構わないですよ。
ポリフィルが必要だと思いますのでそちらのサポートもお忘れなく。
それかtransformでやるか(おすすめはしません)

-----
あとついでと言っては申し訳ないんですが、今IE対応テンプレートの修正中なので、終了しましたらご紹介頂いている内容と照らし合わせをお願いします。
お手数おかけしてすみません ^^;

Janedoe1471
2019/10/31 (Thu) 23:27

To Akiraさん

ありがとうございます。
ブロとも一覧の件については、改変箇所は、33.33%に変更することと、scriptではなくCSSへの追加に変えること、あとはmargin関係の3箇所のつもりです。
IEでは、カンペキに見えなくても、それなりに見えることが目標で、object-fit:coverが効かない件は、そのままでいいかと思っています。
IEは、長くても、あと数年、たぶん製作者側では、2~3年対処すれば、終わりでいいのでは…と思っているので、現段階で、縦横比の問題まで、カンペキにすることは、ないのではないかと。
というか、プロフィール画像を正方形にしてくれる人が増えれば、縦横比の問題は、今ほどは、なくなるんですが…。
なかなか、難しいですね。トリミングをして正方形にするとか、画像のサイズを変えるという作業が、できない人が、けっこうな割合で、いると、思われますので。

AkiraさんのIE対応のテンプレートについては、Akiraさんの修正作業が終われば、基本的にはそちらを見てくださいということで、いいかと思うんですが、あの記事については、すでに貼ってあるリンクとかも、あると思いますので、記事の上の方に、わかるように大書きしようかと思っています。

vanillaice (Akira)
Akira
2019/10/31 (Thu) 23:56

To Janedoe1471さん

scriptはバリデートエラー回避のためにheadに差し込んでいるだけなので、テンプレートに移すよりも楽じゃないかと思います。テンプレート変更しても放置できますし。スタイルシートに移すと移植しないといけないので。
その点についてはお任せしますね。

Janedoe1471
2019/11/01 (Fri) 00:07

To Akiraさん

はい、ブロ友の件は、marginの件もありますし、「拙テンプレートの利用者に限ったカスタマイズ」ということで、やるつもりで、もともと、拙テンプレートの利用者であれば、私のほうの範疇ですし、これについての、改変再配布後の質問や相談などは、もちろん、私のほうで全部受けますので、もともとの配布元は、Akiraさんでも、質問や相談は、私にするようにという説明は、ちゃんといたします^^ ありがとうございます。

五十嵐
2020/05/27 (Wed) 16:07

ブロとも一覧について

初めまして。FC2のテンプレートを利用させていただいております。
ブロとも一覧をカスタマイズする方法を拝見し早速適用いたしました。

もともとの「ブロとも一覧」を削除や非表示にするとこちらで作成したブロとも一覧に何も表示されなくなります。
どうすればよいでしょうか。

また、別件ですが、ページTOPの画像を変更する方法を探しておりますが
一緒に教えていただけますと助かります。

以上、よろしくお願いたします。

vanillaice (Akira)
Akira
2020/05/27 (Wed) 17:16

To 五十嵐さん

こんにちは。

> もともとの「ブロとも一覧」を削除や非表示にするとこちらで作成したブロとも一覧に何も表示されなくなります〜

仕組み上そういったことは起こらないはずなので、今一度ご確認をお願いします。
元のプラグインもフリーエリアも同じ「ブロとも一覧」という名称にされているようなので設定時に間違った方を非表示、あるいは双方を非表示にしていないか確認してください。
設定が正しいという場合には設定ページの様子をスクリーンショットなどでお見せください。

> ページTOPの画像を変更する方法を探しております〜

他者制作テンプレートのサポートは致しません。

五十嵐
2020/05/27 (Wed) 19:03

ブロとも一覧について

管理人様

ご回答ありがとうございます。

同じ名称を改善いたしましたが、症状変わらずです。
画像を送ります。
1枚目の画像、プラグインを両方とも表示にした画像。
2枚目の画像、正しく表示されている様子。
3枚目の画像、もともとのプラグインを非表示にした画像。
4枚目の画像、そのとき、表示がされなくなる様子。
https://blog-imgs-107.fc2.com/b/e/l/believe510/burotomo_01.jpg
https://blog-imgs-107.fc2.com/b/e/l/believe510/burotomo_02.jpg
https://blog-imgs-107.fc2.com/b/e/l/believe510/burotomo_03.jpg
https://blog-imgs-107.fc2.com/b/e/l/believe510/burotomo_04.jpg



ページTOPの画像については別テンプレートで失礼いたしました。
貴殿のテンプレートを使わせていただく予定ですが、暫定的に別の物にしております。
再度質問させていただきます。

(誤字修正のため再投稿させていただきました。)

以上、よろしくお願いたします。

vanillaice (Akira)
Akira
2020/05/27 (Wed) 21:02

To 五十嵐さん

では元のブロともプラグインの内容を一旦全消去し、当該ページの内容と差し替えてみてはどうでしょうか。
今拝見したところ、<!--sns_friends-->から<!--/sns_friends-->に挟まれた内容がhtmlとして表記されていないようですが、記載ミスによるものなのか特定の登録ジャンルによってはそういう処置が取られるのか(聞いたことはないですが)がわかりません。

ブロともプラグイン自体は何度でも再DLできますので「html差し替え」で一度お試しください。

----- 追記
確認したところ、私の方でも純正のブロともプラグインを非表示にするとフリーエリアの方は機能しなくなりました。
仕様変更かなぁ。ちょっとわからないですが、差し替えで対応できます。
よろしくお願いします。

五十嵐
2020/05/29 (Fri) 17:55

ブロとも一覧について

管理様

お世話になります。

元のプラグインに差し替えることで表示できました!
ありがとうございます。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)