Sakurai

JavaScript

2021/1/1

[Javascript]「?」を使ったif文の書き方-三項演算子

[Javascript]「?」を使ったif文の書き方-三項演算子

JavaScript

2021/3/23

「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方

案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、 「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい1枚の画像のケースがありえるの?とツッコミしたくなりました。 スライダーを使うのだから複数枚画像は用意するでしょう!というのは製作者側の勝手な意見なのでしょうかねえ。 さて、Slider Proを見直したところ、矢印部分や背景にCSSで編集を加えていたため1枚画像の場合に矢印が表示されてしまう事態となってスライダーをSlickへ変更しました。 sl ...

JavaScript

2020/7/23

スライドJSプラグイン「Slider Pro」の実践的な使い方

JavaScriptのスライドプラグインはたくさん種類がありますが、 その中でも設定項目の多い「Slider Pro」の使い方です。 Slider Proの良いところとしては ・ブレイクポイントを使ったレスポンシブ対応 ・スワイプ検知 ・サムネイルの大きさ指定 これらの項目が初期状態から設定されていることです。 Slider ProはjQueryを利用します。 Slider Pro ライセンス MITライセンス/個人無料・商用無料 Slider Pro デモサンプルURL/公式ドキュメント ポイントSli ...

no image

WordPress

2020/6/26

Ktai styleで絵文字を入力する方法

携帯サイトっぽく見せるためには絵文字は必須です。 携帯サイト向けサイトをつくるのに便利なWordPressのプラグインKtai Style を使用した場合に絵文字を使いたい! ときには 投稿ページに <img localsrc=”NNN” /> と記入します。NNNに絵文字ナンバーが入ります。 NNNはKDDIの絵文字コード表を参照。 Ktai Styleでは携帯キャリアごとに表示の絵文字を判別表示させるようですが、 絵文字入力はimgタグを使用しないといけないようです。 ▼参考 Ktai Style 使 ...

no image

WordPress

2020/6/24

WordPressでのSEO対策パーマリンク設定

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が登録されない場合があるとされています。 Wo ...

no image

WordPress カスタマイズ

2020/6/24

WordPressのHTMLエディタを使うとPタグが自動で入るのを無効化する

WordPressのエディタにはビジュアルモードとHTMLモードの2種類がありますが、 HTMLモードで改行を入れたテキストに対して、<p>が自動補完されます。 Pタグがあることで妙なマークアップになることを解消することが必要な場合があるかもしれません。 ☆Pタグが自動で入るのを無効化する方法 wp-includes/default-filters.phpをコメントアウト編集します。 [1] [code] add_filter('the_content', 'wpautop'); ↓ ↓ ↓ ...

no image

SEO

2020/6/24

Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips個人的補足

[N] 「Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips! で迷った点があったので備忘録です。 サイト内検索レポート 表示場所 コンテンツ > サイト内検索 設定 Analytics 設定 > プロファイル設定 [1] サイト プロファイル情報を編集します。 [2] デフォルトでは「サイト内検索  サイト内検索レポートを無効にする」となっています。 [3] サイト内検索のクエリパラメータがわからない場合は、検索フォームで検索語を入力して検索してみる。 URLに表 ...

no image

WordPress

2020/6/24

Google Sitemap Generator for 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 GoogleSitemap ...

【WordPress】get_post_type()を使って投稿タイプを調べる

WordPress

2020/6/2

【WordPress】get_post_type()を使って投稿タイプを調べる

【WordPress】get_post_type()を使って投稿タイプを調べる 【WordPress】get_post_type()を使って投稿タイプを調べる方法 get_post_type()を使うと投稿タイプを調べることができます。 試しにheader.phpに [code][/code] を買いてページを開いてみると違いがわかります。 戻ってくる値は以下になります。 'post' - 投稿 'page' - 固定ページ 'attachment' - 添付ファイル 'revision' - リビジョン ...

no image

PHP

2021/2/18

Conoha VPSを使いLaravel環境を手っ取り早く10分で構築する方法

