CSSやHTMLに詳しくない私でもできた「Simplicity2」のカスタマイズ

////参考になった内容があればシェアをお願いします////

アイキャッチ

本ブログは、WordPressの「Simplicity」を使っているのですが、先日、「Simplicity2」へ移行しました。

HTMLやCSSなどの知識が乏しい私でもできたWordPressの「Simplicity2」への移行

移行したとき、Simplicityのデザインがうまく引き継げなかった部分があり、以下の記事のとおり、元に戻すための修正の作業が必要でした。

WordPressの「Simplicity2」に移行できなかったデザインの不具合の修正の実例

その修正にあわせ、もう少しシンプルなブログにしたいと思い、いくつか新たにカスタマイズをしたので、ご紹介したいと思います。

ちなみに、Simplicityを使い始めた約2年前には、以下の記事で紹介したカスタマイズをしていますので、そこからの変更もしくは追加のカスタマイズとなります。

【第4回】初心者の私でもできた「Simplicity」のカスタマイズ(其の壱)

カスタマイズをする前には、バックアップをとっておいた方がよいかと思いますが、私は以下のサイトを参考にバックアップを取りました。

WordPressバックアップ、FileZillaの使い方!ダウンロード・インストール・設定方法の手順
Macも使えるFTPソフトFileZilla(Windowsも対応)はファイルのディレクトリ(階層化されたファイル)が見れるのが特徴です。ファイル転送(バックアップ・アップロード)に必要な、FileZillaの導入から詳細な設定方法、画面の
スポンサーリンク

1. カスタマイズの内容

(1) トップページの記事一覧をフラットにする

トップページに並ぶ記事の一覧の抜粋と「記事を読む」を消し、シンプルな形にしました。

▼before

before

▼after

after

Simplicity2では設定で、抜粋する文字をゼロにし、「記事を読む」を消すことはできると思いますが、次の手順で以下のコードを子テーマのスタイルシート(Style.css)にコピペしました。手順はこうです。

下の画像のとおり、WordPressの管理画面の「外観」の「テーマの編集」を選び、右のほうにあるテーマ選択から「Simplicity2-child」を選びます。

管理画面

スタイルシート

その中にある、スタイルシート(Style.css)に以下のコードを追加します。

これは以下のサイトを参考にさせていただきました。

Simplicityの記事一覧をフラットにするカスタマイズをする方法紹介
どうもIT大好きFwwwです。 引き続きSimplicityカスタマイズの記事を書かせていただきます。 今回は…

また、記事一覧のエントリーカードのどの部分をクリック(タップ)しても、記事本文に行けるように設定をしました。

設定方法は、WordPressの管理画面の「外観」のカスタマイズの中の「レイアウト(全体・リスト)」にある「エントリーカード全体をリンク化」をオンにします。

さらに、エントリーカードにマウスポインタを待っていくと色が薄いピンク色に変わるようにカスタマイズしました。

カスタマイズ方法は、以下のコードを子テーマのスタイルシート(Style.css)に書き加えるだけです。

(2) 関連記事の一覧をフラットにする

記事のページの下に表示される関連記事の一覧も前項の記事一覧と同じようにフラットにしました。また、あわせてエントリーカードにマウスポインタを待っていくと色が薄いピンク色に変わるようにカスタマイズしました。

▼before

関連記事

▼after

after

方法は前項でも紹介した前述のサイトをもとに、次のコードをCSSに追加しました。

また、関連記事の見出しは、以下のコードを書き加えてカスタマイズしました。

ただ、これだと関連記事の文字の大きさが大きすぎたので、以下のコードを子テーマのスタイルシートに書き加えました。

また、モバイル表示したとき、関連記事のタイトルの文字の大きさが大きすぎたので、もう少し小さくしました。

方法は、以下のサイトを参考にさせていただきました。

Simplicityはスマホ対応だけど見出しの文字が大きい
Simplicityはスマホ対応だけどパソコンでバランスを考えて装飾している。けどスマホで見たらレスポンシブ表示はされているけど見出し文字が大きくなる。見出しをパソコンでは1行で済むようにしているのに、スマホでは2行になってしまう。見出しの

まず、Simplicity2の子テーマのスタイルシート(Style.css)に記載しているH2などの見出しのコードをそのまま子テーマの「mobile.css」にコピペします。

関連記事のタイトル文字は、H3タグがもとになっているようなのでで、今コピペした「mobile.css」のH3タグのフォントサイズを小さくすれば、小さくなります。

(3) トップページの記事一覧の記事のタイトル下にタグを追加する

トップページの記事の一覧でタイトルの下には、デフォルトではカテゴリーが表示されますが、ここにタグも表示するカスタマイズをしました。

▼before

