WordPressでブログを始めたいという人には無縁かと思いますが、Web制作のWordPress案件には大きく分けて2種類あります。 有料テーマを使った制作では『Snow Monkey』や『SWELL』といった有料テーマを使い制作します。 クラウドソーシングや、そこまでデザインにこだわりがないサイトで使われることが多い印象です。 そしてオリジナルテーマ制作では、コーディングしたHTMLやCSSを元にテーマを自作していきます。 オリジナルテーマ制作は特に制作会社からの案件に多く、私の場合WordPress案件はほぼオリジナルテーマ制作です。 もちろん有料テーマを使ったコードをあまり書かなくても済む『ノーコード、ローコード』と呼ばれる制作もあり、それだけでも十分稼いでいる人もいます。 ただし、オリジナルテーマ制作が出来ないと制作会社とのお仕事は難しいと思います。 そこで今回はHTMLやCSS

ヘッダーとはサイトの一番上に表示されるサイト名やメニューのこと 自分のサイト名が書いてあるヘッダーを出しておくことで、サイト名が認知されやすくなります。 ただ、ヘッダーを固定してしまうとスマホで表示する場合はヘッダーがスマホの上の方を占有してしまうので読者の利便性を損ねてしまう可能性が高いことも確かです。 なので、スマホで表示した時に下にスクロールしたときにはヘッダーを自動で隠すようにして、上に戻るスクロールをしたときにまた自動的にヘッダーを表示するようにするのが最適解なのではないかと思います。 この記事では WordPressのテーマファイル内の3つのファイルを編集して、スクロールに合わせてヘッダーを自動表示する方法を紹介します。 こんな感じになります。 functions.php という重要なファイルを編集するため、間違えると一瞬ブログの表示が真っ白になりますのでご注意ください。(編集

addEventListenerでイベントをバインドする時にハマった事があるので書いておきます。 ハマった内容 とりあえずコードを見て下さい。 var btn = document.querySelector('.jscBtn'); // clickFunction に引数を渡したい btn.addEventListener('click', clickFunction, false); function clickFunction(value){ console.log(value): } clickFunction関数でvalueを使うため、addEventListener時に引数として渡そうとしていますが、上手くいっていないパターンです。 大体うまくいってる例 以下のようにしたら、うまく行きそうな気がしますね。 var btn = document.querySelector('.j

[foo="bar"] { color: red; } /* foo属性の値がbarの要素 */ [foo^="bar"] { color: red; } /* foo属性の値がbarで始まっている要素 */ [foo$="bar"] { color: red; } /* foo属性の値がbarで終わっている要素 */ [foo*="bar"] { color: red; } /* foo属性の値がbarを含む要素 */ A[foo="bar"] { color: red; } /* foo属性の値がbarのA要素 */

こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 モーダルウィンドウ（ポップアップウィンドウ）の実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装するケースもあります。 その度に一からコーディングするのも少し手間なので自分用も兼ねてプレーンなモーダルウィンドウのサンプルコードを残しておきます。 プレーンなモーダルウィンドウサンプル モーダルにも色々な仕様があるので実際は仕様に合わせたカスタマイズが必要になると思いますが、本当にプレーンなもので良ければ↓のコードそのままでもいいかと。 必要に応じて各指定を要カスタマイズです。 最低限ですが、領域外クリックでモーダルを閉じる機能のみ付けています。 See the Pen pure modal by mycreatesite (@mycreatesite) on CodePen. ↑をカスタマイズしたものが

こんにちは、マスダです。ここ1ヶ月くらい1日中CSSを書いているのでそろそろCSS見習いからCSS駆け出しくらいにはレベルアップしたと思っています。 なんてことはさておき、最近知ったCSSの書き方です。 レスポンシブデザインにしたいけれど、ウィンドウサイズを変えた時に横幅が変わるだけじゃなくて、縦横比を維持したままレスポンシブにしたいな。と思ったことはないでしょうか。例えば、いろんなサイズの写真を同じ縦横比にトリミングしてレスポンシブに対応したいとか。 それ、CSSでできます！ CSSだけでボックスの縦横比を固定する方法を順をおって説明したいと思います。 1、まずは縦横比を維持したまま小さくなるboxを作る<div class="box"></div>.box { width: 100%; padding-top: 75%; background-color: red; // 見えるように

object-fitを使う 最初は、object-fitプロパティを紹介します。 object-fitは、要素のサイズを指定することで、サイズに合わせてトリミングすることができるプロパティです。 以下のように記述します。 img { width: 250px; height: 250px; object-fit: cover; } このコードでは、縦横比を維持したまま、ボックスの中が画像で埋まるようにリサイズされます。 横幅と高さのうち、小さい方のサイズが、指定した250pxに合わせられます。 はみ出した部分はトリミングされ、表示されません。 object-fitで使用できる値は、他にもあります。それぞれ解説していきましょう。 fill（初期値） fillは、ボックス内を満たすように画像の縦横がリサイズされます。 何も指定していない場合は、この初期値と同じ挙動になります。 cover 上記

Notion製ブログ公開時、Super.soで生成されたsitemap.xmlをSearch Consoleに提出しようとしたところ、「取得できませんでした」というエラー。

本来はHTMLを使わなくてもサイトを更新できますが、HTMLで書かれたWordPressサイトを少しだけ直さないといけない場合の方法を紹介します。 今はHTMLで直に書かなくてもサイト作れますよ その前に、こんなものかと諦めず、初心者の方が運営するのにWordPressサイトでHTMLで書かれているサイトは古いので、これが普通と思わないでくださいね、 社内にWEB担当がいる、専門知識がある方が在籍している、もしくは一部分だけどうしてもHTMLで書かないとできないといった場合を除いて、今はそのような専門知識がなくてもホームページを運営できるようになっています。 WordPressセミナーを約8年していて、ホームページ制作会社さんから納品されたので 自社でサイトを更新したい、とセミナーに参加される方が一定数いらっしゃいます。 しかし、実際にサイトを見させていただくと、WordPressのサイト

今回は「width、height」の説明です。 「width、height」は、「学び始め３難」の１つです。 「学び始め３難」とは、以下の３つです。 １：ボックスモデル ２：「box-sizing」 ３：widthとheight この「width、height」は、とても難しいので、気合を入れて頑張りましょう。 width、heightとは「幅」「高さ」を決めるプロパティです。 width ＝ 幅 height ＝高さ width、heightの値は「数値」「パーセント」「auto」などができます。 ＜数値＞ width: 300px; height: 500px; ＜パーセント＞ width: 50%; height: 100%; ＜auto＞ width: auto; height: auto; それでは、詳しく見て行きましょう。

SFC CSS 機能 ​スコープ付き CSS ​<style> タグに scoped 属性が指定されている場合、その CSS は現在のコンポーネントの要素のみに適用されます。これは、Shadow DOM に見られるスタイルのカプセル化に似ています。これはいくつかの注意点がありますが、ポリフィルは必要ありません。これは、PostCSS を使って変換することで実現されます。次のコードは: vue<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>

【CSS】animation・keyframesを徹底解説 公開日:2019/01/20 /最終更新日:2019/07/05 CSS Technique 今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで「animation」、「keyframes」が使われておりました。 そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。

現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。 弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期テーマには、トップページのスライダーに動画を含めることが要件としてあるため、今回はそんな人気のスライドショーモジュール「slick.js」を利用して、画像だけでなくYouTube、Vimeo、さらにHTML5のvideo要素の動画もスライドとして含める方法を、次期リリース予定のテーマ向けに考えてみました。 今回のデモで動画スライドを含めたスライドショーを実装する要件は以下です。 スライドに動画を含める要件 動画は、YouTube、Vimeo、video要素のムービーを含めることができる 動画スライドが表示された際は、自動再生させる 動画スライドが非アクティブになった際は、一

プラグイン不要のjQueryとCSSを使った簡単なモーダルウィンドウの実装方法をご紹介します。 まずはサンプルをご覧ください。 モーダルのサンプル See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. 上記2つのサンプルはHTMLの文章量が異なるだけで、CSSとjQueryは同じコードを使っています。 特徴としては、文章量が少ない場合は、ブラウザ中央に表示され、文章量が多い場合はモーダルをスクロールして閲覧することができます。 HTML <!-- モーダルを開くボタン --> <div class="modal-open">モーダルを開く</div> <!-- モーダ

[HTML] <div> <ul> <li><a href="https://sunsukeblog.com/tag/html">HTML</a></li> <li><a href="https://sunsukeblog.com/tag/css">CSS</a></li> <li><a href="https://sunsukeblog.com/tag/wordpress">Wordpress</a></li> </ul> </div> [CSS] div { text-align:center; margin:10px; } ul li { list-style-type:none; display:inline-block; font-size:80% } ul li a{ display:block; height:auto; min-width:100px; max-width:

See the Pen 9-6-2　ページを開くと、背景が暗くなり動画を表示 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み Modaal というモーダルウィンドウを表示するライブラリを使い、ページにアクセスしたら初回だけ背景が暗くなり動画を表示。 ［使用するライブラリ］ ＊ jQuery ＊ Modaal（http://humaan.com/modaal/） HTMLの書き方 head終了タグ直前にModaalのCSSと自作のCSSを2つ読み込みます。 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.mi

<button id="modalOpen">モーダルを開く</button> <div class="modal-bg"> <div class="modal"> <div class="modal-content"> <p>モーダルの内容</p> <a class="modalClose">モーダルを閉じる</a> <div class="close-btn"> <div> <span></span> <span></span> </div> </div> </div> </div> </div> button{ width: 300px; height: 50px; line-height: 50px; background-color: #2675BC; color: #fff; border: transparent; transition: .5s; cursor: point

サムネイルのスライドをクリックすると連動してメインのスライドが切り替わるタイプのスライダーを見たことはありませんか？ 今回はslickを使ったサムネイル付きのスライダーをコードとデモを使っていくつかご紹介していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

【jQuery】slickの使い方とよく使うサンプル集 公開日 : 2022.07.04 最終更新日 : 2023.11.07 コーディング スライダーのプラグインは数多くありますが、その中でもよく使われる「slick」について、使い方とよく使う実装方法についてご紹介します。 今回紹介するサンプルを組み合わせることで様々なカスタマイズにも対応できるかと思いますので、是非参考にしてみてください！ slickの導入方法slickを使うためには、以下2つの方法があります。 ファイルをダウンロードして読み込む方法CDNを使って読み込む方法なお、slickを利用するためはjQuery本体の読み込みも必要になるので、忘れずに！ slickファイルをダウンロードして使う場合公式サイトにアクセスし「get it now」をクリックします。 「Download Now」をクリックすると、skickのファイル