ミニマルなブログテーマ「Moka」をカスタマイズ

このWordPressでこしらえているブログのテーマを、ElmastudioMokaに戻すことにした。
 2015年は、WordPress純正無料のTwenty Fifteenにすっかりお世話になった
 今でも気に入ってるし、不満はないし、また折を見て再登板させるかもしれない。
 だから最大の理由は、Mokaが作り上げてくれる余白が恋しかったからという大変いい加減なものなのだ。

余白とフォント

スマホやタブレットから見る分には、両者のレイアウトにはほとんど違いはない。
 しかし、デスクトップのブラウザから見るとその余り具合は全く違う。
 Mokaではサイドバーにウィジェットが貼れないし、フォントのサイズもTwenty Fifteenよりおとなしい。
 そのおかげで、絶妙な余白具合が形成される。
 iPhoneから検索の果てにたどりついて、もう二度とは訪れない読者とは違って、デスクトップブラウザからのイチバンの読者である僕自身が、Twenty Fifteenの「つまり」具合が辛くなって、もうちょい風通しの良さを欲するようになった。

その道ではコンプリートなシロウトの僕だけど、フォントって難しい。
 本文を表示するのに一番いいフォントは、読んでいて「このフォントなんだろ?」と気にならずに気持ちよく読めるものであり、それには大きさということも大きく関係する。
 押しの強い大きさとも、読みづらい小ささとも無縁なホドホド感が、無意識の快適さには必要なのだろう。
 ここんとこ、Twenty Fifteenのフォントサイズがちょっとトゥーマッチに感じるようになってしまっていたのだ。

ウィジェット

Twenty Fifteenでもサイドバーに余計なウィジェットを貼らない方法もあるだろう。
 しかし、逆に言うと、Twenty Fifteenではサイドバー以外にウィジェットが貼れない。
 全く何にもないと、ナビ的な観点で不案内かもしれない。
 Mokaでは、記事下にウィジェットを貼ることができる。
 記事本文を読む時には邪魔にならず、読み終わってイロイロ探りたい時には、ちょっとした道案内になるだろう。

ロゴを簡単に配置

標準のTheme Optionsで、トップに簡単にロゴを配置することができる。
 Twenty Fifteenでは、あれこれのセッティングが必要だったけれど、Mokaでは表示する画像ファイルを指定するだけでOK!

cocolo chronicle ロゴだけ最新.001

今回、ロゴだけの表示にして、このブログのタイトルは表示しないようにした。
 COCOLO CHRONICLEというタイトルは、それなりにあれこれ考えて名付けた名前だけど、いかんせん長いために文字を表示しようとすると、収まりが悪くって骨が折れる。
 「このブログってなんてタイトルなの?」
 と気になる希少な方々のために、記事下のウィジェットにタイトルを表示することにした。

COCOLO CHRONICLE loverution new.001

Googleカスタム検索を設置

google-web-search-512

Mokaの検索機能は、このテーマの特徴の一つではあるけれど、日本語でのトラブルもある。
 だから、Googleのカスタム検索に置き換えることにした。
 AdSenseとの紐付けということより、検索結果が見慣れたGoogleのレイアウトで表示されることが重要だ。
 自分自身でもブログの記事を検索する場面も増えてきて、やっぱり見慣れたレイアウトの方が使いやすいのだ。

方法は簡単

テーマの編集からsearch-main.phpのコードを下記のものに置き換えるだけ。

<div id=”search-box”>
 <form action=”http://www.google.com/cse" id=”cse-search-box”>
 <div>
 <input type=”hidden” name=”cx” value=”検索エンジンID” />
 <input type=”hidden” name=”ie” value=”UTF-8" />
 <input type=”text” name=”q” />
 <input type=”submit” name=”sa” value=”検索” />
 </div>
 </form>
 </div>
 <script type=”text/javascript” src=”http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>
基本的には、このコードのID部分を修正してサイト内に貼るだけでGoogle検索が利用できます。

情報源: WordPressのサイト内検索にGoogleのカスタム検索を使う方法 | WP SEOブログ

パシさん の公開されているコードを見つけられたのがありがたかった。
 助かりました。ありがとうございます。

これで地味な「search」アイコンをクリックすると、Googleのカスタム検索がバコッと開く仕組みが出来上がった。

リンクカラーは#0044ccで

#0044CC

リンクカラーの変更も、標準のカスタマイザーから簡単に設定できる。
 自分の中では定番の#0044CCに今回も設定。
 最初にこの色に決めたのは、下記リンクがその理由。
 ただ、ずっと使っていると単に色として馴染んできて、理由はどうでもよくなってしまったけれど…

BingのユーザーエクスペリエンスマネージャーであるPaul Ray氏は米国時間3月16日、複数の色合いの中から特定の青色(色に詳しい人のために紹介しておくと、「#0044CC」)を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。

情報源: 「Bing」の検索リンクが青い理由 — マイクロソフトが配色決定の裏側を説明 — ZDNet Japan

リンクの下線を消す

Twenty Fifteenと違って、下線を消すのは一苦労。
 Naokixさんの記事を参考に、スタイルシートの「border-bottom:」をひたすらサーチ&デストロイ。

WordPressのテーマのカスタマイズでリンクの下線が消せないときにチェックすること

WordPress でブログを立ち上げたら、やはりお洒落なテーマで自分のブログを格好良くしたいと思う人は多いと思います。できあいのものをそのまま使っているうちは問題ないのですが、少しテーマをカスタマイズしようとすると、途端にハードルが上がったりします。管理人が最初につまづいたのは、リンクの下線が消せないことでした。 少し検索すればわかると思いますが、リンクの下線を消すには、CSS …

与えられてばかりだけど

これで一通りのカスタマイズは終了。
 詳しい人なら、もっとあれこれできるだろうが、僕にはこれが精一杯。
 しかし、返す返すもインターネットって知識や知恵の共有を自然にやってのけているんだなぁと実感する。
 ここで挙げた人たちや、それ以外でもお世話になっている人。
 そういう方々が、知識や知恵をサーバーに載っけといてくれるおかげで、情弱な僕でも自分なりのカスタマイズをすることができる。
 僕も、サーバーに落ちてる情報を拾い食いするばかりではなく、誰かさんにナニカ役立てるものを与えられるといいなぁ…


Originally published at COCOLO CHRONICLE.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.