before

▼after

after

方法は以下のサイトを参考にさせていただきました。

【Simplicity2】トップページの記事リスト(エントリーカード)内にもタグを表示
エントリーカード内(サイトトップページに表示される記事リスト内)にもタグを表示するには、記事上部にタグを表示する方法と同じことを、エントリーカードのテンプレート(「entry-card-content.php」)で行えば良いはず。実際、その

簡単に解説すると、WordPressの管理画面の「外観」から「テーマの編集」を選び、右上の編集するテーマから「Simplicity2」を選択します。子テーマではなく親テーマです。

そこから「entry-card-content.php」ファイルを選択します。

管理画面の親テーマ

表示されたコードからの中から

< ?php //インデクスにタグを表示したい場合コメントアウト

と書かれた内容を探し、その次の行の頭についてる「//」を削除すれば完了です。

なお、これはSimplicity2の親テーマのカスタマイズになるので、Simplicity2のアップデートがあった場合は、同様の作業が必要になりますので注意が必要です。

(4) 記事のタイトル下にタグを追加する

前項と同様、記事のタイトルの下には、デフォルトではカテゴリーが表示されますが、ここにタグも表示するカスタマイズをしました。

▼before

after

▼after

after

方法は以下のサイトを参考にさせていただきました。

Simplicityでタグの位置をカテゴリの横に変更する方法
WordPressの備忘録です。このブログで使っているWordPressのテーマ「Simplicity」。このテーマのタグの位置なのですが、通常は記事下部のSNSボタンの下に表示されます。しかし、その位置だと読者の目に付きにくいし、使い勝手

簡単に解説すると、WordPressの管理画面の「外観」から「テーマの編集」を選び、右上の編集するテーマから「Simplicity2」を選択します。前項同様、子テーマではなく親テーマです。

そこから「entry-body.php」ファイルを選択します。

表示されたコードから
< p class=”footer-post-meta”> の下にある、

< ?php if (is_tag_visible()): ? >

< span class=”post-tag”>’,’, ‘); ? >

< ?php endif; ? >

の3行をコピーします。

(これは記事の一番下に表示されるタグのコードのため、そのタグを消したい場合は、このコードを削除します。)

この3行のコードを上の方にある < p class=”post-meta” > の中、 < ?php endif; //is_category_visible? > と < ?php //コメント数 の行の間に挿入します。

最後にスタイルシート(style.css)で、下の画像の位置に「.post-meta .post-tag,」を追記すれば完了です。

タグの追加

なお、前項同様、これはSimplicity2の親テーマのカスタマイズになるので、Simplicity2のアップデートがあった場合は、同様の作業が必要になりますので注意が必要です。

(5) Twitterボタンのツイート数を表示する

Simplicity2では、記事の中のTwiterアイコンにツイート数を表示させる機能があります。

Tweet数

この機能を使うには「count.jsoon」への登録が必要となります。

私は、以下の記事で書いたとおり、Simplicity2に移行したときに登録をしました。私の場合、登録してから2日後に完了のメールが届きましたが、設定は完了メール到着後にすることになります。

HTMLやCSSなどの知識が乏しい私でもできたWordPressの「Simplicity2」への移行

登録と設定は、以下のサイトの手順に沿って行えば問題なくできました。

Simplicity2でTwitterボタンのツイート数を表示する方法
Simplicity2.0.1にて、count.jsoonを用いたツイート数の表示機能を追加しました。 ツイートの表示機能は、count.jsoonへの登録と、テーマカスタマイザーでの簡単な設定が必要です。 今回はその方法について説明した

(6) アーカイブをドロップダウンにする

右のメニューの中にある記事のアーカイブをドロップダウン表示にしました。

▼before

after

▼after

after

これはWordPressの管理画面の「外観」の「ヴィジット」を選択し、「アーカイブ 過去の記事」をドラッグしてサイドバーヴィジットの一覧に入れ、「ドロップダウン」表示にチェックを入れれば完了です。

アーカイブ

(7) スライドインメニューに「home」を追加する

Simplicity2では、モバイルの場合「スライドインメニュー」を表示させることができます。

デフォルトでは次の画像のメニューです。

これを次の画像のとおりカスタマイズします。

※上記2つの画像は「Simplicityのスライドインメニューで「ホーム」ボタンを表示するカスタマイズ方法」から転用させていただきました。

ちなみに、そとそもスライドインメニューの表示の設定は、WordPressの管理画面から「外観」の「カスタマイズ」を選択し、「レイアウト(モバイル)」の中にあるスライドインを選びます。

色はライトとダーク、位置を画面の上と下を選ぶことができます。

スライドインメニューの設定

