やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

HTML,CSS,javascript

SWELLのlightbox(luminous.js)で画像拡大時にもキャプションを表示させる

大好きなWordPressテーマ、SWELL。 SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ SWELLにはlightbox機能(Luminous Lightbox)が標準搭載されており、別途で画像にリンクを設定していない場合は、画像をクリックすると拡…

WordPressのギャラリーのサムネイルの高さ(アスペクト比)を統一する

WordPressのブロックエディターの「ギャラリー」機能。複数画像を並べるのに便利なんだけど、横長画像と縦長画像が混在した場合、縦長画像の方に高さが統一されるため横長サムネの行と縦長サムネの行が存在してしまったりして、見た目がちょっと微妙だった。…

JavaScriptで現在のページのURLを取得して条件分岐

英語のページ(URLに /en/ が含まれる)全てにおいて、 ヘッダーロゴのリンク先を英語版のHomeに設定したかった。body閉じタグ直前にこちらを… <script> let url = location.href; let pattern = '/en/'; if(url.indexOf(pattern) > -1){ let link = document.getEle…

CSSでhtmlのdir=rtl属性を指定する(アラビア語対応)

そんなことある?って感じなんだけど、サイトの多言語化対応で、英語・アラビア語のサイトを作っている。アラビア語って、右から左に書く言語。なので当然サイトが全部 dir="rtl" になるってワケ。そりゃレイアウト崩れるとこも出てくる。 CSSで崩れたとこ直…

placeholderをjavascriptで書き換える

多言語サイトを作っていて、「検索」を「Search」に変えたかった。 const hoge = document.querySelectorAll('#search input')[0]; hoge.placeholder = "Search"; ほんとうに些細なことなんだけど、1行目末の[0]が必須だった。 これに気づかなくて、 なかな…

印刷用CSSを別ファイルで用意せずに済ませる

別ファイルで用意するの正直めんどくせ〜と思っていたが、 メディアクエリで書けば簡単 1. CSSファイルをmedia="all"で読み込む <link rel="stylesheet" media="all" href="~~~~/style.css"> 2. @media print{ で書いていく /**********印刷用**********/ @media print{ body{ color: #000; background: transparent; }</link>…

単語の途中で改行されなくてレイアウトが崩れる時

単語じゃなくても、クライアント様がブログ本文に入力した装飾 「●○●○●○●○●○●○●○●○●○●○●○●○●○●○」 みたいなやつで崩れたりする。 (そういう装飾を自分では使わないから、予測できなかった)単語の途中でも改行されるようにCSSを書き加えるんだけど、 いつも…

CSSで背景うっすら斜め変則ドット

黒のベタ塗りだとカッコつかないな…という時、うっすら斜めドットにすると良い感じである。 background: #3d3d3d; background-image: radial-gradient(#333 20%, transparent 20%), radial-gradient(#333 35%, transparent 35%); background-repeat: repeat;…

microCMSとJavascriptを利用して簡単なサイトを作る

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。microcms.io APIスキーマ 今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。 フィールドID:textField …

メモ:jQueryあれこれ

html、cssは省略します 全体魔法 window.addEventListener('DOMContentLoaded', function(){ // ここに全部書く }); なんでか $(function(){ }); だとエラーが出やすいので スムーススクロール(スムーズスクロール)? $('a[href^="#"]').click(function(){…

jQueryで、loading

JavaScriptがそもそも苦手すぎて、 どうもVueとかReactをやる気になれない。結局たよりになるのはjQuery、、、 気をつけたところ Scriptは、対象となるDOM要素(#loader-bgなど)の後ろに書かないと、 エラーが出ることがあるっぽい。 追記2 一瞬ちらっと見…

レスポンシブの時にpositionの指定を変えたい

たとえばtop指定→bottom指定に 大画面の時は上部に、スマホは下部に表示したいな〜っていうとき nav { position:fixed; top:16px; left:16px; } @media screen and (max-width: 600px){ nav { bottom:16px; } } ってすると、bottomが効かない。 topが優先さ…

PHPで作ったフォームにGoogle reCAPTCHAを実装する

メールフォームは たしかこれを使った www.php-factory.net reCaptcha 「私はロボットではありません」というやつ reCAPTCHA: Easy on Humans, Hard on BotsGoogleアカウントにログインした状態で上記にアクセスし、 「reCAPTCHA v2」を選択して登録し、API…

instagramのフィードを表示させたい

JSONデータをPHPでごにょごにょして....というのを自作するのは骨が折れるので、プラグインを使うことに。 下準備 ↓を参考に、Instagramの開発者ページからアプリケーション登録を行っておく。 teamnaporitan.com instafeed.js instafeedjs.comheader部分で…

ハンバーガーメニュー

なんだかんだ言っても、ECサイトや企業サイトではなく、個人のページとか、単純な作りのページであればまだまだハンバーガーメニューは有効だと思うのです。「ハンバーガーメニューはクソ」とか言われてた頃に比べて、浸透度も高まってるだろうし。 仕様 右…