Simplicity を少し改造してみた

2014/11/7 夜 追記

新しいSimplicityがリリースされていました。これによってSNSボタンが刷新されたので、以下の記事のボタンの位置等の調整は特に必要無くなりました(ん?もしかすると、自分が子テーマで変更しているのでどうなんだろ?問題がありそうな方は参考程度にお読み下さい)

はてなボタン等もエラー等は出てないので11/7 朝に書いた記事も特に必要なくなった模様。
20141105版まではAutoptimizeが利用できましたが、20141107のバージョンからはエラーが出るようになったので停止推奨です(20141113版からは修正されているので利用可能)。圧縮かける時に何かしらJavascriptあたりで問題があるような感じかと思います。それまで以上に速くなったように思うのでAutoptimizeプラグインを停止しても特に問題なしです。

http://code.jquery.com/jquery.min.mapのエラーが出る時

ブラウザのコンソールに「http://code.jquery.com/jquery.min.map 404 (Not Found)」が出ている方はSimplicityとは関係なくおそらくWordpressが自前で持っているjqueryにjquery.min.mapが無いということなので、それらを処理するとしたら、例えばheader.phpの44行目あたりを修正する。

こんな感じでGoogleのCDNから読み込むように変更する。もし古いブラウザも対応が必要な場合は、1.x系の1.11.1のバージョンを利用したら良いと思う。ただし、近くjQueryがバージョンアップする予定で、もし最新のバージョンを利用する際(SimplicityもjQuery共)にはここの変更をまたしないといけないので注意。まぁ個人的には古いブラウザなんか対応しなくてもいいと思いますけども。

↓で↑の内容をやや修正してます(2014/11/9 追記)

Simplicityを少し改造してみた part2
2014/11/7に新しいバージョンがリリースされたWordpressのテーマSimplicityで、SNSボタンのカウントを非同期で取得す...

↓で↑、更に↑↑の内容を修正していたりします(2015/3/24 追記)。

海外高性能レンタルサーバーhostingerでWordpressを何とかするためにやってみたこと
はい、まずは、色々と説明からしなくてはなりません。 国内のレンタルサーバーなら特に気にすることもない応答速度。けれども、それが海外とも...

これまでは、子テーマにfunctions.phpがあったような無かったような、あるいは直接header.php等を修正しなくてはいけなかった所、子テーマのfunctions.phpに2015/3/24追記分のGoogle CDN jQueryを読み込むスクリプトを追加すれば、header.phpをいじらなくても対応できるようになりました。

はてなブックマークのボタンについて

2014/11/7 朝 追記(ここも20141113版からは修正されています)
ブラウザのコンソールを見ていたらhatenaのボタンあたりで何かしら警告が出ていたので、はてなブックマークのブログを見に行ったり、ボタンの設置スクリプトを見に行ったら若干、現在の仕様と違う記載があり、はてなブックマークのスクリプトに準拠した方法に修正したらhatenaボタンでのエラー(警告)は出なくなったのでその報告。

該当ファイル sns-button.php の「はてなボタンを表示するか」のスクリプト部分の抜粋。

まず、日本語で「B!ブックマーク」とする場合はlang=”ja”に英語はlang=”en”。この行のPHPの部分はコメントなので不必要です。
次の//の行が元のスクリプト。httpsが追加されたのと、画像が button-only.gifからbutton-only@2x.pngに変更されたみたい。次の//の部分は、httpsの部分だけの修正。
//が付いているコメント行は残しておくとエラーが出ます。万が一のために残しておきたい場合は、<?php コメント行 ?> と行自体をPHPとして下さい。
カスタマイズは子テーマを導入して、そちらのファンクションにコピペしてから行うのが良いと思います。ブラウザのコンソールにてhatenaのエラーが出てない人は現状のままでいいと思う。


現在wordpressで使わせてもらっているSimplicityと言うテーマはとても優秀で、特に不満はないんだけれどちょっとレイアウト面でいじりたい所があったのでその内容などを。

ブログカードについて

(ブログカードも20141113版から横幅いっぱいの設定を選択できるようになっています)
まず、201410225バージョンからブログカードと言うのが機能追加された。これは本文中にURLだけの1行を記載すると、その部分がブログカードになると言うもの(※ 自分のサイト内のリンクのみかな?)

Screenshot_from_2014-11-05 18:47:20

いじった箇所は上記のハイライト部分で、ブログカードの記述はfunction.phpの中、だいたい526行目辺りにある部分で処理して、/css/blog-card.cssでcssの設定が記載されているわけですが、プログラム自体が若干読みにくかったので、自分が後で色々できるように読みやすくしてみた。

と言っても特別何かしたわけではなく、$tagの中身をちょろっといじっただけなんですが、シングルクォーテーションとダブルクォーテーションが自分が普段やるのと反対に書いてあったので修正。

これちょっとだけ説明すると、PHPの変数はダブルクォーテーションの中に書いてあると展開してくれるんです。
つまり、

テキストエディターなどでは色分けして変数やらを表示してくれるので本来ならば、元のようにピリオドで文字列と変数を分ける方がベターだと思います。ただ、ちょっと見にくくなるのと、仮にクォーテーションで囲んだ所がミスっていた場合に、ダブルクォーテーションだと変数をそのまま文字列として表示してくれると直しやすいというだけの話なんですが地味に便利。

オリジナルのスクリプトは特に間違いではないですし、実際の所ダブルクォーテーションの方が色々できる分処理が若干遅いとも言われますので、確実に間違いがない場合はシングルクォーテーションの方が良い場合が多いです。(参考→ 「PHPマニュアル 文字列」)

