カテゴリー別アーカイブ: html

wordpressでカスタム投稿タイプとカスタムタクソノミーのスラッグが異なるのは解せぬ

表題の通りCPT UIなどでカスタム投稿を作って、カテゴリを(タクソノミー)を設定して、投稿をするとそれぞれのURLが気持ち悪い。

カテゴリ(タクソノミー)一覧が気持ち悪い。

なぜおまえだけカスタム投稿で設定したスラッグじゃなく、自分のスラッグを利用するのか。考えれば間違ってはいないんだがユーザー目線だとそこだけずれるっていうのはおかしいだろうと。

どうしようもないんだろうなと思っていたけど、最高なサイトを発見しました。
https://wordpress-cafe.com/wordpress/custom_taxonomy_permalink/

これのCですね。
ずっとやりたかった。

ありがとうございました。

iphoneなどのスマホで動画をinline再生させる方法

普通だとYoutubeとかはモーダルぽく、もしくはアプリに飛んでしまうもよう。
パラメータとして

playsinline="1"

を設定すればよいらしい。
Youtube APIならば

playerVars: {
    controls: 0,
    showinfo: 0,
    playsinline :1
},

こんなかんじ、
ロゴやら関連動画を消したいけどそれはもうできない。

ちなみにインライン再生って思いつくまで、コンテンツ内再生、youtube モーダルさせない、WEB内再生
とかあほくさい言葉でググってしまった。
ググリワード力って大切。。。

結局使うことになるImagemap

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

iphoneでtwitter widegetのiframeが横にはみ出るバグの修正

twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが

<a class="twitter-timeline" data-width="100%" 

 

 

のくだり。

幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。

jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。

iPhone7でTwitterのウィジェット(iframe)がはみ出す【解決】

簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。

でかいけつしました。

このアイデアを思いつくのが素晴らしいです。ありがとうございました。

animation GIFをJSで動的に読み込む 一度消して再度読み込むと最終形で表示されてしまう

サーバー側の仕様のようで、キャッシュ?がのこってしまうため一度 empty()で空にして、再度動的に追加しても最後のフレームになってしまう。
それをさけるために読み込むときに***.gif?=日付 という感じでタイムスタンプを入れればいける。

テストサーバーでサイト構築、問題なしからのwordpressに入れたら変に崩れるときがある。CSSが無視される?

すごくレアなケースぽいけど備忘録。

おそらくWordpressを何度も制作していると自分のテンプレ的なものが出来上がっていると思う。

今回も何も気にせずにそのような作り方をして必要な場所を書き換え~~~

本番にアップ!だがちょっとだけ崩れる。
Flexboxの指定が無視されている。
上下センター合わせにして、って言ってるのにそこだけ無視されている。

CSSを見比べても問題なし。

type=text/cssとか入れても変化なし。

最終的にわかったのが

<!DOCTYPE html>
<html lang="ja">

ココをちゃんと記載せずに

<html>

で書いてしまったことが原因でした。

emmetを今さら感たっぷりだけど少しずつ使いこなしたい 連番だったり数字途中からの連番だったり。

 

 

連番おしゃれ
要素のattrは[]で挟むこのときクォーテーション等は使わないので注意
連番にしたいときはその箇所を桁数だけ$にする

(li>a>p{Item Info Title}+img[src=img_item$$.jpg])*8

数値の開始番号を途中からにしたいときは
$の後ろに@をつけて開始したい数値を入れる
$$@8

sublime text3をインストールしてみたけど、htmlのヘッダとかどうするんだろうって思っていた

どうするんだろうっておもっていたけどEmmetで勝手に書き出してくれるんですね。。。すごい。。。

やり方はすごい簡単で「!」を書いていつものEmmetのショートカットを押すだけ。

自分だとCtrl+E

どんどんDreamweaverから決別できている。
今のところドリのほうが凄い使いやすけど。

slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる

スライドショーの定番Slick.js、とてもよく活用させていただいている。

普通に使用する中では問題にならないが、場合によりslick部分のコンテンツを初期状態で非表示にしておいて、何かしらのアクションで表示させる場合、幅の取得が上手くいかないのか1枚目の画像(コンテンツ)が上手く表示されない。

ということは、表示のタイミングでSlickをリロードさせればよいっぽいのだけど余り検索しても見つからず。

公式サイトのこれか?っていう部分をはめ込んでみたらうまく動いた。
あっているのかは分からない。

$('.your-element').slick('setPosition');

と思いきやしっかりと答えを教えてくれている方がいらっしゃいました。
http://www.codelab.jp/blog/?p=852
と思ったら今回自分のサイトでは不具合発生。スライドの複製がものすごい量作成されてしまった。ので参考サイトをちょっと改造して

var slick = $(‘#slider’).slick({初期化パラメータ});

ここは同じ
なにかしらのボタンをクリックしたら・・・

slick.slick('setPosition');

これで動いた。