デザインの変更、なんやかんやをゆるくふわっと書いていきます。
先日PC版のリニューアルをしました。
WordPressのver.3.8でリリースされたTwenty Fourteen をベースに作ってます。
ほとんど跡形も、別にTwenty Fourteenを使う必要も無かったのではないのではないかと思うぐらいにしてますが。
いやほんと1から作れよっていう感じですけど。もう少しいじれるようになってからね(´・ω・`)
主な変更点は、
・サイト全体のセンタリング
・ヘッダー取っ払い
・スライダーなにそれおいしいの
・スライダーの遅延ロードの解除
・とかとか
あと、機能実装面では、
・SNSボタンをプラグイン未使用での設置
・query_postsの乱用
*センタリング
これはいい加減覚えろよっていうレベルで使うんですけど、
参考:CSSで中央配置(センターリング)する方法
*スライダーの遅延ロードの解除
featured-content.php中のdiv要素id(featured-content)自体をまるっと削除。
jqueryの呼び出しを止めちゃいました。
別で、LazyLoadを使おうとしたんですけど、スマホで表示されないみたいだったので、実装せず。
*font変更
相変わらず、いつもの、
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
大きいところでは、
SNSボタンをプラグイン使わずに設置。
いままでは、有名なWP Social Bookmarking Lightを使ってましたが、
融通があまりきかないのと、遅延ロード的にもこちらに。
参考サイト
Facebook のいいね!・Google +1・Twitterを遅延読み込みする
記事共有用のソーシャルボタンを WordPress に手動で設置する方法(Twitter、Facebook、はてなブックマーク)
wordpressでソーシャルボタンを遅延ロードで高速化させて横並びに表示させる
ほんと、上述のサイトをそのまま使わせて頂きました。
clearでぶった切ったぐらい。
設置は、主要SNSの、
twitter,facebook,google+,はてなブックマーク,Pocket
*Pocketボタン(Pocket Button)
自分もよく使うので、設置
こちらは、コピペするだけでいいので、簡単。
*はてなブックマークボタン
参考サイトのままやったら、普通のボタンが表示されてしまったので、バルーン型は
data-hatena-bookmark-layout=”vertical-balloon”
でした。変わったのかな。
「はてなブックマークボタン」をWordPressの個別記事に設置する方法
PCではうまくいったんだけど、スマホの方では表示されない感じだったので、一旦削除。。。
LIGさんとかはきちんと出てるから、自分で書いてるのかな、、、あ、画像だけ用意すればいいのかな、、
*query_postsの乱用
乱用といっても、そんなに使ってないですけど、
【NEWS】【COLUMN】【index】部分に使ってます。
全部、公式サイトの、テンプレートタグ/query postsここを。
使っているのは、[cat][offset][posts_per_page]ですね。
便利なんでつい使ってしまうんですけど、きっとあんまり乱用しないほうがいいんでしょう。きっと。
というわけで、いかにもエンジニアっぽい記事に見えて、
先人の知恵に便りまくりまくってる次第です。
以上WEB周り担当のたくみょんでした。
つっこみや、なんか諸々ありましたら、ついったー(ほんとに酷いことしか書いてないので注意)で。