ナコさんのブログ | nako-log WEB制作のヒントと日常の便利を紹介。WEB制作はWordPressをメインにCSSやコーディングのHOWTOをまとめています。

注目キーワード

WEB制作のヒント

3/7ページ
CSS

HTMLとCSSをコピペして100種類以上のホバーエフェクトアニメーションを表示する方法
HTMLとCSSをコピペして100種類以上のホバーエフェクトアニメーションを表示する方法

  • 2019.07.21

「Hover.css」を使ってアニメーション 「Hover.css」 リンク、ボタン、ロゴ、SVG、おすすめ画像などに適用される、CSS3のアニメーション付きホバー効果のコレクションです。自分の要素に簡単に適用したり、変更した…

続きを読む
CSS

【コピペOK】おしゃれなオリジナル囲み枠(ボックス)デザインのCSSサンプル
【コピペOK】おしゃれなオリジナル囲み枠(ボックス)デザインのCSSサンプル

  • 2019.07.14

HTMLとCSSを使ったボックス要素の装飾(囲み枠)を作成しました。 レスポンシブサイトにも対応しております。 配色等自由に変更してカスタマイズしてください！ 基本のHTML コピー <div class="frame_set&quo…

続きを読む
coding

こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル
こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

  • 2019.07.10

ブログをみていると度々登場する会話形式の吹き出しデザイン。 ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追加したらもっと気持ちが伝わりやすい！！！ そんな思…

続きを読む
WordPress

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ
【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示…

  • 2019.07.08

LION MEDIA(ライオンメディア)テーマはデフォルトだと記事詳細内の下部分のみプロフィールが表示されます。 サイドバーにプロフィールを表示する方法はいろいろあるのですが折角LION MEDIA(ライオンメディア)テンプ…

続きを読む
WordPress

WordPress(ワードプレス)　URLを貼るだけでブログカードが表示される「embed」の使い方とレイアウトの変更方法
WordPress(ワードプレス)　URLを貼るだけでブログカードが表示される「embed」の使い方…

  • 2019.07.03

WordPress4.4から標準で、プラグインを使わなくても記事内にURLを貼るだけでコンテンツが埋め込まれ、サムネイルとリンク・引用つきのブログカードが表示される「embed」が実装されました。 ちょー便利なのですがデ…

続きを読む
WordPress

WordPress(ワードプレス)　プラグインなし！１クリックでアイコン付き吹き出しを表示する方法
WordPress(ワードプレス)　プラグインなし！１クリックでアイコン付き吹き出しを表示する方法

  • 2019.06.30

