拙テンプレート向けの「ブロとも一覧」カスタマイズ

SNS friends

IEでもわりと普通に見える「ブロとも一覧」カスタマイズ

さて、サイドバーの「ブロとも一覧」については、これまで、Akiraさんの紹介されているカスタマイズ方法を、おすすめしてきたところです。

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

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

Akiraさんの紹介されているカスタマイズ方法は、IE非対応なのですが、今回、拙テンプレートの利用者さんから、IEでも普通に見えたほうがいいというご要望もあり、私の方から、Akiraさんに、お願いをしてみたところ、正式にAkiraさんのご許可もいただけたので、ここでは、拙テンプレート向けに、「IEでもわりと普通に見えるカスタマイズ方法」を、Akiraさんのコードを少し変更する形で、ご紹介したいと思います。
Akiraさん、ありがとうございました。
~注意事項とお願い~
なお、ここで紹介しているカスタマイズについての質問などは、Akiraさんではなく、すべて、私のほうへお願いいたします。

条件

  • 拙テンプレートをレスポンシブで(スマホ版を非表示で)利用している場合のカスタマイズであること。
  • IEでも普通に見えたほうがいいという場合であること。
  • IEから見た場合には、相手のプロフィール画像が正方形でない場合には、表示サイズは一定・均一になるが、「画像の縦横比」は保てないが(もともとの画像が、横長の長方形だと、正方形にした場合には、左右から狭められたように、縦長な感じの見え方になるなど)、それがここで紹介するカスタマイズの仕様なので、それについては、承知をされたうえであること。

見本

テストブログで、IE11から見た場合の見本です。
ブロ友が1人しかいないので、とりあえず、こんな感じですが。
ブロ友サンプル

手順

  1. まず、サイドバーのブロともプラグインの中身を、まるっと貼り換える。
    「プラグインの管理」から、ブロとも一覧の「詳細」をクリックし、【HTMLの編集】をクリックすると、中身が出てくるので、これをまるっと貼り換える。
    コードは、Akiraさんのページ(ブロとも一覧をカスタマイズ)にあるとおりだが、今回は、上の部分だけを貼ること
    具体的には、<div id="sns-friends"> から、</div>までの8行ぶん。ブロ友
  2. 下の青い「設定」ボタンを押して保存する。
  3. 次に、「テンプレートの管理」を開き、下の枠「スタイル編集」に、以下を追加する。位置は、一番下でもいい。
    /*--------ブロとも一覧---------*/
    #sns-friends {
            margin:0 -10px;
    	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    }
    
    .blotomo-anchor {
    	position: relative;
    	width: calc(33.33% - 6px);
    	margin-bottom: 10px;
    	overflow: hidden;
    	color: white !important;
    }
    
    .blotomo-anchor:nth-child(3n+2):last-child {
    	margin-right: calc(33.33% + 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;
    }
    
  4. 青い「更新」ボタンを押す。
  5. ブログを開き、できているかどうかを確認する。また、IEでの見え方が気になる人は、IEからも確認してみること。
  6. できていれば、作業終了。

プロフィール画像は正方形がよい

プロフィール画像については、Akiraさんも以前から推奨されているように、なるべく「正方形」にするのがよく、なぜかというと、こういう場合や、足跡機能のほうも、そうですし、プロフィール画像の使い道というのは、なんでもだいたい正方形を前提として、作られています
なので、特定のブロともさんの画像が、IEでの見え方が、かなりおかしいという場合には、「できれば、正方形にしてくれませんか」と、おすすめしてみるというのが、よいと思います笑。
「余計なお世話だ💢」と言われるかもしれませんが…それだったら「友だち」ではなかったのかも^^

もともとが手抜き設計なので、カスタマイズできれいに並べよう

FC2の「ブロとも一覧パーツ」というのは、手抜き設計というか、なぜか、サイズがバラバラに見えるようになっているので、こうやって統一すると、かなり見栄えがよくなりますので、個人的には、このカスタマイズは、拙テンプレートの利用者さんには、ぜひ、おすすめです。
関連記事

コメント

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

-

2019/11/02 23:00 編集返信
Janedoe1471
To -さん
了解です^^

Janedoe1471

2019/11/03 00:38 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2019/11/03 14:11 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2019/11/03 14:11 編集返信
Janedoe1471
To -さん
はい、何かありましたら、またお知らせいたします^^

Janedoe1471

2019/11/03 15:19 URL 編集返信
Janedoe1471
To -さん
はい、IEのほうからも確認しましたが、できています。
きれいになって、見栄えがいいと思います^^
お疲れさまでした。

Janedoe1471

2019/11/03 15:20 URL 編集返信
お師匠!!
ありがとうございます。
IEでもブロ友一覧が綺麗になりました。
これでIEをご使用の方にも綺麗にブログを見ていただけると思うと嬉しいです。
さー次はブログカードにチャレンジですね。
上手くいくかな~。(苦笑)

柴犬マイア

2019/11/03 18:21 URL 編集返信
Janedoe1471
To 柴犬マイアさん
はい、さきほど見せていただきました。
きれいにできています。
お疲れさまでした^^

Janedoe1471

2019/11/03 19:05 URL 編集返信
感謝!感謝!
ご教示いただき、ありがとうごさいますヽ(´▽`)/

バッチリ、見易く整理されました!!

これからも、お導きの程、宜しくお願いいたします!m(_ _)m

なめちゃん仙人

2019/12/14 23:28 URL 編集返信
Janedoe1471
To なめちゃん仙人さん
はい、今拝見いたしました。ちゃんとできていて、よかったです^^
こちらこそ、よろしくお願いいたします^^

Janedoe1471

2019/12/15 00:12 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

検索フォーム

ジャンルランキング