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

ありがとうございます

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

To 沙姫さん

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

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

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

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

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

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

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

昨日はありがとうございました。
レシピブログのブログパーツと同時にピンタレストもしていたのですが、ピンタレストのウィジェットは、表示がされず、プロフィールの形にしたら、なぜか表示されたので、昨晩はそこで力尽きました。＾＾；
＊
その後、各記事の一番にしたにある、ツイッターなどのボタンが、なぜかピンタレストだけ変わっており、これは間違いなくわたしの仕業なのですが、ウィジェットがうまくできていないせいだとは思っています。
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

To あっちゃんさん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

To あっちゃんさん

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

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

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

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

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

=====

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

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

深夜かも・・・と思っていたので、すごーくすごーくうれしいです。
そしてそして、フォローもしてくださり光栄です。
piterestを始めたのは、自分が海外の方のレシピを知りたくなり、
材料の名前以外、まったくわからないので、＾＾；
中学英語から、勉強しなおすつもりでいます。（苦笑
アラフィフですが、が、がんばりまっす。
＊
http://blog-imgs-102.fc2.com/k/o/d/kodomomama777/a_20170329204609825.jpg
ブログ友達の方のですが、カスタマイズの話は今までしたことがなかったので、聞けずにいます・・＾＾；
お世話になります、ありがとうございます。╰(*´︶`*)╯
きっとakiraさんもお好きだと思います。

To あっちゃんさん

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

#キーワード

を入れるだけです。

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

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

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

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

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

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

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

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

＊

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

なるほど！

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

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

To あっちゃんさん

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

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

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

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

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

akiraさん、おはようございます。
先にNEWの記事を読んじゃいました＾＾；
LOCARIやMACARONIとかもよく読んでいるのですが、
そこで読むコラムのような感じです！
：
piterestのアイコンの理想は、写真の左隅ですね。
せめて一番左にはしたい！！
がんばります！
長時間、お時間とってくださりありがとうございました。
：
それにしても、色んなことに幅広く知識を持っておいでで、
記事を読んでるだけでも、すごいなーと思うことばかりでした。
akiraさん節が入ってるのが、またいいんですよねｗ
作業、取り掛かりまーす！

左端に！

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

To あっちゃんさん

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

管理人のみ閲覧できます

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

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
ですので覚えておいてくださいね。
よろしくお願いします。

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

管理人のみ閲覧できます

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

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内容

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

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

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

こんにちは。

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

管理人のみ閲覧できます

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