【CSSが】ブログのレイアウトを色々変更したので備忘録がてらメモ【倒せない】

【CSSが】ブログのレイアウトを色々変更したので備忘録がてらメモ【倒せない】

2012年11月2日
Wordpress
スポンサーリンク

でーじてとこん

CSS?なにそれ美味しいの?どうもてとこん(@tetokon)です。

HTMLやCSSの知識が浅いながら、ブログのレイアウトを色々いじったので、備忘録がてらメモしておこうと思います。


最近の投稿をサムネイル付きで表示してくれるプラグイン「Newpost Catch」

これまでは、最近の投稿をテキストだけで表示していたのですが、サムネイル付きで表示したくて「Newpost Catch」というプラグインを導入しました。

Preview of  CSSが ブログのレイアウトを色々変更しました 倒せない

▲今まではこんな表示。

1台のPS3を2台のテレビで使いたくて出力2 入力4で4千円代のHDMIセレクターTHD42MSPを買いました | でーじてとこん

▲「Newpost Catch」を導入してこんな感じでサムネイルの表示ができるようになりました。

「Newpost Catch」について詳しくは作者様のブログを御覧ください。

「Newpost Catch」 WordPress Plugin | 今村だけがよくわかるブログ

Facebookソーシャルプラグインを導入

まったく手を出していなかったFacebookに最近遂に手を出しました。

まだまだFacebookについてよくわかっていませんがイイねして頂ければ泣いて喜びます!

「jQuery lazy load plugin」で画像を順番に読み込む

これはレイアウトとはちょっと違いますが、「jQuery lazy load plugin」というプラグインを導入して、記事内の画像を一度に読み込まず、上から順に一つづつ読み込むようにしました。

一度に読みこむと画像が多い場合に時間がかかってしまいますからね。

ちょっと設定が必要なので@conchikuwaさんのブログを見てやりました。

[wordpress]スクロールに合わせて画像を読み込むプラグイン「jQuery Image Lazy Load WP」を導入する際にやったほうがいいおまじない。 | こんちくわのぶろぐ

@conchikuwaさんありがとうございます。

ブログのカラム幅を変更

デフォルトのtwenty elevenのテーマそのままだったカラム幅を変更しました。

ブログに載せている画像の横幅が500pxなのでそれになじむようにメインカラムを狭くして、その分サイドバーを広くしました。

関連記事を紹介する「LinkWithin」の導入

前のブログでも使っていた「LinkWithin」を記事の下の方に導入しました。

デフォルトで表示される文字は@OZPAさんのブログを見て変えました。

関連記事を表示するブログパーツ「LinkWithin」を任意の場所に入れる方法と「You might also like」を好きな文章に変える方法 | OZPAの表4

ありがとうおつぱし!

「zenback」の導入

設置するだけでSNSボタンやSNSでの反応を見ることができ、更に関連記事まで表示してくれるブログパーツ「zenback」を導入しました。

これも前のブログでも使っていたのですが、最近何だか表示もいい感じになっているので入れてみました。

Zenbackであなたのブログに全てのフィードバックを。

でーじてとこん zenback

▲記事の下の方に表示されているこういうヤツです。

関連する記事何も出てねぇwww

まぁ出るまで気長に待ちます。

他にも色々変更したけど…

他にもモバイル用のページのSNSボタンを増やしたり、アドセンス貼ってみたり、サイドバーのタイトルの表示変えてみたりしたんですけど、壁にぶつかるのがCSS…

私IT屋さんだけどWeb屋さんじゃないのでCSSの知識がまったくないんですよね…

仕組みはなんとなくわかってるんだけどどういう風に書けばどんな効果があるのかとかまったくわからないので、一個一個調べながらでやたら時間がかかります…

サイドバーのh3タグの文字の大きさ変えるのに相当苦労した…

何でh3タグの文字の大きさがあんなに小さい設定なのtwenty eleven…

こういうのは色々やりながら覚えていくしかなんでしょうかねぇ??

いい勉強法あったらどなたかご教授下さいませ。

ドットインストールのCSSのレッスンやってみるかなぁ。

今日のでーじなところ

CSSがわからなくてもプラグインだけでどうにかなってしまうWordpresでーじ便利!

Blogger使ってた時と比べるとやっぱりそう思っちゃう。

あとはCSSさえ覚えれられれば…ぐぬぬ…