実現したいこと 実現したい事は以下の通り。 特定の範囲や部位を対象に、pタグを消す 本来は「WordPressの自動整形で挿入されたpタグ」だけに限定したかったのですが、その仕組みが作れず、範囲内の全てのpタグを消すという方法に切り替えた次第です。 コード 以下コードです。 //ショートコードで囲んだ範囲のpタグを消す add_shortcode('nop','nop_func'); function nop_func($atts, $content = null) { $content = str_replace( '<p>' , '' , $content ); $content = str_replace( '</p>' , '' , $content ); return $content; } 使う場合は、該当箇所を以下のようにショートコードで囲みます。 ［nop］ ｐタグが入って

「Contact Form 7」でフォームを設置していないページではJavaScriptとCSSを削除し、必要なページだけ読み込むようにして、Page Speed Insightsの点数アップをするカスタマイズ方法について紹介します。 Contact Form 7のJavaScript,CSSを停止する お問い合わせフォーム設置プラグインとして有名な「Contact Form 7」。 このプラグインを追加すると、フォームの動作に必要なJavaScriptやCSSが読み込まれるのですが、このCSSがPage Speed Insightsで指摘されます。 Page Speed Insightsで指摘があったのはCSSだけなのですが、JavaScriptも必要ないページでは読み込まないほうが表示高速化が図れるので合わせて停止していきます！ Contact Form 7のJavaScript,CS

WordPressのプラグインの中でも結構な割合でお世話になっている「SNS Count Cache」。 感謝しきりのこのプラグインですが、長い間気になっていることがひとつ。それは、Facebookでのいいね！やシャア数のカウントができなくなっていること。 Google+が仕様上カウントできなくなったことは僕にとってそう大きなことではなかったのですが、Facebookとなるとできればカウントしたいところ。 自分で直接取得しようか考えたのですが、SNS Count Cacheの良い点「http・httpsの両方のカウント合算」や「キャッシュ」を考えるとSNS Count Cacheでできれば完結したい気持ちがあり、プラグインの更新を待つことにしてここまで放置してきました。 しかし、SNS Count Cacheはもう8ヶ月ほど更新がない状態。 そろそろ何か対処しなくてはと思い、プラグイン自体

画像の読み込みを現在写っている範囲内(スクロールせずに見えている範囲)だけにして、無駄な読み込みを抑え表示速度をあげられるプラグインです。 ↓ 画像を多用するサイトには必須機能で、「プラグインなしで実装する方法」や「他のプラグイン」もありますが、このプラグインの設定が一番簡単だったのでオススメします。 この「画像の遅延読み込み機能」は、読者側は見たい範囲だけ見れるので、無駄な読み込みが減るぶん表示速度が上がります。 そして、運営者側もページを開くたびに全画像をサーバーに読み込ませることがなくなるので、データ容量が大幅に減ります。 「読者」にも「運営者」にも嬉しい一石二鳥のプラグインなんですね。

自分のウェブサイトの見た目を一定させるためにウェブフォントを使いたいということはある筈。 ただ、日本語のフォントはファイルサイズが大きいこともあって転送量や表示に時間がかかるなど困ることも。 以前にウェブフォントのサブセット化をやったことがあるが、それだと転送量の面しか良さがない。 これまでもGoogleが配布しているNoto Sans系のフォントを愛用していたのだが、サブセット版のフォントファイルを自分のウェブサイトに置くものどうかなという考えに変わったので変更することにした。

ferret編集部：2015年5月13日に公開された記事を再編集しています。 近年、カメラ人気が高まりプロでなくとも写真を撮る方が増えています。 ビジネスの現場でも、素人ながら出来るだけいい写真を撮りたい、商品をもっと綺麗に見せたいという理由で、本格的な一眼レフを使って自社で写真を用意している会社も少なくありません。 しかし、どんなにいいカメラと機材を揃えて撮影しても仕上がりに納得いかないことだってあります。 特に屋内や人物を被写体とした撮影では、色かぶりや明るさ、人物の肌の荒れが気になるのはごく一般的なことです。 そこで覚えたいのが画像レタッチ（修正）のテクニックです。 画像修正ソフトであるphotoshopはとにかくあらゆる使い方が出来るので、全てを覚えるのは困難です。使いたい技術だけをチュートリアルに沿って実行すれば誰でも簡単に写真補正を行うことができます。 ここでは、使用頻度の高い

写真加工や修正は、Photoshopのデザイン制作において重要なテクニック。 しかし、用途に応じてツールを使い分け、エフェクトを効果的に適用しているというひとは、どれだけいるでしょう。 せっかく撮影した写真がぼやけてしまったり、光量が足りないなんてことも。 また、しみなどお肌のトラブルを隠したかったり、朝日や夕日をドラマチックに仕上げたかったりと、特別なテクニックが必要なものばかり。 今回は、Photoshopですぐにできる写真加工テクニックを、各サンプルと一緒にまとめてご紹介します。 これらの方法を実践することで、どんなデザインでも手軽に、そしてスピーディーに写真加工できるようになります。 コンテンツ目次 コントラストで写真の仕上がりをアップ ぼやけた写真をくっきりシャープに 朝日や夕日をダイナミックに仕上げる にきびやしみなどお肌のトラブルを修正する 着ている洋服の色を変更する トレン

