2018年1月20日こちらのカスタマイズは、AFFINGER4でも応用できます。Twelve」を使用していました。どこでなにがどうなっているのか。!ひとっっつもわからず。「この部分の色を変えたいときはどこをどう変えればいいんだろう?」・・・。「なに?なに?」の連続でした。そんな時の救世主は、Web上にある宝物のような沢山のカスタマイズ情報。見様見真似で、スタイルシートに『謎の暗号』をコピーペーストすると、あら不思議!望み通りの見た目になってワクワク♪だけど、上手くいかないことも多々あってションボリ。PLUS+」のヘッダー・サイドバー・コンテンツの細かい部分、微調整的なカスタマイズ方法をご紹介します。その前に、『謎の暗号』が解読できるようになるための道しるべ。CSSの基礎についても少しだけお伝えしていきたいと思います。「それはいらないなぁ・・」という方は、ご覧になりたいメニュー項目を優しく選択&スルーでお願いいたします。追記CSSコードの基礎がわかれば世界が広がる『謎の暗号』を解読できるようになりたくて、書籍を用いた自作テーマの作成とCSSの勉強に挑戦したのは今から約3年前。自作テーマ作成で得た知識は実践で使うには厳しいかな。いった感じですが、CSSの基礎を学び、その後「STINGER3」と出会ったことで、柔軟なカスタマイズがそれなりにできるようになったのは本当によかったと感じています。大げさかもしれませんが、「世界が広がった」という表現がぴったりです。大ざっぱなCSSの共通書式はこのようになっています。{なにを:どうする;}例えば、こんな書き方でもOKです。{なにを:どうする;}もう少し複雑なパターンを例にすると、こんな感じになります。{なにを:どうする;さらになにを:どうする;さらになにを:どうする;}※「どこの」の前の「#」「.」もしくは「未入力」の違いは、適用先がid属性で指定されているかclass属性で指定されているかによって変わります。今はなんとなくで大丈夫。コードを見ることに慣れてきたら、ご自身のサイトのページ上で右クリック→「ページのソースを表示」で確認できるようになるかと思います。STINGERの「style.css」は良い教科書代わりWordPressダッシュボード→外観→テーマ→テーマの編集→右上の「編集するテーマを選択」で、親テーマを選択してstyle.cssを表示してみてください。・・最初は眩暈がしますよね。(笑)STINGERは作者が日本の方ですので、スタイルの適用先を示すコメントが日本語表記になっているのでとてもわかりやすいんですね。そこに書かれているCSSコードのほとんどが、『どこの→なにを→どうする』になっているかと思います。STINGERのスタイルシートは、CSSを学ぶための良い教科書代わりになります。ひとつの教科書、私が独学用に購入した書籍もご紹介します。書店で手に取ってみて「私にも理解できそう・・」と感じた1冊を選びました。Webからダウンロードできるレッスン用のサンプルデータを使って、実践しながら学べるタイプの書籍で、HTMLの復習も含め、CSSの基礎から上級技までを10日間でマスターできるカリキュラムとなっています。私の場合は上級技を使いこなせるまでには及びませんでしたが、そこは頭の構造上の問題かと。(笑)CSSの基礎を学ぶには十分な内容だと思います。カスタマイズとなります。各コードの下に『どこの→なにを→どうする』の解説を入れています。簡単なコードばかりですので、取り入れたいカスマイズが見つかりましたら是非手入力で挑戦してみてください。(全て半角入力です)全てのテーマファイルの編集は、テーマのアップデートの影響を受けない「子テーマ」で行うことをおすすめします。やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。▶子テーマについてまずは、ヘッダー右上に表示させているメニュー(ヘッダーリンク)の位置を微調整する方法です。「このメニューはどうやって表示させているのですか?」というご質問をいくつかいただいたのですが、こちらはSTINGERの標準仕様、STINGER管理→ヘッダー設定→「ヘッダー上部にフッター用リンクを追加する」にチェックを入れ、PC用メインメニューを非表示としています。サイトタイトルをセンタリングしている場合は表示されないようですのでご注意くださいね。デフォルトのままだと、現在よりも上の方に表示されていたので、CSSで表示位置を少しだけ下げてサイトタイトルの位置に合わせました。サイトタイトルの長さの関係で、逆に下の方に表示されているときは、「-**px」といったように、マイナスの値に変更すると表示位置が上に上がります。PLUSの場合デフォルトでは、親子階層で作成したカテゴリーもフラットで表示されます。親子階層がわかりやすいように、子カテゴリーを少し右側にずらし段差をつけて表示させるようにしました。カテゴリーが少ないのでわかりにくいですね。すみません・・WordPressダッシュボード→外観→ウィジェット→カテゴリーの「階層を表示」にチェックを入れます。続いてWordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加してください。上記、WordPressダッシュボード→外観→ウィジェット→カテゴリーの「階層を表示」にチェックを入れるだけでOKです。サイドバーのアーカイブ(ドロップダウン表示)の下の余白を広くするドロップダウン表示の「アーカイブ」の下の余白を広くしました。{margin-bottom:20px;}※『ドロップダウン表示のアーカイブの→下の余白を→20pxにする』(px数はお好みで変更してください)サイドバーの各項目の間の余白を広くするデフォルトでは、サイドバーの各項目の間がキツキツな感じがしたので、余白を少しだけ広くしました。{margin-bottom:10px;}※『サイドバーのリストの→下の余白を→10pxにする』(px数はお好みで変更してください)AFFINGER4の場合AFFINGER4では、親子階層で作成した子カテゴリーにも適用されてしまうため、下記コードを追加して調整します。!important;}コンテンツ内の見出し(h2)上の余白を広くするコンテンツ内の見出し(h2)の上部の余白が狭い感じがしたので、広くしました。{margin-top:30px;}※『見出し(h2)の→上の余白を→30pxにする』(px数はお好みで変更してください)コンテンツ内の基本の文字の大きさを変えるコンテンツ内の基本の文字サイズの変更については、当ブログでは今のところ実践していませんが、最近、老眼が進ん・・目の不調で細かい文字が見えにくくなりつつあるので、今後変更するかもしれません。(笑)WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加px数はデフォルトのままにしています。お好みに応じて数値を変更してみてください。追記その後やはり目の不調が気になったので(笑)、当ブログの現在の表示は下記のようにカスタマイズしています。25px;}子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。以上、WordPressカスタマイズに役立つCSSの基礎について。ヘッダー・サイドバー・コンテンツの細かい部分のカスタマイズ方法をご紹介しました。最後までお付き合い下さりありがとうございます。meKanami(かなみ)40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう?」を模索しながらブログを書いています。...1,176view【AFFINGER4】AMPページの関連記事の見出しとカテゴリ表示の背景色&文字色変更方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。...3,430view【AFFINGER4】「この記事を書いた人」にプロフィールページへのリンクを追加する方法ご紹介している追加コードにタグの閉じ忘れがあり修正を行いました。先に参考にしていただいた方には大変ご迷惑をおかけいたしますが、コードの変更をお願いいたします。...2,317view【AFFINGER4】サイドバーの見出しの背景を画像にする方法ver20170905へのアップデート後に、サイドバーの背景画像の内側下の余白(padding-bottom)を追加しました。PLUS】フッターのカスタマイズ(キャプションを非表示&メニューカラーの変更)こちらのカスタマイズは、AFFINGER4・AFFINGER5「WING」でも応用できます。~カスタマイズの引継ぎ・注意点など~当ブログで利用しているWordPressテーマ「AFFINGER4」に専用子テーマ「JET」を導入しました。...3,101view【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。PLUSからAFFINGER4に変更する際に、デザインをほぼ同じ状態にカスタマイズしてから公開しました。...1,989view【AMPページ】Googleの検索結果に表示されないときのチェックポイントと注意点WordPressテーマを「AFFINGER4」に変更して、一部のページをAMP対応しました。AMPテストも問題なし。PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。備忘録(WordPress)ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「!」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。N」ver20180117を追加しました。style.css及びst-amp-css.php内の画像パスに拡張子(.png)の記載もれがあり、コードの修正を行いました。...ReadMoreSTINGER・AFFINGERカスタマイズ【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう?と戸惑っている方も多いのではないでしょうか。ページ以外のアイキャッチ画像(トップページ含む)」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援!難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。ゼロからのWordPress入門【21】プラグインの設定方法について加筆修正を行いました。前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。トラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。バックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。子育て心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めましたクリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう?と心を弾ませるこの季節。AdSenseフォローアップセミナー(札幌)に参加してきました。当日は受付を担当させていただいたものです。参加者の方々には謎の人物だったかもしれませんね。んくらさん(@matari39)とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。