marblog

やりたいこと ブログテーマ「swell」を使用して、カスタム投稿タイプのサイドバーに月別アーカイブの表示をしたい。 使用したプラグインカスタム投稿タイプ「Custom Post Type UI」パーマリンク「Custom Post Type Permalinks」ウィジェット「Custom Post ...

最近よく使わせてもらっていたり、使いやすそうなフリー素材のイラストサイトをまとめました。 いい感じのデザインにしたい時に重宝してます。 【unDraw】 海外の方がされているフリーのイラストサイトです。 メインカラーを変えられるのでかなり便利です...

こんにちは。イラレ（illustrator）をがっつり使い始めて３年目のMarです。 職場でillustratorをほぼ使えない状態でチラシや名刺作成の担当になり、試行錯誤しつつ現在はなんとかイラレを使いこなせています。 作業効率を上げる為にはショートカットキーを...

webページ作成時によく使うリンクボタンのコードを紹介します。 HTMLとCSSだけで作るシンプルなボタンです。 ボタンのデザインは結局シンプルなものを使うことが多いので4種類にしぼりました。 コピペしたり必要に応じて修正して使っていただければと思い...

上記のようにカバー写真の上に文字を入れて、レスポンシブにも対応できる方法を紹介します。 【コード】 cssに画像パスを使って表示させる方法です。 私が実際に作成した際のコードです。 HTML <div class="main"> <h1>Hello World&...

拡張機能を使わずに全画面のスクリーンショットをダウンロードする方法です。 【Google Chromeを使って全画面を保存する方法】 Windows 1. 右クリックして検証　あるいは　Ctrl + Shift + i 2. Ctrl + Shift + P 3. 『 full 』 と入力 → Enter Mac 1. 右ク...

今回はline-heightの数値をXDから取っていく方法です。 丸で囲んだところを「行送り」といいます。 XDの行送りの数値はピクセルですがline-heightの数値は単位をつけないのが望ましいので、下の数式に当てはめて出た数値を使います。 行送り ÷ フォントサ...

AdobeXDって便利ですよね。まだ使い始めて間もないですが、webデザインをするのにサクッと作れて使いやすいのでかな〜り重宝してます。 しかし、デザインを作ってコーディングを始めると、この数値はどうしたらいいんだ？ということが起こります。 私はデ...

webページ制作時に、webフォントの文字がブラウザによって文字がかすれたりにじむという現象に遭遇したことはないでしょうか？ macのChromeで見たら問題なかったのに、WindowsのChromeやEdgeで見るとなぜか文字がにじむ現象が起きた！ ↓こんな感じで文字が...

webページを作成したときによく使うhoverの記述です。 hoverの設定をするとカーソルをボタンの上に移動したときに動きを出すことができます。 <a href="#" class="btn">よくあるボタン</a> .btn{ transition: all 0.2s ea...