【Breadcrumb NavXT】階層の追加を行うカスタマイズ方法 | SEO対策なら株式会社ペコプラ
WEBサイトのSEO対策としてポピュラー手段であるパンくずリスト。 WordPressでパンくずリストを表示する為によく使われるプラグイン、Breadcrumb NavXT。 自動でWordPressのWEBサイトの構造にあったパンくずリストを生成し表示してくれる便利なプラグインです。 しかし、自動で生成する為、思った通りのパンくずリストが表示されない場合もあります。 今回は、そんな時に自由自在に表示をカスタマイズする方法をご紹介いたします。 Breadcrumb NavXTとは Breadcrumb NavXTは、WordPressで作成されたサイトにパンくずリストを設置する為のプラグインです。 WordPressのWEBサイトの構造をそのままパンくずリストとして出力してくれるので、一度設定をしてしまえば 現在のWEBサイトの状態に応じてパンくずリストを自動で生成し表示してくれます。 ▼
【Swiper】縦スライド可能な全画面ページを実装する方法 | WebDev Tech
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vertical Slider DEMO</title> <!-- CDN読み込み --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <!-- CSSファイル読み込み --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="swiper-container vertical-slider"> <di
【jQuery】モーダルウィンドウの作り方を解説（コピペ可） - PENGIN BLOG
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はモーダルウィンドウをプラグイン無しで作成する方法をまとめます！ モーダルウィンドウはWebサイトによく使われるUIですが、意外に実装が難しいんですよね。 同ページ内に複数モーダルを設置する方法まで、基礎的な内容は解説していますので、不安な方は是非参考にしていただけると嬉しいです！ モーダルウィンドウ とはモーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。 モーダルウィ
WordPressのContact form 7 はサンクスページを設定せよ！設定手順はこれだ！ - 株式会社援軍
Home > 備忘録 > 広告運用 > WordPressのContact form 7 はサンクスページを設定せよ！設定手順はこれだ！ 新卒1年目に 口コミサイトの制作を受注して口コミサイトをWordpress制作していましたポールです。貧乏すぎて家族が飯を食う金を稼ぐための副業でした。HTMLの知識もあいまいでしたが、「できる（はずな）のでやりましょう！」といって提案していました。10年以上前でもWordpressを使えばなんとかなったものです。 さて、デジタルマーケティングのプロとしてWordpressで制作サイトで非常に気になるのが効果計測の設定。マーケティングの効果は資料ダウンロードや問合せなどの「フォーム送信完了」または「電話」ボタンクリックになります。これがそもそもできていない会社多いんです。その原因の1つが WordPress で最も利用されている国産フォームプラグイン C
【WordPress】月別アーカイブの表示形式を変更する方法
WordPressの月別アーカイブは、デフォルトの状態だと「2021年7月」というような表示形式です。 今回は、この月別アーカイブの表示形式を「2021.7」「2021.07」「July 2021」という形に変更する方法をまとめたいと思います。 get_archives_link関数をテーマに直に書く場合でも、ウィジェットを利用する場合でも両方に適用されます。 月別アーカイブの表示形式を「2021.7」に変更 /* 月別アーカイブの表示形式を「2021.7」に変更 ---------------------------------------------------------- */ function bw_get_archives_link($str){ $str = str_replace('年','.',$str); $str = str_replace('月','',$str);
iOSでブラウザバックするとloadやreadyに設定したwow.jsのイベントが効かなくなる | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute
仕事での備忘録や田舎住まいの生活などの日常を雑記したコーダーのブログ CattleMuteキャトルミュート jQueryの$(window).load()や$(document).ready()で毎度おなじみwow.jsを設定していたのだが、iOSの環境下でブラウザバックするとそれが効かなくなる。 それに気づいたのはつい昨日のことだった。 過去に制作したサイトでその事象が発生したことの報告を受け、この摩訶不思議な現象に頭を悩ませた。 PCでのデバイスエミュレーションやAndroidでは発生せず、発生状況としては完全にiOSピンポイント。 Chrome→Safariとブラウザを変えても同じく動作しないという状況になったので、非常に手を煩わせた。 通常、ブラウザバック時にも、$(window).load()や$(document).ready()に設定したスクリプトのイベントは、基本的に再帰し
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」
タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能とは、例えばショップサイトで画像付きの商品一覧ページをタイルレイアウトで表示している場合、商品の色や機能など、特徴ごとに商品リストをリアルタイムに並べ替えるようなことができるものです。 「Masonry」と同じように自動でグリッドレイアウトを表示して、フィルター機能も付いているプラグインで有名なものとしては、「isotope」というプラグインがありますが、こちらはGPLv3ライセンスの下で商用利用の場合は有料となってしまいます。 そこで、「Masonry」の唯一(?)の弱点であるフィルタリング機能を補ってくれる便利な拡張機能が、「Multiple Filter Masonry」。
WordPressでMixItUpを使うときのメモ | 株式会社カンマン
githubはこれ。 mixItUpの使い方 jQueryや本体のjsやcssは読めているとして、 <div id="Container"> <div class="mix cat1"></div> <div class="mix cat2"></div> <div class="mix cat1"></div> <div class="mix cat3"></div> </div> 1.振り分けたい要素にmixと振り分けに利用するクラスを付ける。cat1とか任意のクラス。 並び順も変更出来るけど、今回は無視。本サイト参照で。 <div class="filter" data-filter="all">Show All</div> <div class="filter" data-filter=".cat1">Category 1</div> <div class="filter" dat
WordPressの自動整形（ビジュアルエディタ含む）を無効にする方法 - Qiita
WordPressで既存サイトのテーマ化などを行った際、胃が痛いのがWordPressの自動整形の問題だと思う。 これはWordPress内部に定義されている wpautop という関数が行っている処理なのだけど、この関数が結構やっかいで、 改行コードを <br> タグに変換 インラインタグまたは文章には <p> タグを適用 改行が2回続いたら <p> タグを適用 といった処理を自動的に行ってしまうのである。 wpautop関数 通常、ブログ用のテーマを使っているのであれば大きな問題にはならず、逆にタグを正規化してくれるので便利な関数なのだけど、通常のウェブサイトにまでこれが適用されてしまうと、単純に2回改行を入れたいだけなのに <p> タグを挿入されてレイアウトが崩れてしまったり、意図しないところに <p> タグが紛れ込むことでレイアウトが崩れてしまったりと、割と余計なお世話の関数だった
WordPressに簡単にウィジェットアイテムを追加するコード |
制作したWordPressテーマに独自のウィジェットを追加したい時があります。これについては、検索しても情報が少ないので、当サイトでも書いてみようと思います。 以下はそのためのコード。functions.phpにコピー＆ペーストするだけで、テキストのみをシンプルに追加するウィジェットを追加できます。 class AddWidgetItem extends WP_Widget { function AddWidgetItem() { $widget_option = array('description' => '入力したテキストを表示するだけのウィジェットです'); parent::WP_Widget(false, $name = 'テキスト表示ウィジェット', $widget_option); } function form($instance) { $body = esc_attr($
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
html5のタグの入れ子のルールの保存版まとめです。「〇〇タグに〇〇タグって入れてもいいんだっけ？」という悩みを全部解決します！すべてw3cのコンテンツモデルの仕様に基づいた内容になっていますので安心して読んでくださいね。 入れ子のルールはコンテンツモデルで決まる html5からはブロック要素とインライン要素という概念が廃止されました。そのため以前まではインライン要素の中にブロック要素を入れてはいけないというルールがあったと思いますがそれは完全に無視してください。 とはいえcssでレイアウトを行う上では従来と変わらず display : blockで親要素の幅に合わせるdisplay : inlineでその要素自体が持つ幅 という指定の仕方はできます。 ただhtmlでタグの入れ子を考える上でブロック要素とインライン要素という概念がなくなっただけです。 じゃあなにが追加されたかというと、w3
Webフォントが反映されないあるある - Qiita
※ 2018/08/03 追記： TypeSquareのAPIのバージョンがv3になりましたので一部加筆しました。 TypeSquareなどのCloudサービスのWebフォントを使用している案件で、開発中にしばしば「Webフォントが当たらない」などと言われることがあります。 結構あとで言われて開発をとめて検証しないといけなくなるので、 どういうときにそうなるのか、よくあるハマりパターンをまとめてみます。 ※実体験のみなので、網羅しているわけではありません。適宜あれば追記します。 個人的にこういうのはエンジニアだけではなく、できればデザイナーやディレクターにも事前に理解しておいてほしい内容ですのでなるべく平たく書くようにします。 分かりづらいところがあったらコメントください。 Webフォントサービスに開発用のドメインが設定されていない モリサワのTypeSquareなどはWebフォントを利用
知らない人は損してる、イラレでスーパーのチラシを作るときの7つのワザ - Cherry Pie Weblog
昨年から、地元の印刷会社さんのお手伝いでスーパーのチラシを制作させていただいているんですが、最初に作業手順を聞いたときに、そのあまりの面倒さに閉口してしまいました。 スーパーのチラシって、何重もの文字フチとか、値段の数字が重なってて円だけ小さいとか、囲みとか、必ず文字が画像にかかってしまうから白フチもつけないといけないとか・・・ そんな手数のかかる作業を、長年チラシ制作をされている方は、イラストレーター5.5 でショートカット連打でバキバキ作ってたりするわけです。 しかし、短納期・安価を求められる今の時代、いつまでもイラストレーター5.5時代の作業を続けているのでは、相当な熟練者でないと時間にもお金にも見合う仕事ができないし、会社としては熟練者に単純作業に近いことに延々と時間を使ってほしくないのです。 でも、今のイラストレーターならできるんですよね。 そんな、知っている人は知っているけど、
WordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける - 魔ッドアングラー
WordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける スマホ用にメディアクエリを設定してひと息ついた頃、PageSpeed Insightsを確認してみたら「モバイル」の速度がガタ落ちしていました。記憶では80点くらいあったのに、50点になっていました。 原因は画像。特にアイキャッチに使用している「722 × 234」ピクセルの元画像が大きすぎるようです。 メディアクエリで「max-width: 100%;」にしているだけなので毎回読み込みに時間が掛かっているようです。 PageSpeed Insightsはこれを『横幅 320px にリサイズしろよ』と迫ってきます。 ご丁寧にもリサイズされた画像のダウンロードすらできます。非常に親切です。 しかしそう簡単に置き換えるわけにもいかない、PC用の画面で見ると今度は小さくなってしまうからです。 さらに考えてみれば、この
CSS 途中で要素を画面いっぱいに広げる | テクニカルノート
ヘッダーや、フッターを画面いっぱいに広げる場合、widthを100%に指定すればいいだけですが。 mainの途中で背景だけ目一杯に広る場合、mainを2つに分けて、間に目一杯の枠を作る。なんてことをしてた時期がありまして。こんな感じで。 非常に効率が悪かったわけですが、できればこんなふうにmainの途中でも画面いっぱいに広がる枠を入れられたら楽ですよね。こんな感じで。 で、どうするかというと、意外と簡単で、広げたい部分をdiv要素で囲って、 幅方向のmarginにマイナスの値を設定して、マイナス分を、paddingで補います。 margin:0 -200%; padding:0 200%; とすれば、いいわけですが、それだけだと、はみ出た部分まで表示しようとスクロールバーが出てきてしまいます。なので、bodyに overflow-x: hidden; を適用すればいいのですが、なぜかiPh
描画モードが乗算のオブジェクトをデザイン通りにスライスするPhotoshopテクニック｜BLOG｜株式会社エムハンド
デザイナーさんから受け取ったPSDデータをいつも通りスライスしたのに、デザイン通りのコーディング結果にならない！ そんな時は、PSDデータの描画モードを確認してみてください。 デザイン例 文字だけだと分かりにくいので簡単なデザインを5秒で用意しました。ダサいとか言わない。 コルク模様の背景に矢印が半透明で乗っかってます。 まぁまず間違いなく最初は、 「背景はCSSでリピートさせて、その上に矢印を透過pngで配置すればいいやー。」 ってなります。…なりますよね？ コーディングしてブラウザでチェックしてみました。 アレ？なんか違う……。 デザインでは半透明の矢印ごしにうっすらとコルク模様が見えていたのに、一色で塗りつぶされてしまいました。 ……何故！？ 原因はレイヤーの描画モードにあり 結論を先に言ってしまうと、レイヤーの描画モードが「乗算」や「オーバーレイ」など、「通常」以外になっていること
JavaScriptでsetIntervalを使う方法【初心者向け】現役エンジニアが解説
プログラミング初心者向けに、JavaScriptで【setInterval】を使う方法を解説した記事です。本記事では、setIntervalのタイマー処理でカウントアップ、処理を停止する方法を紹介します。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでsetIntervalを使う方法について解説します。 本記事では、テキストエディタのmiを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのサイト上で簡単に並び替え＆絞り込みする方法 ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
bizvektor 最新記事だけ全文表示 | さくっとwordpress∞