Conoha VPSのLaravel環境の開発を作ります。 ConohaVPSにはLaravel環境構築のテンプレートが用意されているので サーバーを立ち上げると即Laravelが使えるようになります。(作業ユーザーは別途作成する必要があります) LaravelテンプレートにはMySQL(MariaDB)も入っています。 プログラミングを勉強したいのに、環境構築に無駄な時間を取られてモチベーションが続かない人は ConohaのVPSにあるテンプレートの利用をおすすめします。 プログラミングを勉強したいのに ...

CSS

2021/2/8

フローティングバナーをCSS作る【Web制作】

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。 ポイントとしては ・position: fixed,bottom:0;の指定 ・z-indexの指定 の設定です。 position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。 z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。 z-indexは大きい値が上に表示されます。 ...

WordPress

2020/3/27

WordPressのテーマを削除する方法

仕様 2020年3月27日の内容です。 WordPressバージョン 5.3.2 で検証 WordPressのテーマを削除する方法 管理画面メニューから「テーマ」を選択します。 消したいテーマを選択します。 右下に「削除」のボタンが表示されます。 ウィンドウが開きます。 「本当にこのテーマを削除しますか?」のメッセージが表示されたら「OK」を押します。 wp-content/themes/のディレクトリから直接テーマフォルダを削除する方法もありますが、 管理画面上からの削除する方がわかりやすいし、間違いも ...

レンタルサーバー

2020/3/27

お名前VPSの解約方法。日割りされず翌月以降の末日までお金がかかるので解約時は早めに処理すること!

しばらく放置していたサーバーの整理を始めています。 手入れしなくなって費用がかさんでいたのでサーバー移転を行いました。 そのときお名前VPSの解約フォームが全然見つけられなかったのでメモとして記載します。 サーバー移転やサーバー解約をする際は必ずバックアップを取りましょう 2020年3月27日現在の内容です。 最初にお名前のダッシュボードへログインします。 契約しているサーバープランを選択。 ステータスにある「解約」ボタンを押します 確認文「サーバー上に構築されたデータはあなたの貴重な財産です。本当に解約 ...

WordPress

2020/2/18

超簡単!WordPressの簡単移行ができるConoha Wingサーバー

WordPressの専用レンタルサーバーはいくつかあるのですが、その中でもWordPressの簡単移行ができるConoha Wingサーバーをご存知ですか? WordPressのサイトをサーバーごと引っ越すのはかなり面倒くさいです。 その面倒くさい手順を解消できるプラグインもあるのですが、いまいち信頼度が薄めです。 しかしConoha Wingサーバーに搭載されているWordPressの簡単移行ツールは非常に楽でネームサーバーの反映さえサクッと終われば数時間で サーバーの引っ越しが可能になります。 またC ...

WordPress

2020/1/29

WordPressのカテゴリー説明でhtmlを使えるようにする方法

というケースがあります。 この場合、管理画面のカテゴリー編集ページより細かく説明文テキストを入力できますが、 一つ困ったことがあります。 それは初期状態のままだとカテゴリー説明にhtmlが使えない! という点です。 しかし、カテゴリー説明にhtmlを使用可能にする方法がありとても簡単ですので、 カテゴリー説明文にhtmlを書き込みたい場合にはWordPressの基本設定として覚えておくと良いでしょう。 カテゴリー説明にhtmlを使えるようにする。 これだけでOKです。 //カテゴリー説明でhtmlタグを使 ...

JavaScript

2020/7/12

【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法

数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマホOKでタッチやスワイプにも対応 ・オプションがありすぎてちょっと面倒 とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。 デモを見るだけでも大変です。IE11だと結構動作が ...

JavaScript

2021/3/20

jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回はそのサンプルを紹介します。 jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更する。 javaScriptでやること ・SlideToggle()を実装する・SlideToggle()の開閉 ...

WordPress

2019/12/13

コンタクトフォームで「メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。」のエラー

WordPressのメールプラグイン「コンタクトフォーム7」で客先からメールの送信ができなくなっていると苦情を受けてしまいました。 いままで使えていたはずなのにメールを送ると「メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。」の表示がでて メールが送れなくなっているとのこと。 フォームを送信すると「メッセージの送信に失敗しました」というエラーメッセージが表示されます。何が悪いのですか? | Contact Form 7 [日本語] 原因 ・コンタク ...

no image

WordPress

2019/11/29

WordPressのリカバリーモード

