オトナポケット

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

オトナポケットで「Stinger5」に行ったカスタム一覧

      2015/09/27

526

どうもこんにちは、いつまでもWordpressの森から抜け出せず、いつまでも悩んでいるとなしば(@otonapocket)です。

以前まで、nobuoさんが公開しているWordpressテーマ「マテリアル」を使っていたんですが、enjiさんが公開している「Stinger5」に変更しました。理由はいくつかありますが、その中でも大きな理由が、ちゃんとWordpressのphp言語と、CSSを勉強しようと思ったのがキッカケ。

とはいえ、最終的な目標としては、「マテリアル」で用いられているような、記事一覧がスッキリ分かれたデザインにすること。細かいステップを箇条書きで書くと、下記のような感じ。

  • 記事一覧をマテリアルデザインとして、メリハリを付ける
  • アクセスランキングもマテリアルデザインとして、一覧に盛り込む
  • サイドバーのアクセスランキングもマテリアルデザインに変更
  • 各サムネイルにシェア数、view数表示、カテゴリー表示を盛り込む
  • フォントを見やすく変更
  • フォントの大小できるように
  • ヘッダーを端から、端まで繋がった形のデザインに
  • 蛍光ペン表示
  • トップページは1カラムに
  • webフォント導入

これらを随時実施していますが、どうも忘れやすいので、行ったカスタムを備忘録として、記事に残しておこうと思います。

カスタム内容一覧

記事一覧をマテリアルデザインとして、メリハリを付ける

このカスタムについては、「これはログ」さんのこちらの記事を参考にしました。この記事では、Stinger5の構成そのままで、一覧表示を2カラムにする方法を述べていますが、このブログでの最終目標は、一覧は1カラムでマテリアルデザインにする事。

トップページを見ていただくとわかりますが、現在は、PC,タブレット4つ横並びに、スマホは1個だけ、記事が並ぶように設定しています。変更内容は、box-sizingのwidthの%と、marginの値を調整しただけです。

最終的にはタブレットを別途設定して2カラムとしたいところですが、まだ手を付けれていません。

 →実施しました。media-screenの切り分けでタブレットでは2カラム構成にしています

フォントを見やすく変更

「ものくろぼっくす」さんのこちらの記事を参考にしました。font-familyを変更するだけで、一気にお洒落さがグッと増すので、お気に入りのカスタムです。

フォントの大小を変更できるように

強調したいときに使うデカ文字。これはプラグイン「TinyMCE Advanced」を使用しました。簡単にフォントサイズを変更できる(細かくサイズ指定も可能)ので、助かります。

ヘッダーを端から、端まで繋がった形のデザインに

「ガジェニュー」さんのこちらの記事を参考にしました。とりあえず、PC版だけ実施しています。スマホ版まで手が回っていない・・・。media screenの分岐がいまいちわからないんですよね・・・。

ガジェニューさんの記事では、上からメニュー、タイトルの順番になっていますが、「オトナポケット」では、タイトル、メニューの順番にしました。理由はありません、なんとなく。

蛍光ペン表示

「ままはっく」さんのこちらの記事を参考にしました。CSSにコピペだけで楽ですね。

トップページを1カラムに

「これはログ」さんのこちらの記事を参考にしました。サイドバーが無くなるとスッキリして、おしゃれさが増しますね。次にサイト立ち上げる時は、全部1カラムにして、フッターとかに、関連記事載せてもいいかもしれません。

まとめ

Stinger5(Wordpress)のカスタムって難しいですよね。みんな凄いよなぁ。はてなブログでも、記事書いてるけど、楽過ぎてあっちに逃げそうになっちゃうもんなぁ・・・。とはいえ、Stinger5に変えたからには最後までやりきるぞぉ!!

それでは、今日はこのへんでっ!!

スポンサーリンク

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

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

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

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

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

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

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

 - wordpress, 運営、お知らせ、僕のこと