Blog

 

2022.11.07 Monday

font-size に max/min

もぐブログ
max-font-sizeやmin-font-sizeを指定したい時はこう!
https://mgmgblog.com/?p=1100

文字サイズには max-width や min-width にあたるものがなくて困って
イチかバチかで検索したらこんなのが今もう使えるようになってるんだねぇ。

これがパッとイメージし辛いのは

  • 最大フォントサイズを決めるのが min
  • 最小フォントサイズを決めるのが max

ってのはちょっとまだ把握しきれていないけど今後この記事は絶対に必要なる内容なのでメモメモ。

---

JUGEMテーマ:コンピュータ

| WORKS | 19:53 | comments(0) | ▲to TOP |

2022.08.04 Thursday

やったぁ!初めてのPythonでブラウザのフォーム自動入力にチャレンジ!

Selenium(ver.3)のインストール〜Chrome Driverの実行まで(Windows 10)
https://qiita.com/takayuki_matsukawa/items/6773a724485a04d83a23

Seleniumのインストールまでは出来たんだけど「Chrome Driver」をどこに置いたらいいかわからずウンウンやってた所に見つけた記事。
Pythonのipynbを置いてあるフォルダの中に入れたらよかったんですねぇ。

PythonによるWebブラウザ自動操作の基本 〜Seleniumを活用する
https://www.insource.co.jp/python-gakuin/mail-backnumber/vol21.html

を見ながら書き加え。

上記サンプルではインプット一つとキー入力項目が一つ、最後にボタン操作が一つ。
それをform の input 分を全部バラバラにして入力。

先ずドライバー呼び出し
driver = webdriver.Chrome()

上記実行でChromeの新しいウィンドウが開いて「Chrome は自動テストソフトウェアによって制御されています。」と出ているのを確認!
イヤッホー!
ここまでが長かった!!!

そして入力フォームのURLをゲット
driver.get('入力フォームのURL')
上記をRUNしてページが表示されたのを確認出来たらいよいよフォーム項目を取ってきて何を入力するか指定。

name = driver.find_element_by_xpath('//*[@id="name"]/input[name]')
form.send_keys('なまえ')
age = driver.find_element_by_xpath('//*[@id="age"]/input[age]')
form.send_keys('年齢')

最後に「送信」ボタン

soushin = driver.find_element_by_xpath('//*[@id="__next"]/main/main/div/form/div[soushin]/button')
soushin.submit()
※上記では送信ボタンに send とか使っちゃうと重複になるといけないのでわざとヘンな名前にしてあります。

最後に

driver.close()

で終了!

-----

JUGEMテーマ:コンピュータ

| Python | 12:51 | comments(0) | ▲to TOP |

2022.06.28 Tuesday

twitter のボタンに関するメモ

★フォローするID指定ボタン
https://twitter.com/intent/follow?screen_name=「フォローするID」

★本文指定の場合
https://twitter.com/intent/tweet?text="「本文」"

上記「本文」部分は下記で
https://so-zou.jp/web-app/text/encode-decode/
「URLエンコード」のコードを使用のこと。

※詳細は下記参照のこと。
[Twitter] Web Intentを使ったツイートボタンの作り方・パラメータ一覧 - イクログ さま
https://blog.ikunaga.net/entry/twitter-com-intent-tweet/#-url
ありがとうございました。

※こんな便利なツールも!!!
https://tools.ikunaga.net/tweet-link/

----

JUGEMテーマ:インターネット

| WORKS | 18:25 | comments(0) | ▲to TOP |

2021.06.20 Sunday

【jQuery/wordpress】スマホ横向き対応とwpの記事を書く画面で勝手に入るコメントが本文として読み込まれる問題

直近の案件でもうほぼ出来上がった時点で「スマホを横にすると表示が崩れます」と言われ、
最初っから条件言えよk★△◎…っとなりました。

そこで別のサイトで採用されていた「当サイトは横画面には対応しておりません」という対応でどうかと話しをしたらOKとの事で大変助かったのはこちらの記事。

一般的なmax-width/min-widthでは最近のスマホ横画面は長すぎて全く意図とは違う表示になってしまうの、みんなどうやって回避してるのかなぁ…。

-----

もう1点は「wpを5.7.2にアプデした後、記事を書いたら画面が崩れた」とクライアント様から連絡があり、一覧ページのソースを確認したらアプデ前(4.9.x)では問題なかった、

「★新しい入力画面で記事を書く際に自動で挿入されるhtmlコメントが、
 テンプレート側で本文と読み込まれてしまい、
 一覧ページでコメントの文頭部分だけが本文として読み込まれた為、
 表示の不具合を起こしている。」

ようだ、とアタリをつけて、

・Classic Editorのインストール
・下記の記事に記載の2と3をテンプレートに追記

でOK。

試しに本文をh1にして記事を公開してもhtmlタグが一切無視され、テキストの内容だけが一覧ページに反映される事を確認出来ました。

いずれの記事も大変ありがたい記事で今後も絶対使うであろう内容なのでメモ。
ありがとうございました。

-----

| WORKS | 21:01 | comments(0) | ▲to TOP |

2021.05.18 Tuesday

【jQuery】Slickでありがたかった記事ちょっとだけまとめ

ビックリだよね、もう2021年の5月で、なんと今年は既に梅雨入りしました。

前に記事を書いたのは2019.07.15で、コロナも流行ってないし、「来年は日本でオリンピックやるのかー!」なんて浮かれてた頃ですよ。
当時は今みたいに新型ウィルスで世界が大変なことになるだなんて想像もしなかった。

さて現在着手中の案件で、「ちょっと右側にはみ出した画像スライダー」で、
左右の矢印で前後に移動と、「1/5」などの「現在の位置と全体の枚数」も表示したいというオーダーです。

長年愛用していたcycle2.jsがDEMOページもちゃんと動いてなくて、以前はたしかもっと色々DEMOパターンも展示されていた気がしたんだけど、どうも今後の案件に使用するのは気が引ける状態なので(実装すればちゃんと動くんだけど)Slickを使うようになったんですが、正直cycle2.jsの方が色々カスタマイズ出来たし、うーんどうしたもんかね、ということで調べた自分用のメモ。

  • 片側だけはみ出たデザインのカルーセルスライダーをslickで実装する方法
    https://oku-log.com/blog/slick-carousel/
    ※cssとのあわせ技である程度なんとか出来るんだけど、その方法だとちょっと厳しいのかなぁ。。。
  • レスポンシブ対応!万能カルーセルスライダーjQueryプラグイン「slick.js」を研究してみる
    https://ponsyon.com/archives/858
    ※カスタムの日本語解説ありがたい。
  • 【jQuery】slick を使ってスライドショー(横幅いっぱい+前後のスライドを半透明にする)
    https://125naroom.com/web/2823
  • slickを使ったスライドショーのカスタマイズ例3つ。
    https://nxpg.net/blog/tech/?p=8869
    ※Slackは画像の番号が出ないので 1/20 などの枚数表示がかなりありがたい。

JUGEMテーマ:アート・デザイン

| jQuery | 10:40 | comments(0) | ▲to TOP |

Pintarest

▲to TOP