このスライドインメニューは、前述の画像のとおりデフォルトでは、「home」というメニューはないのですが、私は、デフォルトのメニューの「前へ」と「次へ」の代わりに「home」を加えることにしました。

カスタマイズの方法は、次のサイトのとおりですが、子テーマのスタイルシート(style.css)に次のコードを加えるだけです。

Simplicityのスライドインメニューで「ホーム」ボタンを表示するカスタマイズ方法
Simplicity2.3.6からモバイルのスライドインメニューに「ホーム」ボタンを追加しました。 ただし、デフォルトの設定では、「ホーム」ボタンはスタイルシートで以下のように非表示になっています。 今回は、これを以下のようにするカスタ

(8) 強調としての蛍光ペンの太さを細くする

細かいカスタマイズですが、蛍光ペンの太さを少しだけ細くしました。少しキツイ感じがしていたので、、これでスッキリしました。

参考にコードを紹介しておきます。これを子テーマのスタイルシート(style.css)に書くと、strongタグで囲んだ文字に蛍光ペンが付きます。

(9) H2〜4の見出しタグを変更する

見出しタグは、ネットでいろいろ調べると、ホント多様なものが公開されており、コピペするだけでカスタマイズが可能です。

私は、以下のサイトを参考にカスタマイズすることにしました。

Simplicityの見出しをカスタマイズしよう。コピペでできる5つのデザインを紹介
SimplicityはWordpress初心者でも簡単にカスタマイズできますし、SEO対策も抜群で最高のテンプ…

結果、以下のとおりです。

見出しタグ

コードは以下のとおりです。このコードを子テーマのスタイルシート(style.css)に書くだけです。

ただ、このコードを子テーマのスタイルシート(style.css)に書いても、以下の記事で書いたとおり、なかなか反映されず苦労しました。もし、同じようにCSSのコードが反映されない場合は参考にしてください。

WordPressの「Simplicity2」に移行できなかったデザインの不具合の修正の実例

(10) 装飾のHTMLをすぐに呼び出せるように準備する

Simplicity2は、本文に簡単なHTMLを書けば、以下のような装飾がすぐにできます。

例えば、以下の装飾は< div class="information">補足説明の装飾< /div>と書いているだけです。

補足説明の装飾

他にも以下のサイトのとおり様々な装飾がありますので、これらのコードを、ブログを書いているときにすぐに呼び出せるように、「Copied」というアプリにテンプレとして登録しておくことにしました。

Simplicityの基本的な文章装飾スタイルを使う方法まとめ
Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。以下では、それら拡張クラスの使い方について説明したいと思います。文字装飾まずは、文字装飾用に以下のようなクラスがあります。太字文字を&l
Copied

無料
(2017.12.04時点)
posted with ポチレバ

このアプリは、iOSアプリだけでなくMacもあり、データを同期できます。基本的にはコピーしたテキストや画像を蓄積し、他の端末でもペーストできるようにするものです。

また、蓄積したデータをグループ分けすることができますので、よく使うテキストなどをグループ分けしておき、すぐにペーストできるように管理できます。

2.「MarsEdit」でプレビューを反映させる

私は、ブログはWorkFlowy で書いて、パソコンでアップするときはMacのMarsEditを使っています。

WorkFlowyでブログを書く5つの魅力

MarsEditは、書きながら自分のブログのデザインでプレビューを見ることができますが、今回、前述のとおり、カスタマイズをしたので、MarsEditのプレビューの設定を修正する必要がありました。

これは、次のサイトのとおり進めれば問題なくできます。

MarsEditのプレビュー表示をWordpressテーマと一致させる方法
MarsEditのプレビュー画面は、同期させたwordpressブログと同じデザインにはなっていません。少しカスタマイズすると、同じデザインになります。コピペで(*'-')b OK!です。

3. おわりに

今回のカスタマイズは、本ブログを始めた約2年前のカスタマイズ以来となりました。これでデザイン的には、満足しています。(私の限られた知識ではこれが精一杯)ただ、HTMLやCSSにはぜんぜん詳しくないので、詳しい方から見たら適切でないコードを書いていたらご容赦ください。しかし、結果としてご覧いただいてるブログのデザインができているのは間違いありません。

また、あわせて、ブログのタイトル下のリード文も少し修正したのですが、ここは今後もう少し精査したいと思っています。


以上です。

本記事は参考になりましたか?
もし、少しでも参考になったことがあれば、フォロー&応援クリックをいただけるとうれしいです!!



にほんブログ村 スマホ・携帯ブログ iPhoneへ
にほんブログ村 子育てブログ パパの育児へ
にほんブログ村 健康ブログ 冷えとり健康法へ



スポンサーリンク

////参考になった内容があればシェアをお願いします////

////フォローはこちらから////