css

webpack5でJSとSassをコンパイル(CSSを別ファイルに出力)

webpack5を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。 この記事では、以下の項目をコンパイル条件としています。 JavaScriptとCSSを別々のファイルで出力する。 出力先のCSSに自動でベンダープレフィックスを追加する。 production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。 development(開発環境用に)出力する場合 […]

npmでBootstrapをインストールしてWebpackでコンパイルする方法(同時にjQueryも)

ホームページを作る時、BootstrapとJQueryを使う機会が多いんですが、今までは、それぞれのCDNから読み込んで使っていました。 今回は、npmを使ってプロジェクトに直接インストールしてみます。Bootstrapは、JQueryに依存しているので、JQueryも一緒にインストールします。 全体的な流れとしては、 ・node.js(npm)のインストール ・webpackの導入 ・Boots […]

Laravel Mixを使ってjavascriptをコンパイルする

Laravelでjavascriptを使う場合、public / jsフォルダ内に置いて、Bladeファイルで読み込めば動きますが、今回は、Laravel Mixを使って複数のjavascriptファイルをまとめてコンパイルしたものを読み込んでみたいと思います。 前提 以下がインストールされている。 ・Laravel Mix ・node.js ・npm jsファイルの書き方 jsファイル単体でもコ […]

【WordPress】LION BLOGのカラム幅の割合を変更する方法

LION BLOGのページ幅を変更する記事「【WordPress】LION BLOGのページ幅を変更する方法」を書きましたが、2カラムの場合の記事とサイドバーの幅のバランスも変更したくてやってみました。 こちらもページ幅の変更と同じで、「追加CSS」に下記のように書き込むだけで可能です。今の所不具合ありませんが、これで正解なのかなぁ? [crayon-6176bcd6c64d5189069900/ […]

【WordPress】LION BLOGのページ幅を変更する方法

LION BLOGの全体のページ幅を変更したくなって、検索したんですが出てこなかったので、自力でやってみました。 といっても簡単な方法で、「追加CSS」に以下のように書くだけ。 この方法で合ってるのかわかりませんが、一応今の所問題なさそうなので、ご紹介。 [crayon-6176bcd6c650d296627327/] ヘッダー部分とフッター部分は、containerというクラス、真ん中の部分(投 […]

LION BLOG のアイキャッチ画像のマウスオーバー時のズームを無効にする方法

アイキャッチにカーソルをもっていったときに画像が拡大・縮小する効果がデフォルトで付いていますが、私はあまり好きじゃないのでこれを無効にします。 変更方法 追加CSSに下記の文字を追加するだけで無効にすることができます! [crayon-6176bcd6c6594112165547/] ちなみにデフォルトの数値はtransform: scale(1.2)です

リスト < li > タグの横並び時の隙間をなくす方法

リストタグはメニューなどでよく使いますが、リストをdisplay:inline-blockを使って横並びにするとリストとリストの間に隙間ができてしまいます。それを簡単な方法で解決します。 解決方法 CSS(スタイルシート)で、親のulにfont-size: 0を入れる。 [crayon-6176bcd6c65d8050362321/] 他にもいくつか方法があるようですが、私はこの方法を使っています […]