細部にまでこだわりたい人向けのSimplicityカスタマイズ

WordPressアイキャッチ

はてなブログからWordPressに引っ越し、Simplicityをインストールしてから今日まで様々なカスタマイズを行ってきました。今回はその中から、あまり目立たない地味なカスタマイズをご紹介したいと思います。完全に細部にまでこだわりたい人向けです。

SPONSORED LINK

以前紹介したSimplicityカスタマイズ4つ

当ブログでは、以前にもカスタマイズ記事を書いています。そのさいは、以下5つのカスタマイズをご紹介しました。

1、SNSボタンをフラットにする

SimplicitySNSボタンカスタマイズ後

2、引用デザインをミニマルにする

Simplicity引用デザイン

3、サイドバーのカテゴリーを2列にする

4、ヨメレバ・カエレバのデザインを変更

4-1、カスタマイズ後のヨメレバ

Simplicityヨメレバカスタマイズ後

4-2、カスタマイズ後のカエレバ

Simplicityカエレバカスタマイズ後

この4つのカスタマイズ方法は、下記の記事をご覧ください。

関連SimplicityのSNSボタン・引用・目次・ヨメレバ・カエレバをカスタマイズ

では、今回は当ブログに行っている、これ以外のSimplicityカスタマイズを解説していきます。

5、一部のみフォントを変更する

Simplicityは、デフォルトで以下のフォントが設定されています。

■Simplicityのフォント設定

font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;

当ブログでは、ブログタイトル、本文の見出し(h1~h5)、サイドバーの見出しのみフォントを変更しました。変更した部分とフォント指定は以下の通り。

■フォントを変えている部分

Simplicityフォント変更1

■変更したフォント設定のCSS

font-family: 'Open Sans',"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;

フォント変更前、変更後を比較すると、こんな感じ。変更後は、フォントがシュッ!としました。

■Simplicityフォント変更前(拡大)

Simplicityフォント変更2

■Simplicityフォント変更後

Simplicityフォント変更3

6、記事下に「おすすめカテゴリー」を追加

記事直下のコンテンツを充実させておくことは内部SEO的にも良いと思い、当ブログではGoogleAdSenseの関連コンテンツユニットとSimplicityの関連記事の間に、3×3段のおすすめカテゴリーリストを追加してみました。モバイル表示のときは、記事下とトップリストの2箇所に表示させています。モバイルユーザーの多くはハンバーガーメニュー使わないだろうなと思って……。

■Simplicity自作のおすすめカテゴリー(パソコン表示・記事下)

Simplicityおすすめ記事

■Simplicity自作のおすすめのカテゴリー(インデックストップのモバイル表示)

Simplicityカテゴリーカスタマイズ

【HTML】

<div id="menu-box1">
<ul id="menu1">
<li><a href="ここにURL">カテゴリ1</a></li>
<li><a href="ここにURL">カテゴリ2</a></li>
<li><a href="ここにURL">カテゴリ3</a></li>
<li><a href="ここにURL">カテゴリ4</a></li>
<li><a href="ここにURL">カテゴリ5</a></li>
<li><a href="ここにURL">カテゴリ6</a></li>
<li><a href="ここにURL">カテゴリ7</a></li>
<li><a href="ここにURL">カテゴリ8</a></li>
<li><a href="ここにURL">カテゴリ9</a></li>
</ul>
</div>

【CSS】

#menu-box1{
 display: flex;
 margin-top:20px;
 margin-bottom:30px;
}
#menu1{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}
#menu1 li{
  display: block;
  float: left;
  width: 33.3%;
  margin: 0;
  padding: 0;
}
#menu1 li a{
  display: block;
  padding: 12px 0 10px;
  color: #333;
  text-align: center;
  text-decoration: none;
 background:#eee;
 border:1px solid #fff;
}
#menu1 li a:hover{
  background:#bbb;
 color:#fff;
}

6、フォルダアイコンを変更

Simplicityのデフォルトデザインでは、メタデータのカテゴリーアイコンが黒いフォルダになっています。黒フォルダだと主張が強すぎるので、これを白ベースのアイコンに変更。

