横浜のデザインとwebと動画屋さん | 日本一店長のアイシープ

日本一店長のチラシデザインと動画&ホームページ制作屋さん

【最新版】wordpress TIPS集(CSSもあるよ!)

, …
1255 views
約7分
【最新版】wordpress TIPS集(CSSもあるよ!)

言わずと知れた “wordpress” はSEO対策にも優れたブログシステムです。
そんな “wordpress” の『よく使用する知っておくと助かる』ことをまとめました。
備忘録として記しておきます。

『よく使用する知っておくと助かる』TIPS

管理画面のタイトル表示させるとわかりやすいのでコレを!

wordpressにログインできないよくある6つの事例の解決策

WordPressでバックアップを取る4つの方法(初心者向け)

失敗しないWordPressのリニューアル手順

固定ページのRSS出力

wordpressは投稿ページはRSS出力可能ですが、固定ページはRSS出力できません。
それが、プラグイン「RSS Includes Pages」で可能です。
有効化するだけでカンタンに使用可能です。

WordPressでリンクを別タブ(新規タブ)で開く方法

コンタクトフォームは別タブで開いた方が離脱しないでいいですよね。

でもrel=”noopener”が必須です!

ブロックエディターでブロック間隔を狭くする

クラシックエディターからブロックエディタに変更するとやはり不具合が生じるのは仕方がないところ。
ブロック間隔を広くするのはスペーサーでできるのですが、狭くする方法はイマイチありません。
ブロックの間隔調整でbotttomマージンを-50pxくらいにするとプレビューはいいのですが、編集画面の方では重なりすぎてしまい、編集が難しくなります。
HTMLコードを確認すると、改行(br)タグが連続して多数挿入されています。
管理画面「詳細設定」→「サイト一般動作設定」→「標準化設定」にある
“WordPressの自動整形機能を無効にする”
および
“改行は</ br>タグに変換する”
のチェックを外してください。

wordpressによく使うHTML&CSS TIPS

よく使うCSS

wordpress制作時によく使うCSSをまとめてみました。
wordpressのアップデートがあるたびにせっかく書いたCSSも消えてしまうこともありますので子テーマを作るなどして注意してください。
テンプレートによっては、アップデート対策としてCSS専用の書き込み欄が設けられている場合もありますので気をつけるようにしましょう。
では、よく使用するCSSを備忘録としてメモしておきます。

よく使うHTML&CSS

CSSで中央寄せ
画像の上に文字やボタンをのせる
画像を100%表示させるCSS




containを指定すると画像の縦横の比率を保持した状態で常に画像全体が表示されるように画像サイズが調整されます。
アコーディオンの作り方です。

レスポンシブデザインでフルサイズでなく少し縮小したサイズの画像だと画質が粗くなる現象が発生します。

小さな画像を拡大させて表示させるのではなく、あらかじめ大きめの画像を使用し、はみ出る部分については「max-width:100%;」と「height: auto;」で縮小させて表示させることをおすすめします。

結構苦戦しました。
img {
max-width:50%;
height:auto;
}
こんな感じで挿入したら解決!

カスタムHTML”ウィジェットでの画像表示

“カスタムHTML”ウィジェットでの画像表示がされない場合があります。
どうやら相対パスじゃないとダメなようです。
(例えば、 /wp-content/uploads/202○/○○/○○○○○○.jpg)で入力。

ウィジェットでスマホのみ非表示

クラシックエディタではWidget Logicプラグインを使用するのがベストでしょう。
スマートフォン・タブレット端末では非表示にする(PCでは表示)場合は、ウィジェットのロジックに ! wp_is_mobile() と入力します
スマホのフッターなどは情報量を少なめにしないとスクロールが長くてタイヘンになりますもんね。

ブロックエディタモードだとコチラですね。

ヘッダーやナビゲーションメニューを非表示に

wordpressでLPを制作する際、ヘッダー部分やMENUは必要ないですね。
非表示にする方法ですが、テーマによってはうまくいきません。
Chromeの「デベロッパーツール」を使って、消したい箇所のid属性・class属性を確認します。
PCとモバイルの表示が違うというのはよくあることです。
スマホもしっかりデベロッパーツールでid属性・class属性を確認します。
デベロッパーツールで表示されたようにCSS書き込みしましょう。
よくあるのがスペースや『.』(ドット)の入力ミスです。
気をつけましょう。

そしてCSSを書きましょう。

コピペできる最新 HTML/CSS スニペット<


どれもすごいカッコイイですね。

tableでミスしやすい

表tableで使用するtable-layoutプロパティ

値 説明
auto テーブルのセル内に入力された文字が全て表示されるように列の幅が変更されます。
fixed テーブルの列幅が均等になるように修正されます。
fixedは「固定」という意味です。
文字に合わせてセルを大きくしたいのにfixedで固定されてしまっていることが多いです。

CSS table表でセルの結合


“colspan”を使用します。

文字の回り込み

floatは回り込みのCSSですね!

ポップアップよりフローティングバナー

フローティングバナーの方が鬱陶しくないようです。

WordPressサイトのテーマ/プラグイン/サーバーなどを調べることができる

WP-Searchは、WordPressのテーマ/プラグイン/サーバーなどを調べることができるツールです。
ホームページやブログのURLを入力するだけで、どんなデザインテンプレートを使用しているのかなどの情報が一覧で表示されます。

プラグインの使用あるある

contactform7にサンクスページを

Contact Form 7で確認画面とサンクスページを作る方法

おわりに

wordpressを使えるようになると情報発信を自分で自由にできるのがサイコーです。
どんどん覚えていきましょう。