FC2プラグインの位置合わせについて

FC2プラグインの位置合わせについて

カスタマイズ HTML, CSS, JavaScript
2015/12/15
25
vanillaice (Akira)
vanillaice (Akira)
HTMLCSSトラブル対処初心者向け

左寄せ/ 中央合わせ/ 右寄せ
という意味の「位置合わせ」です。主にサイドバーに設置されたプラグインそれぞれの位置の指定について。FC2の仕様上のことも絡めてご説明します。

こういうの嫌じゃないですか? プラグインがあるものは左にあるものは右にあるものは中央に 「えー 別に (´・ω・`)」という方はスルーで(笑)

上記サンプル画像は私が公式のフリープラグインを利用してテキトーに作成したものですが、あるものは左に寄っており あるものはセンタリングされている状態。こっちの方が綺麗ではないかと。 プラグインの位置合わせが全て同じ 全部同じ位置合わせ。

こうして位置を揃えるのにテンプレート側のソースであれこれやろうとしてもできない場合があります。何故ならCSSというのは優先順位というのが決まっていますので、強制力の強い内容が含まれていて書き換え(上書き)不能となる場合があるからです。そんな時に修正すべきはテンプレートソースではなくプラグイン側です。テンプレートではできない インラインCSS(style属性) を用いると、style属性でのCSS指定は強制力が強い(最強ではないが)ので上手くいくかもしれません。

まずはプラグインのソース内容を見ないことには始まりません。プラグインの設定 > 該当プラグインの「詳細」 赤く色づけした部分、これが「位置指定」です。大抵のコードは最初に <div> というのがくっついてます。あるいは <table> かもしれません。いずれにしても、style="text-align: 位置指定;" を追加します。div の後ろに半角スペースを入れてからstyle〜と続けます。divタグが無いよ という場合には付けてください。追加した場合には終了タグというのも必要ですので、文字列の最終に </div> を追加します。

<div style="text-align: 位置指定;">内容</div>

これを書くと挟まれている 画像 や テキスト がその指定に倣います。

いやそうじゃないんだ、外部プラグインを使っていて形がもうできていて、その全体像の位置を合わせたいんだ、と。その場合にはこの方法では動きません。text-align というのはdisplayプロパティの値がblockであるボックスの「中」にあるinline値を持つ要素にしか作用しません(専門的なのでスルーで良いです)
ブロックレベル要素を動かすには(つまりやってみてダメだった場合は)、margin を使います。

センタリング

<div style="margin: auto;">内容</div>

右寄せ

<div style="margin-left: auto;">内容</div>

これは例えば「Twitterのタイムライン表示」などのガジェット全体像の位置合わせなど、中に含まれるテキストは左寄せでガジェット全体像はセンタリング、とかそういう場合です。

左寄せはどうするか、なのですが、webの標準位置というのは「左寄せ」ですから書かなければ勝手に左寄せになります。ですから必然的に位置指定を行うのは「中央」と「右寄せ」ということになります。

プラグイン全体の位置合わせはテンプレート側の指定を残しておけば良いと思います。カテゴリ内にサンプルのような「画像」であったり、第三サービスのウィジェットだとかそういったものがある場合。やっぱり真ん中に位置していた方が見栄えが良いんですよね。それ以外のプラグイン、例えば「最新コメント」「カテゴリ一覧」といったものは『左寄せ』のままにしておく、だとか。そういったときの対処法でした。

Related post

Comments  25

沙姫
2015/12/18 (Fri) 22:11

ありがとうございます

こんばんは~^^
いつもお世話に、なっております。
お陰さまで、オルゴールのプラグインが、中央に表示できましたv-290
このプラグインを、ずぅ~~と中央にしたかったのですが、どうしたらよいか分からずに、仕方なくそのままにしてありました。
ようやく中央に表示できて、感謝感激です♪
ほんとうに大繁忙期に、ご親切にどうもありがとうございました。

vanillaice (Akira)
Akira
2015/12/20 (Sun) 11:05

To 沙姫さん

こちらこそお世話になっておりますー :)

お困りだったんですね。
お役に立てて幸いでございます (∩´∀`)∩

