好きな事を好きな時に好きなだけする

そんな人生最高じゃないですか。

【WordPressカスタマイズ】ブログをプチリニューアルしました

      2015/02/24

この記事でも紹介しているように、ワードプレスのテーマにSTINGERを使わせて頂いています。 STINGER関連の記事はかなり多くのものが世に出回っているのですが、もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集という副業ハックさんの記事を見て、カスタマイズしてみようと思い、今回やってみました。
カスタマイズした点は以下になります。

  • 表示の幅を1200px、メイン部分を844pxに変更
  • TOPページの記事リストをGunosy風に変更
  • アイキャッチ画像を円に変更

では一つ一つ方法を解説していきます!

表示の幅を1200px、メイン部分を844pxに変更

style.cssをいじります。

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
}
#wrap #wrap-in #side {
	float: right;
	width: 336px;
}
#wrap #wrap-in #main {
	float: left;
	width: 844px;
	padding-top: 20px;
	padding-bottom: 20px;
}

こうすることで、幅自体は簡単に変更できるのですが、ここで問題が発生します。
他の要素を全くいじっていないので、デザインが大幅にずれます。その点は一つ一つ調整していく必要があるのですが、割愛させて頂きます。(笑)

TOPページの記事リストをGunosy風に変更

いつかの記事でも紹介させて頂いた大好きなニュースアプリGunosyですが、「自分が大好きならみんな好きだろう」と安易な考えでUIを真似させて頂きました。

GunosyのUI

Gunosyトップ

こんな感じのボックスになっています。ん~見やすいですね!では早速方法えお解説していきます!

まずは、記事のリスト、あつまりclass指定がentryになっている部分を下記CSSに変更します。

.post .entry .entry-content {
	width: 236px;
	padding:10px;
}
.kizi .entry {
	border: 1px solid #d0d0d0;
	border-radius: 2px;
	background-color: white;
	width: 256px;
	margin: 10px;
	display: inline-block;
}

2行目と9行目のwidthに注目してください。STINGERの標準仕様では、これの約2倍の大きさが指定されており、main部分の幅いっぱいに表示されるようになっていました。それではGunosyのようなUIが難しいため、幅を変更したということです。なお、今回は横に3つ並ぶように変更しました。

次に11行目ですが、このCSS指定で横並びを実現しています。

	display: inline-block;

これは、

インライン要素のように横に並んでブロック要素のように幅や高さ、余白などをを指定できる指定。
になります。

これらの指定をすることで、記事リストが横に並んだGunosy風UIが完成です。

アイキャッチ画像を円に変更

最後はアイキャッチ画像を円に変更する方法になります。もうちょっとなので、最後まで読んでくださいね。(笑)
CSSの変更点は下記です!

.sumbox {
	height: 150px;
	width: 150px;
	border-radius:50%;
	overflow:hidden;
	text-align:center;
	margin:5px auto 0;
}

注目してほしいのは、4行目と5行目です。これを見て「なるほど」と思う方も多いかもしれませんが、border-radiusはボックスの角に丸みを出すためのCSSになりますが、値を50%で指定することで円を作りあげます。
そしてoverflow:hidden;で円からはみ出た画像部分を隠せば完成です。

まとめ

ブログのカスタマイズを初めてしましたが、すごく楽しいですね!これからもちょいちょいやっていこうと思うので、その時にはまた紹介しますね~

WordPressのカスタマイズは以下の本がおすすめです。

 - WordPress

adsensepc

adsensepc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

よくみかける「この記事を書いた人」を表示させるプラグイン “Fancier Author Box”

最近よくみかける「この記事を書いた人」の表示。 最初はそれほど気にならなかったの …

【忘備録】wa-track.comが出てきた!!その対処法とは

「運営しているサイトが急に表示されなくなり、wa-track.comが出てきた! …

記事の目次を自動生成してくれるWordPressプラグイン「Table of Contents Plus」

前回に引き続き、WordPressプラグインに関する記事です! 今回は目次を自動 …

簡単にアニメーションを追加することができる!!-WOW.js

アニメーションを追加したいけどjavascriptとか触れない・・・ そんなあな …

【忘備録】WordPressで寄稿者でも画像をアップロードできる方法

セキュリティーの面を考慮して寄稿者としてユーザーを追加したのですが、その場合、デ …

【永久保存版】Amazonアソシエイトのプラグイン「AmazonJS」導入の忘備録

ブログをやっている人でアマゾンアソシエイトのリンクを貼っている人は多いと思います …

サイトの画面キャプチャを表示させるWordPressプラグイン「Browser Shots」

当サイトはWordPressのテーマとしてStingerを利用させて頂いているの …

no image
少しだけレンタルサーバーについて話してみる

こんにちは。 今日はサイトの運営で欠かすことのできないレンタルサーバーについて話 …

WordPressの引越しをするなら「Duplicator」しかないでしょ!

WordPressのドメイン・サーバー移行を試みて諦めた人は多いのではないでしょ …

WordPressテーマをStinger3に変更した理由

目次1 以前使っていたテーマ1.0.1 アーカイブ、タグ、検索結果ページなどはN …