image-wave

kumapom's page

WordPressでプレビューが表示されない


下書きした記事のプレビューが出ない症状でしばらく悩んでたんですが、色々いじってるうちにサイト自体が表示されなくなり……おーい

探ってみるとキャッシュがどうこうと言う記事を見つけました。キャッシュ……(プラグインが怪しい)……と言うことでWordPressのキャッシュ系のプラグインを停止。直ったー。

WordPressは便利なプラグインがいっぱいありますが、そろそろバージョンも上がって最適化されて来ているだろうし、なるべく素のまま使うのがいいかもしれませんね。プラグイン止めてみましたが、体感変わらないし。

レスポンシブデザインに対応

ReponsiveIM

まあ……大体出来た……かな。iPhoneからでも使い易くなりました。

レスポンシブデザインとは何か

PCとかiPhoneとか、タブレットとか世の中には色んなサイズの端末があります。

これをCSSを工夫することによってなんとかサイズの違う多様な端末に対応したデザインにしようと言うのが、レスポンシブデザインになります。

詳しくはこの辺読んでもらうとして。

ブラウザの幅を変えてみてもらえれば成果が分かると思います。

何をやったのかと言うと

  • 画面幅が小さくなったら display: noneでサイドバーを消す
  • それより小さくなったらメインの幅を%に
  • トップイメージの画像や文字の位置を%で指定。
  • サムネイルの大(size-large)と中(size-medium)を%表示に
  • iPhone用にヘッダーにメタタグを記述。
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

みたいなことを作りながら1コ1コ対処してみたらなんとなくそれっぽくなりました。

基本的に幅さえなんとかすればなんとかなります。高さはautoで十分です。

メディアクエリー

画面の幅でCSSを切り替えるのにはメディアクエリーと言うのを使います。
ソース書くとこんな感じ。

幅600ピクセルを超えると幅がauto(本来のサイズ)に切り替わります。

img.size-large{
	width: 100%;
	height: auto;
}
@media screen and (min-width:600px){
	img.size-large{
		width: auto;
	}
}

padding……

なんかいくらやっても横スクロールバーが出やがりまして。凄く謎だったんですが、paddingのせいでした。

paddingと言うのはdivとかの枠の内側に余白を持たせるCSSなんですが、これが元の幅に”足して”サイズを決定するものなんです。

例えば幅300ピクセルにpaddingを左右20ピクセル入れようと思ったら、幅を260ピクセルに変更しないといけません。……誰なんでしょうねこの仕様を考えた人は……。

という謎仕様によってあちこちに微妙なズレがあったんです。最終的にほとんど使わないことにしちゃいましたけど。いや、強敵だった。レスポンシブデザインの大ボスがpaddingだったとは。

もしやってみて、何故か横スクロールしてしまうと言うときはpaddingとかで何かはみ出てないかチェックしてみるといいかと思います。

目次っぽいページを作ってみた

このサイトのWordPressテーマ、お手製なんですが(リンク)、ナビゲーション的にちょっと問題があるなと思ってました。

そうだ、目次を作ってみよう。

という訳で、いまんとここんな感じ

>>続きを読む

WordPressテーマファイル出来ました!

WordPressが良く分からないドリアードさん

ブログテーマ完成

自作WordPressのテーマ完成しました。
まだ……あちこちに微妙なズレとか、ありますが!とりあえず出来たー!細かいところはこれから日々更新します。

>>続きを読む

WordPressで特定記事を先頭に表示する方法

参考になったので、WordPressを使って特定の記事を先頭に表示する方法を簡単にメモ。

投稿画面のここをチェック:



参考元:AdminWeb / 特定の記事を先頭に固定表示