あっちゃん
2017/03/28 (Tue) 22:55

レシピブログのブログパーツの中央表示について

こんばんは。
お忙しい中、大変恐縮なのですが、何度やり直しても真ん中に表示されないので、
ご教示お願いします。
<script type="text/javascript">RECIPEBLOG_KEY=18553</script><script style="text/javascript" charset="utf-8" src="http://blogparts.recipe-blog.jp/member/loader.js"></script><div style="width: 160px; text-align: center;"><a href="http://www.recipe-blog.jp/" target="_blank" style="font-size: 12px;">powered by レシピブログ</a></div>
と今、なっており、ちゃんと text-align: center;なのですが、実際は左よせ。

<script type="text/javascript">RECIPEBLOG_KEY=18553</script><script style="text/javascript" charset="utf-8" src="http://blogparts.recipe-blog.jp/member/loader.js"></script><div style="width: 160px; "margin: 0 auto;"><a href="http://www.recipe-blog.jp/" target="_blank" style="font-size: 12px;">powered by レシピブログ</a></div>

marginで指定してみましたが、こちらもダメでした。
どこを修正すればいいのでしょうか?
よろしくおねがいします。
ほっこり時間 あっちゃん

vanillaice (Akira)
Akira
2017/03/28 (Tue) 23:48

To あっちゃんさん

こんばんは (o'ω')ノ

> ブログパーツが何度やり直しても真ん中に表示されない〜

このブログパーツの仕組みなどをご説明しますね。

● 原因
現在あっちゃんさんが「text-align: center; あるいは margin: 0 auto; を追加してもダメです。」
と仰っている「部位」ですが、一番下に
powered by レシピブログ」という文字列がありますよね。
そこだけなんですね (´・ω・`)
ですからブログパーツ全体に対して中央寄せを指定していたわけではないんです。

* 確認お願いします
① サイドメニューに2つ掲載しておられますよね。
上の方は margin: 0 auto; の指定がありますが、「powered by レシピブログ」の文字列はブロックではありませんので効きません。
従って左寄せのままです。

② 2つ目の方は text-align: center; の指定がありますので、powered by〜 の文字列がブログパーツの大きさに対して中央に寄せられています。

要するに、全体に指定していると思っていたところが、実際は「powered by レシピブログ」の文字列に対してしか指定していなかった、ということです。

まずこれが「上手く行かない」という原因にあたります。

● 仕組み
この手のブログパーツというのは JS (Java script) という言語でhtml, CSSを出力します。
なので簡単なコード内容で綺麗に整形済のものが掲載できるわけです。
あっちゃんさんがプラグインフリーエリアに書き込んだコード内容についても
「このブログパーツを出力してくださいよ。」という実行コードだけで、html, CSS内容は含まれていないんです。
それらはこのブログパーツの提供元が事前に製作しているものを「表示してくれ。」という命令で以て書き出しをしているだけです。

ですから当該記事内容のように 表示対象要素のhtmlで直接操作することはできない というのが仕組みです。

● 対処
ブログパーツのhtml自体にstyle属性を付けることはできませんので、実行コード全体を囲ってそちらに指定します。

<div style="margin: 0 auto; width: 160px;"><script>RECIPEBLOG_KEY=xxxx</script><script charset="utf-8" src="相対アドレス"></script><div style="width: 160px; text-align: center;"><a href="相対アドレス" target="_blank" style="font-size: 12px;">powered by レシピブログ</a></div></div>

太字部分が追加する内容です。
このパターンでは width の指定も要りますので削除不可。
margin: 0 auto; が全体のセンタリング指定です。
赤字の text-align: center; は先程言った通り、powered by〜 の文言のセンタリングですので、必要であれば記載。不要であれば削除。

「相対アドレス」というのは
X (絶対パス) --- http://xxxxxx
✔ (相対パス) --- //xxxxxx

今後もしFC2ブログでAOSSL化が進んでhttp:からhttps:のアドレスに変更になった時、絶対パスで記されているhttpファイルは表示されなくなってしまいます。
(httpsのものしか表示しません)
ですから今のうちに対策をしておいた方が良いと思います。
http:
の部位を省略するだけです。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-497.html

以上です。
よろしくお願いします (●'0'●)/

======= 余談

pinterestのウィジェットはレスポンシブになってますので、大きいものを貼り付けてもテンプレートでの処理さえできていれば自動で縮尺がかかりますよ。

http://blog-imgs-102.fc2.com/v/a/n/vanillaice000/9aufeowf.jpg

420 X 350 のウィジェットです。
スクショのサイドメニューの幅は 260です。
縮尺されて260pxで収まってます。

現在の状態だと縦スクロールが非常に長いので、スマホ閲覧の方はちょっと寂しいかもしれません (´・ω・`)

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-490.html