2012年2月13日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください！ 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、４倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね！ 1. ぼかし 画像を開いて、そのレイヤーを複製します（コマンド＋J）。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし（詳細）で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを複製し、「blur」レイヤーの上に置きま

写真を鉛筆画のように加工したい場合photoshopにはさまざまな方法があります。風景などの写真であればフィルター機能の輪郭検出だけでそれなりには見えますが、人物写真ではとても鉛筆画には見えません。 ここでは鉛筆画のディティールにこだわる人のためのチュートリアルをお伝えします、初めは少し時間がかかるかもしれませんが慣れれば5分程度です。 この鉛筆画のスキルをつけることで水彩画風や油絵風などの加工をする際にとても役立ち、応用範囲がめちゃめちゃ広がるのでしっかりとマスターしちゃいましょう。 鉛筆画のような輪郭を描くチュートリアル人物写真を開きます。（今回は2800×2500pixelの大きめの画像を使用） 背景を複製して彩度を落とし、さらに複製。（モノクロレイヤーが2枚） 最前面のモノクロレイヤーの描画モードを除算に変更（この時点で真っ白になるかも）、フィルターでぼかし（ガウス）をかけると輪郭

Facebookのブランドカラーが青色なのは、マーク・ザッカーバーグが色盲だったから、という話を知っているでしょうか。 「青は私にとって、もっともリッチな色で、すべての色合いを識別することができる。」とザッカーバーグ氏は述べています。配色を決める作業は、まったく科学的には見えないかもしれませんが、配色に関してたくさんの研究やアイデアが用いられています。 商品に対する評価の90%以上は、色によって判断されていると Buffer では紹介されている通り、どんなデザインにおいても、いかに配色をじっくり検討するべきか分かります。特にウェブサイトでは、ユーザーが配色を気に入らなかった場合、あまり長くはサイトに滞在してくれないでしょう。 ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。コピー＆ペーストで利用できる、カラ

こんにちは、ほわいとです。 今回は、簡単に記事中にアドセンスを自動で設置する方法の一つ、 見出しタグ（h2やh3）の直前にアドセンスを設置する方法を説明していきます。 下の図のようなイメージですね。 さらに、PCとスマホで別々のアドセンスを表示させる方法や、 最初と最後のhタグだけではなく、任意のhタグ（2番目と3番目のhタグなど）に アドセンスを設置する方法も説明していきます。 1:このテクニックの有用性 まず、このテクニックの有用性について説明します。 このテクニックを使えば、僕が推奨する下図のアドセンス配置の、 ポイント①とポイント②を同時に実装することが出来ます。 記事中に手動で設置する方法については以前説明しましたが、 今回は全記事に自動的に適応されるので、こっちの方が楽です。 ちなみにこれが記事内に手動でアドセンスを設置する方法です。 ➡WordPress記事中にスマホのみアド

The WordPress Pressは、どこよりもわかりやすくWordPressの使い方について解説しています。基礎から応用まで、WordPressのことなら何でも載っているサイトを目指しています。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="dist/css/swiper.css"> <title>Title</title> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"><

メンテ不要！ECサイトにカレンダーを埋め込むたった3つのステップ 2016.06.10 2017.02.27 おすすめ メンテ不要のカレンダー埋込方法 こんにちは、サポート部の市川です。 ページのサイドやフッターのエリアにカレンダーを設置している通販サイトはたくさんあります。しかしHTMLとCSSのみで作成している場合、毎月のカレンダーのHTMLを変更するなどメンテナンスがやや面倒です。 今回は、Webサイト制作のSYNCK GRAPHICAさんが無料で公開している【営業日・定休日カレンダー】のJavascriptコードをカスタマイズさせていただき、通販サイトに表示するカレンダーとして埋め込む方法をご紹介します。 定休日・臨時休みを予め登録できるカレンダー 今回、ご紹介するカレンダーは以下の特長があります。 毎週の定休日・祝日休みを設定できる Javascriptコードに一度記述をすれば毎

ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

シンプルなカレンダープラグイン「WP Simple Booking Calendar」をカスタマイズ【WordPress】 こんにちは。時間は必ず守る男、ナカノマサミツです。うっかり寝坊の遅刻などしたことがありません。 さて、現在制作している案件で、お店の休業日を知らせるカレンダーをサイドバーに入れてほしいと要望がありました。 wordpressを組み込んでいるので「まあ、カレンダーのプラグインなんて腐るほどあるだろうｗｗｗ」とたかをくくっていましたが、なかなかお眼鏡にかなうものがない！ カスタマイズができるものは高機能すぎて宝の持ち腐れ感半端ないし、シンプルな奴はシンプルなやつでカスタマイズがめんどくさい・・・ がしかし、うだうだ言ってても仕方ないので、お客様にとっても使いやすいであろうシンプルな「WP Simple Booking Calendar」をチョイス。 ただこのプラグイン、横

こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。