みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

Tips

コード横にコピーボタンを設置する方法【コピペでOK!】

最終更新:2021年11月12日 こんにちは。久しぶりにJavaScriptの記事です。 長ったらしいコードを手でコピーするのはなかなか大変だと思って、ずっと実装したかったコピーボタンの設置をしました。 コピペで是非どうぞ!

Tumblrイラストフォリオ4カスタマイズ【無限スクロール・サムネ表示・LightBox適応方法】

この度知り合いのイラストレーターがTumblrでポートフォリオサイトを作ったので、JavaScriptの勉強がてら、何か追加でほしい機能がないか聞いたところ、 無限スクロールを導入したい(イラストフォリオ3にはあるが、4にはない) 無限スクロールで表示された…

追従するグローバルメニュー【CSSのみ】

グローバルメニューっていうのは、当ブログにあるようなこれ↓ グローバルメニュー とか、これ↓ グローバルメニュー2 グローバルメニュー3 のようなメニューのこと。 Check! ハンバーガーメニューの作り方はこちら micche-labo.hatenablog.com こんな感じの…

PHPの勉強がてらWordPress-その2テーマ制作

こんにちは。 前回、WordPressのローカル環境を整え、基本的なWordPressの設定まで行いました。 前回の記事 micche-labo.hatenablog.com その後、試行錯誤しながらなんとかWordPressのテーマ(めーーっちゃ簡単版)を制作して、とりあえず形になったので記録…

PHPの勉強がてらWordPress-その1構築

JavaScriptのお勉強もだいぶ進み、MDNのサイトではデータベースのところまできました。 ブログ記事にはまだ繰り返し文までしかまとめられてませんorz 前回のjavascriptブログ記事 micche-labo.hatenablog.com XMLHttpRequest、Fetch APIにWeb Storage API 、…

はてなブログでコードブロックを横スクロールできるようにする

コードを書いた切っ掛け デフォルトのコードブロック 横スクロールするための追加コード 完成形 さいごに コードを書いた切っ掛け はてなブログはコードブロックが改行されるようになっていて、コードが変なところで改行されて見辛く、間違えそうだと思い、…

メニュー横並びのいろいろ【float、table、flex】

横並びの方法はいろいろありますが、わたしはいつもdisplay:flex;を使用しています。 まあ手軽だし使い慣れてきたし…と思ってたんですが、そろそろ他のやり方も研究しようと思って、floatとtableパターンを作ってみました。

プログラミング初心者がChromeをおすすめする理由【デベロッパーツール・拡張機能】

こんにちは。 今回は、独学でHTML、CSS(SCSS)、そして今現在JavaScriptを勉強中の主婦が、愛用中のブラウザ・Chromeについての記事になります。 Chromeってなに? Chromeだとなにが便利? デベロッパーツールの使用方法 おすすめ拡張機能の紹介 などをご紹…

JavaScriptの勉強-変数テスト編【MDN Web Docsのスキルテスト使用】

今回はJavaScriptの練習でお世話になっているMDN Web Docsのサイトでテストができるので、使い方を記事にまとめてみました。 英語のページですが翻訳すると微妙に日本語の順序がおかしくて理解しづらい…と感じたので、同じようにJavaScriptの勉強をしていて…