横に余幅がありますのでスクロール自体の操作難というよりも、サムネイルが小さいのでもったいない気がします。
意図があってのことであれば捨て置いてくださいね。
よろしくお願いしますー。

あっちゃん
2017/03/29 (Wed) 08:28

恥かきついでに、ピンタレストの表示について

昨日はありがとうございました。
レシピブログのブログパーツと同時にピンタレストもしていたのですが、ピンタレストのウィジェットは、表示がされず、プロフィールの形にしたら、なぜか表示されたので、昨晩はそこで力尽きました。^^;

その後、各記事の一番にしたにある、ツイッターなどのボタンが、なぜかピンタレストだけ変わっており、これは間違いなくわたしの仕業なのですが、ウィジェットがうまくできていないせいだとは思っています。
Pinterest ボードの URL が、何か間違ってるようで、自分のユーザ名を入れてもプレビューがされません。
プラグインには、
<a data-pin-do="embedBoard" data-pin-lang="ja" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" https://jp.pinterest.com/xxx/"></a><script async defer src="//assets.pinterest.com/js/pinit.js"></script>

ちなみに、ブログの各記事の下は、こんなふうになっています。
http://blog-imgs-102.fc2.com/k/o/d/kodomomama777/pin.jpg

vanillaice (Akira)
Akira
2017/03/29 (Wed) 16:32

To あっちゃんさん

こんにちは (o'ω')ノ
ちょっと今出先なので簡単に。

> なぜかピンタレストだけ変わっており、これは間違いなくわたしの仕業なのですが〜

これはあっちゃんさんの仕業ではありません。
Pinterestの仕業です(笑)

とりあえず一つづつ順番に。


> Pinterest ボードの URL が、何か間違ってるようで、自分のユーザ名を入れてもプレビューがされません〜

省略されているURLが一番重要なのですが、このウィジェットタイプは「ボード」の指定です。
ですから

https://jp.pinterest.com/固有ID/[ボード名/

赤字部分にボード名が入っていないと表示は行われませんのでご確認ください。


> SNSアイコンが勝手に純正アイコンに変更されている件

これはですね、
Pinterestのウィジェットというのは必ず
<script async defer 〜 省略
このスクリプトファイルが要るんですね。
そしてこれを書いてしまうと自動的に純正ボタンに書き換わってしまいます。
それを踏まえて対処なんだけども。

● PinterestのJSで書き換えられたものをテンプレートのJSで書き戻しをする
(JSコードの追加)

● SNSアイコンの並びからPinterestを除外し、画像マウスオーバーでのPin itに変更する

などになると思います。
ちょっと詳細は帰宅してからということでお願いします。
夜になっちゃうかな。申し訳ないです (*_ _)

あっちゃん
2017/03/29 (Wed) 16:58