WordPress 5.2から「リカバリーモード」が追加されています。 WordPressのテーマやプラグインにエラーがあった場合、リカバリーモードに入り異常状態をメールでお知らせしてくれる機能です。 「リカバリーモード」とは 致命的なエラーが生じたテーマ・プラグインを一時停止して WordPressの管理者が正常にダッシュボードへログインできるようにする機能のこと。 「リカバリーモード」時はダッシュボードへログインができるように メール内に期限付きURLが発行されます。 「リカバリーモード」で送られるメ ...

WordPress

2021/2/13

「サイトに重大なエラーがありました」の回避方法

「サイトに重大なエラーがありました」の回避方法 WordPressを運用していると上記のように「サイトに重大なエラーがありました」と表示がでるときがあります。 以前はこの表示はなかったように感じますが、どこかのバージョンからこの「サイトに重大なエラーがありました」の表示に切り替わったようです。 私がこの表示を見たのは「PHPエラー」が生じたときに出ました。 そのときにはPHPの構文エラーを修正したら正常な画面に戻りました。 WordPressにはデバックモード(WP_DEBUG)がありますので、 「サイト ...

WordPressの便利なプラグイン

2021/2/8

『Color Admin Posts』投稿状態に色を付けられる地味に便利なWordPressプラグイン

『Color Admin Posts』投稿状態に色を付けられる地味に便利なWordPressプラグイン 地味に便利な『Color Admin Posts』 WordPressの記事が増えていくと、どの記事がどの状態なのかわかりにくくなっていきます。 特に予約投稿をめちゃくちゃ使う人にとっては余計わかりにくいですよね。 そんなときに利用したいWordPressプラグインが『Color Admin Posts』です。 機能は簡単!投稿状態の色を表示させるだけ この『Color Admin Posts』の特徴は ...

no image

WordPress

2019/11/14

WordPress 5.3 メジャーアップデート版リリース

WordPress 5.3 メジャーアップデート版リリース WordPress 5.3リリース ブロックエディターの改善がされ大きく投稿画面のエディタの印象が変わりました。 また新デフォルトテーマ「Twenty Twenty」が追加されました。 ログインページのパスワードに目玉のボタンが付きました。 目玉アイコンを押すことで入力したパスワードが見えるようになります。 WP Multibyte PatchはWordPress5.0から含まれなくなりましたので 日本語で使用する際はプラグインの別途インストール ...

メディアクエリ(Media Queries)が効かないときに確認したいこと

CSS

2020/7/12

メディアクエリ(Media Queries)が効かないときに確認したいこと

メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため(イレギュ ...

WordPress初心者講座

2019/9/4

WordPressの自作ショートコードに引数をわたす方法を攻略!

管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法

CSS

2020/7/12

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ...

JavaScript

2020/7/12

【Chart.js】グラフを簡単に作れるJavaScriptライブラリ

Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか? ・どんな数値・メモリを入れていくか? と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるときにアニメーションするのもポイントが高い点です。 グラフがアニメーションするとWEBページとしての見栄えも良いで ...

Photoshop

2020/7/12

【Photoshop】テキストに下線を付けたい!テキストツールを使って方法が簡単!

Photoshopでテキストに下線をつける方法 PhotoShopでテキストに下線をつけるには 「テキストツール」の下線のボタンを押すだけです。 テキストツールを選択して文字を入力します。 メニューのウィンドウ > 文字を選択して文字ウィンドウを表示します。 下線を追加したい文字レイヤー内の文字を選択。 文字ウィンドウにある「下線追加ボタン」を押します。 ちなみに縦書きの場合には左側へ線が追加されます。 ただしこのテキストツールをつかって下線を加える方法は 『テキストと下線が同じ色になる』という点に注意で ...

JavaScript

2021/2/6

【jQuery】「next()」「prev()」で要素の取得して画像を変更する。

JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい!」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...

WordPress

2021/2/7

WordPressにstyle.css以外の自作cssを追加したいときに試す方法を攻略!

管理画面の TinyMCE Advanced などのアイコンが文字化けして表示されないときの対処方法

WEB製作

2020/7/12

【Web制作】IE11でFlexboxが横並びにならなくてハマる

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスにハマってしまい ...

© 2021 さくらいらぼWEB版 /個人ブログ