■変更前のSimplicityフォルダアイコン

Simplicityカテゴリーアイコン変更後

■変更後のSimplicityフォルダアイコン

Simplicityカテゴリーアイコン変更前

フォルダアイコンを変更するには、以下CSSを追加するだけです。なお、このアイコンを変更すると、トップページの一覧記事、個別記事、カテゴリー一覧記事すべてのフォルダアイコンが一括変更されます。

【CSS】

.fa-folder::before {
  font-size: 13px;
  content: "\f115";
}

7、サムネイルサイズをPCとモバイルで変更

当ブログのサムネイルは、パソコン表示なら160×120、モバイル表示なら100×80になるようCSSで自動調整しています。Simplicityでは記事のサムネイルが150×150の正方形になっているので、まずはサムネイルを横長にする設定を行い、それからCSSでレスポンシブ対応させます。

サムネイルサイズの変更方法は、こちらのサイトを参考にさせていただきました。

参考【simplicity】記事一覧のサムネイル画像を好きなサイズに変更!簡単な方法で横長に出来ます

【サムネイルサイズを切り替える方法】

まずは、上記サイトにある1~3の設定を行ってください。エックスサーバーを使用している場合、手順2の「entry-card.php」は、インフォパネル→WEB FTPから探せます。上記サイト1~3の手順でサムネイルサイズを横長に変更したら、次にCSSを追加していきます。

現在、CSSの最後は手順3で追加した、

.entry-thumb img{
width: 200px;
height: 120px;
border-radius:0px;
}

になっているかと思います。このコードの下に、以下のCSSを追加してください。

.entry-thumb {
    display: block;
    float: left;
    margin: 0 1.5em 1em 0;
    width: 160px;
    height: 120px;
    overflow: hidden;
}
.entry-thumb img {
    max-width:100%;
    height: 100%;
    position: relative;
    left: 50%;
   -webkit-transform:
   translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}
@media screen and (max-width:768px){
.entry-thumb {
    width:100px;
   height:80px;
}}

これで、パソコン表示とモバイル表示とでサイズが切り替わる、レスポンシブ対応のサムネイルの出来上がりです。なお、これはカスタマイズ設定にある「全体・レイアウト」で、「エントリーカード全体をリンク化」にしていても、していなくても効くCSSです。そして、AndroidOS、iOSにも対応済み。iOSはよくCSSが効かずレイアウトが崩れていることが多いんですが、iPhoneで確認したところ問題なく表示されていました。

パソコンとモバイルでサムネイルサイズを切り替えると、こんなデザインになります。

【パソコン表示のSimplicityサムネイル(カスタマイズ後)】

サムネイルサイズ変更パソコン

【モバイル表示のSimplicityサムネイル(カスタマイズ後)】

Simplicityサムネイル変更モバイル

8、Simplicityのバッジ(クイックタグ)カラー変更

Simplicityには、参照・参考記事などに使える文字装飾スタイルが、「クイックタグ」としてデフォルトで備わっています。私はその中にある「バッジ」をよく使用するんですが、デフォルトのオレンジ色だと派手すぎるので、青色にカスタマイズしました。

まず、これがSimplicityのデフォルト。バッジの色のカラーコードは「#fc7a22」。

Simplicityバッジカラーfc7a22

そして、カスタマイズ後はこの色。カラーコードは「#2e65bb」です。

Simplicityバッジカラー2e65bb

ブログの配色を変更したときは、バッジの色を青から緑に変更するときもあります。緑にする場合のカラーコードは「#3aa97f」。

Simplicityバッジカラー3AA97F

リンクは目立ってナンボだと思いますが、まあ文章を読むのに邪魔にならない感じがいいかなと思い、当ブログでは「#2e65bb」の青色にカスタマイズしています。

……というわけで、Simplicityの地味なカスタマイズをご紹介しました。またブログにカスタマイズを施したときは、この記事に追記していきたいと思います。ご参考になれば。

SPONSORED LINK

あわせて読みたい



トップへ戻る