もし変数と文字列を分離したい場合は、sprintfなどを使って、

こんなふうにも書けます。

ひとまず、ブログカードのブロックがどのファイルのどこで処理しているかがわかればブラウザのF12あたりにあるweb開発環境(chromeやらFirefoxやら)で数値等をいじってそれぞれに適用すれば良いということで、次にCSSの方を。

function.phpでは、自分が見やすいようにしただけで処理自体はいじってないので、後で何かしらをブログカードに追加したいとか、デザインを変えたいという時に色々追加。

表示自体は/css/blog-card.cssの方なので、そちらを。

直した箇所は開いてすぐにある、.blog-cardの部分。
オリジナルでは、widthに474pxが指定してあるのだけれども、そのままだとそれよりも画面が小さくなった時にカード枠がはみ出してしまうのでmin-widthで最低幅を360pxにして、それより画面が大きければ100%で表示して、360px以下ではそのまま360pxで表示するようにした。min-widthを新たに入れていましたが、いりませんでした。max-width:100%だけでいけそうです。※firefox,chromiumで確認。IEは知りません。
幅が100%になってしまうと、本文とカードの境界がわかりにくいかなと、元々マージンで上下にだけ設定されていた部分を左右に20px入れてみた。左右に20pxなので、両方で40px分のスペースができることになって、元々想定していた360pxの幅を持つカードをだいたい400pxぐらい表示できる端末なら実装できるということでまぁいいかと。

このあたりのデザインは人それぞれ好みもあるだろうし、お好みで。

facebookのボタンが上に飛び出ている箇所

後、トップ下のSNSボタンで、ウチの環境はlinuxのchromiumなのでフォントやら色々違いはあると思うので一概には言えないが、若干facebookの「いいね」が上に出ているように思ったので、それも修正した。

/css/sns.cssで コメント「タイトルしたSNSボタン」部分。

これはもしかしたら2を入れようとして5を押してしまったと言うタイプミスなのかも知れないと思いつつ、-2pxで揃ったように思う。

フォントのサイズについて

フォントサイズが基本16pxで、設定で15pxやらも選べるわけですが、若干フォントが大きいかなと思ったので、ついでに14px(0.875em)で表示できるように改造もした。
.articleのフォントサイズはcss-custom.phpで設定してあるので、そこをちょっといじらないとアレなんですが

こんな感じ。get_article_font_size()でフォントのサイズが来て、ARTICLE_FONT_SIZE(おそらく16px?)では無かった場合にサイズを変更するという部分。304行目あたり。
新たにフォントサイズをカスタマイズから設定できるように改造すればよいわけですが、自分だけしか使わないので直で変更してみました。

これを書いた当時は一番小さい文字が15pxでそれ基準に書いてます。本来ならば、どんなサイズでも16で割ればemのサイズが出ます。
例) 15px設定時: 0.875em、16px設定時:1em、17pxを設定時:1.0625em
ここからも上記は15px設定時のみのスクリプトです。以下に正しいのを書いておきます

emと言う単位は、16px = 1em なので、14pxの場合は、14 / 16 = 0.875emと言う感じになります。だいたいブラウザのデフォルトが16pxなんだろうと思う。では仮に拾った値が15pxの場合はどうかと言うと、0.933…となってしまうわけです。ということで、切り捨てた方が良いのかも知れませんが、roundで四捨五入。閉じカッコの前にある「3」はいわゆる小数点第何位までで丸めるかと言う感じです。

何故にemでやりたかったかと言いますと単純にわかりやすいからというだけの話なんです。例えば字下げをしたい時、margin-left:1emで左側に1文字分マージンができると言う感じで。別に16pxと入れればよいだけの話なんですが、文字の大きさを変えたい時、例えばh1は2.5倍とか、h3は2倍みたいにしたい時、font-size:2emとか、2.5emでいいわけですからわかりやすい。
ただ本当はremのがわかりやすいんですけども。

remの場合は対応しているブラウザであれば使えるという感じで、まぁ大体は対応しているかと思うんですがそうでない場合もありまして…。違いとしては、htmlに対してフォントサイズを100%で指定した時、bodyが1.5emで、その中のdivが1.5emだった場合は、16px x 1.5 x 1.5で36pxで表示することになります。
remの場合は、htmlの100%に対して計算されるので、16px(100%) x 1.5 で24pxで表示されます。

このようにして、入り組んでいけば行くほど、そこのサイズはいくつやねんとなってしまうのですが、フォントサイズ指定はremを利用すれば、html基準のフォントサイズの何倍かとして計算できるのでとても便利。

本当かどうかの確認。

ひとまずめちゃくちゃ複雑に入り組むことはないであろうwordpressのページですから今回はemでいいかというのと、例え入り組んだとしてもブラウザF12のウェブ開発環境から目的のエレメントを調べたら簡単にサイズをいじれるのでpxでも良いのですけども。

それから、フォントカラーを若干薄くしています。濃い方がメリハリがついて読みやすいというのもあるかと思うのですが、濃すぎるとゴチャっとした感じがするので、気分的にちょっとだけ薄くしました。色指定はcolor: rgba(0,0,0,.85)あたり。

行間の指定をするline-heightもおそらくオリジナルは170%と指定してあったと思いますが、line-height:1.7;と指定しなおしてます。これも慣例的なものですが、文字のサイズによっては継承したりすると行間がとても狭くなったり、あるいは部分的に広い所ができたりすることがあったりするので、line-heightに限っては単位を書かずにやりましょうというのがあります。なのでそのあたりも手を加えたりしてます。

スポンサーリンク

シェアする

フォローする