オトナポケット

生活を豊かにするモノ、紹介します

WordPressテーマ「humming bird」をちょこっとカスタマイズしました。

   

現在使っているWordpressテーマ「humming bird」は、OPENCAGEというサイトで販売されている、有料のテーマになります。webデザイナーである矢野キチさんが作られているという事で、めっちゃハイセンスな見た目になっています。

事前公開された段階から、既に買う事は決めていて、発売されたらすぐに購入。購入してから2か月間はとりあえず、デフォルトの状態で使っていました。

実際に使い始めて数カ月経つと、いくつか、気になるところが出てきたので、少しだけ手を入れて、カスタマイズしてみました。

見出しのカスタム

h2の見出しの形があんまり好きじゃなかったので、こちらの形を変更。ジェネレータを使って見出しのCSSを作成して、スタイルシートのh2のCSSを変更。

記事内のh2タグのCSSは、「.entry-content h2」という形です。検索をかけてCSSを書き換えて、見出しをこの章の見出しのような、上下黒線で囲むシンプルな形に変更しました。

ちょっと本当は、影がかからないようにCSSを組んでいるつもりなんですが、なぜか影がついちゃっています。これの理由がわからない・・・。出来る限りシンプルがいいので、もう少し解決策に取り組んでみるつもり。

フォントが小さいので、サイズアップ

「humming bird」の最初設定されているフォントはちょっと小さめです。そのため、18pxにサイズアップしました。フォントについては、「body」の中のfont-sizeを調整しました。

201602112

さらに、pタグでの隙間が狭く感じたので、こちらも段落間が広くなるように調整。こちらは「.entry-content p」の中に入っています。ついでに、行間(line-height)も少しだけ広げています。

20160211

蛍光マーカー風の強調

ブログにしても、アフィリエイトにしても重要な強調。色を変えるよりも、蛍光マーカーの方が個人的に好きなので、こちらもカスタムを実施。参考にしたのは、こちらのサイトです。

このサイトで使用されているCSSをそのまま貼り付けるだけでは適用できないので、.marker_yellow_futo」の部分を、「.entry-content strong」に書き換えて貼り付ければOK。これで、Blod体(太字)にした時に自動的に蛍光マーカーが引かれるようになります。

ロゴをパワーポイントで作成

とりあえずサイト開設してからロゴは考えればいーや!って事で、半年近く放置しちゃってました。せっかくカスタマイズしたのに、ロゴが決まってないのはなぁ・・・という事でパワーポイントで力技で作成。イラストレーターもあるんですけど、こっちの方がさくっと作れて楽なんですよね。

LOGOという事で、こんな感じのロゴを作ってみました。Otona-Pocketというブログ名なので、OとPを組み合わせたイメージで。矢印は未来に向かうとか、そんな意味を込めたかったけど、何も意味はありません。ただのオシャレ感出すためだけです(お洒落かどうかは不明です)。

折角なので、トップページに掲載。それなり感は出せたでしょうか。

まとめ

なんだかんだで、カスタマイズで3、4時間くらいかかりました。どこにh3タグがあるかわからなくて、凄い手こずったんですよね。まだまだ、勉強不足です。

フォントを変えたり、サイドバーの印象を少しだけ変えたいので、もう少しだけカスタマイズする予定。やっぱり、Wordpressってイジりしろが多すぎてこっちに注力してしまうなぁ・・・。さぁ、記事を書こう。

スポンサーリンク

オススメ記事はこちら!!

1
【2016年版ランキング】オススメのSIMフリースマホ、51種類を紹介します!

2015年に格安SIMが大手家電量販店に並んだりと本格化し始めてから、同時にSI ...

2
おすすめの面白いアプリ系マンガ、ランキングベスト20!!【マンガボックス、マンガワン、comico、マガジンポケット】

こんちわっす!せーごです。アプリでマンガ読んでますか?僕は毎日、電車の中で読みま ...

201603012 3
mineoのAプラン、Dプランの通信速度を実際に測定、比較してみました。

どうもこんにちは、せーごです。 今年から使い始めたmineo、現在docomoプ ...

 - wordpress ,