外出先にもかかわらず、ありがとうございます。

ピンタレストの認識が浅く、申し訳ないです。
ほんと、つい最近はじめたばかりで、ピンやらボードやらもわからないまま^^;
おっしゃってる意味がわかりました。
私は、「one dish/ワンプレート」のボードの表示をしたいので、
この画面でのウィジェットを作製する、を選んで作成しなければいけないのですね。
下が、それを指定したものになりますが、やはりその下のプレビューには表示がされていません。

https://jp.pinterest.com/kodomomama0607/one-dish%E3%83%AF%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88/


それから、ぜんぜんカスタマイズとは無関係なのですが、スマホで見ると、
ボードの中で、さらにサブカテゴリのような小さい単語が表示されてる人と、そうでない人とがいて、どうしてなんだろう??とこれもあちこち調べてるのですが、まったくヒットせず、困り果てております。

「one dish/ワンプレート」の中で、パン 洋食 和食 などと区分けしたいのですが、これは#をどこかにつけるのかな?勝手に付与されるものなのかな?と、よくわかりません。
サブカテが表示されると、検索のときにすごくわかりやすいし、無用なボード増えなくてすむかな、と思っているのですが。(。-人-。)

Akira
2017/03/29 (Wed) 20:12

To あっちゃんさん

先にボードのウィジェットが作成できない件について。

ボード名が日本語だからだと思うんですよねー (´・ω・`)
URL自体はエンコードされてますが、どうもダメっぽい。
URL中に日本語を含めることはできないので、エンコードと呼ばれるものに変換するわけですが、%E3%83%AF%E3%83%B3%E3〜省略
の部分がそれにあたります。
エンコードしてもダメならダメなんだろうと思う ^^;

で、本末転倒ですが、Pinterestではボードやハンドルネームなど、できるだけ英語にしておいたほうが良いですよ。
Pinterestのユーザー層の大半はWASPです(アングロサクソン系白人)
で、30〜40代女性がメイン。
日本人ユーザーってすごく少ないんです (´・ω・`)
Pinを広めていくのは彼女たちですので、できるだけ英語で(笑)

アイコンの件は少しお待ち下さいね。
こっちはかなり厳しいかもしれないな〜 (´・ω・`)

あと、分類の件ですがこちらもちょっとよくわからないです。
ウィジェットで、ということでしょうかね。
今ひとつイメージができないので、サンプルなどあればと思います。
(URLがあれば教えてください。カギ付きコメントで構いません)

=====

* 思わずフォローしてしまいましたがよろしかったでしょうか。
お料理の写真は大好きなんです。
自分ができんから憧れ的な ( ̄∀ ̄;)
(フォローバック不要です、と一応お伝えしておきます。お恥ずかしい話し、オリジナルコンテンツが無いので(笑))

あっちゃん
2017/03/29 (Wed) 20:53

pinterest 無事に表示できました。

深夜かも・・・と思っていたので、すごーくすごーくうれしいです。
そしてそして、フォローもしてくださり光栄です。
piterestを始めたのは、自分が海外の方のレシピを知りたくなり、
材料の名前以外、まったくわからないので、^^;
中学英語から、勉強しなおすつもりでいます。(苦笑
アラフィフですが、が、がんばりまっす。

http://blog-imgs-102.fc2.com/k/o/d/kodomomama777/a_20170329204609825.jpg
ブログ友達の方のですが、カスタマイズの話は今までしたことがなかったので、聞けずにいます・・^^;
お世話になります、ありがとうございます。╰(*´︶`*)╯
きっとakiraさんもお好きだと思います。

Akira
2017/03/29 (Wed) 21:28

To あっちゃんさん

ハッシュタグですね。
投稿時の文章に

#キーワード

を入れるだけです。

例)
ハンバーガーの作り方

材料 ●●●
所要時間 ●●●分

是非お試しください
#ハンバーガー #レシピ

