vanillaice (Akira)

vanillaice (Akira)

sample左寄せ/ 中央合わせ/ 右寄せ

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



こういうの嫌じゃないですか?

293487.jpg


「えー 別に (´・ω・`)」
という方はスルーで(笑)

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

239847.jpg


全部同じ位置合わせ


--------

こうして位置を揃えるのにテンプレート側のソースであれこれやろうとしても
それは無駄でございます (´・ω・`)
修正すべきはテンプレートソースではなくプラグイン側です

なんでもかんでもテンプレートで操作できるわけではないんです
FC2のプラグインの扱いと縛りをご説明しますと
FC2には以下のような変数が存在します

293847_20151215141344363.jpg



プラグインは3つの大別がありますよね

プラグイン1
プラグイン2
プラグイン3

この3つ
3つの中にそれぞれいくつのプラグインが入っているか というのは
各ユーザーの設定の如何によります

大別3種に対してそれぞれ位置の指定が可能です
例えば
プラグイン1 --- 左寄せ
プラグイン2 --- センタリング
プラグイン3 --- 右寄せ

これをやる方が居るかというと恐らく居ないと思います(笑)
全てのプラグインは「左寄せ」とか 通常はそういった指定です

じゃあ プラグイン1の中にある 一番最初のプラグインと 3番目のあるプラグインだけを「センタリング」して
プラグイン1にある残りのものは「右寄せ」
これができるかというと できないんです
大別された3カテゴリーに対して別途の指定はできても
カテゴリー内の個別プラグインを抽出してそれぞれに位置指定 というのはできません
同じカテゴリに属するプラグインは全て同じ位置合わせになる ということです

いやいや 実際に同じカテゴリ内でも位置指定が違ってるのがあるし!
という方は
プラグインのソース内容に位置指定が含まれている
ということになります

で 私は最近のテンプレートでは上記サンプル画像のようなFC2変数は使用しておりません
何故かというと
html, CSSの指定には「強制力の強弱」が存在します
みなさんがちょっとデザインを変更しようかな と思った時
CSSソースを編集するんだ というのはもうほとんどの方がご存知かと思います
ところがソース内容も正しく 指定する要素も正しいのに何故か言うことを聞いてくれない
なんてことがありませんでしょうか
その場合には 強制力の強い記述の仕方がhtmlソース側に潜んでいるのかもしれません
つまりは「優先順位」のことです
上記変数の処理の仕方は「インラインCSS」といって 比較的強制力の強い書き方ですので
敢えて私は使用を控えています

-------

どうやってプラグインの位置指定を行うかの手順

まずはプラグインのソース内容を見ないことには始まりません
プラグインの設定 > 該当プラグインの「詳細」

293847_20151215143101940.jpg


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

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


これを書くと
<div>
</div>
に挟まれた
画像 や テキスト がその指定に倣います

いやそうじゃないんだ 外部プラグインを使っていて形がもうできていて その全体像の位置を合わせたいんだ と
その場合にはこの方法では動きません
text-align というのはブロックレベル要素内にあるインライン要素にしか作用しません
(専門的なのでスルーで良いです)
ブロックレベル要素を動かすには
margin を使います

センタリング
<div style="margin: 0 auto;">内容</div>


右寄せ
<div style="margin: 0 0 0 auto;">内容</div>


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

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

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

--------

最後に「大いなる勘違い」ということでひとつ

<div align="center">


というhtmlがいまだに散見されます
大手サイトから提供されるコードにも当たり前に含まれていることがあります
この align属性(text-alignプロパティとは別物です)は既に廃止されておりますのでもう使うべきではありません
そしてもっといかんのがですね
このalign属性をブロックレベル要素の位置合わせのために使ってる場合があるんです
上で述べたような ガジェット全体像の位置合わせですね

