» BlogTopクリプトネット : Web制作, デザイン, 写真撮影

2021年4月17日

Twitter Cardstest のテストとかデザインとか撮影とか

Filed under: Web & Design,備忘録 — Cript @ 1:49 PM

備忘録

URLを記したtwitterのタイムラインに画像サムネイルを表示させる方法

メタタグを追加
<meta name=”twitter:card” content=”summary”></meta>

カードタイプ値設定
カードのプロパティ説明
twitter:card カードタイプは、“summary”、“summary_large_image”、“app”、“player”のいずれ。

カードとコンテンツアトリビューション
twitter:site カードフッターで使用されるウェブサイトの@ユーザー名 (必須ではない)
twitter:creator コンテンツ作成者/著者の@ユーザー名 (必須ではない)

詳細は以下のオフィシャルドキュメントへ
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

ワードプレスで上記を設定するにはJM Twitter Cardsなどのプラグインを使用すると楽。

※Twitter Cardsのサムネイルは公式クライアントアプリとWebでしか対応していない模様。

2019年9月13日

親要素の横幅でposition:fixedの位置を固定する

Filed under: Web & Design,備忘録 — Cript @ 1:42 AM

文章で説明するのがめんどーなのでw　図を見て頂きたいんですが、簡単なようで結構試行錯誤したのでその備忘録

通常普通にposition:fixedで書いちゃうとブラウザの絶対位置基準で配置されてしまうのでright:0とかすると#wrapper内にあってもブラウザの右端にくっついてしまうわけです。

んで、いろいろ試行錯誤した結果。
ブラウザの半分の値-#wrapperのピクセル値の半分をcssで計算してあげればなんか上手くいったw
position:fixed;
right: calc(50% – 450px); /* 親要素が900pxの場合 */
です。

この方法が正しいかは知らないwww（識者の方いらっしゃいましたらゼヒ教えて下さい<(_ _)>）

2019年5月22日

HTTPS化したらwordpressのプラグイン、”Infinite Scroll”で混在コンテンツの警告とかiOS対応とか

Filed under: Web & Design,備忘録 — Cript @ 2:02 PM

WordPressで構築したサイト。
HTTPS化したらwordpressのプラグイン、”Infinite Scroll”(無限でコンテンツを適時読み込んでスクロールしてくれるシャレオツなやつ)でなんかうまくいかないっぽい。
プラグインを外すと警告無しで「保護されています」ってなるんだよなぁ。

プラグインの中でどっかHTTPS:のままのところがあるんかいな？と思ったりしてソースをかたっぱしから読むけどそんな箇所見当たらず・・・。
試行錯誤しながらもう一回基本に立ち返ろうとしてChoromeの検証モードで見ると

どうやらローディング用のgif画像がhttp://で読み込んでいる。プラグインでその辺の読み込む箇所を探すが、http://で読み込むようにはなってないっぽい。
以前の環境の何かを引きずっているのか？まぁ、phpMyAdminからなんとかするのももう面倒なので、Loading Image用gifファイルを別でアップロードしてそれを読み込むように指定。

これで混在コンテンツの警告も消えてスッキリ！
はぁ、疲れた(笑)

と、思って一安心していたら
もう一つ落とし穴が・・・。

iOS機器でローディングが出てこない時が！
8時間くらい試行錯誤して、なんとか傾向をつかんだのが、「Next Selector」のクラスの書いてあるタグの位置によって出たり出なかったりとか、記事の表示件数によっては出たり出なかったりとか、、、
いろんな要素が複合的に絡んで動きが不安定に。。。
悩みながらiPhoneいじってたらピンチアウトして拡大した時は必ず出る！というのに気づいて、それをヒントにググる！

と、https://webutubutu.com/webdesign/2091 というサイトを発見！
プラグイン内の
jquery.infinitescroll.dev.js
jquery.infinitescroll.js
の
bufferPx : 40
を
bufferPx : 500
に書き換えてOK!

こんなのわかんねーよ(泣)
Infinite scroll導入でつまずいた点のメモの方ありがとうございました！
ほんと、助かった・・・。