要素の検証

Cocoonカスタマイズ

テーマCocoonで記事内に入れたFont AwesomeのTwitterアイコンがAMPで表示しないので対応させた方法

Font Awesome5のTwitterアイコンのクラス属性(指定方法)が『fa』から『fab』に仕様変更され、AMPで表示されなくなりました。実装する方法を色々考えた結果、WordPres...
Cocoonカスタマイズ

Cocoon一覧ページのh1タグを装飾・h1タグ前に画像を入れたい時のCSS

Cocoon一覧ページのh1タグとは、カテゴリ一覧・タグ一覧・月ごとのアーカイブ一覧・書いた人author一覧などのタイトルです。 アーカイブページのh1タグ:タイトルをデォルトからホンノリ装飾...
Cocoonカスタマイズ

Cocoon!トップに戻るボタンを画像にし、サイズ・hover画像を変えるコピペCSSカスタマイズ

Cocoonでトップに戻るボタンを画像に変更する設定 『Cocoon』設定を開き『ボタン』タブをクリック。『トップへ戻るボタンを表示する』にチェックが入っている事を確認したら、下へスクロ...
Cocoonカスタマイズ

Cocoonナビメニューに階層を付けたとき、孫メニューが はみ出し見えない対処:コピペCSS

Cocoonのメニューに階層を付け、下層に子カテゴリなどをいれるとonマウスしたとき左へスライドして表示されます。 置いてるメニューの位置などで、幅の狭い画面で見ると下層(孫カテゴリ)の...
Cocoonカスタマイズ

Cocoon!ヘッダーナビに画像を入れる、コピペCSSのカスタマイズ

グローバルナビに自作画像を入れると、サイトの差別化ができると共に、文字情報ではなく視覚・感覚的に内容がわかりやすい、さらに目に留まりやすい…などのメリットがあります。 メニューに画像を使うのは、...
Cocoonカスタマイズ

Cocoon、main上『通知メッセージ』をカテゴリ・ページ毎に変更するカスタマイズ!HTML編

WordPressテーマCocoonではメインエリアの上に、ページに訪れた人への通知メッセージが設定で置けます。 記事で設定したカテゴリ毎、または記事毎によって『お知らせしたいコメント』...
カスタマイズ

複数カテゴリ・記事のPHP条件分岐!WordPress分岐タグif文・条件式の書きかた

WordPressPHP初心者向けにif文『もし○○のとき××』の書きかたを紹介します。使う分岐タグはギュッとしぼってin_category()、is_category()、is_single()。H...
Cocoonカスタマイズ

Cocoonスライドイン(モバイル下固定メニューボタン)をCSSだけでカスタマイズ!

Cocoonのスライドイン(footer下にあるモバイル専用固定メニューボタン)はスマホ・タブレットでは画面下にずっと固定された部分です。 自分のサイトカラーやイメージに合わせてスライド...
Cocoonカスタマイズ

Cocoon見出しのカスタマイズ:hタグ装飾が反映しないとき試す(セレクタ)指定方法

WordPressテーマCocoonを使い参考にしたページの通り見出しの変更をしたけど、うまく反映しないのはなぜ??と装飾し始めた頃は思うかもしれません。 大半の原因は以下の通り。 h...
Cocoonカスタマイズ

WordPress管理画面のカスタマイズ!CSSコピペで投稿ミスを防止しよう:Cocoon仕様

WordPressで投稿前にチェックしておきたいパーマリンク・アイキャッチ画像・カテゴリ・タグなどつい設定し忘れなどありませんか? 下書き保存するはずが、ボーっとして公開をポチ ...
Cocoonカスタマイズ

Cocoon!目次クリック直後、見出しに余白を入れスッキリ見やすく!コピペCSSカスタマイズ

目次をクリックして見出しに飛ぶと、特にh2タグは見出しデザインが見切れて見えますよね。 Cocoonの目次機能を有効化して、CSSにコピペするだけで目次クリック後の見出しがシッカリ見える...
Cocoonカスタマイズ

WordPress管理画面ビジュアルエディタ上ボタンをスッキリさせるCSS:テーマCocoonで説明

WordPressのビジュアルエディタを使ってる人でエディタの上にあるボタン、イタリック・左右寄せ・中央揃え・インデントを増やす減らすなど…使いますか? 使わないボタンは管理画面上から消...
Cocoonカスタマイズ

Coccon管理画面スタイル変更に!CSSを子テーマに導入コピペで簡単、実装方法

CocoonもSimplicityも、親テーマに管理画面上のスタイルを変更できるadmin.cssが付いてて、かなり簡単に管理画面のスタイルを変更できます。 一番オススメしたい人はWordPre...
Simplicityのカスタマイズ

WordPressテキストエディタや管理画面のスタイルをSimplicity2子テーマ内で編集するカスタマイズ

WordPressのテキストエディタは文字が小さく見にくいので、wp-includes/cssフォルダ内にあるWPコアファイルeditor.min.cssを直接編集していました。 アップ...
CSS

CSS position: absolute;の指定でボタン画クリックできない!z-indexが効かない原因と解決方法

CSSでSNSフォローボタンをカスタマイズしていて、position: absolute;を使いスタイルを重ねて・重ねてカスタマイズをしおわった時。肝心のフォローボタンをクリックしても反映しない事が起...
NO IMAGE バックアップ・復元

バックアップがないのに全削除したWordPress復元!記事・画像・CSS・パーマリンクなど

WordPressのデータベース・本体ファイルを間違ってすべて削除し、バックアップを一度もとったことが無い場合。もしキャッシュなど残っているときの、記事・画像のデータなど復元する方法です。 Wo...
カスタマイズ

Table of Contents Plusを使って、長い見出しをコンパクトに!目次h3タグをh2タグ下にリストの目次に変更する方法

目次が凄く長いとき、ページ分割するべきか。それとも見出しをh2のみ出力するべきか。など考えた時、目次をh2タグのみ表示して、そのh2タグの小見出しh3タグは、それぞれの大見出しh2タグ下に設置...
カスタマイズ

メルマガ登録フォームのデザイン!WordPressプラグインMailPoet Newslettersボタン:CSSカスタマイズ

メールマガジンの購読者を増やすため、WordPressプラグインMailPoet Newslettersをいれたら、ボタンのデザインがどうも栄えない!『もっと見栄えをよくしたい』とお考えでした...
Instant WordPress

InstantWordpPress!ワードプレスのローカル環境を2分で導入!テスト環境の作り方

InstantWordpPress(インスタント ワードプレス)を使ってローカル環境でテストブログを構築してみたら、恐ろしく簡単!導入だけなら2分どころか1分あれば構築完了するくらい導入が早い...
2017.09.18
NO IMAGE HTMLとCSSの基本

該当HTMLを囲む親要素・属性を付けて、範囲指定して装飾する書き方!

headerタイトル、記事部分、asideサイドバー、footerのシンプルなHTMLタグ特有のHTMLタグを囲む『親要素』。またタグ内に『属性』を一緒に付けて、指定範囲のみスタイルを指定してましょう...
トップへ戻る