【#Web制作メモ】デザインカンプからコーディングをするときの備忘録

完全に自分用ですが‥コーディングするときにサクッとコピーできるよう、よく使う内容の記事をまとめました。

CSS / SCSS

疑似クラスの画像サイズ変更

【CSS】疑似クラス(::before/::after)のアイコン画像サイズを変える方法

よく使うCSSなので備忘録として。 リストのアイコンを画像で置きたいときに便利！ 元サイズが大きすぎるときに画像サイズをCSSで変更できるようにする方法です。 ...

toriton.link

カラーコードで不透明度の指定

【CSS】不透明度をカラーコードで指定する便利な方法

CSSで不透明度80％に指定するとき、opacityプロパティか、HEX(16進数)か、RGBAの3通りがあります。今回は、HEXとRGBを使用した不透明度の指定方法をまとめてみました。

toriton.link

フォントウェイトの指定

Photoshopのフォントウェイトをコーディング用に変換

Photoshopのデザインカンプからコーディングするときに、font-weightの値に迷っちゃうので自分用にメモを残しておこうと思います( ..)φメモメモ

toriton.link

フレックスプロパティ

【CSS】横並びの手法！flex（フレックス）のプロパティ一覧～コピペ用～

とりとん flexboxのプロパティめっちゃある！ 最近HP作成の依頼でかなりflexを多用する機会があったので、備忘録として。 これは要素を横並びにするとても...

toriton.link

JavaScript / jQruery

スムーススクロール

【WordPress】コピペでOK！無料テーマでも目次リンクにぬるぬる動くスクロールを実装できる！

アンカーリンクの遷移先にヌルっとスクロールしているような動きで到着する方法を紹介します。有料テーマにはデフォルトで設定されているものが多いですが、無料テーマでも簡単に実装できるので試してみてください！今回は「Coccon」に追加してみました。

toriton.link

インスタ埋め込み

【PHP/JavaScript】Instagramを自動更新で埋め込む方法～取得方法から画像付きで紹介～

1.インスタの投稿写真(動画の場合はサムネ)の情報を「Instagram Graph API」を使って取得する方法。2.取得した情報をWebページに表示させるためのPHPとJavaScriptそれぞれのコード。こちらの2つを画像付きで紹介していきたいと思います！

toriton.link

ページネーション

動的コンテンツに対応したページネーションjPages.js

ページネーションにもいろいろありますが、jPages.jsは『動的コンテンツに対応したページネーション』です。WordPressの記事一覧など、その都度増えていくコンテンツにも対応しているので、めっちゃ便利！シンプルなデモを作ってみたので、これを元に紹介していこうと思います。

toriton.link

ページネーションのカスタマイズが簡単にできる！jPages.jsのオプション一覧

jPages.jsは、単純にページネーションを作成できるだけではありません。たくさんのオプションが用意されているので、より理想のページネーションを簡単に作成することができます！オプションをいろいろ使ってみて、一覧にしてみました。

toriton.link

WordPress

記事ループとページネーション

【WordPress】記事がなかったときやページネーション付きの記事ループ

WordPressの記述には、記事ループがたくさん出てきます。 よく使う3パターンを備忘録として。 普通に記事ループさせる ごく普通の記事ループです。 カテゴリ...

toriton.link

WordPressから取得→出力

カテゴリーやタグの取得もOK！WordPressの記事一覧を埋め込むコード

とりとん HTMLのサイトとWordPressをうまく併用したいな～ 既存のHPはそのまま運用しつつ、HP内にブログやコラムとしてWordPressを設置したい...

toriton.link

外部のWordPressから取得→出力

【PHP】既存のHPに外部のWordPressの記事を埋め込むコード

とりとん 外部のWordPressも取得できる？ 前回は、ドメイン直下のルートディレクトリにWordPressをインストールした場合の取得・表示方法を紹介しまし...

toriton.link

日本語パッチURL

https://translate.wordpress.org/projects/wp-plugins/【プラグイン名】/

Photoshop / illustrator / XD

パソコンにインストールできない拡張子のフォントを読み込む方法

【Photoshop/illustrator】フォントファイルを追加する方法

「ヒラギノ」をPhotoshopで利用するために、Windowsにインストールせずに、直接Adobeのファイルにフォントファイルを追加する方法です。この方法なら拡張子も気にせずに追加できるので簡単に好みのフォントを使うことができます！

toriton.link