複数の場合は間に半角スペースが要ります。
ただピンタレストの場合には、ボードの右上のペンシルマークをタップ → トピックをタップ → 最適と思われるものを選択(複数不可)
これだけでもキーワードは出てきます。
たぶんお友達の方のボードで表示されているものもそれだと思います。

アイコンの件お待ち下さいね。
長男がパソコン使ってるもので、彼の作業の合間にしか進められない(笑)

あっちゃん
2017/03/29 (Wed) 21:40

akiraさん、すみません。
今、お弁当 japanese luch box で、新しくボードを作ろうと思ったら、
↓のような画面になりました。
これをセレクトすることにより、サブカテのようになるのかな?と思ったのですが、
うーん、使い方が、わからない・・・。
https://jp.pinterest.com/search/pins/?q=%E3%81%8A%E5%BC%81%E5%BD%93

サブカテで、「おにぎらず」「まる弁」などを表示させたいのですが、自分で指定できるものではないんですかね?

スクラップブッキング的に思っていたのですが、違うのかな?^^;



各記事の下にあるsnsのボタンですが、それを開くとその記事のボードに画像を保存できるので
これはこれで、piteerestに保存しやくて、いいのかも、思ったり。
すみません、とりとめなくて。

あっちゃん
2017/03/29 (Wed) 22:00

なるほど!

この画面が、なかなか出てこなくって↓
http://blog-imgs-102.fc2.com/k/o/d/kodomomama777/b_20170329215818127.jpg
おっしゃってる通りにしたら、出ました!

ここに記入すればいいんですね。
あー、わかりやすいです、ほんと。ありがとうございます。

Akira
2017/03/30 (Thu) 00:19

To あっちゃんさん

ちょっと別件でワチャワチャしておりまして、後回しになってしまい申し訳ないです。

> これはこれで、piteerestに保存しやくて、いいのかも、思ったり〜

アイコン並びの体裁が気にならないのであればそのままでも良いかと思います。
一番左に持っていくと多少は良いかもしれませんね。
ただ、機能的にはアイコンで表示していた際のそれと全く同等です。
ですから見た目だけの問題。

Pinterestのこの仕様は盲点でした。
これをどうしてもアイコンに戻したい場合には、さらにJSを利用して直すしかないんですよね。
すると当然動作が重たくなります。
重たくなるというか、ボタン描画自体のタイミングが遅い上にそれをさらに書き換えるわけなので…。
あっちゃんさんの方針を待つことにしますね。
そのままで良いかどうか。
いずれにしても書き換えるJSは考えますけれど。
明日には記事にできるか、それとも個人的にここでお伝えできるか、それか失敗するか(笑)
できないよぅ (;ωq`)
ってなったらごめんなさい(笑)
とりいそぎのお返事です。
また明日改めますね。

あっちゃん
2017/03/30 (Thu) 07:37

納得。╰(*´︶`*)╯

akiraさん、おはようございます。
先にNEWの記事を読んじゃいました^^;
LOCARIやMACARONIとかもよく読んでいるのですが、
そこで読むコラムのような感じです!

piterestのアイコンの理想は、写真の左隅ですね。
せめて一番左にはしたい!!
がんばります!
長時間、お時間とってくださりありがとうございました。

それにしても、色んなことに幅広く知識を持っておいでで、
記事を読んでるだけでも、すごいなーと思うことばかりでした。
akiraさん節が入ってるのが、またいいんですよねw
作業、取り掛かりまーす!

あっちゃん
2017/03/30 (Thu) 08:01

左端に!

HTML順番変えて、左端に移動できました!
私はしばらくこれで、いこうと思いますw
3月は年度末だし、どうしてもバタバタしがちですよね。
お忙しい中、もうこれ以上ない感謝!感謝!です。
どうかご無理なさらずに・・・(。-人-。)

vanillaice (Akira)
Akira
2017/03/30 (Thu) 12:53

