# さくらいらぼWEB制作版 > 神奈川県厚木市・伊勢原市周辺でWEBサイト製作しています。個人的な備忘録ブログ --- ## 固定ページ - [事業概要/プロフィール](https://webhoric.com/hp/business-summary/): 当サイトについて WEB屋の作業記録を残... - [Work/ポートフォリオ](https://webhoric.com/hp/work/): Under Construction - [プライバシーポリシー](https://webhoric.com/hp/privacy/): 私たちについて 私たちのサイトアドレスは... - [Web horic search](https://webhoric.com/hp/web-horic-search/): var googleSearchIfra... - [リンク](https://webhoric.com/hp/link/): リンク - [お問合せ](https://webhoric.com/hp/inquiry/): *原則2~5営業日以内には返信させていた... - [人気記事](https://webhoric.com/hp/popular/): 人気記事 Hatena. Bookmar... - [About](https://webhoric.com/hp/about/): WEB HORIC. ではあなたをWeb... --- --- ## 投稿 - [【Photoshop】アセット書き出しがなくなった？どこに移動した？](https://webhoric.com/hp/photoshop/photoshop-assets/): 検証バージョン Photoshop 25... - [【CSS】hoverとnth-childを両方指定したいときの書き方](https://webhoric.com/hp/web/css-hover-nthchild/): ：から始まる擬似クラスを複数つけたいとき... - [WordPress カスタム投稿タイプのターム名を取得する方法](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/wordpress-cpt-ui-termname/): CPT UIで新規タクソノミーを作成し、... - [Figmaで図形を斜めにする方法](https://webhoric.com/hp/web/figma/figma-transform/): Figmaは初期状態でオブジェクトを斜め... - [Colorbox.jsでモーダルウィンドウにスライダーを入れる](https://webhoric.com/hp/js/%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%ab%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b/): Colorbox. jsを使うとオプショ... - [「Format HTML in PHP」PHPのコード整形をするVS Codeプラグイン](https://webhoric.com/hp/web/vs-code/format-html-in-php/): Format HTML in PHP J... - [Prepos＋Localでオートリロードが出来なかった](https://webhoric.com/hp/web/prepos-local-auto-reload/): タスクランナーで有名なものに「gulp」... - [Figmaでテキストプレビューをできるようにする方法](https://webhoric.com/hp/web/figma/figma-text-preview/): デザインツールFigmaではPhotos... - [Figmaにプラグインを入れる方法・消す方法](https://webhoric.com/hp/web/figma/figma-plugins/): Figmaの初期機能が足りないときにはF... - [「Converter for Media」 WebPに変換して表示を軽くできるWordPressプラグイン](https://webhoric.com/hp/wordpress/converter-for-media/): 画像圧縮のためのWordPressプラグ... - [WordPressオリジナルテーマでfunctions.phpが読み込まれないときにすること](https://webhoric.com/hp/wordpress/org-theme-func-file/): 意外なところでハマりました。 WordP... - [Twenty Twenty-Three のヘッダーリンクやメニューの編集方法](https://webhoric.com/hp/wordpress/twenty-twenty-three-menu-edit/): ブロックエディタの使い方を知らないと編集... - [Gulpのインストール方法](https://webhoric.com/hp/web/gulp-install/): Gulpのインストールには「npm」のコ... - [Node.jsのインストール方法](https://webhoric.com/hp/web/node-js-install/): Node. jsを入れようと調べていくと... - [「EWWW Image Optimizer」 WebPに変換して表示を軽くできるWordPressプラグイン](https://webhoric.com/hp/wordpress/ewww-image-optimizer/): EWWW Image Optimizer... - [CSSで線の上に文字を乗せる](https://webhoric.com/hp/web/css%e3%81%a7%e7%b7%9a%e3%81%ae%e4%b8%8a%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e4%b9%97%e3%81%9b%e3%82%8b/): 割とよく見ることのある中央に線が引かれて... - [Swiperの丸（ページネーション)のデザインカスタマイズの方法](https://webhoric.com/hp/web/swiper%e3%81%ae%e4%b8%b8%ef%bc%88%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b/): スライドショープラグインのSwiperの... - [Swiperのスライド矢印のデザインを変更する](https://webhoric.com/hp/web/swiper-arrow-desiign/): Swiperの矢印デザインを変更するには... - [Google mapを埋め込むときのCSSパターン手法](https://webhoric.com/hp/web/css/google-mapcss/): Google mapはiframe呼び出... - [Notionテンプレートを使ったコード管理が便利だった](https://webhoric.com/hp/notion/template/): 便利だよ！便利だよ！と言われつづけて全く... - [よく使われているスライドショーJSライブラリ](https://webhoric.com/hp/web/slideshow-js/): Slick JS 有料ブログテーマAff... - [枠線で囲むタブCSSデザインのhtmlコーディングで詰む。](https://webhoric.com/hp/web/css/css-tab/): 枠線で囲むタブCSSデザインのhtmlコ... - [[JavaScript]スクロールで表示させるボタンブロックをつくる](https://webhoric.com/hp/js/slick-js-2/): 目的 スクロールして画面を下げていくと突... - [kusanagiで「All-in-One Migration」が実行できない](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/kusanagi%e3%81%a7%e3%80%8call-in-one-migration%e3%80%8d%e3%81%8c%e5%ae%9f%e8%a1%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/): 「All-in-One Migratio... - [Advanced Custom Fieldsで管理画面の表示フィールドの順番を入れ替えるやり方](https://webhoric.com/hp/wordpress/advanced-custom-fields%e3%81%a7%e7%ae%a1%e7%90%86%e7%94%bb%e9%9d%a2%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%81%ae%e9%a0%86%e7%95%aa%e3%82%92%e5%85%a5%e3%82%8c/): WordPressプラグイン「Advan... - [「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方](https://webhoric.com/hp/js/slick-js/): スライダープラグイン「Slick. js... - [Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因](https://webhoric.com/hp/js/js-display-block/): Javascriptでdisplay:b... - [jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ](https://webhoric.com/hp/js/jqueryui-datepicker2/): 「Datepicker」はjQueryの... - [jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化](https://webhoric.com/hp/js/jqueryui-datepicker-2/): 「Datepicker」はjQueryの... - [mixhostサーバーのWordPress設定方法](https://webhoric.com/hp/server/mixhost-wordpress-install/): レンタルサーバーであるmixhostサー... - [【WordPress】ログインしているかどうかチェックするphpの書き方](https://webhoric.com/hp/wordpress/loginchk/): このブログはWordPressを使ってい... - [WordPressのphpにjQueryを使用して動かす](https://webhoric.com/hp/wordpress/wp-php-jquery/): 前提 通常のjQueryの記述は以下の$... - [スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える](https://webhoric.com/hp/js/slickjs-custom-dots/): 「Slick. js」の使い方・カスタマ... - [areaタグをレスポンシブ対応させる方法](https://webhoric.com/hp/js/area-responsive/): 画像内にイメージマップをつくってリンクを... - [position: stickyが効かない、IE11対応](https://webhoric.com/hp/web/css/position-sticky/): position: stickyが効かな... - [disabledにしたチェックボックスのデザインを変更する方法](https://webhoric.com/hp/web/css/disabled-checkbox/): disabledにしたチェックボックスの... - [右クリック禁止処理サイトでhtmlソースを確認する方法](https://webhoric.com/hp/web/css/html-source-view/): 右クリック禁止処理サイトでhtmlソース... - [IE11でテーブルの枠線が消えるバグの対処方法](https://webhoric.com/hp/web/css/ie11-table-border/): IE11でテーブルの枠線が消える 久しぶ... - [ヘッダーの高さが隠れて困る！ヘッダーが追尾するメニューのアンカーリンク用CSS](https://webhoric.com/hp/web/css/tuibi-header-link/): ヘッダーが追尾するメニューを作る場合、p... - [PhotoshopでのSVGファイルの作り方等、SVGのまとめ](https://webhoric.com/hp/photoshop/svg/): svg(エスブイジー)は拡大・縮小に対応... - [jQueryでアコーディオン/ボタンをアニメーション回転させる](https://webhoric.com/hp/js/jquery-accordion-menu-anim/): jQueryでアコーディオン/ボタンをア... - [jQueryでアコーディオン（クリック開閉メニュー)の書き方](https://webhoric.com/hp/js/jquery-accordion-menu/): jQueryでアコーディオン（クリック開... - [JavascriptでURLパラメータを取得し条件文を作るやり方](https://webhoric.com/hp/js/searchparams-url/): 「? 」を使ったif文の書き方-三項演算... - [【CSS】リストタグに点下線を敷く実践的な使い方](https://webhoric.com/hp/web/css/list_underline/): 久しぶりにつまずいたのでメモ。 befo... - [ギャラリー](https://webhoric.com/hp/web/mygallary/): このページはダウンロード禁止です。ご協力... - [さくらドメインコンパネにWPXレンタルサーバーのネームサーバーを設定する方法](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/wpx-server-ns/): さくらドメインコンパネにWPXサーバーの... - [お名前.comのVPSでのWordPress移行作業](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/vps-wordpress-setting/): お名前. comのVPSでのWordPr... - [お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/onamae-vps-kvm/): お名前. comのVPS(KVM)プラン... - [WordPress 5.5 メジャーアップデート版リリース変更点まとめ](https://webhoric.com/hp/wordpress/wordpress-5-5/): WordPress 5. 5 メジャーア... - [Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/nginxphp-fpm-502-bad-gateway/): Nginx+php-fpmで502 Ba... - [ウェブ作成時にMacで画面上の色を拾って16進法でコピーする方法](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/color-picker-for-mac/): ウェブ作成時にMacで画面上の色を拾って... - [「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン](https://webhoric.com/hp/js/slickjs/): Slick. js slickは定番のJ... - [php-fpm+nginxでload averageが上がった時の対処メモ](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/php-fpmnginx-load-average/): php-fpm+nginxでload a... - [[Javascript]「?」を使ったif文の書き方-三項演算子](https://webhoric.com/hp/js/javascript-conditional-operator/): 「? 」を使ったif文の書き方-三項演算... - [「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方](https://webhoric.com/hp/js/slickjs-thumbnail/): 案件でスライドを実装しないといけなくなり... - [スライドJSプラグイン「Slider Pro」の実践的な使い方](https://webhoric.com/hp/js/slider-pro/): JavaScriptのスライドプラグイン... - [Ktai styleで絵文字を入力する方法](https://webhoric.com/hp/wordpress/ktai-style-emozi/): 携帯サイトっぽく見せるためには絵文字は必... - [Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips個人的補足](https://webhoric.com/hp/seo/google-analytics-tips/): 「Google Analytics完全解... - [WordPressのHTMLエディタを使うとPタグが自動で入るのを無効化する](https://webhoric.com/hp/wordpress/html-editor-p/): WordPressのエディタにはビジュア... - [WordPressでのSEO対策パーマリンク設定](https://webhoric.com/hp/wordpress/seo-permalinks/): SEO対策として静的URLにすると良いと... - [Google Sitemap Generator for WordPressをモバイルサイトマップに対応させる修正方法](https://webhoric.com/hp/wordpress/google-sitemap-generator/): Google Sitemap Gener... - [【WordPress】get_post_type()を使って投稿タイプを調べる](https://webhoric.com/hp/wordpress/get_post_type/): 【WordPress】get_post_... - [Conoha VPSを使いLaravel環境を手っ取り早く10分で構築する方法](https://webhoric.com/hp/php/conoha-vps-laravel/): Conoha VPSのLaravel環境... - [フローティングバナーをCSS作る【Web制作】](https://webhoric.com/hp/web/css/css-floating-banner/): スクロールに追尾していくバナー「フローテ... - [WordPressのテーマを削除する方法](https://webhoric.com/hp/wordpress/theme-remove/): WordPressのテーマを色々試してい... - [お名前VPSの解約方法。日割りされず翌月以降の末日までお金がかかるので解約時は早めに処理すること！](https://webhoric.com/hp/server/onamae-vps-cancel/): しばらく放置していたサーバーの整理を始め... - [超簡単！WordPressの簡単移行ができるConoha Wingサーバー](https://webhoric.com/hp/wordpress/wordpress-ikou-conoha-wing/): WordPressの専用レンタルサーバー... - [WordPressのカテゴリー説明でhtmlを使えるようにする方法](https://webhoric.com/hp/wordpress/cat-html/): SEOでのサイト構成を考える際にカテゴリ... - [【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法](https://webhoric.com/hp/web/swiper1/): 数あるJavaScriptスライダープラ... - [jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える](https://webhoric.com/hp/js/jquery-next-prev-2/): アコーディオン処理を加えるときにとても楽... - [コンタクトフォームで「メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。」のエラー](https://webhoric.com/hp/wordpress/contactform-error/): WordPressのメールプラグイン「コ... - [WordPressのリカバリーモード](https://webhoric.com/hp/wordpress/recoverymode/): WordPress 5. 2から「リカバ... - [「サイトに重大なエラーがありました」の回避方法](https://webhoric.com/hp/wordpress/critical-site-error/): 「サイトに重大なエラーがありました」の回... - [『Color Admin Posts』投稿状態に色を付けられる地味に便利なWordPressプラグイン](https://webhoric.com/hp/plugin/color-admin-posts-2/): 『Color Admin Posts』投... - [WordPress 5.3 メジャーアップデート版リリース](https://webhoric.com/hp/wordpress/wordpress-5-3/): WordPress 5. 3 メジャーア... - [メディアクエリ(Media Queries)が効かないときに確認したいこと](https://webhoric.com/hp/web/css/mediaquery/): メディアクエリ(Media Querie... - [WordPressの自作ショートコードに引数をわたす方法を攻略！](https://webhoric.com/hp/wordpress%e5%88%9d%e5%bf%83%e8%80%85%e8%ac%9b%e5%ba%a7/shortcode/): 管理画面の TinyMCE Advanc... - [スクロールしたらCSS3のグラフがアニメーションするようにする方法](https://webhoric.com/hp/web/css/scrolltrigger/): スクロールしたらCSS3のグラフがアニメ... - [【Chart.js】グラフを簡単に作れるJavaScriptライブラリ](https://webhoric.com/hp/js/chartjs/): Chart. jsはグラフをとても簡単に... - [【Photoshop】テキストに下線を付けたい！テキストツールを使って方法が簡単！](https://webhoric.com/hp/photoshop/photoshop-underline/): Photoshopでテキストに下線をつけ... - [【jQuery】「next()」「prev()」で要素の取得して画像を変更する。](https://webhoric.com/hp/js/jquery-next-prev/): JavaScriptのライブラリとして一... - [WordPressにstyle.css以外の自作cssを追加したいときに試す方法を攻略！](https://webhoric.com/hp/wordpress/wordpress-other-style-css/): 管理画面の TinyMCE Advanc... - [【Web制作】IE11でFlexboxが横並びにならなくてハマる](https://webhoric.com/hp/web/flexbox1-2/): IE11でflexboxが横並びにならな... - [【WordPress】使っているサーバーのPHP，MySQLのバージョンを確認する方法](https://webhoric.com/hp/web/php-version/): 「WordPress」を使っているときに... - [【WordPress】「AFFINGERタグ管理マネージャー2」を使っていてcrawl-66-249-79-112.googlebot.comでハマる。](https://webhoric.com/hp/web/revive-old-post-2/): クリック率計測でログのcrawl-66-... - [サイトマップ](https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/sitemap/): - [WordPress管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法](https://webhoric.com/hp/plugin/mozibake-icon/): 管理画面の TinyMCE Advanc... - [「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の表示が出たときの解決方法（プラグイン更新中に不具合が起こった時の対処)](https://webhoric.com/hp/wordpress/plugin-accident/): プラグイン更新中にリロードしてしまったり... - [All in One SEO Packに脆弱性が発覚。使っていたら2.1.6へバージョンアップしよう](https://webhoric.com/hp/plugin/all-in-one-seo-pack2-1-6/): All in One SEO Packに... - [WordPressの画像のアップロードが遅くなったりUpload FailedのメッセージがでたらWP Smush.itのプラグインを疑おう](https://webhoric.com/hp/plugin/wpsmushit-upload-failed/): WordPressの画像のアップロードが... - [WordPressユーザー名とパスワードを忘れた時のphpmyadminを使ってログインする方法](https://webhoric.com/hp/wordpress/wordpress-password-reminder/): WordPressユーザー名とパスワード... - [【WordPress】『Duplicate Post』テンプレート記事を複製したいときに、ワンクリックでコピーできるプラグイン](https://webhoric.com/hp/wordpress/duplicate-post/): 『Duplicate Post』テンプレ... - [xserverを使っていて管理画面が突然白くなったりInternal Server errorがでたらメモリ不足を疑え](https://webhoric.com/hp/wordpress/xserver-internal-server-error/): xserverを使っていて管理画面が突然... - [Jetpack 1.3.4 からはスパム対策付きのコンタクトフォームが使えるようになった。](https://webhoric.com/hp/wordpress/jetpack-1-3-4-contactform/): Jetpack 1. 3. 4 からはス... - [WordPress3.3.2のアップデート開始](https://webhoric.com/hp/wordpress/wordpress3-3-2-update/): WordPress3. 3. 2のアップ... - [WordPress内からXML-RPCを利用して記事投稿を行う方法](https://webhoric.com/hp/wordpress/wordpress-xml-rpc-post/): WordPress内からXML-RPCを... - [『Where did they go from here』Amazonのこの商品を見たお客様はこれも見ていますが実現できるプラグイン](https://webhoric.com/hp/wordpress/where-did-they-go-from-here/): 「Amazonのこの商品を見たお客様はこ... - [『WP Zend Library』WordPressでZend Frameworkを使えるようにするプラグイン](https://webhoric.com/hp/wordpress/wp-zend-library/): 『WP Zend Library』はWo... - [WordPressで加速させる！ソーシャルメディア時代の［新］SEO戦略マニュアル](https://webhoric.com/hp/wordpress/wordpress%e3%81%a7%e5%8a%a0%e9%80%9f%e3%81%95%e3%81%9b%e3%82%8b%ef%bc%81%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%a3%e3%83%ab%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e6%99%82%e4%bb%a3%e3%81%ae%ef%bc%bb%e6%96%b0/): SEOテンプレートで有名な「賢威」の制作... - [WordPress レッスンブック 3.x対応](https://webhoric.com/hp/wordpress/wordpress-%e3%83%ac%e3%83%83%e3%82%b9%e3%83%b3%e3%83%96%e3%83%83%e3%82%af-3-x%e5%af%be%e5%bf%9c/): CSS/HTMLをひと通りマスター人が体... --- # # Detailed Content ## 固定ページ ### 事業概要/プロフィール - Published: 2020-11-19 - Modified: 2023-03-28 - URL: https://webhoric.com/hp/business-summary/ 当サイトについて WEB屋の作業記録を残しています。 HTMLコーディング、CSSコーディング,LP作成承ります。 ・対応ブラウザ Google Chrome,Safari 最新版 ※当方で受注させていただく際はInternet Explorer 11 (IE11)には対応しません。ご了承ください。 事業概要 屋号 さくらいらぼ 代表者 櫻井俊幸 WEBサイト https://webhoric. com/hp/ 取引銀行 みずほ銀行 事業内容 WEBサービス運用・作成、WEBサイト作 各種デザイ... --- ### Work/ポートフォリオ - Published: 2020-11-19 - Modified: 2023-03-28 - URL: https://webhoric.com/hp/work/ Under Construction --- ### プライバシーポリシー - Published: 2013-09-03 - Modified: 2023-06-13 - URL: https://webhoric.com/hp/privacy/ 私たちについて 私たちのサイトアドレスは https://webhoric. com/hpです。 https://webhoric. com/hp（以下、「当サイト」といいます。）におけるプライバシー情報の取扱いについて、以下のとおりプライバシーポリシー（以下、「本ポリシー」といいます。）を定めます。  プライバシー情報 「個人情報」とは、氏名、生年月日、住所、電話番号、連絡先その他の記述等により特定の個人を識別できる情報を指します。 「履歴情報および特性情報」とは、上記に定める「個人情報」以外... --- ### Web horic search - Published: 2012-04-21 - Modified: 2012-04-21 - URL: https://webhoric.com/hp/web-horic-search/ var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 800; var googleSearchDomain = "www. google. co. jp"; var googleSearchPath = "/cse"; --- ### リンク - Published: 2012-04-20 - Modified: 2012-04-20 - URL: https://webhoric.com/hp/link/ リンク --- ### お問合せ - Published: 2012-04-20 - Modified: 2023-05-12 - URL: https://webhoric.com/hp/inquiry/ *原則2~5営業日以内には返信させていただきます --- ### 人気記事 - Published: 2012-04-20 - Modified: 2015-05-08 - URL: https://webhoric.com/hp/popular/ 人気記事 Hatena. BookmarkWidget. url = "https://webhoric. com/hp"; Hatena. BookmarkWidget. title = "エントリー"; Hatena. BookmarkWidget. sort = "count"; Hatena. BookmarkWidget. width = 400; Hatena. BookmarkWidget. num = 20; Hatena. BookmarkWidget. theme = "de... --- ### About - Published: 2012-04-20 - Modified: 2013-09-03 - URL: https://webhoric.com/hp/about/ WEB HORIC. ではあなたをWeb中毒にしちゃう見るのがやめられないネタを取り上げていきます。 インターネットネタから、ブログ、アフィリエイト、PC関連、ゲーム関連、音楽や萌までネタに困らないよう幅広く取り上げています。 管理人がハマっていることなど日常的なことも記録していきます。 ■アフィリエイトプログラムについて WEB HORIC. ではAmazonアソシエイト、楽天アフィリエイトなどのアフィリエイトプログラムを利用しています リンク先の商品はWEB HORIC. ではが販売している... --- --- --- ## 投稿 ### 【Photoshop】アセット書き出しがなくなった？どこに移動した？ - Published: 2024-07-31 - Modified: 2024-07-31 - URL: https://webhoric.com/hp/photoshop/photoshop-assets/ - カテゴリー: Photoshop - タグ: PhotoshopCC 検証バージョン Photoshop 25. 11. 0 アセット書き出しがなくなった？ PhotoShopで拡張子をつけるとアートボードサイズやレイヤーのアイテムで書き出せる便利な機能が アセット書き出し です。 ファイルか編集にあったハズなのに見当たらず苦労しました... ... ... Photoshopに生成AIが組み込まれたことで場所が移動したようです。 アセット書き出しの移動先 MENUの ファイル ＞　自動処理　＞　ジェネレータープラグイン　＞　画像アセット です。 ... ... ... --- ### 【CSS】hoverとnth-childを両方指定したいときの書き方 - Published: 2023-06-13 - Modified: 2023-06-13 - URL: https://webhoric.com/hp/web/css-hover-nthchild/ - カテゴリー: CSS, WEB製作 - タグ: CSS, 擬似クラス ：から始まる擬似クラスを複数つけたいときの記述方法 記述順序を間違えると動作しない 記述の順番が決まっているため順番間違えには注意。 nth-childで指定した要素にhoverの擬似クラス要素を指定するときはhoverを先に書きます。 /* hoverが動く */ #page__news . service__cat__box > div:hover:nth-child(1) { transform: translateY(-10px); transition: 0. 35s; } /* ho... --- ### WordPress カスタム投稿タイプのターム名を取得する方法 - Published: 2023-05-30 - Modified: 2023-05-30 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/wordpress-cpt-ui-termname/ - カテゴリー: WordPress, 未分類 - タグ: WordPress CPT UIで新規タクソノミーを作成し、タクソノミースラッグを入力しておく。 作成したタクソノミーを開いて、新規にタームを作成する。 get_termsでタームを取得後、foreach処理を加える タクソノミースラッグ: summmer-event表示させたいテキスト:サマーイベントのターム var_dumpの行の中身 ターム名を取得してHtmlで表示させる --- ### Figmaで図形を斜めにする方法 - Published: 2023-05-25 - Modified: 2023-05-25 - URL: https://webhoric.com/hp/web/figma/figma-transform/ - カテゴリー: Figma - タグ: Figma, Figmaプラグイン Figmaは初期状態でオブジェクトを斜めにするツールがありません！(2023年5月25日現在）そこでプラグインを入れます。使うプラグインは「SkewDat」です。 SkewDat SkewDatで斜めにしたオブジェクトのcssは　transform: matrix　でインスペクターに表示されます。 --- ### Colorbox.jsでモーダルウィンドウにスライダーを入れる - Published: 2023-05-23 - Modified: 2023-05-31 - URL: https://webhoric.com/hp/js/%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%ab%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b/ - カテゴリー: JavaScript - タグ: Javascript, jQuery Colorbox. jsを使うとオプションの設定でモーダルウィンドウ内にスライダーを入れることができます。 ColorboxはjQueryで動くレスポンシブ対応のモーダルウィンドウです。 Colorbox - a jQuery lightboxColorbox Examplesデモページ //クラス要素を指定しないと読み込んだ直後にモーダル内でhtmlが開く $. colorbox({ href: ". . /readme. html" }); // htmlの記述をダイレクトに表示。読み込んだ... --- ### 「Format HTML in PHP」PHPのコード整形をするVS Codeプラグイン - Published: 2023-05-21 - Modified: 2023-05-21 - URL: https://webhoric.com/hp/web/vs-code/format-html-in-php/ - カテゴリー: VS Code - タグ: VS Code, VS Codeプラグイン Format HTML in PHP JSbeautifyを使用して、PHPファイル内のHTMLコードにフォーマットするプラグイン。 Format HTML in PHP 標準のキーボードショートカット（ファイル＞環境設定＞キーボードショートカット）のオプション画面では、名前が「PHPでHTMLをフォーマットする」になっているので、必要に応じて変更することが可能です。 初期状態ですと、save時にフォーマットを行うため自動保存の機能をONにしていると＜? を書いたあたりでフォーマットが始まってし... --- ### Prepos＋Localでオートリロードが出来なかった - Published: 2023-05-18 - Modified: 2023-05-18 - URL: https://webhoric.com/hp/web/prepos-local-auto-reload/ - カテゴリー: WEB製作 - タグ: Local, Prepos タスクランナーで有名なものに「gulp」がありますが、CUIツールのため設定が面倒くさい。そこでできることは限られるけれど本格的なタスクランナーの代替で使えるPreposというWEB開発者にとっての神アプリがあります。 Preposを使う理由の一つに「オートリロード」があります。 Prepos のオートリロード機能 html,cssを変更したあとブラウザで状態確認をするのに、毎回リロードボタンを押す... 面倒くさいくないですか？ いやいやリロードボタンをおして結果を見るのは当然だろう！ と反論... --- ### Figmaでテキストプレビューをできるようにする方法 - Published: 2023-05-15 - Modified: 2023-05-15 - URL: https://webhoric.com/hp/web/figma/figma-text-preview/ - カテゴリー: Figma - タグ: Figma, Figmaプラグイン デザインツールFigmaではPhotoshopのようにテキストツール上でフォントを選んでいるときにフォントのプレビューができません。 フォント名でしかフォントが選べない... そこでFigmaのフォントプレビューを実現するためにFigmaのプラグインの「Better Font Picker」を使います。 Better Font Picker https://www. figma. com/community/plugin/739922281164562258/Better-Font-Picker... --- ### Figmaにプラグインを入れる方法・消す方法 - Published: 2023-05-15 - Modified: 2023-05-15 - URL: https://webhoric.com/hp/web/figma/figma-plugins/ - カテゴリー: Figma - タグ: Figma, Figmaプラグイン Figmaの初期機能が足りないときにはFigmaのCommunityで公開されている「プラグイン」を入れることで機能拡張ができます！ Figmaプラグインには無料・有料があり、有料のものは「サードパーティ決済」の表記があります。Figmaのアプリ版・ブラウザ版で同じアカウントを使っていた場合、登録したプラグインは連携します。プラグインをアカウント連携させる場合には「保存」を押す必要があります。 Figmaにプラグインを入れる方法 ブラウザ版Figmaへログインして、FigmaのCommunity... --- ### 「Converter for Media」 WebPに変換して表示を軽くできるWordPressプラグイン - Published: 2023-05-04 - Modified: 2023-05-04 - URL: https://webhoric.com/hp/wordpress/converter-for-media/ - カテゴリー: WordPress, WordPressの便利なプラグイン - タグ: WordPress, WordPressプラグイン 画像圧縮のためのWordPressプラグインが「Converter for Media」です。 今回は「Converter for Media」についての解説です。難しい設定が入らずにサクサク導入できるのが強み。 有料のPro版も用意されていますが基本的には無料版で十分な機能を持っています。 「Converter for Media」を導入するとどうなる？・WordPressのメディアフォルダにアップした画像がWebPフォーマットで画像圧縮される・アップロード済の画像圧縮もConverter f... --- ### WordPressオリジナルテーマでfunctions.phpが読み込まれないときにすること - Published: 2023-05-02 - Modified: 2023-05-30 - URL: https://webhoric.com/hp/wordpress/org-theme-func-file/ - カテゴリー: WordPress - タグ: Twenty Twenty-Three, WordPress 意外なところでハマりました。 WordPressのfuctions. php WordPress5. 8のオリジナルテーマを作る時に必要となるファイルがfunctions. phpです。オリジナルテーマ作成時になんど書き換えてもfunctions. phpが反映されないことがありました。 function. phpになってない？ ものすごくアホくさい間違えなのですが、 WordPressオリジナルテーマに反映されるのはfunction . phpなのです。 自分が必死に書き換えていたファイルは「... --- ### Twenty Twenty-Three のヘッダーリンクやメニューの編集方法 - Published: 2023-04-30 - Modified: 2023-05-02 - URL: https://webhoric.com/hp/wordpress/twenty-twenty-three-menu-edit/ - カテゴリー: WordPress - タグ: Twenty Twenty-Three, WordPress ブロックエディタの使い方を知らないと編集が大変になりました。 従来のヘッダー編集方法 外観 ＞メニュー からヘッダーのメニューを作って変更してました。 Twenty Twenty-Three のヘッダー編集方法 管理メニュー ＞　サイトを編集　を選択 「テンプレートパーツ」を選択 テンプレートパーツの中から「ヘッダー」を選びます。 ヘッダーを選んで鉛筆マークのエディットボタンを押します。 するとヘッダー領域内を編集するための「ブロックエディタ」が表示されます。記事の編集と同じやり方でヘッダーの内... --- ### Gulpのインストール方法 - Published: 2023-04-29 - Modified: 2023-04-29 - URL: https://webhoric.com/hp/web/gulp-install/ - カテゴリー: WEB製作 Gulpのインストールには「npm」のコマンドを使います。(「npm」のコマンドを使うためにNode. jsの事前インストールが必要) Node. jsのインストール方法 >> ■Gulpインストールまでのコマンド cd webpro npm init -y npm install gulp -g npm install gulp --save-dev 作業ディレクトリを作る・移動 今回は作業ディレクトリを「webpro」として移動 cd webpro プロジェクトの初期化（npm init）/... --- ### Node.jsのインストール方法 - Published: 2023-04-29 - Modified: 2023-04-29 - URL: https://webhoric.com/hp/web/node-js-install/ - カテゴリー: WEB製作 Node. jsを入れようと調べていくとコマンドラインからインストールする方法ばかり出てきますが、(昔の手法）2023年現在は公式のインストーラーが用意されています。 今回は「LTS推奨版」のMac インストーラーを使います。 Node. js公式インストーラーを使う インストーラーを起動するとインストール対象のNode version が表示されますので確認。 インストール完了後、実行パスが表示されます。 This package has installed:Node. js v18. 16.... --- ### 「EWWW Image Optimizer」 WebPに変換して表示を軽くできるWordPressプラグイン - Published: 2023-04-26 - Modified: 2023-05-04 - URL: https://webhoric.com/hp/wordpress/ewww-image-optimizer/ - カテゴリー: WordPress, WordPressの便利なプラグイン - タグ: WordPress, WordPressプラグイン EWWW Image Optimizerのインストール方法 WordPress5. 7では非対応と出てしまったので急遽WordPressのアップデートを行いました。 メニュー　＞　プラグイン　＞　新規追加　より「EWWW Image Optimizer」をインストールし有効化ます。 EWWW Image Optimizerプラグイン配布サイト　 EWWW Image Optimizerの設定 設定　＞　EWWW Image Optimizer を開きます。 「サイトを高速化」「保存スペースを節約... --- ### CSSで線の上に文字を乗せる - Published: 2023-04-18 - Modified: 2023-04-26 - URL: https://webhoric.com/hp/web/css%e3%81%a7%e7%b7%9a%e3%81%ae%e4%b8%8a%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e4%b9%97%e3%81%9b%e3%82%8b/ - カテゴリー: CSS, WEB製作 - タグ: CSS 割とよく見ることのある中央に線が引かれている左端に見出しが置かれているデザインのコーディング手法解説。 border-topで記述すると文字の下に線が重なってしまいますのでひと手間工夫が必要です。 このタイプは大きく分けて2つやり方があります。 線と見出しをそのまま画像で切り出して貼り付ける手法 線をborderで記述して見出しを絶対配置で乗せる手法 線と見出しをそのまま画像で切り出して貼り付ける手法 サイズをあわせて切り出すだけなので、言わずもがな画像が一番ラクです。レスポンシブ対応で複数画像... --- ### Swiperの丸（ページネーション)のデザインカスタマイズの方法 - Published: 2023-04-17 - Modified: 2023-04-18 - URL: https://webhoric.com/hp/web/swiper%e3%81%ae%e4%b8%b8%ef%bc%88%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b/ - カテゴリー: WEB製作 - タグ: Swiper スライドショープラグインのSwiperの丸部分である「ページネーション」のデザインを変更します。 ページネーションは「スライドショーが今何番目のものであるか？」を表示させるためのもので、Swiperではカスタマイズが可能です。 初期状態の場合はページネーションが表示されるだけなのですが、クリックするとそのスライド番号へ飛ばせたりするオプションがあります。 本題である初期の丸デザインはCSSで指定されているためCSSを書き換えることでデザインの変更ができます。 Swiperクラス 最初にページネー... --- ### Swiperのスライド矢印のデザインを変更する - Published: 2023-04-17 - Modified: 2023-04-17 - URL: https://webhoric.com/hp/web/swiper-arrow-desiign/ - カテゴリー: WEB製作 - タグ: Swiper Swiperの矢印デザインを変更するには 矢印にかかれているCSSを上書きして違うデザインにする最初からある矢印はafter疑似要素のCSSで作られているので、この疑似要素を非表示にして新しい画像を背景画像として読み込ませる。もしくは疑似要素を非表示にして画像のhtmlを. swiper-button-next . swiper-button-prevの間に挟む この2通りあります。 矢印を出すSwiperの書き方 SwiperのCSS,JSを読み込ませたらhtml上にjavascriptの記述... --- ### Google mapを埋め込むときのCSSパターン手法 - Published: 2023-04-10 - Modified: 2023-04-12 - URL: https://webhoric.com/hp/web/css/google-mapcss/ - カテゴリー: CSS - タグ: CSS, Googlemap Google mapはiframe呼び出してサイト内に埋め込みますが、単純にiframeで埋め込む以外に加工して埋め込む以外に1処理加えることがほとんどです。 この記事はGoogle mapを埋め込むときの手法を紹介します。 Google mapの埋め込み方法 Googlemapを開いて目的地を検索すると概要欄に「共有」が表示されます。「共有」を押すと埋め込みコードが表示されます。 ブログやWEBサイトに埋め込みするときは「地図を埋め込む」のタブを選択後、「HTMLをコピー」を押すとクリップボー... --- ### Notionテンプレートを使ったコード管理が便利だった - Published: 2023-04-06 - Modified: 2024-10-25 - URL: https://webhoric.com/hp/notion/template/ - カテゴリー: notion 便利だよ！便利だよ！と言われつづけて全く使っていなかったNotionを少しずつ触り始めています。アカウントを作ったときはただのクラウドメモツールかな？ぐらいにしか思ってなかったので放置していたのですが、html,cssのコード管理に使うと便利なことに今更気が付きました。 紹介されたときは指定したメンバー間で共有できるから！という点を押されたので一人で作業している身にとっては要らんかなという思いが強くNotionに手が伸びなかったんですよね。 テンプレートが用意されていることに気が付き、意見が18... --- ### よく使われているスライドショーJSライブラリ - Published: 2023-04-05 - Modified: 2023-04-06 - URL: https://webhoric.com/hp/web/slideshow-js/ - カテゴリー: JavaScript, WEB製作 Slick JS 有料ブログテーマAffingerでも使われているスライドショーライブラリ。基本的なスライドショーのスタイルは押さえてあります。 シンプルにカスタマイズしていけるのが使われている理由かなと感じました。 スワイプブレークポイントごとの設定無限ループサムネイル設定矢印キーのナビゲーションスライドの追加、フィルター自動再生 公式サイトslick - the last carousel you'll ever need ライセンス MITライセンス Swiper 有料ブログテーマSwel... --- ### 枠線で囲むタブCSSデザインのhtmlコーディングで詰む。 - Published: 2023-03-28 - Modified: 2023-03-28 - URL: https://webhoric.com/hp/web/css/css-tab/ - カテゴリー: CSS 枠線で囲むタブCSSデザインのhtmlコーディングで詰む。 タブのCSSデザインが大変だったのでメモ。 文字で説明すると難しいのですが、タブとタブの間をあけて枠線で囲むけれど、タブの下はくっついているように見せるデザインの指定です。 目標デザイン 目標デザイン 「タブの下はくっついているように見せる」のが難関でした。タブの中身をborderで囲むと部分的に線を消すことはできないし、タブ側で囲むとすきまの線が描画できなかったからです。 NGケース 線が入る これの解決策としては、タブの中身のbor... --- ### [JavaScript]スクロールで表示させるボタンブロックをつくる - Published: 2022-07-27 - Modified: 2023-01-26 - URL: https://webhoric.com/hp/js/slick-js-2/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, スライダー 目的 スクロールして画面を下げていくと突然表示させるブロックを作りたい 対応 目標とする要素をgetElementById等で取得して、その要素の高さをgetBoundingClientRectで取得。 console. logでスクロールしていくとどれくらいの高さになっているかわかるので、 目標値の高さがいくつ以上の数値になったときにCSSのdisplayで表示させる分岐を入れる。そのためCSSを読み込んだ時点では非表示にさせるdisplay:noneを書いておく。 //該当部分通過したら表示... --- ### kusanagiで「All-in-One Migration」が実行できない - Published: 2021-05-28 - Modified: 2021-05-28 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/kusanagi%e3%81%a7%e3%80%8call-in-one-migration%e3%80%8d%e3%81%8c%e5%ae%9f%e8%a1%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84/ - カテゴリー: WordPress, 未分類 - タグ: kusanagi, VPS, WordPress 「All-in-One Migration」プラグインをオンにしたら以下のエラーが出た。 All-in-One Migration は /***/wp-content/ai1wm-backups/. htaccess ファイルを作成できません。親フォルダーのパーミッションを変更するか、support@servmask. com までメールでお問い合わせください。 All-in-One Migration は /***/wp-content/ai1wm-backups/web. config ファ... --- ### Advanced Custom Fieldsで管理画面の表示フィールドの順番を入れ替えるやり方 - Published: 2021-03-23 - Modified: 2021-03-23 - URL: https://webhoric.com/hp/wordpress/advanced-custom-fields%e3%81%a7%e7%ae%a1%e7%90%86%e7%94%bb%e9%9d%a2%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%81%ae%e9%a0%86%e7%95%aa%e3%82%92%e5%85%a5%e3%82%8c/ - カテゴリー: WordPress - タグ: WordPress, WordPressプラグイン WordPressプラグイン「Advanced Custom Fields」はカスタムフィールドを拡張するときに利用するプラグイン。 Advanced Custom Fields – WordPress プラグイン | WordPress. org 日本語 記事内容以外で、記事ごとに付け足したい内容を付け足すときに便利なのがカスタムフィールドです。 この「Advanced Custom Fields」は拡張性がありすぎて使い方になれるまでの初期設定がちょっと大変なのですが、 今回はフィールド順番... --- ### 「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方 - Published: 2021-03-23 - Modified: 2023-04-06 - URL: https://webhoric.com/hp/js/slick-js/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, スライダー スライダープラグイン「Slick. js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 状況 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す このときにSlick. jsでスライド対応していた部分はスライドボタンをCSSのabsoluteで位置変更していたことを思い出しました。 そのためマウスカーソルが乗っているときのオプションが用意されているのでは？という結論に達したところカーソル系の... --- ### Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因 - Published: 2021-03-18 - Modified: 2021-03-18 - URL: https://webhoric.com/hp/js/js-display-block/ - カテゴリー: JavaScript - タグ: jQuery Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因です。 trの場合の初期値はblockではなく「table-row」 そのためtrの表示・非表示をする場合、displayを使ってtable-rowとnoneを切り替えるとうまくいきます。 tableで使... --- ### jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ - Published: 2021-03-18 - Modified: 2021-03-18 - URL: https://webhoric.com/hp/js/jqueryui-datepicker2/ - カテゴリー: JavaScript - タグ: jQuery 「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 カスタマイズ 用意されているオプションを利用することでカレンダーをカスタマイズできます。 当月カレンダーに先月、翌月の日付を表示させる 当月カレンダー内の月初と月末に前月... --- ### jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化 - Published: 2021-03-18 - Modified: 2021-03-18 - URL: https://webhoric.com/hp/js/jqueryui-datepicker-2/ - カテゴリー: JavaScript - タグ: jQuery 「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 jQueryUIの設定 Download Builder | jQuery UIよりライブラリファイルをダウンロードします。/download/のページでどのコンポーネン... --- ### mixhostサーバーのWordPress設定方法 - Published: 2021-03-17 - Modified: 2021-03-17 - URL: https://webhoric.com/hp/server/mixhost-wordpress-install/ - カテゴリー: レンタルサーバー レンタルサーバーであるmixhostサーバーを使ったWordPressの設定方法を紹介します。 色々なレンタルサーバーを試してきましたが、今まで使ってきたサーバー速度はなんだったのか？と感じてしまうサーバーのレスポンスの速さにびっくりしました mixhostサーバーの特徴として ・最安値プラン(880円/月)でもかなり早いレスポンス ・SSL化はプロトコル選択をするだけ ・容量がたりなくなったらそのままグレードをあげられる ・おためし期間はクレジットカード登録なしで10日試せる ・出会い系サイト... --- ### 【WordPress】ログインしているかどうかチェックするphpの書き方 - Published: 2021-03-17 - Modified: 2021-03-17 - URL: https://webhoric.com/hp/wordpress/loginchk/ - カテゴリー: WordPress このブログはWordPressを使っている。 WordPressではログインしているユーザーのみに表示させたいものがあった場合などに使える関数がある。 この場合のテンプレート関数の書き方。■設定環境 WordPressバージョン 4. 2. 2 is_user_logged_inを使用する方法とget_currentuserinfoを使う方法がある。 ログインしているユーザーのみ表示させたりしなかったりすることができるので 会員制コンテンツでのWordPressの使用などが考えられる。 個人ブロ... --- ### WordPressのphpにjQueryを使用して動かす - Published: 2021-03-07 - Modified: 2021-03-07 - URL: https://webhoric.com/hp/wordpress/wp-php-jquery/ - カテゴリー: WordPress, カスタマイズ - タグ: jQuery, スライド 前提 通常のjQueryの記述は以下の$(function~ もしくは$(document). ready(function~~で記述しますが、 WordPressの場合には書き方が変わります。 $(function{ // 処理 }); もしくは $(document). ready(function{ //処理 }); WordPressでのjQueryの書き方 jQuery(function($){〜〜　で書き始める。 jQuery(function($){ //処理 $('. entry... --- ### スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える - Published: 2021-02-25 - Modified: 2023-04-06 - URL: https://webhoric.com/hp/js/slickjs-custom-dots/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, スライダー 「Slick. js」の使い方・カスタマイズ方法 「Slick. js」の使い方・カスタマイズ方法でよくある事例のメモです。 スライドのドットの大きさを変更する CSSで調整できます。 疑似要素の中身にcontent: "•";を使ってスライダードットを再現しています。スライドのドットの大きさはfont-sizeで変化します。191行目の. slick-dots li button:beforeのfont-sizeを変更します。 . slick-dots li button:before { f... --- ### areaタグをレスポンシブ対応させる方法 - Published: 2021-02-18 - Modified: 2021-02-18 - URL: https://webhoric.com/hp/js/area-responsive/ - カテゴリー: JavaScript - タグ: jQuery 画像内にイメージマップをつくってリンクをつけることができるareaタグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 areaタグをレスポンシブ対応させる方法 結論 ・javascriptライブラリ「jQuery-rwdImageMaps」で対応可能 CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。 ジェネレーターでイメージマップを作成後、タグに使うimgに usemap="#image-map"を書いてrwdIma... --- ### position: stickyが効かない、IE11対応 - Published: 2021-02-17 - Modified: 2021-02-17 - URL: https://webhoric.com/hp/web/css/position-sticky/ - カテゴリー: CSS - タグ: CSS, リンク position: stickyが効かない、IE11対応 結論 ・親要素全てのoverflow属性値をvisibleに変更する ・IE11はそもそも「position: sticky」が効かないのでstickyfill. jsのライブラリを使用 position: stickyが効かない場合の解決方法【CSS】 - termina. ioを参照した。 親要素全てのoverflow属性値をvisibleに変更する。 この状態になっているかどうか？はディベロッパーツールのコンソールを開き $(". ... --- ### disabledにしたチェックボックスのデザインを変更する方法 - Published: 2021-02-16 - Modified: 2021-02-16 - URL: https://webhoric.com/hp/web/css/disabled-checkbox/ - カテゴリー: CSS - タグ: CSS, リンク disabledにしたチェックボックスのデザインを変更する方法 結論 ・disbaledを適応させたときのチェックボックスのデザインはブラウザに依存するため背景色を変えたりチェックマークを変えたりすることは不可能。 ・CSSの「appearance: none;」を使って　チェックボックス自体を見えなくしてから　before,after要素でチェックボックスのデザインを指定することは可能。 ・「appearance: none;」が効かないIE11ではこの手法は使えない。 「appearance... --- ### 右クリック禁止処理サイトでhtmlソースを確認する方法 - Published: 2021-02-13 - Modified: 2021-02-13 - URL: https://webhoric.com/hp/web/css/html-source-view/ - カテゴリー: CSS - タグ: CSS, リンク 右クリック禁止処理サイトでhtmlソースを確認する方法 WEBサイト修正依頼が来た時に,「右クリック禁止処理」がされているサイトほど嫌なものはないです。 手間が何重にも増えますしね。 右クリック禁止処理サイトでもhtmlソースを見ることはできます。 Google Chromeを使います。 結論 ・Google Chromeのディベロッパーツールを使用する ・URLの頭に「view-source:」をつけて確認する このどちらかを使います。 ・Google Chromeのディベロッパーツールを使用... --- ### IE11でテーブルの枠線が消えるバグの対処方法 - Published: 2021-02-03 - Modified: 2021-02-03 - URL: https://webhoric.com/hp/web/css/ie11-table-border/ - カテゴリー: CSS - タグ: CSS3, IE11, Web制作 IE11でテーブルの枠線が消える 久しぶりにIE11でハマったのでメモ。 SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。 原因としては ・tdタグに背景色をつけていた ・tdタグにposition:relativeをつけていた この2点。 tdの背景色がtdにつけた枠線の上から重なってしまい色が上書きされていた。 開発者ツールでbackgroundの要素のチェックを外すと枠線色は表示される。 サンプルコード この場合、tdにpositi... --- ### ヘッダーの高さが隠れて困る！ヘッダーが追尾するメニューのアンカーリンク用CSS - Published: 2021-01-29 - Modified: 2023-04-11 - URL: https://webhoric.com/hp/web/css/tuibi-header-link/ - カテゴリー: CSS - タグ: CSS, リンク ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なってテキストが見えていない... 飛ばした先が意図せず隠れてしまっている！！　ということが起こります。 よくあるメニューの作り方ではありますが、地味にめちゃくちゃ調整がめんどくさいわけです。 サンプルコード See the Pen ヘッダーが追尾するメニューの... --- ### PhotoshopでのSVGファイルの作り方等、SVGのまとめ - Published: 2021-01-24 - Modified: 2021-01-24 - URL: https://webhoric.com/hp/photoshop/svg/ - カテゴリー: Photoshop - タグ: PhotoshopCC, SVG svg(エスブイジー)は拡大・縮小に対応した画像ファイル形式のこと。 スマホ、タブレットの普及により近年、幅広いブラウザサイズに対応しなければならず SVG形式の画像を良く見かけますね。特にロゴの画像データはよく見かけます。 多種類の解像度を良いしないといけない場合にSVGが重宝します。 PhotoshopでSVGを書き出す方法 書き出す画像をつくったら メニュ− ＞　ファイル ＞　書き出し ＞　書き出し形式を開く。 ファイル形式「SVG」に変更して書き出しを選択。 ファイル形式「SVG」に変更... --- ### jQueryでアコーディオン/ボタンをアニメーション回転させる - Published: 2021-01-22 - Modified: 2021-01-22 - URL: https://webhoric.com/hp/js/jquery-accordion-menu-anim/ - カテゴリー: JavaScript - タグ: jQuery jQueryでアコーディオン/ボタンをアニメーション回転させる 基本的にはjQueryでアコーディオン（クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメーションはさせる場合には「transition」の指定が必要。 メニュー親 ▲ メニュー子A メニュー子B CSS . sub{ display:none; } . aco{ width:400px; padding:20px; min... --- ### jQueryでアコーディオン（クリック開閉メニュー)の書き方 - Published: 2021-01-06 - Modified: 2024-11-13 - URL: https://webhoric.com/hp/js/jquery-accordion-menu/ - カテゴリー: JavaScript - タグ: jQuery jQueryでアコーディオン（クリック開閉メニュー) slideToggle（）を使って実装するのがかんたん。hover,clickをEventListenerにしてslideToggle（）を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かないのでボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。 Q 質問▲ A 回答 CSS . faq_oya h3{ background... --- ### JavascriptでURLパラメータを取得し条件文を作るやり方 - Published: 2021-01-01 - Modified: 2021-01-01 - URL: https://webhoric.com/hp/js/searchparams-url/ - カテゴリー: JavaScript - タグ: Javascript, プログラム 「?」を使ったif文の書き方-三項演算子 JavascriptでURLパラメータを取得し条件文を作るやり方 FAQページへリンクさせることがよくありますが、FAQがすべてアコーディオンになっていて ユーザーがクリックしないとFAQ内容が表示されないページ構成のとき、引数をつけてJavascriptで引数があるときに条件分岐させることが可能です。 ※searchParamsはIE11だと無効な点に注意 CSS . faq_answer { display: none; margin-top: 10px; } . faq_list{ bor... --- ### 【CSS】リストタグに点下線を敷く実践的な使い方 - Published: 2020-12-27 - Modified: 2020-12-27 - URL: https://webhoric.com/hp/web/css/list_underline/ - カテゴリー: CSS - タグ: CSS 久しぶりにつまずいたのでメモ。 before,afterの疑似要素に下線を付けるのではなくspanタグで囲って下線を付ける。 下線の位置を調整するなら疑似要素を使うしかないのですが、before,afterの疑似要素の場合はwidth,height指定しないとだめなときがあるので。 【CSS】リストタグに点下線を敷く実践的な使い方 spanタグからはじめることで、リストの頭につける「リスト項目要素のマーカー（list-style-type）」には下線が付きません。 html A. 点線の下線をつ... --- ### ギャラリー - Published: 2020-11-19 - Modified: 2020-11-19 - URL: https://webhoric.com/hp/web/mygallary/ - カテゴリー: WEB製作 このページはダウンロード禁止です。ご協力ください。 バナー チラシ --- ### さくらドメインコンパネにWPXレンタルサーバーのネームサーバーを設定する方法 - Published: 2020-09-29 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/wpx-server-ns/ - カテゴリー: 未分類 - タグ: Web制作, WPXサーバー さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法 WordPressの引っ越しをする時に必要となるネームサーバーの設定方法をすっかりわすれてしまっていてちょっとハマってしまったので 記載しておきます。 やり方はわかっていたのに書き込むページが見つけられなかっただけなのですが、こういうことはよくあります。 基本はサーバー会社のマニュアルを参照するとだいたい書かれていますので、WordPressの引っ越しをするときには先にマニュアルを良く見ておくのが大前提です。 今回はWordPressに特化したサーバー会社のWPXレンタルサーバーへの引っ越しです... --- ### お名前.comのVPSでのWordPress移行作業 - Published: 2020-08-25 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/vps-wordpress-setting/ - カテゴリー: 未分類 - タグ: VPS, Web制作, お名前.com, レンタルサーバー お名前.comのVPSでのWordPress移行作業 お名前. comのVPS(KVM)プランでは「CentOS+PHP+MySQL+WordPress＋nginx」の設定がテンプレート化されています。 WordPressサイトをVPSで動かすなら、VPS周りの設定が楽できるのでかなりサボれますよ。おすすめです。 ↓お名前．comのレンタルサーバーはこちらから↓ お名前. comのVPSでのWordPress移行作業 ※VPSにはすでにWordPressサイトが一つインストール済みであることが前提。 名称vpstestは全て仮名。 データベース移行... --- ### お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策 - Published: 2020-08-24 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/onamae-vps-kvm/ - カテゴリー: 未分類 - タグ: Web制作, お名前.com, レンタルサーバー お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策 お名前. comのVPS(KVM)プランを半年ほど利用しました。 さくらサーバー（共有プラン）→エックスサーバー→シックスコアサーバー→さくらVPS8Gとスペックをあげてきまして ようやく値段に見合ったレスポンスが出せるプランに巡り会えました。少々お値段はりますが投資分の元は取れたと確信しています。 専用サーバーのレンタルやアマゾンのAWS、ほかのクラウドサービスも検討しましたがサーバー代金が桁外れになり予算オーバーが怖くて できるかぎり金額の下げられ、VPSのものを探していました。 そのとき見... --- ### WordPress 5.5 メジャーアップデート版リリース変更点まとめ - Published: 2020-08-18 - Modified: 2020-08-18 - URL: https://webhoric.com/hp/wordpress/wordpress-5-5/ - カテゴリー: WordPress - タグ: WordPress 5.5 WordPress 5. 5 メジャーアップデート版リリース　Eckstine WordPress 5. 5がリリースされました。 WordPress 5. 5の名前は「Eckstine」です。 ジャズボーカリスト「Billy Eckstin（ビリー・エクスタイン）」から命名 主な変更点 ・遅延読み込み (lazy loading)の導入 ・デフォルトで XML サイトマップが含まれるように変更 ・プラグインとテーマの自動更新 ・ブロックエディタの新機能（ブロックカテゴリ変更、ブロックパターン導... --- ### Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ - Published: 2020-08-09 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/nginxphp-fpm-502-bad-gateway/ - カテゴリー: 未分類 - タグ: Nginx, PHP Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ さくらのVPS8G内にてNginxを利用しているWordpressのサイトがあります。 このサイトで、502 Bad gatewayが表示されてしまいWEBサイトが機能しなくなったときの個人メモです。 CloudFlareを利用していたので最初にネームサーバーを書き換えてCloudFlareの利用を停止。 続いてエラーログを調べる。 ・WordPressサイトのエラーログの内容は以下 9864#0: *76478 connect to unix:/tmp/php. socket failed (... --- ### ウェブ作成時にMacで画面上の色を拾って16進法でコピーする方法 - Published: 2020-08-07 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/color-picker-for-mac/ - カテゴリー: 未分類 - タグ: Web制作, カラーピッカー ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法 ウェブページ作成をするときに「この色が欲しいが16進法の色の数値がわからない」ケースが多々あります。 この時利用されるのがカラーピッカーアプリです。 昔はFireworksを使っていたためすべてをまかなっていたのですが、 PCを乗り換えて使えなくなったのでほかのツールを探しました。 オススメ順で記載します。 面倒くさがりの私のイチオシはColorZilla。 2クリック数でクリップボードへのコピーが完了する点が非常に良いです。 ColorZilla ColorZilla :: Add-ons f... --- ### 「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン - Published: 2020-08-07 - Modified: 2021-03-23 - URL: https://webhoric.com/hp/js/slickjs/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, スライダー Slick. js slickは定番のJavaScriptスライダープラグインです。 jQueryで動作します。 公式サイトでのデモソースパターンとネットでの拡張サンプルコード事例が豊富なので 比較的使いやすいスライダープラグインだと感じます。 slick ライセンス MITライセンス/個人無料・商用無料 slickはjQueryを利用します。 slick デモサンプルURL/公式ドキュメント slick - the last carousel you'll ever need slick. j... --- ### php-fpm+nginxでload averageが上がった時の対処メモ - Published: 2020-08-02 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/php-fpmnginx-load-average/ - カテゴリー: 未分類 - タグ: Nginx, PHP php-fpm+nginxでload averageが上がった時の対処メモ php-fpm+nginx+WordPressで運用しているVPSを使ったサイトでload averageが90を超えていたのでどうしたものかと、調べていたところ ビッタリの現象の記録があるページを見つけた。 nginx+php-fpm(5. 5)+fastcgi+OPcacheでWordpressが重い - Qiita php -vでバージョン確認。 with Zend OPcache v7. 0. 4-dev, Copyright (c) 1999-2015, by Zend Technol... --- ### [Javascript]「?」を使ったif文の書き方-三項演算子 - Published: 2020-08-01 - Modified: 2021-01-01 - URL: https://webhoric.com/hp/js/javascript-conditional-operator/ - カテゴリー: JavaScript - タグ: Javascript, プログラム 「?」を使ったif文の書き方-三項演算子 たまにjavascriptのプログラムを見ていると突然「? 」が出てきたりします。 知っていれば問題はないのですが、知らないとつまずきます。 「? 」は条件文で「三項演算子」と呼ばれるもの。 phpやCでも見られます。 ■三項演算子　書き方 条件式 ? 式1 : 式2 TRUEであれば式1、FALSEであれば式2を返します。 以下の条件文があったとします。 var a = true; if (a) { var b= 'aはtrue'; } else { var b= 'aはfalse'; } a... --- ### 「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方 - Published: 2020-07-23 - Modified: 2021-03-23 - URL: https://webhoric.com/hp/js/slickjs-thumbnail/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, スライダー 案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、 「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい1枚の画像のケースがありえるの？とツッコミしたくなりました。 スライダーを使うのだから複数枚画像は用意するでしょう！というのは製作者側の勝手な意見なのでしょうかねえ。 さて、Slider Proを見直したところ、矢印部分や背景にCSSで編集を加えていたため1枚画像の場合に矢印が表示されてしまう事態となってスライダーをSlickへ変更しまし... --- ### スライドJSプラグイン「Slider Pro」の実践的な使い方 - Published: 2020-07-21 - Modified: 2020-07-23 - URL: https://webhoric.com/hp/js/slider-pro/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, スライダー JavaScriptのスライドプラグインはたくさん種類がありますが、 その中でも設定項目の多い「Slider Pro」の使い方です。 Slider Proの良いところとしては ・ブレイクポイントを使ったレスポンシブ対応 ・スワイプ検知 ・サムネイルの大きさ指定 これらの項目が初期状態から設定されていることです。 Slider ProはjQueryを利用します。 Slider Pro ライセンス MITライセンス/個人無料・商用無料 Slider Pro デモサンプルURL/公式ドキュメント Sl... --- ### Ktai styleで絵文字を入力する方法 - Published: 2020-06-26 - Modified: 2020-06-26 - URL: https://webhoric.com/hp/wordpress/ktai-style-emozi/ - カテゴリー: WordPress - タグ: ktai style, WordPress 携帯サイトっぽく見せるためには絵文字は必須です。 携帯サイト向けサイトをつくるのに便利なWordPressのプラグインKtai Style を使用した場合に絵文字を使いたい！ ときには 投稿ページに ＜img localsrc=”NNN” /＞ と記入します。NNNに絵文字ナンバーが入ります。 ＮＮＮはＫＤＤＩの絵文字コード表を参照。 Ktai Styleでは携帯キャリアごとに表示の絵文字を判別表示させるようですが、 絵文字入力はimgタグを使用しないといけないようです。 ▼参考 Ktai St... --- ### Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips個人的補足 - Published: 2020-06-24 - Modified: 2020-06-24 - URL: https://webhoric.com/hp/seo/google-analytics-tips/ - カテゴリー: SEO 「Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips！ で迷った点があったので備忘録です。 サイト内検索レポート 表示場所 コンテンツ　＞　サイト内検索 設定 Analytics 設定 > プロファイル設定 サイト プロファイル情報を編集します。 デフォルトでは「サイト内検索 サイト内検索レポートを無効にする」となっています。 サイト内検索のクエリパラメータがわからない場合は、検索フォームで検索語を入力して検索してみる。 URLに表示された名前がクエリパラ... --- ### WordPressのHTMLエディタを使うとPタグが自動で入るのを無効化する - Published: 2020-06-24 - Modified: 2020-06-24 - URL: https://webhoric.com/hp/wordpress/html-editor-p/ - カテゴリー: WordPress, カスタマイズ WordPressのエディタにはビジュアルモードとHTMLモードの2種類がありますが、 HTMLモードで改行を入れたテキストに対して、が自動補完されます。 Pタグがあることで妙なマークアップになることを解消することが必要な場合があるかもしれません。 ☆Pタグが自動で入るのを無効化する方法 wp-includes/default-filters. phpをコメントアウト編集します。 add_filter('the_content', 'wpautop'); ↓ ↓ ↓ //add_filter('... --- ### WordPressでのSEO対策パーマリンク設定 - Published: 2020-06-24 - Modified: 2020-06-24 - URL: https://webhoric.com/hp/wordpress/seo-permalinks/ - カテゴリー: WordPress - タグ: WordPress, パーマリンク SEO対策として静的URLにすると良いといわれています。 静的URLと対象に動的URLがあります。 例1 blog. livegoods. net/archives/test. html 例2 blog. livegoods. net? p=123 例2のようなURLを動的URLといい、「? p=123」が動的パラメータと呼ばれます。 動的URLは検索エンジンと相性が悪く、インデックス化の対象にはなるが、動的パラメータがURLに多く含まれていると 検索エンジンが嫌い、URLが登録されない場合があ... --- ### Google Sitemap Generator for WordPressをモバイルサイトマップに対応させる修正方法 - Published: 2020-06-24 - Modified: 2020-06-24 - URL: https://webhoric.com/hp/wordpress/google-sitemap-generator/ - カテゴリー: WordPress - タグ: Google Sitemap Generator for WordPress, WordPress Google Sitemap Generator 3. 2で検証しました。 モバイル サイトマップの作成 - ウェブマスター/サイト所有者 ヘルプに仕様をあわせます。 xmlns:mobile="http://www. google. com/schemas/sitemap-mobile/1. 0と が足りていませんので、追加修正します。 Google Sitemap Generatorのsitemap-core. php 1672行目　 $this->AddElement(new Google... --- ### 【WordPress】get_post_type()を使って投稿タイプを調べる - Published: 2020-06-02 - Modified: 2023-05-21 - URL: https://webhoric.com/hp/wordpress/get_post_type/ - カテゴリー: WordPress - タグ: WordPress, 関数 【WordPress】get_post_typeを使って投稿タイプを調べる 【WordPress】get_post_typeを使って投稿タイプを調べる方法 get_post_typeを使うと投稿タイプを調べることができます。試しにheader. phpに を買いてページを開いてみると違いがわかります。戻ってくる値は以下になります。 'post' - 投稿 'page' - 固定ページ 'attachment' - 添付ファイル 'revision' - リビジョン 'nav_menu_item'... --- ### Conoha VPSを使いLaravel環境を手っ取り早く10分で構築する方法 - Published: 2020-04-09 - Modified: 2021-02-18 - URL: https://webhoric.com/hp/php/conoha-vps-laravel/ - カテゴリー: PHP - タグ: Laravel, PHP Conoha VPSのLaravel環境の開発を作ります。 ConohaVPSにはLaravel環境構築のテンプレートが用意されているので サーバーを立ち上げると即Laravelが使えるようになります。（作業ユーザーは別途作成する必要があります） LaravelテンプレートにはMySQL(MariaDB)も入っています。 プログラミングを勉強したいのに、環境構築に無駄な時間を取られてモチベーションが続かない人は ConohaのVPSにあるテンプレートの利用をおすすめします。 プログラミングを勉強... --- ### フローティングバナーをCSS作る【Web制作】 - Published: 2020-04-08 - Modified: 2021-02-08 - URL: https://webhoric.com/hp/web/css/css-floating-banner/ - カテゴリー: CSS - タグ: CSS, Web制作 スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。 ポイントとしては ・position: fixed,bottom:0;の指定 ・z-indexの指定 の設定です。 position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。 z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。 z-indexは大きい値が上に表示... --- ### WordPressのテーマを削除する方法 - Published: 2020-03-27 - Modified: 2020-03-27 - URL: https://webhoric.com/hp/wordpress/theme-remove/ - カテゴリー: WordPress - タグ: テーマ WordPressのテーマを色々試している内に、themeフォルダがふえすぎてしまって管理しきれなくなることがよくあります。 この記事では「WordPressのテーマを削除する方法」について記載します。 仕様 2020年3月27日の内容です。 WordPressバージョン 5. 3. 2　で検証 WordPressのテーマを削除する方法 管理画面メニューから「テーマ」を選択します。 消したいテーマを選択します。 右下に「削除」のボタンが表示されます。 ウィンドウが開きます。 「本当にこのテーマを... --- ### お名前VPSの解約方法。日割りされず翌月以降の末日までお金がかかるので解約時は早めに処理すること！ - Published: 2020-03-27 - Modified: 2020-03-27 - URL: https://webhoric.com/hp/server/onamae-vps-cancel/ - カテゴリー: レンタルサーバー - タグ: Google Sitemap Generator for WordPress, VPS, お名前.com しばらく放置していたサーバーの整理を始めています。 手入れしなくなって費用がかさんでいたのでサーバー移転を行いました。 そのときお名前VPSの解約フォームが全然見つけられなかったのでメモとして記載します。 サーバー移転やサーバー解約をする際は必ずバックアップを取りましょう 2020年3月27日現在の内容です。 最初にお名前のダッシュボードへログインします。 契約しているサーバープランを選択。 ステータスにある「解約」ボタンを押します 確認文「サーバー上に構築されたデータはあなたの貴重な財産です。... --- ### 超簡単！WordPressの簡単移行ができるConoha Wingサーバー - Published: 2020-02-18 - Modified: 2023-04-10 - URL: https://webhoric.com/hp/wordpress/wordpress-ikou-conoha-wing/ - カテゴリー: WordPress - タグ: サーバー, 引っ越し WordPressの専用レンタルサーバーはいくつかあるのですが、その中でもWordPressの簡単移行ができるConoha Wingサーバーをご存知ですか？WordPressのサイトをサーバーごと引っ越すのはかなり面倒くさいです。 その面倒くさい手順を解消できるプラグインもあるのですが、いまいち信頼度が薄めです。しかしConoha Wingサーバーに搭載されているWordPressの簡単移行ツールは非常に楽でネームサーバーの反映さえサクッと終われば数時間でサーバーの引っ越しが可能になります。 ま... --- ### WordPressのカテゴリー説明でhtmlを使えるようにする方法 - Published: 2020-01-29 - Modified: 2020-01-29 - URL: https://webhoric.com/hp/wordpress/cat-html/ - カテゴリー: WordPress - タグ: カテゴリー SEOでのサイト構成を考える際にカテゴリーページ（アーカイブページ）を利用したい！ というケースがあります。 この場合、管理画面のカテゴリー編集ページより細かく説明文テキストを入力できますが、 一つ困ったことがあります。 それは初期状態のままだとカテゴリー説明にhtmlが使えない！ という点です。 しかし、カテゴリー説明にhtmlを使用可能にする方法がありとても簡単ですので、 カテゴリー説明文にhtmlを書き込みたい場合にはWordPressの基本設定として覚えておくと良いでしょう。 カテゴリー... --- ### 【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法 - Published: 2019-12-26 - Modified: 2023-04-17 - URL: https://webhoric.com/hp/web/swiper1/ - カテゴリー: JavaScript, WEB製作 - タグ: Javascript, Swiper, Web制作 数あるJavaScriptスライダープラグインの中で、 ・bxslider. js ・slick. js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマホOKでタッチやスワイプにも対応 ・オプションがありすぎてちょっと面倒 とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。 デモを見るだけでも大変です。IE11... --- ### jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える - Published: 2019-12-26 - Modified: 2022-07-29 - URL: https://webhoric.com/hp/js/jquery-next-prev-2/ - カテゴリー: JavaScript - タグ: Javascript, jQuery, Web制作 アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggleです。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggleとともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回はそのサンプルを紹介します。 slideToggleのリファレンス 結論 SlideToggleは便利だが拡張機能をつける（アコーディオンの開閉にあわせて画像を変えるなど）するときにつまずくのでSlideUp,SlideDownに分けて処理... --- ### コンタクトフォームで「メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。」のエラー - Published: 2019-12-13 - Modified: 2019-12-13 - URL: https://webhoric.com/hp/wordpress/contactform-error/ - カテゴリー: WordPress - タグ: WordPress5.3, コンタクトフォーム WordPressのメールプラグイン「コンタクトフォーム7」で客先からメールの送信ができなくなっていると苦情を受けてしまいました。 いままで使えていたはずなのにメールを送ると「メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。」の表示がでて メールが送れなくなっているとのこと。 フォームを送信すると「メッセージの送信に失敗しました」というエラーメッセージが表示されます。何が悪いのですか? | Contact Form 7 原因 ・コンタクト... --- ### WordPressのリカバリーモード - Published: 2019-11-29 - Modified: 2019-11-29 - URL: https://webhoric.com/hp/wordpress/recoverymode/ - カテゴリー: WordPress WordPress 5. 2から「リカバリーモード」が追加されています。 WordPressのテーマやプラグインにエラーがあった場合、リカバリーモードに入り異常状態をメールでお知らせしてくれる機能です。 「リカバリーモード」とは 致命的なエラーが生じたテーマ・プラグインを一時停止して WordPressの管理者が正常にダッシュボードへログインできるようにする機能のこと。 「リカバリーモード」時はダッシュボードへログインができるように メール内に期限付きURLが発行されます。 「リカバリーモード」... --- ### 「サイトに重大なエラーがありました」の回避方法 - Published: 2019-11-17 - Modified: 2021-02-13 - URL: https://webhoric.com/hp/wordpress/critical-site-error/ - カテゴリー: WordPress - タグ: WordPress5.3 「サイトに重大なエラーがありました」の回避方法 WordPressを運用していると上記のように「サイトに重大なエラーがありました」と表示がでるときがあります。 以前はこの表示はなかったように感じますが、どこかのバージョンからこの「サイトに重大なエラーがありました」の表示に切り替わったようです。 私がこの表示を見たのは「PHPエラー」が生じたときに出ました。 そのときにはPHPの構文エラーを修正したら正常な画面に戻りました。 WordPressにはデバックモード（WP_DEBUG）がありますので、... --- ### 『Color Admin Posts』投稿状態に色を付けられる地味に便利なWordPressプラグイン - Published: 2019-11-15 - Modified: 2021-02-08 - URL: https://webhoric.com/hp/plugin/color-admin-posts-2/ - カテゴリー: WordPressの便利なプラグイン - タグ: WordPressプラグイン 『Color Admin Posts』投稿状態に色を付けられる地味に便利なWordPressプラグイン 地味に便利な『Color Admin Posts』 WordPressの記事が増えていくと、どの記事がどの状態なのかわかりにくくなっていきます。 特に予約投稿をめちゃくちゃ使う人にとっては余計わかりにくいですよね。 そんなときに利用したいWordPressプラグインが『Color Admin Posts』です。 機能は簡単！投稿状態の色を表示させるだけ この『Color Admin Posts... --- ### WordPress 5.3 メジャーアップデート版リリース - Published: 2019-11-14 - Modified: 2019-11-14 - URL: https://webhoric.com/hp/wordpress/wordpress-5-3/ - カテゴリー: WordPress - タグ: WordPress5.3 WordPress 5. 3 メジャーアップデート版リリース WordPress 5. 3リリース ブロックエディターの改善がされ大きく投稿画面のエディタの印象が変わりました。 また新デフォルトテーマ「Twenty Twenty」が追加されました。 ログインページのパスワードに目玉のボタンが付きました。 目玉アイコンを押すことで入力したパスワードが見えるようになります。 WP Multibyte PatchはWordPress5. 0から含まれなくなりましたので 日本語で使用する際はプラグインの... --- ### メディアクエリ(Media Queries)が効かないときに確認したいこと - Published: 2019-11-08 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/web/css/mediaquery/ - カテゴリー: CSS - タグ: CSS3, Web制作 メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため... --- ### WordPressの自作ショートコードに引数をわたす方法を攻略！ - Published: 2019-09-04 - Modified: 2019-09-04 - URL: https://webhoric.com/hp/wordpress%e5%88%9d%e5%bf%83%e8%80%85%e8%ac%9b%e5%ba%a7/shortcode/ - カテゴリー: WordPress初心者講座 - タグ: CSS 管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法 WordPressのショートコードに引数を与えられるのは知らなかった！！ WordPresｓで記事作成をするときに、同じことをほかの投稿記事でも使い回ししたいときにはショートコードを使うととても便利です。 なぜなら「1箇所で管理」できるからです。 同じ内容を10記事に書いていた場合、もしも数カ月後に該当箇所を修正することになったら 10記事を修正するだけで済みますが、それが100記事だったら・・・サイトが大きくなって1000記事あったら・・・・ たとえコピペで貼り付けて修正するとしたとしも、一つ... --- ### スクロールしたらCSS3のグラフがアニメーションするようにする方法 - Published: 2019-08-14 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/web/css/scrolltrigger/ - カテゴリー: CSS - タグ: CSS3, Javascript, Web制作, グラフ スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれ... --- ### 【Chart.js】グラフを簡単に作れるJavaScriptライブラリ - Published: 2019-08-05 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/js/chartjs/ - カテゴリー: JavaScript - タグ: Javascript, Web制作, グラフ Chart. jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか？ ・どんな数値・メモリを入れていくか？ と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるときにアニメーションするのもポイントが高い点です。 グラフがアニメーションするとWEBページとしての見... --- ### 【Photoshop】テキストに下線を付けたい！テキストツールを使って方法が簡単！ - Published: 2019-07-17 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/photoshop/photoshop-underline/ - カテゴリー: Photoshop - タグ: PhotoshopCC Photoshopでテキストに下線をつける方法 PhotoShopでテキストに下線をつけるには 「テキストツール」の下線のボタンを押すだけです。 テキストツールを選択して文字を入力します。 メニューのウィンドウ ＞ 文字を選択して文字ウィンドウを表示します。 下線を追加したい文字レイヤー内の文字を選択。 文字ウィンドウにある「下線追加ボタン」を押します。 ちなみに縦書きの場合には左側へ線が追加されます。 ただしこのテキストツールをつかって下線を加える方法は 『テキストと下線が同じ色になる』という... --- ### 【jQuery】「next()」「prev()」で要素の取得して画像を変更する。 - Published: 2019-07-11 - Modified: 2021-02-06 - URL: https://webhoric.com/hp/js/jquery-next-prev/ - カテゴリー: JavaScript - タグ: Javascript, jQuery, Web制作 JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい！」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利で... --- ### WordPressにstyle.css以外の自作cssを追加したいときに試す方法を攻略！ - Published: 2019-05-07 - Modified: 2021-02-07 - URL: https://webhoric.com/hp/wordpress/wordpress-other-style-css/ - カテゴリー: WordPress - タグ: CSS 管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法 WordPressのCSSを編集していて自作のCSSや、他のライブラリのCSSを追加してWordPressをカスタマイズしたい！ということがあります。 この記事では【WordPressにstyle. css以外の自作cssを追加したいときに試す方法】をご紹介していきます。 復習：WordPressのCSSは「style. css」 WordPressテーマのスタイルシートは各テーマのフォルダにある「style. css」に記述されています。 スタイルシートを書き換える方法 追加CSS 一つは管理... --- ### 【Web制作】IE11でFlexboxが横並びにならなくてハマる - Published: 2019-04-12 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/web/flexbox1-2/ - カテゴリー: WEB製作 - タグ: CSS, Flexbox, Web制作 IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました... 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスに... --- ### 【WordPress】使っているサーバーのPHP，MySQLのバージョンを確認する方法 - Published: 2018-10-25 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/web/php-version/ - カテゴリー: WEB製作 - タグ: WordPress 「WordPress」を使っているときに、PHP,MySQLのバージョン情報を知りたいときがあります。 調べる方法は色々ありまして、一番カンタンなWordPressプラグインを使った方法からご紹介します。 プラグイン「SERVER INFORMATION」をインストールする メニュー ＞ プラグイン　＞新規追加を押します。 検索フォームに「server info」を入力して「サーバー情報」のプラグインをインストールして 「今すぐインストール」のボタンを押します。 ボタンの表示が「有効化」に変わっ... --- ### 【WordPress】「AFFINGERタグ管理マネージャー2」を使っていてcrawl-66-249-79-112.googlebot.comでハマる。 - Published: 2018-10-24 - Modified: 2020-07-12 - URL: https://webhoric.com/hp/web/revive-old-post-2/ - カテゴリー: WEB製作 - タグ: WordPress クリック率計測でログのcrawl-66-249-79-112. googlebot. comでハマる WordPressテーマでAFFINGERを使っているのですが、AFFINGERの便利なプラグインに「AFFINGERタグ管理マネージャー2」というプラグインがあります。 「AFFINGERタグ管理マネージャー2」を使うと、WordPressショートコードで記事内容を一括管理できます。 アフィリエイト向けで記事作成をしている場合に、同じ内容の文章を10，20記事と書いているとき、緊急で修正しない... --- ### サイトマップ - Published: 2018-10-22 - Modified: 2018-10-22 - URL: https://webhoric.com/hp/%e6%9c%aa%e5%88%86%e9%a1%9e/sitemap/ - カテゴリー: 未分類 --- ### WordPress管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法 - Published: 2014-07-18 - Modified: 2014-07-18 - URL: https://webhoric.com/hp/plugin/mozibake-icon/ - カテゴリー: WordPressの便利なプラグイン, WordPress初心者講座 - タグ: TinyMCE Advanced, 文字化け 管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法 突然管理画面内のアイコンが文字化けするときがあります。 場所をおぼえている項目であれば、そのまま使い続けることが可能ですが、TinyMCE Advanced などのツールプラグインの場合は 非常に困り作業に影響がでます。 アイコンが文字化けしたときの対処方法です。 管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法 原因の多くは『WP Multibyte Patch』のアップデートで改善できます。 管理画面の画面上に表示されているツールバーにある... --- ### 「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の表示が出たときの解決方法（プラグイン更新中に不具合が起こった時の対処) - Published: 2014-06-10 - Modified: 2014-06-10 - URL: https://webhoric.com/hp/wordpress/plugin-accident/ - カテゴリー: WordPress, WordPressの便利なプラグイン - タグ: WordPress, WordPressプラグイン プラグイン更新中にリロードしてしまったり画面を戻してしまったりした場合に、 不具合が起こりメンテナンスモードに入ってしまい、「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の表示がでる場合があります。(旧予定に基づいたメンテナンスを行っているためしばらくの間ご利用できません。少し間をおいて再度確認してください。） プラグイン更新中にブラウザの読み込みを中止した場合などに起こります。 更新時にメンテナンスモードに移行しているためこの表示がされます。 解決方法 Wordpressを置... --- ### All in One SEO Packに脆弱性が発覚。使っていたら2.1.6へバージョンアップしよう - Published: 2014-06-03 - Modified: 2014-06-03 - URL: https://webhoric.com/hp/plugin/all-in-one-seo-pack2-1-6/ - カテゴリー: WordPressの便利なプラグイン - タグ: All in One SEO Pack, SEO, WordPressプラグイン All in One SEO Packに脆弱性が発覚。使っていたら2.1.6へバージョンアップしよう WordPressのSEO対策プラグインに脆弱性 - ITmedia エンタープライズによるとWordPressのSEO対策プラグイン『All in One SEO Pack』に脆弱性が見つかったとのこと。 Sucuriによると、All in One SEO Packには権限昇格とクロスサイトスクリプティング（XSS）の2件の脆弱性があり、同プラグインの修正前のバージョンを導入している全サイトが影響を受ける。 悪用された場合、ログインしたユーザーがAll in One SEO Packの特定のパ... --- ### WordPressの画像のアップロードが遅くなったりUpload FailedのメッセージがでたらWP Smush.itのプラグインを疑おう - Published: 2014-05-02 - Modified: 2014-05-02 - URL: https://webhoric.com/hp/plugin/wpsmushit-upload-failed/ - カテゴリー: WordPressの便利なプラグイン - タグ: WordPressプラグイン, 画像 WordPressの画像のアップロードが遅くなったりUpload FailedのメッセージがでたらWP Smush.itのプラグインを疑おう 表題に関して『Smush. it』という画像を最適化してくれるWEBサービスがあります。 見た目は変わらずにファイルサイズを小さくしてくれる便利な機能です。 『Smush. it』の機能をWordPressにも搭載できる「WP Smush. it」というプラグインがあります。 「WP Smush. it」を有効化しておくと画像のアップロード時に『Smush. it』の処理を同時にしてくれて アップロードした画像が最適化された状態でサーバーへアップされます。 もちろん【　メディア > ライブラリ　... --- ### WordPressユーザー名とパスワードを忘れた時のphpmyadminを使ってログインする方法 - Published: 2013-03-26 - Modified: 2021-02-07 - URL: https://webhoric.com/hp/wordpress/wordpress-password-reminder/ - カテゴリー: WordPress - タグ: phpmyadmin, WordPress, パスワード WordPressユーザー名とパスワードを忘れた時のphpmyadminを使ってログインする方法 WordPressユーザーのパスワードを忘れてしまうことがあると思います。 WordPress3. 5. 1では「パスワードをお忘れですか ? 」のリンクをクリックしたあとの画面から ユーザー名またはメールアドレスを入力することでリセットができますが、 ともに分からない場合ログインができなくなってしまいます。 この場合にはphpmyadminを利用することで、パスワードをリセットしてログインすることができます。 WordPressユーザー名とパスワードを忘れた時のphpmyadminを使ってログ... --- ### 【WordPress】『Duplicate Post』テンプレート記事を複製したいときに、ワンクリックでコピーできるプラグイン - Published: 2012-06-02 - Modified: 2021-02-09 - URL: https://webhoric.com/hp/wordpress/duplicate-post/ - カテゴリー: WordPress, WordPressの便利なプラグイン, 投稿関連 - タグ: Duplicate Post, plugin 『Duplicate Post』テンプレート記事を複製したいときに、ワンクリックでコピーできるプラグイン 『Duplicate Post』はWordPressの投稿記事を複製できるプラグインです。 テンプレート用の記事を用意しておいて、複製ボタンを押してガンガン記事をつくるなど 記事を量産したいときはおすすめのプラグイン。 アタッチメントファイルやカテゴリーのチェック内容やタグもそのままコピーされるので 似た記事を作成するときには非常に役立ちます。 カスタムフィールドの内容もそのままコピーされますので、カスタムフィールドを拡張して使っている場合で、記事数を積み重ねていくとDBの容量を大きく圧迫します... --- ### xserverを使っていて管理画面が突然白くなったりInternal Server errorがでたらメモリ不足を疑え - Published: 2012-06-02 - Modified: 2012-06-02 - URL: https://webhoric.com/hp/wordpress/xserver-internal-server-error/ - カテゴリー: WordPress - タグ: XSERVER, エラー処理 xserverを使っていて管理画面が突然白くなったりInternal Server errorがでたらメモリ不足を疑え 先日XSERVER利用時に、非常にこまったので記録。 Google Chromeで閲覧していたときに、Internal Server errorが頻発し、ページが表示されない。 原因がわからず非常に困っていました。 Firefoxに変更して閲覧した際に、画面が真っ白になったので気が付きました。 真っ白になる＝phpのFatal Errorが表示されていることが多いのです。 XSERVERはデフォルトでphp. iniの設定がdisplay_errors=offになっています。 display_e... --- ### Jetpack 1.3.4 からはスパム対策付きのコンタクトフォームが使えるようになった。 - Published: 2012-05-29 - Modified: 2012-05-29 - URL: https://webhoric.com/hp/wordpress/jetpack-1-3-4-contactform/ - カテゴリー: WordPress, WordPressの便利なプラグイン - タグ: Jetpack, コンタクトフォーム Jetpack 1.3.4 からはスパム対策付きのコンタクトフォームが使えるようになった。 Jetpack 1. 3. 4 からはスパム対策付きのコンタクトフォームが使えるようになりました。 コンタクトフォームのプラグインは多いのですが、contact form7のようなスパム対策が付いているプラグインは あまりないようなので重宝しそうです。 日本語でラベル名を入れると、再編集時に表示されないことや フォームの上下レイアウト時に入力したフォームがまとまって動くバグがあるようです。 手軽ですが、不安定な要素が多いので、安定版が出るまではおすすめしません。 環境 WordPressバージョ... --- ### WordPress3.3.2のアップデート開始 - Published: 2012-04-22 - Modified: 2012-04-22 - URL: https://webhoric.com/hp/wordpress/wordpress3-3-2-update/ - カテゴリー: WordPress WordPress3. 3. 2のアップデート開始 されました。 同時にWordPress 3. 4 ベータ 3 の利用開始も始まっています。 以下更新内容です。 < ul> ◯前バージョンのPlupload と SWFUpload のバグへのセキュリティアップデート ◯特定の状況下で WordPress のネットワーク運用時にサイト管理者がネットワーク全体でプラグインを停止できる制限された権限昇格。WordPress ◯コアセキュリティチームの Jon Cave と Adam Backstro... --- ### WordPress内からXML-RPCを利用して記事投稿を行う方法 - Published: 2012-02-08 - Modified: 2012-02-08 - URL: https://webhoric.com/hp/wordpress/wordpress-xml-rpc-post/ - カテゴリー: WordPress, カスタマイズ - タグ: WordPress, XML-RPC, Zend Framework WordPress内からXML-RPCを利用して記事投稿を行う方法です。 XML-RPCとは RPCプロトコルの一種であり、エンコード（符号化）にXMLを採用し、転送機構に HTTP を採用している。非常に単純なプロトコルで、少数のデータ型やコマンドだけを定義しているだけであり、その仕様は2枚の紙にまとめられる。これは多くのRPCシステムが膨大な量の規格を規定し、実装に多量のプログラミングを要することに比べると、際立った特徴と言える XML-RPC - Wikipedia XML-RPCを利用す... --- ### 『Where did they go from here』Amazonのこの商品を見たお客様はこれも見ていますが実現できるプラグイン - Published: 2012-02-05 - Modified: 2012-02-05 - URL: https://webhoric.com/hp/wordpress/where-did-they-go-from-here/ - カテゴリー: WordPress, WordPressの便利なプラグイン, 投稿関連 - タグ: WordPress, WordPressプラグイン, レコメンドサービス 「Amazonのこの商品を見たお客様はこれも見ています」が実現できるプラグイン。 いわゆるおすすめ機能（レコメンドサービス）。 似た機能で外部WEBサービス(LinkWithin,Outbrain Zenback,The Slide by SimpleReach）とありますが、単体のプラグインで、自由にCSS編集ができる珍しいプラグインです。 動作環境 WordPress3. 3. 1 プラグインバージョン0. 3. 1 インストール WordPress › Where did they go ... --- ### 『WP Zend Library』WordPressでZend Frameworkを使えるようにするプラグイン - Published: 2012-02-03 - Modified: 2012-02-03 - URL: https://webhoric.com/hp/wordpress/wp-zend-library/ - カテゴリー: WordPress, WordPressの便利なプラグイン - タグ: WordPress, WordPressプラグイン, Zend Framework 『WP Zend Library』はWordPressでZend Frameworkを使えるようにするプラグインです。 開発の拡張ができるので重宝しそうなプラグインです。 動作環境 WordPress3. 3. 1 プラグインバージョン1. 0 インストール WordPress › WP Zend Library « WordPress Plugins よりダウンロードしてwp-content/plugins/ディレクトリにアップします。 または 管理画面 > プラグイン > 新規追加 > WP... --- ### WordPressで加速させる！ソーシャルメディア時代の［新］SEO戦略マニュアル - Published: 2012-02-01 - Modified: 2012-02-01 - URL: https://webhoric.com/hp/wordpress/wordpress%e3%81%a7%e5%8a%a0%e9%80%9f%e3%81%95%e3%81%9b%e3%82%8b%ef%bc%81%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%a3%e3%83%ab%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e6%99%82%e4%bb%a3%e3%81%ae%ef%bc%bb%e6%96%b0/ - カテゴリー: WordPress, WordPress書籍, 情報 - タグ: WordPress, カスタマイズ, 本 SEOテンプレートで有名な「賢威」の制作者でもある松尾茂起氏による書籍 「ソーシャルメディアをどうSEOに活用するのか？」 「SEOに強いWordPressのカスタマイズとは？」 「今」通用するSEOノウハウが詰まった、ソーシャルメディア時代の新しいSEO指南書。 SEO初心者、中級者、上級者の方まで、新しい「気付き」を手に入れていただける一冊です。 Twitter、Facebook、Google＋、ソーシャルメディアの隆盛によって、変化し続ける検索エンジン。 これからのWEBマーケティングで大... --- ### WordPress レッスンブック 3.x対応 - Published: 2012-01-31 - Modified: 2012-01-31 - URL: https://webhoric.com/hp/wordpress/wordpress-%e3%83%ac%e3%83%83%e3%82%b9%e3%83%b3%e3%83%96%e3%83%83%e3%82%af-3-x%e5%af%be%e5%bf%9c/ - カテゴリー: WordPress, WordPress書籍, 情報 - タグ: WordPress, カスタマイズ, 本 CSS/HTMLをひと通りマスター人が体系的にWordPressについて学べる。 WordPressのテーマを、ブログ風やホームページ風にカスタマイズする手順を書いてある本。 もくじ Chapter1　下準備 Step1-1　インストール Step1-2　基本設定 Step1-3　記事を投稿する Step1-4　オリジナルのテーマを作成する Chapter2　基本的なブログの作成 Step2-1　トップページを作成する Step2-2　ヘッダーを表示する Step2-3　スタイルシートでデザイン... --- ---