align属性というのは本来は ブロックレベル要素内のインライン要素にしか効いてはいけないんです
ブロックレベル要素がこの指定位置に従ってはいけないってことなんです
なのに効いてしまう場合があるんですね どんなときか

古いバージョンの Internet Explorer で閲覧したとき

これMicrosoftの大罪だと思います(笑)
これIEの独自バグなんですよ
IE一強時代が実際にあったものですから 多くの方が間違って覚えてしまっている

「今まではテンプレート全体がセンタリングされていたのに IEからChromeに変えたら左に寄ってしまいます」

といったQ&Aをよく見かけます
これChromeが悪いんじゃないですよ
IEユーザーだけが「思い込んでいた」だけで
元々センタリングなどされていないんです

プラグイン内に align="位置" という指定があった場合 それは間違いですので
内部の画像やテキストへの位置合わせであれば text-align に
全体像の位置合わせであれば margin に
正しく書き直しましょう

関連記事

Comments 16

There are no comments yet.
沙姫  
ありがとうございます

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

2015/12/18 (Fri) 22:11 | EDIT | REPLY |   
Akira  
To 沙姫さん

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

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

2015/12/20 (Sun) 11:05 | EDIT | REPLY |   
あっちゃん  
レシピブログのブログパーツの中央表示について

こんばんは。
お忙しい中、大変恐縮なのですが、何度やり直しても真ん中に表示されないので、
ご教示お願いします。
<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で指定してみましたが、こちらもダメでした。
どこを修正すればいいのでしょうか?
よろしくおねがいします。
ほっこり時間 あっちゃん

2017/03/28 (Tue) 22:55 | EDIT | REPLY |   
Akira  
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/28 (Tue) 23:48 | EDIT | REPLY |   
あっちゃん  
恥かきついでに、ピンタレストの表示について

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

その後、各記事の一番にしたにある、ツイッターなどのボタンが、なぜかピンタレストだけ変わっており、これは間違いなくわたしの仕業なのですが、ウィジェットがうまくできていないせいだとは思っています。
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

2017/03/29 (Wed) 08:28 | EDIT | REPLY |   
Akira  
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:32 | EDIT | REPLY |   
あっちゃん  
外出先にもかかわらず、ありがとうございます。

ピンタレストの認識が浅く、申し訳ないです。
ほんと、つい最近はじめたばかりで、ピンやらボードやらもわからないまま^^;
おっしゃってる意味がわかりました。
私は、「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/ワンプレート」の中で、パン 洋食 和食 などと区分けしたいのですが、これは#をどこかにつけるのかな?勝手に付与されるものなのかな?と、よくわかりません。
サブカテが表示されると、検索のときにすごくわかりやすいし、無用なボード増えなくてすむかな、と思っているのですが。(。-人-。)

2017/03/29 (Wed) 16:58 | EDIT | REPLY |   
Akira  
To あっちゃんさん

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

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

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

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

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

=====

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

2017/03/29 (Wed) 20:12 | EDIT | REPLY |   
あっちゃん  
pinterest 無事に表示できました。

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

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

2017/03/29 (Wed) 20:53 | EDIT | REPLY |   
Akira  
To あっちゃんさん

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

#キーワード

を入れるだけです。

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

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

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

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

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

2017/03/29 (Wed) 21:28 | EDIT | REPLY |   
あっちゃん  

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) 21:40 | EDIT | REPLY |   
あっちゃん  
なるほど!

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

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

2017/03/29 (Wed) 22:00 | EDIT | REPLY |   
Akira  
To あっちゃんさん

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

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

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

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

2017/03/30 (Thu) 00:19 | EDIT | REPLY |   
あっちゃん  
納得。╰(*´︶`*)╯

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

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

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

2017/03/30 (Thu) 07:37 | EDIT | REPLY |   
あっちゃん  
左端に!

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

2017/03/30 (Thu) 08:01 | EDIT | REPLY |   
Akira  
To あっちゃんさん

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

2017/03/30 (Thu) 12:53 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い