こんにちわ。めんどいことは極力排除したいマン、ナコです。 私はとにかくめんどくさがりなので、楽ちんに楽しい記事がかけるよう日々研究しています。 (ほんとはアタマに浮かんだ言葉全部自動で入力して欲しいよ！…

続きを読む
coding

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

  • 2019.06.27

話題になっているネタを厳選して並べたい 自分のツイートで特定のタイムラインだけ抜粋したい・・・ twitterはつぶやきの埋込APIを提供していますが、タイムライン全て、もしくは１件しか引用できないので自由自在…

続きを読む
デザイン

PhotoshopCCを使って人物画像をレタッチ。30秒で美男美女に変身させる方法
PhotoshopCCを使って人物画像をレタッチ。30秒で美男美女に変身させる方法

  • 2019.06.25

人物画像のレタッチは難しいし不自然になる…そんなイメージがありませんか？ Photoshop CC 2015.5 リリースで導入さたゆがみフィルターには、目、鼻、口などの顔の特徴を自動的に識別し、それらを簡単に調整できる…

続きを読む
CMS

【EC-CUBE3】特定の市内・市外・区・市町村単位で送料を変更するカスタマイズ(複数対応可能)
【EC-CUBE3】特定の市内・市外・区・市町村単位で送料を変更するカスタマイズ(複数対応可能)

  • 2019.06.24

「EC-CUBE（イーシーキューブ）」は、株式会社ロックオンのEC構築パッケージを誰でも無料で利用・改変できる「オープンソース」として公開したものです。ダウンロードは無料。必要な機能は揃っているので、すぐに開…

続きを読む
coding

HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタ…

  • 2019.06.21

会話方式で記事の導入を書きたい！！ 他のブログさんで会話方式やってらっしゃるのを見て、 「やっばいやん、めちゃ読みやすいやん」と感銘を受けたナコです。 自分視点が多くなるブログで、 他人のツッコミ風に使…

続きを読む
WordPress

WordPress(ワードプレス)カスタマイズ！プラグインなしで画像のaltが空の場合に記事タイトルを自動入力する方法
WordPress(ワードプレス)カスタマイズ！プラグインなしで画像のaltが空の場合に記事タイトル…

  • 2019.06.18

WordPressで記事を書く時、画像のalt要素を全て指定するのって面倒だなーと感じた事ありませんか？ ・メディアを追加時に指定する「代替テキスト」はノートPCだと若干隠れてて編集しにくい ・大量に画像がある時、…

続きを読む
coding

webpackをアップデートしたらgulpfile.jsにautoprefixerの設定書いてるとエラー出るようになったのでpackage.jsonへ移動する
webpackをアップデートしたらgulpfile.jsにautoprefixerの設定書いてるとエ…

  • 2019.06.17

webpackを入れ直してコンパイルするとautoprefixerでエラーが出るようになったので解決方法です。 エラー内容 Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.jso…

続きを読む
coding

Gulp v3系からGulp v4系へ移行する時　一番簡単な方法
Gulp v3系からGulp v4系へ移行する時　一番簡単な方法

  • 2019.06.17

Gulp v3系からGulp v4系へ移行するとエラーがでてコンパイルできなくなります。 それはgulpfile.jsの書き方が変わった為です。 エラー内容 例えばこんなエラーが表示されます。 throw new errors.AssertionError({ …

続きを読む
WordPress

WordPressで現在表示しているページのURLを取得する方法
WordPressで現在表示しているページのURLを取得する方法

  • 2019.06.17

こんにちわ！ナコです。 WordPressでサイトを構築していて、 「今表示してるページのURLなんだっけ？」 って時ありませんか？ 本来ならget_the_permalinkで取得できますがうまくいかない… そんな時はfunction.phpに…

続きを読む
WordPress

WordPressに「Font Awesome」を読み込んでWEBアイコンフォントを使おう【CDN編】
WordPressに「Font Awesome」を読み込んでWEBアイコンフォントを使おう【CDN編…

  • 2019.05.22

こんにちわ！ナコです。 ブログを書いていてアイコンを使いたい時、ありませんか？ 今回は1行追加するだけで沢山のアイコンをブログに表示できる 「Font Awesome」のCDNでの導入方法と使い方を紹介します！ 「Font …

続きを読む
WordPress

WordPress内のwhile文を使ったループ内で一覧の最初と最後だけ特定の要素を表示する方法
WordPress内のwhile文を使ったループ内で一覧の最初と最後だけ特定の要素を表示する方法

  • 2019.05.14

WordPressでサイトを作っているとループの最初と最後だけ特定のタグを追加したいという時がやってきます。 リストは</p> <li>タグでループしたらOKだけど <ul>タグは１回でいいなぁ〜 なんて時は…

続きを読む
WordPress

WordPressで特定のカテゴリーだけ除外する方法４つを紹介するよ
WordPressで特定のカテゴリーだけ除外する方法４つを紹介するよ

  • 2019.04.24

こんにちわ！ナコです。 WordPressで条件分岐をしていて、特定のカテゴリーだけ表示、特定のカテゴリーとそれ以外で表示は調べるとすぐ出てくるのですが、 特定のカテゴリーだけ除外する方法はなかなか見つけにくい…

続きを読む
CSS

【コピペOK】CSSだけで要素をくるくる回転させるアニメーションを実装するサンプル
【コピペOK】CSSだけで要素をくるくる回転させるアニメーションを実装するサンプル

  • 2019.04.17

CSSだけで要素が回転するアニメーションを作成してみましょう！ コピペするだけで動く縦・横・全体の回転方法を紹介します。 CSSでは@keyframesでアニメーションのタイムラインを指定出来ます。 ここにいろいろ書く…

続きを読む
coding

Vagrantでローカル環境構築時「default: Warning: Authentication failure. Retrying…」エラーが出る時の対処法
Vagrantでローカル環境構築時「default: Warning: Authentication…

  • 2019.04.09

Vagrantでローカル環境構築時default: Warning: Authentication failure. Retrying...エラーがでまくって困ったので対処法メモです。 環境 MacOS High Sierra Vagrant 2.2.4 エラー内容 Bringing machine ‘de…

続きを読む
1 … 3 … 7