たもトピ86世代アラサー男子がエンタメを中心に様々な情報をお届けしています。カスタマイズWordPress初心者の僕がテーマ「Simplicity」を使っている理由という記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。管理画面で出来ることだけだと、どうしてもデフォルト感が抜けず他の方と同じようなデザインになってしまいます。記事と記事の間に線を引く「記事を読む」ボタンの装飾サイドバー見出しの装飾simplicity1系と2系ではカスタマイズをそのまま使えない部分がありますので、コードをそれぞれに記述しています。「たもトピ」は今月で3周年!2018年の目標とかブログリニューアルの話とか。早いものでもうこの季節がやって来ましたが、この「たもトピ」も...tamotopi.com▲3周年でブログをリニューアルしたので、この記事で紹介しているデザインとは少し変わっています。記事と記事の間に線を引く「記事を読む」ボタンの装飾サイドバー見出しの装飾おまけ:別のブログで使っている見出しデザインまとめまずは子テーマのダウンロードスタイルシートなどを変更してカスタマイズする際に親テーマで変更すると、テーマを更新する度に修正しなければならなくなるので、必ず子テーマをダウンロードしましょう!子テーマをカスタマイズしておけば、親テーマが何度更新されてもカスタマイズをやり直す必要はありません。Simplicityの子テーマをインストールする方法【公式サイト】ブログタイトルをロゴに変更するこれまではヘッダー画像+タイトルだったんですが、どうもパンチがないのでロゴを作成。Logo」というサイト。Logo」【男子ハック】めっちゃ簡単に出来ましたし、ブログのタイトルに使うサイズなら無料で作成できるのでオススメです。「simplicity」ならロゴを作れば、「外観」→「カスタマイズ」→「ヘッダー画像」で変更できます。Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法【公式サイト】PCだけじゃなくスマホでも表示されますので一気にイメージ変わりますよ!!無料版だとロゴの左下にウォーターマークが出ます。見出しタグの変更(h2、h3)ずっと変更したかった見出しタグをついに変えました!どちらも子テーマのスタイルシート(style.css)にコードを追記するだけで変更されます。「simplicity」作成者のわいひらさんが使われている見出しを、色を変更して使わせていただきました。#57B196の部分を、文字は#fffの部分を差し替えれば色が変わります。違う見出しがいいという方は、以下の記事も参考にしてみてください。労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ【寝ログ】h3はこんな感じこちらはデフォルトの下線の色を変更しただけです。0;}2系は1系のコードのままだと、画像のように関連記事の中にh3見出しが入ってしまうので、#comment-area・#related-entriesを削除しています。h2の後にカスタマイズのコードを書いてあげればOK。個人的には23pxだと文字が大きく感じるので、20pxを指定しています。背景画像の設定スマホでは反映されませんが、PC表示では薄い灰色に変更してます。Patterns」というサイトで背景画像をダウンロードしました。記事と記事の間に線を引くトップページの記事間をすっきりさせるために線を引きました。15px;}dottedの部分をsolidに変更すれば直線が引けます。変更して記述すれば関連記事のボタンも装飾できます。「記事を読む」や本文抜粋を表示させないためにはスマホ表示はよりすっきりと見せたかったので、「記事を読む」ボタンと本文抜粋を削除しました。a{display:none;}「記事を読む」を表示させないコードがこちら。}123.entry-snippet{display:none;}本文抜粋はこのコードで非表示になります。変更して同じこのコードを記述すればいいです。「記事を読む」ボタンを右側に移動(PC)ずっと「記事を読む」ボタンが左側にあるのに違和感を感じていたのですが、右側に移動させる方法が分からずそのままでした。!ブログ仲間のオクタニさん(@okutani_t)に相談したところ、右側に移動させることができましたので、コードを残しておきます。貼りつけるのは、これまで通り子テーマのstyle.cssでOKです。*/}margin-rightは好きな値を指定してください。これでブログトップページの「記事を読む」ボタンが右側に移動します。関連記事の「記事を読む」ボタンを右側に移動させたい場合は以下のコードを貼り付けます。*/}僕はスマホでは「記事を読む」ボタンを非表示にしてますので、スマホの「記事を読む」ボタンがどう表示されるのかを確認していません。不具合があった場合は適時ご対応ください。vdeepvdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。vdeep.net▲オクタニさんのブログにもWordPressカスタマイズ記事があるのでこちらもチェックしてみてください。サイドバー見出しの装飾サイドバーの「人気記事」「カテゴリー」などの見出し部分も簡単に装飾しました。後にコードを記述すればOKです。僕の場合はすごく簡単に以下のように記述して、アンダーラインが出るように装飾しています。【twitter・LINE@ボタン】やらなきゃやらなきゃと思いながら3ヶ月も放置していましたが、ついにサイドバーにプロフィールを設置いたしました。今回も他のサイト様...tamotopi.com僕もそうなんですが、気になったブログでは必ずプロフィールを確認するという方が多いので、固定ページだけでなく、サイドバーにもプロフィールを設置しておくのがおすすめです。twitterボタン、LINE@の友だち追加ボタンの設置方法も解説してあります。́Д`)1系のコードで書いてあるので、2系で使う場合はh3見出しの#related-entriesを削除したり、サイドバー見出しをh3に変えて使ってください。h2は塗りつぶし以外のデザインにしたかったので、「まさろぐ」さんのカスタマイズ記事を参考にシンプルなデザインにしています。30px;}h3は「Stinger」のようにアイコンを入れたかったので、「YukiOhno.com」さんの記事を参考に設定しています。h3:beforeの部分でアイコンフォントを指定してあります。アイコンを変更するには「FontAwesome」の中から好きなアイコンを選んで、『f○○○』のUnicodeをコピーして、先ほどのコードの『f044』の部分と差し替えればOKです!直前の『\』なんかを消しちゃうと表示されなくなっちゃうので、『”\f○○○”』になるようにf以下の数字だけを置き換えてくださいね!サイドバーの見出しはこんな感じ。12px;}まとめ振り返ると簡単なカスタマイズしかできていないのですが、書き換える場所やコードが分からず1つ1つ検索しなくてはならなかったのでとても時間がかかりました。参考にさせていただいたサイト様には本当に感謝です!!今回の僕と同じカスタマイズなら子テーマにコードを記述するだけで簡単にできますので、カスタマイズしてみたいけどもどうすれば分からないという方は参考にしてみてください!それではまた!!WordPress初心者のテーマ選びと初期設定、おすすめプラグインについて先月からこのブログ以外にサブブログ、運営報告用などWordPressで新たに3つブログ(サイト)を作成したんですが、何回やっても初期設定...tamotopi.com▲WordPressの初期設定やプラグインについてはこちら。【twitter・LINE@ボタン】やらなきゃやらなきゃと思いながら3ヶ月も放置していましたが、ついにサイドバーにプロフィールを設置いたしました。今回も他のサイト様...記事を読むWiMAXはクレカなし(口座振替)でも契約できる?デビットカードが使えるかも調べてみたよ!WiMAXを検討しているけど、クレジットカードを持っていない。使いたくないという方もいらっしゃると思うので、クレカ以外の支払い方法...記事を読むWordPress初心者のテーマ選びと初期設定、おすすめプラグインについて先月からこのブログ以外にサブブログ、運営報告用などWordPressで新たに3つブログ(サイト)を作成したんですが、何回やっても初期設定...記事を読む「たもトピ」は今月で3周年!2018年の目標とかブログリニューアルの話とか。コメントをキャンセルメールアドレスが公開されることはありません。名前メールアドレスサイト上に表示された文字を入力してください。新着記事もしも「かんたんリンク」のスマホ表示を小さくするカスタマイズ福岡空港の国際線に地下鉄で行く方法|国内線から連絡バスに乗る漫画をまとめ買いするなら「漫画全巻ドットコム」がお得!口コミや評判も紹介!海外旅行でスマホをネットに繋ぐ4つの方法。WiMAXで1年契約が可能に!いつのまにか超優良プロバイダーになってました!たもつのプロフィール福岡市在住、86世代アラサー男子。2014年に心を病んでしまい失業を経験。そのことから会社に属さない生き方を目指し、自分で価値を作り出すスキルを身につけるべくブログを始める。→詳しいプロフィールはこちらなにかあれば記事のコメント欄、LINE、もしくはtwitterまでお願いします。