なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

ど素人の私がWordPressテーマを自作した際にめっちゃ参考にさせていただいた13記事

Sponsored Links


IMG 7746


先日WordPressのテーマを自作しました。

ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザインブック』 | なまら春友流

基本的には「WordPress デザインブック」という本を参考に作成。
でもそれだけでは自分の好きなようにはデザインできなかったのでやっぱりGoogle先生に聞いてみました。
多くの記事を読みましたがそのなかでもめっちゃ参考になった記事をご紹介いたします。
記事の作者様本当に役立ちました、ありがとうございました!

Sponsored Links


AGENDA

  1. ソーシャルブックマークボタンの埋め込み
  2. 記事の1番最初の画像をサムネイル表示する(2記事)
  3. 広告の表示
  4. ブロック要素とインライン要素
  5. CSS3用例集(3記事)
  6. jQuery
  7. サイトの配色について
  8. WordPressのまとめ記事(3記事)


1. ソーシャルブックマークボタンの埋め込み

WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました | けんけん.com

WordPress自作するにあたり @knk_n さんの記事はめっちゃ参考にさせていただきました。
そんななか同じくこのプラグインを使用していたのですが外せるなら外そうかと。
私は個別記事の上下にソーシャルブックマークボタンを設置していますので、content-single.php にコードを書き込んでいます。

2. 記事の1番最初の画像をサムネイル表示する

記事内の一番最初の画像を取得してサムネイル画像表示 | 簡単ホームページ作成支援-Detaramehp

アイキャッチ画像を取得するのは「WordPress デザインブック」にも書いてあったのですが、私は今までアイキャッチ画像を設定していませんでした。
そんななか参考にさせていただいたこちらの記事。
functions.php と該当ページに上記記事内のコードを書けば画像が表示されます。

スクリーンショット 2012 03 25 13 15 49

この記事のおかげでブログデザインの幅が広がりました。
同じような方法でもうひとつの記事もご紹介。

WordPressで記事画像をサムネイル表示 – Individual Package – 


3. 広告の表示

記事本文中にGoogleAdSense(広告)を挿入する方法 WordPress de SEO をやろう!

プラグインを使わなくても広告が入れられます。
上記記事の方法を知っていれば自由自在に広告を表示させることができます。
ちなみに私は content-single.php に直接Google Adsenseのコードを記入して定位置に広告を表示させています。

4. ブロック要素とインライン要素

0 から始めるHTMLとCSSの基本・基礎-webデザイン入門- | 秋田県webデザイナー【weblog】

上記記事はHTMLとCSSの全般をわかりやすく教えてくれています。
そのなかでブロック要素とインライン要素についての比較表がものすごくわかりやすかったです、ありがとうございます。
ある程度デザインが決まってきた際にブロック要素とインライン要素が理解できてなくて苦労しました。
今だによくわかっていないですが。

5. CSS3用例集

CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジン

自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark

手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選 | Webデザインのレシピ

サイトを個性的に表現できるCSS3。
上記記事のように実際の効果を表示してくれると「やってみたい!」って思えますよね、ほんとありがたいです。
CSS3は他にも様々なことができますのでググったらたくさんの記事がヒットします。

6. jQuery

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

個人的にはjQueryって全くわかってないしプラグインも使ったこともないのでテーマを自作した際にお世話になったわけではありません。
ただ、何かをしたいと思った時にjQueryならできるのかな?ってことがありそうなので今後熟読しようと思っています。

7. サイトの配色について

配色に自信がなくても!Webデザインが好きになる配色ツールと使い方 | Webクリエイターボックス

配色には全く自信がないのでこちらの記事で紹介されているウェブ配色ツール Ver2.0ってのでシュミレーションしてみたりしました。
結局どんな配色がいいかは難しすぎてわからないのですが。

8. WordPressのまとめ記事

WordPress のよくあるカスタマイズコード functions.php 多め

もうお世話になりまくりな記事です。
WordPressで何かをしたいと思ったら「Web Design RECIPES」さんを訪れます。
いつもありがとうございます。

WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと.net

2011年に配信したjQueryやWordPressなどのWeb制作向け情報・総まとめ – かちびと.net

「かちびと.net」さんも何度も何度も読ませていただいております。
本当にいつも素晴らしい内容を公開していただきありがとうございます!

最後に

WordPressは弄れば弄るほど楽しくなってきます。
しかし弄れば弄るほど自分の知識の無さに切なくもなります。
でもこんな自分でもテーマを作成できたのは上記で紹介させていただいた先人達がブログで丁寧に解説してくれているおかげです。
ほんとうにありがとうございました。
実際は今回ご紹介させていただいた記事以外にもたくさんの記事を参考にさせていただきました。
ご紹介はできませんでしたが重ねて御礼申し上げます。


エビスコム
ソシム 2011-09
¥ 2,940


Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top