横浜のチラシデザインと動画制作編集屋さん | 日本一店長のアイシープ

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

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

967 views
約6分
【最新版】wordpress TIPS集(CSSもあるよ!)

はじめに


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

『よく使用する知っておくと助かる』いろいろまとめ


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



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



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



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



固定ページのRSS出力


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

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


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

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


wordpressによく使うHTML&CSSいろいろまとめ


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

よく使うHTML&CSS




【画像を100%表示させるCSS】

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


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

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

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

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


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

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



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

tableでミスしやすい

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

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


CSS table表でセルの結合


"colspan"を使用します。


文字の回り込み


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


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


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


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


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


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


contactform7にサンクスページを


Comment On Facebook