To あっちゃんさん

結局「方針変更」って形になっちゃって申し訳ないです(笑)
こちらこそ大変お勉強になりました。
重ねてありがとうございます。
あっちゃんさんもお疲れ様でした :)

-
2018/09/19 (Wed) 02:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/19 (Wed) 03:12

To プラグインセンタリングの件 内緒さん

こんばんは (●'0'●)/

> プラグインの月別アーカイブ、Twitter、そしてGoodreadsが提供しているウィジェットをセンタリング〜

まず「月間アーカイブ」現在の内容は
<ul style="list-style-type: none;">
<li style="text-align:left">
以下省略

li要素にtext-align: left が指定されています。このleftをcenterに変更してください。
sytle属性でのCSS指定は!importantに次いで強制力が高いのでこの指定を変更しない限り修正できません。
(!importantは最重要規則で多用するものではありません)

-----
TwitterやGooglereadsの中のテキストをセンタリングしたい、ということなんでしょうか。
Twitterについてはiframe要素で記載についても簡単なscript要素だけで、あとは勝手に表示が行われているはずです。
iframe要素は原則として第三ユーザーのスタイリングを受け付けません。
そしてJSで書き出していますのでhtmlを直接操作することもできません。
なのでそれぞれのウィジェットビルダーに「テキスト位置揃え」の項目がなければ恐らく無理だと思います。
Googlereadsの方はもしかしたらできるかもしれません。
ちょっと詳しく見ていないのでアレですが、だめもとで

Twitter, Goodreadsともに
<div style="margin: auto; text-align: center;">
ここにscript要素
</div>

上記内容にしてみてください。
ウィジェット全体をセンタリング、中のテキストを(運が良ければ or ウィジェットが受け付けてくれたら)センタリングという指定です。

margin-left: auto
というのは「右に寄せる」ための指定です。センタリングは
margin: auto
ですので覚えておいてくださいね。
よろしくお願いします。

* リストなどのセンタリングは「読みやすいとは言えない」点も念の為お伝えしておきますね。

-
2018/09/19 (Wed) 06:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/19 (Wed) 15:17

To プラグインセンタリングの件 内緒さん②

お疲れ様です (o'ω')ノ

ウィジェットの中身のセンタリングではなくウィジェット本体のセンタリングということなんですね。
内緒さんの「センタリング」の捉え方は間違ってないですよ。
面倒なことにCSSでは「ブロック」「インライン」の別があるのでややこしくなっているだけです(笑)

Googlereadsの方はwidth指定されているブロックの外側(親)にもうひとつコンテナがありますので、marginはwidth指定の行われている要素にあてる必要があります。
恐らくクラス名の末尾は固有番号なのでためらいはありますが書かずに「自分で調べろ」では忍びないので書きますね (´・ω・`)
ただたぶんユーザー別の「固有番号」ですという点はお伝えしておきます。

昨日の内容は破棄してください。
つまり

<div style="margin: auto; text-align: center;">
ここにscript要素
</div>

打ち消し部分不要です。

<style>.gr_custom_container_xxxx{margin:auto}</style>
ここにscript内容

これで良いと思います。
一度お試しくださいね。

* コメント赤字部位一部伏せました

-
2018/09/19 (Wed) 15:45

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/19 (Wed) 16:02

To プラグインセンタリングの件 内緒さん(完了のご報告)

上手くいったようで安心しました。
番号は念の為修正して伏せておきますね。
お疲れ様でした :)

-
2020/06/20 (Sat) 09:38

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/06/20 (Sat) 15:45

To プラグイン位置揃えの件 内緒さん

こんにちは。

marginの方ですかね。お疲れ様でした :)
あと、ホームページの件ですが、私は一切関わっていません。新しいテンプレートが出た、というのも今知りました(笑)

-
2020/06/21 (Sun) 08:09

管理人のみ閲覧できます

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

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