2020年1月26日239本ブログは、WordPressの「Simplicity」を使っているのですが、先日、「Simplicity2」へ移行しました。HTMLやCSSなどの知識が乏しい私でもできたWordPressの「Simplicity2」への移行本ブログは2015年9月からWordPressの「Simplicity」というテーマを使っていましたが、先日、「Simplicity2」...移行したとき、Simplicityのデザインがうまく引き継げなかった部分があり、以下の記事のとおり、元に戻すための修正の作業が必要でした。WordPressの「Simplicity2」に移行できなかったデザインの不具合の修正の実例以前の記事で書いたとおり、本ブログをWordPressのテーマ「Simplicity」から「Simplicity2」に移行しました。h...その修正にあわせ、もう少しシンプルなブログにしたいと思い、いくつか新たにカスタマイズをしたので、ご紹介したいと思います。ちなみに、Simplicityを使い始めた約2年前には、以下の記事で紹介したカスタマイズをしていますので、そこからの変更もしくは追加のカスタマイズとなります。【第4回】初心者の私でもできた「Simplicity」のカスタマイズ(其の壱)IT初心者の私でもWordPressを始めてブログを立ち上げることができましたので、実際に私が取り組んだ内容を以下のとおり紹介しています...カスタマイズをする前には、バックアップをとっておいた方がよいかと思いますが、私は以下のサイトを参考にバックアップを取りました。トップページの記事一覧をフラットにするトップページに並ぶ記事の一覧の抜粋と「記事を読む」を消し、シンプルな形にしました。▼before▼afterSimplicity2では設定で、抜粋する文字をゼロにし、「記事を読む」を消すことはできると思いますが、次の手順で以下のコードを子テーマのスタイルシート(Style.css)にコピペしました。下の画像のとおり、WordPressの管理画面の「外観」の「テーマの編集」を選び、右のほうにあるテーマ選択から「Simplicity2-child」を選びます。その中にある、スタイルシート(Style.css)に以下のコードを追加します。5px;}これは以下のサイトを参考にさせていただきました。Simplicityの記事一覧をフラットにするカスタマイズをする方法紹介また、記事一覧のエントリーカードのどの部分をクリック(タップ)しても、記事本文に行けるように設定をしました。設定方法は、WordPressの管理画面の「外観」のカスタマイズの中の「レイアウト(全体・リスト)」にある「エントリーカード全体をリンク化」をオンにします。エントリーカードにマウスポインタを待っていくと色が薄いピンク色に変わるようにカスタマイズしました。カスタマイズ方法は、以下のコードを子テーマのスタイルシート(Style.css)に書き加えるだけです。関連記事の一覧をフラットにする記事のページの下に表示される関連記事の一覧も前項の記事一覧と同じようにフラットにしました。あわせてエントリーカードにマウスポインタを待っていくと色が薄いピンク色に変わるようにカスタマイズしました。▼before▼after方法は前項でも紹介した前述のサイトをもとに、次のコードをCSSに追加しました。!important;}また、関連記事の見出しは、以下のコードを書き加えてカスタマイズしました。6px;border-left:none;}ただ、これだと関連記事の文字の大きさが大きすぎたので、以下のコードを子テーマのスタイルシートに書き加えました。inherit;}また、モバイル表示したとき、関連記事のタイトルの文字の大きさが大きすぎたので、もう少し小さくしました。方法は、以下のサイトを参考にさせていただきました。独学アフィリエイト報酬日記まず、Simplicity2の子テーマのスタイルシート(Style.css)に記載しているH2などの見出しのコードをそのまま子テーマの「mobile.css」にコピペします。関連記事のタイトル文字は、H3タグがもとになっているようなのでで、今コピペした「mobile.css」のH3タグのフォントサイズを小さくすれば、小さくなります。トップページの記事一覧の記事のタイトル下にタグを追加するトップページの記事の一覧でタイトルの下には、デフォルトではカテゴリーが表示されますが、ここにタグも表示するカスタマイズをしました。▼before▼after方法は以下のサイトを参考にさせていただきました。簡単に解説すると、WordPressの管理画面の「外観」から「テーマの編集」を選び、右上の編集するテーマから「Simplicity2」を選択します。子テーマではなく親テーマです。そこから「entry-card-content.php」ファイルを選択します。//インデクスにタグを表示したい場合コメントアウトと書かれた内容を探し、その次の行の頭についてる「//」を削除すれば完了です。これはSimplicity2の親テーマのカスタマイズになるので、Simplicity2のアップデートがあった場合は、同様の作業が必要になりますので注意が必要です。記事のタイトル下にタグを追加する前項と同様、記事のタイトルの下には、デフォルトではカテゴリーが表示されますが、ここにタグも表示するカスタマイズをしました。▼before▼after方法は以下のサイトを参考にさせていただきました。簡単に解説すると、WordPressの管理画面の「外観」から「テーマの編集」を選び、右上の編集するテーマから「Simplicity2」を選択します。前項同様、子テーマではなく親テーマです。そこから「entry-body.php」ファイルを選択します。>の3行をコピーします。(これは記事の一番下に表示されるタグのコードのため、そのタグを消したい場合は、このコードを削除します。.post-tag,」を追記すれば完了です。前項同様、これはSimplicity2の親テーマのカスタマイズになるので、Simplicity2のアップデートがあった場合は、同様の作業が必要になりますので注意が必要です。Twitterボタンのツイート数を表示するSimplicity2では、記事の中のTwiterアイコンにツイート数を表示させる機能があります。この機能を使うには「count.jsoon」への登録が必要となります。私は、以下の記事で書いたとおり、Simplicity2に移行したときに登録をしました。私の場合、登録してから2日後に完了のメールが届きましたが、設定は完了メール到着後にすることになります。HTMLやCSSなどの知識が乏しい私でもできたWordPressの「Simplicity2」への移行本ブログは2015年9月からWordPressの「Simplicity」というテーマを使っていましたが、先日、「Simplicity2」...登録と設定は、以下のサイトの手順に沿って行えば問題なくできました。アーカイブをドロップダウンにする右のメニューの中にある記事のアーカイブをドロップダウン表示にしました。過去の記事」をドラッグしてサイドバーヴィジットの一覧に入れ、「ドロップダウン」表示にチェックを入れれば完了です。スライドインメニューに「home」を追加するSimplicity2では、モバイルの場合「スライドインメニュー」を表示させることができます。デフォルトでは次の画像のメニューです。これを次の画像のとおりカスタマイズします。※上記2つの画像は「Simplicityのスライドインメニューで「ホーム」ボタンを表示するカスタマイズ方法」から転用させていただきました。ちなみに、そとそもスライドインメニューの表示の設定は、WordPressの管理画面から「外観」の「カスタマイズ」を選択し、「レイアウト(モバイル)」の中にあるスライドインを選びます。色はライトとダーク、位置を画面の上と下を選ぶことができます。このスライドインメニューは、前述の画像のとおりデフォルトでは、「home」というメニューはないのですが、私は、デフォルトのメニューの「前へ」と「次へ」の代わりに「home」を加えることにしました。カスタマイズの方法は、次のサイトのとおりですが、子テーマのスタイルシート(style.css)に次のコードを加えるだけです。強調としての蛍光ペンの太さを細くする細かいカスタマイズですが、蛍光ペンの太さを少しだけ細くしました。キツイ感じがしていたので、これでスッキリしました。参考にコードを紹介しておきます。これを子テーマのスタイルシート(style.css)に書くと、strongタグで囲んだ文字に蛍光ペンが付きます。H2〜4の見出しタグを変更する見出しタグは、ネットでいろいろ調べると、ホント多様なものが公開されており、コピペするだけでカスタマイズが可能です。私は、以下のサイトを参考にカスタマイズすることにしました。Simplicityの見出しをカスタマイズしよう。結果、以下のとおりです。コードは以下のとおりです。このコードを子テーマのスタイルシート(style.css)に書くだけです。#800000;}ただ、このコードを子テーマのスタイルシート(style.css)に書いても、以下の記事で書いたとおり、なかなか反映されず苦労しました。同じようにCSSのコードが反映されない場合は参考にしてください。WordPressの「Simplicity2」に移行できなかったデザインの不具合の修正の実例以前の記事で書いたとおり、本ブログをWordPressのテーマ「Simplicity」から「Simplicity2」に移行しました。装飾のHTMLをすぐに呼び出せるように準備するSimplicity2は、本文に簡単なHTMLを書けば、以下のような装飾がすぐにできます。/div>と書いているだけです。他にも以下のサイトのとおり様々な装飾がありますので、これらのコードを、ブログを書いているときにすぐに呼び出せるように、「Copied」というアプリにテンプレとして登録しておくことにしました。レバこのアプリは、iOSアプリだけでなくMacもあり、データを同期できます。基本的にはコピーしたテキストや画像を蓄積し、他の端末でもペーストできるようにするものです。蓄積したデータをグループ分けすることができますので、よく使うテキストなどをグループ分けしておき、すぐにペーストできるように管理できます。書いて、パソコンでアップするときはMacのMarsEditを使っています。WorkFlowyでブログを書く5つの魅力私は、ブログの下書きをWorkFlowyで書いています。レバMarsEditは、書きながら自分のブログのデザインでプレビューを見ることができますが、今回、前述のとおり、カスタマイズをしたので、MarsEditのプレビューの設定を修正する必要がありました。これは、次のサイトのとおり進めれば問題なくできます。おわりに今回のカスタマイズは、本ブログを始めた約2年前のカスタマイズ以来となりました。これでデザイン的には、満足しています。(私の限られた知識ではこれが精一杯)ただ、HTMLやCSSにはぜんぜん詳しくないので、詳しい方から見たら適切でないコードを書いていたらご容赦ください。結果としてご覧いただいてるブログのデザインができているのは間違いありません。あわせて、ブログのタイトル下のリード文も少し修正したのですが、ここは今後もう少し精査したいと思っています。本記事は参考になりましたか?もし、少しでも参考になったことがあれば、フォロー&シェアしていただけるとうれしいです!!@ottaka18さんをフォローまた、「1分で読める書評ブログ」も運営していますので、興味があれば、ぜひご覧ください。ME小田やかた二人の子どもを持つ共働きサラリーマンパパ。現在、小学生と保育園児の子育てに奮闘中です。タスク管理がメインテーマのブログです。知的生産のある暮らし(新しい価値を生む暮らし)を目指しています。Watchユーザーの起床から就寝までの実際の使い方を徹底公開〜』を出版。(1)プロフィール二人の子どもを持つ共働きサラリーマンパパ。現在、小学生と保育園児の子育てに奮闘中の小田やかた(@ottaka18)です。タスク管理がメインテーマのブログです。Evernote、たすくまなどのアプリを使って知的生産のある暮らし(新しい価値を生む暮らし)を目指しています。詳細ページ▶︎▶︎お問い合わせはこちら◎medium他に、ささっと読める雑食系のプチ書評「1分で読める書評ブログ」を運営しています。(新しいタブで開く)。画像が装飾目的のみであれば空欄にします。(新しいタブで開く)。画像が装飾目的のみであれば空欄にします。(新しいタブで開く)。画像が装飾目的のみであれば空欄にします。(新しいタブで開く)。画像が装飾目的のみであれば空欄にします。値で、動画の言語と種類を設定できます。(字幕、キャプション、説明、チャプター、またはメタ情報)関連付けられた字幕がありません。#>項目は見つかりませんでした。#>アプリアイコンとして。