WordPressで特定の部分だけ自動整形のPタグを消す
実現したいこと 実現したい事は以下の通り。 特定の範囲や部位を対象に、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］ ｐタグが入って
【WordPress】Contact Form 7のJavaScriptとCSSを削除、必要なページのみ読み込む方法
「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
BJ Lazy Loadの使い方と設定【画像遅延プラグイン】
画像の読み込みを現在写っている範囲内(スクロールせずに見えている範囲)だけにして、無駄な読み込みを抑え表示速度をあげられるプラグインです。 ↓ 画像を多用するサイトには必須機能で、「プラグインなしで実装する方法」や「他のプラグイン」もありますが、このプラグインの設定が一番簡単だったのでオススメします。 この「画像の遅延読み込み機能」は、読者側は見たい範囲だけ見れるので、無駄な読み込みが減るぶん表示速度が上がります。 そして、運営者側もページを開くたびに全画像をサーバーに読み込ませることがなくなるので、データ容量が大幅に減ります。 「読者」にも「運営者」にも嬉しい一石二鳥のプラグインなんですね。
劇的に写真映りが変わるPhotoshopのレタッチ47方法まとめ
ferret編集部：2015年5月13日に公開された記事を再編集しています。 近年、カメラ人気が高まりプロでなくとも写真を撮る方が増えています。 ビジネスの現場でも、素人ながら出来るだけいい写真を撮りたい、商品をもっと綺麗に見せたいという理由で、本格的な一眼レフを使って自社で写真を用意している会社も少なくありません。 しかし、どんなにいいカメラと機材を揃えて撮影しても仕上がりに納得いかないことだってあります。 特に屋内や人物を被写体とした撮影では、色かぶりや明るさ、人物の肌の荒れが気になるのはごく一般的なことです。 そこで覚えたいのが画像レタッチ（修正）のテクニックです。 画像修正ソフトであるphotoshopはとにかくあらゆる使い方が出来るので、全てを覚えるのは困難です。使いたい技術だけをチュートリアルに沿って実行すれば誰でも簡単に写真補正を行うことができます。 ここでは、使用頻度の高い
コレやりたい！Photoshop写真加工が上手くなる時短ワザ10選
写真加工や修正は、Photoshopのデザイン制作において重要なテクニック。 しかし、用途に応じてツールを使い分け、エフェクトを効果的に適用しているというひとは、どれだけいるでしょう。 せっかく撮影した写真がぼやけてしまったり、光量が足りないなんてことも。 また、しみなどお肌のトラブルを隠したかったり、朝日や夕日をドラマチックに仕上げたかったりと、特別なテクニックが必要なものばかり。 今回は、Photoshopですぐにできる写真加工テクニックを、各サンプルと一緒にまとめてご紹介します。 これらの方法を実践することで、どんなデザインでも手軽に、そしてスピーディーに写真加工できるようになります。 コンテンツ目次 コントラストで写真の仕上がりをアップ ぼやけた写真をくっきりシャープに 朝日や夕日をダイナミックに仕上げる にきびやしみなどお肌のトラブルを修正する 着ている洋服の色を変更する トレン
WordPressでエラー “Briefly unavailable for scheduled maintenance.” が発生した時の対処方法
WordPressで “本体のアップグレード” や “プラグインの更新” などを行った際、まれに “Briefly unavailable for scheduled maintenance. Check back in a minute.” とエラーが表示されてしまう事があります。 発生原因 このエラー “Briefly unavailable for scheduled maintenance. Check back in a minute.” の意味は「メンテナンス中の為、一時的に利用できません。しばらくしてから確認してください。」と言ったところです。 WordPressでは、本体のアップグレードやプラグインの更新を行う際には「メンテナンスモード」と呼ばれるモードに切り替わります。本体やプラグインの更新が完了するとメンテナンスモードは自動的に解除されますが、何かしらの理由によって解除
Beautiful Watercolor Effect Tutorial and Photoshop Brushes
2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、４倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね！ 1. ぼかし 画像を開いて、そのレイヤーを複製します（コマンド＋J）。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし（詳細）で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを
photoshopで鉛筆画のような加工をしたいけどフィルターの輪郭検出じゃ納得できないという人のためのチュートリアル
写真を鉛筆画のように加工したい場合photoshopにはさまざまな方法があります。風景などの写真であればフィルター機能の輪郭検出だけでそれなりには見えますが、人物写真ではとても鉛筆画には見えません。 ここでは鉛筆画のディティールにこだわる人のためのチュートリアルをお伝えします、初めは少し時間がかかるかもしれませんが慣れれば5分程度です。 この鉛筆画のスキルをつけることで水彩画風や油絵風などの加工をする際にとても役立ち、応用範囲がめちゃめちゃ広がるのでしっかりとマスターしちゃいましょう。 鉛筆画のような輪郭を描くチュートリアル人物写真を開きます。（今回は2800×2500pixelの大きめの画像を使用） 背景を複製して彩度を落とし、さらに複製。（モノクロレイヤーが2枚） 最前面のモノクロレイヤーの描画モードを除算に変更（この時点で真っ白になるかも）、フィルターでぼかし（ガウス）をかけると輪郭
Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ
Facebookのブランドカラーが青色なのは、マーク・ザッカーバーグが色盲だったから、という話を知っているでしょうか。 「青は私にとって、もっともリッチな色で、すべての色合いを識別することができる。」とザッカーバーグ氏は述べています。配色を決める作業は、まったく科学的には見えないかもしれませんが、配色に関してたくさんの研究やアイデアが用いられています。 商品に対する評価の90%以上は、色によって判断されていると Buffer では紹介されている通り、どんなデザインにおいても、いかに配色をじっくり検討するべきか分かります。特にウェブサイトでは、ユーザーが配色を気に入らなかった場合、あまり長くはサイトに滞在してくれないでしょう。 ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。コピー＆ペーストで利用できる、カラ
WordPress記事内の最初と最後のhタグ直前にアドセンスを貼る方法
こんにちは、ほわいとです。 今回は、簡単に記事中にアドセンスを自動で設置する方法の一つ、 見出しタグ（h2やh3）の直前にアドセンスを設置する方法を説明していきます。 下の図のようなイメージですね。 さらに、PCとスマホで別々のアドセンスを表示させる方法や、 最初と最後のhタグだけではなく、任意のhタグ（2番目と3番目のhタグなど）に アドセンスを設置する方法も説明していきます。 1:このテクニックの有用性 まず、このテクニックの有用性について説明します。 このテクニックを使えば、僕が推奨する下図のアドセンス配置の、 ポイント①とポイント②を同時に実装することが出来ます。 記事中に手動で設置する方法については以前説明しましたが、 今回は全記事に自動的に適応されるので、こっちの方が楽です。 ちなみにこれが記事内に手動でアドセンスを設置する方法です。 ➡WordPress記事中にスマホのみアド
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode（えいちぴーこーど）
<!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つのステップ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
メンテ不要！ECサイトにカレンダーを埋め込むたった3つのステップ 2016.06.10 2017.02.27 おすすめ メンテ不要のカレンダー埋込方法 こんにちは、サポート部の市川です。 ページのサイドやフッターのエリアにカレンダーを設置している通販サイトはたくさんあります。しかしHTMLとCSSのみで作成している場合、毎月のカレンダーのHTMLを変更するなどメンテナンスがやや面倒です。 今回は、Webサイト制作のSYNCK GRAPHICAさんが無料で公開している【営業日・定休日カレンダー】のJavascriptコードをカスタマイズさせていただき、通販サイトに表示するカレンダーとして埋め込む方法をご紹介します。 定休日・臨時休みを予め登録できるカレンダー 今回、ご紹介するカレンダーは以下の特長があります。 毎週の定休日・祝日休みを設定できる Javascriptコードに一度記述をすれば毎
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
シンプルなカレンダープラグイン「WP Simple Booking Calendar」をカスタマイズ【WordPress】 | ナカノマサミツweb企画事務所
シンプルなカレンダープラグイン「WP Simple Booking Calendar」をカスタマイズ【WordPress】 こんにちは。時間は必ず守る男、ナカノマサミツです。うっかり寝坊の遅刻などしたことがありません。 さて、現在制作している案件で、お店の休業日を知らせるカレンダーをサイドバーに入れてほしいと要望がありました。 wordpressを組み込んでいるので「まあ、カレンダーのプラグインなんて腐るほどあるだろうｗｗｗ」とたかをくくっていましたが、なかなかお眼鏡にかなうものがない！ カスタマイズができるものは高機能すぎて宝の持ち腐れ感半端ないし、シンプルな奴はシンプルなやつでカスタマイズがめんどくさい・・・ がしかし、うだうだ言ってても仕方ないので、お客様にとっても使いやすいであろうシンプルな「WP Simple Booking Calendar」をチョイス。 ただこのプラグイン、横
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SNS Count Cache 0.11.1」でFacebookのシェア数をカウントする方法【WordPress】
ウェブフォント Noto Sans JPを使う 2019年新春
The WordPress Press | 世界一わかりやすいWordPress
