wordpressでサイトを作るときに参考になったリンク集（ホームページ制作初心者向け）

こんかいはめっちゃ長文。

いまさらwordpressとはどんなものかと試してみたくて、せっかくなのでサイトを作ってみた。その際に参考にした記事や動画をブックマークしていたら、とんでもない数になって困ったことになったので、ブックマークがわりにサイト作りに参考にした時系列順にまとめておこうと思います。

「wordpressをつかってサイトを作ろう」みたいなチュートリアルとは違うのでご注意下さい。管理人がwordpressに関して忘れないようにメモをしていると思って下さってけっこうです。
ただ、もしかしたらこのブログを見ている人に役に立つこともあるかもしれないので、つたないながらも各リンクについての説明も書いておこうと思っとるしだいです。はい。


ちなみに、サイトを作る前のwordpressやホームページ制作に関する知識はこんな感じ。

1. wordpressにつては、adobe Dreamweaverのようなホームページ制作ソフトで無料らしいということを知っているぐらい。
2. htmlについては、このブログの記事を書くときとかニコニコに動画を挙げる際に文章の改行をしたり、文字の大きさや色を変えたりしたことがある程度。
3. CSSについては、htmlに似ていてページ全体の属性とかを作るときに便利なコードかな？

この程度の知識でもなんとかそれなりのサイトを作れたので最近のソフトって本当に初心者にやさしいなと思いました。
逆にwordpressを始めようと思っていて上に書いた程度の知識もない人はまずはブログを始めるのもいいかもしれません。wordpressをいじっていて、Bloggerをいじっていた経験がかなり役に立ったと思います。（今思えば、wordpress自体がブログ制作ソフトなんであたりまえなんですが）wordpressのがBloggerよりいろんなことが出来る分、ちょっとだけ難しいんだと思います。


前置きを長々書いていてもしょうがないのでさっそくまとめていこうと思います。
ちょこちょこと管理人の感想や解釈（解説ではないです。）も書いていこうと思うので参考にしてみてください。



目次

1.そもそもwordpessとは

2.有料で運営するのか無料で運営するのか

3.テンプレートを決める

4.プラグインをぶっ込みまくる

5.その他参考サイト

1.そもそもwordpessとは

wordpressとはなんぞやというときのためのリンク。

WordPress 　wordpress公式サイト

初めてWordPressを使ってみようという人の為の予備知識　

この記事を読んでwordpressとwordpress.comの違いとがわかった。

WordPressをインストールしたら最初に読むまとめ

全部ではないがざっと読む。だけど結果的にここに書いていることはほとんどしなかった。サイトの趣旨との兼ね合いの問題。参考にはなる。

2.有料で運営するのか無料で運営するのか

作ったホームページの維持には毎月お金がかかる。wordpressの練習のためのサイトなのでお金なんぞかけたくないと思い、いろいろ調べた結果参考にしたリンク。

いろいろなサーバー紹介サイトがあったがよくよく読んでみると「初月は無料で2ヶ月目から有料です。」みたいなサイトがやたら多かった。

WordPressをどうにか無料で設置して使いたい人の為の3つの方法

大変参考になった。この記事を読んで、広告が付いてもいいからwordpressが使える無料サーバーを探すことにした。

xdomain　
wordpressが使える無料レンタルサーバーがある。広告が重いと思う。最初はこれを使っていたが、あるプラグイン（後述）をいれたらwordpressにまったくアクセスが出来なくなった。バックアップもしてなかったのでサイトを0から作り直すことになった。
ただ、管理人が不勉強で入れてはいけないプラグインをいれただけだと思うので、初めてwordpressを使うには全く問題無いですな。


WPblog
結果的に管理人が使っている無料サーバー。広告がちょっと大きいが、上のxdomainよりだいぶ軽いので気に入っている。


XAMPPでローカル環境構築
WordPressをローカルにインストール - BitNami for XAMPP
いつかオリジナルドメインをとってローカルでやってやろうと思っているのでメモメモ。

3.テンプレートを決める

はっきりいって「wordpress　テンプレート」で検索すれば死ぬほどたくさんのテンプレートが出てくる。

WordPressテーマ（テンプレート）配布サイトリンク集、その数 14500種以上

ね、たくさんあるでしょ。

【有料・無料】Wordpressのグリッドタイプテーマ25選

管理人が作ろうと思っていたサイトのイメージは「Ultra Grid Theme」が一番近かったのだけど、テーマをインストールするときに何故かエラーが出てしまう。やむを得ず「Photographer Theme」を使うことにした。結果的にシンプルなテーマを選んだのが功を奏したのか、以外と自分でいじりやすいなーと思った。

4.プラグインをぶっ込みまくる

プラグインの数が膨大。テーマとプラグインの組み合わせだけで、どんなサイトも実現可能なのではないだろうか（強気）。プラグインは基本的にwordpress内の「プラグイン」の項目で検索をすると見つかります。

---

システム

UpdraftPlus Backup

上記のサイトの喪失から反省して、まず最初にバックアップのプラグインから。

バックアップの保存場所としてgoogleドライブやdropboxを選べるのでとても便利。

WordPressをGoogleDriveに自動バックアップする方法

【UpdraftPlus】サイトのバックアップ・復元がお手軽にできるWordPressプラグイン

WordPress.com Stats

アクセス解析プラグイン。とくにこだわりはなく使ってます。

リアルタイムで統計を取る高性能アクセス解析プログラム、プラグイ「WordPress.com Stats」

Google XML Sitemaps
ウェブマスターに登録するサイトマップを生成するプラグイン。インストールしようとしたらエラーが出たので下の記事を参考にダウングレードしました。

Google XML Sitemaps 4.0.xからダウングレードする方法

W3 Total Cache+CloudFlare
サイトの速度上昇のプラグイン。上記にも書いたけど、このプラグインを入れた途端、xdomainの無料サーバーにつながらなくなりました。別にプラグインに問題があるわけでは無くて、xdomainとの相性らしい。別に管理人のサイトはもともと軽いので今は入れるのを保留中です。効果は大きいらしいですね。

GTmetrix

gtmetrixでダブルA評価達成！ワードプレス高速化のためにやったこと

wpXレンタルサーバーでW3 Total Cacheが500エラーになる問題の解消方法、ピンチから脱出せよ！
ここに解決策がありました。

WP Social Bookmarking Light
snsボタンを付けるプラグイン。最近はブックマーク代わりに使っている人も多いみたいなので、付けようと思いました。コードをコピーして、貼り付ける場所はプレビューをしまくってなんとか目的の場所に置けました。

WordPressにソーシャルボタンを付けるプラグインWP Social Bookmarking Lightを使ってみた（youtube）

ヘッダーにSNSボタンを配置したい 

WordPressのTOPページのみにソーシャルボタンを設置する方法

---

固定ページ・投稿関係

Adman

投稿した記事全部に定型文をいれることができるプラグイン。htmlも使える。

WordPressで記事の先頭・途中・最後に定型文を入れる方法

WordPress Related Posts

関連記事を表示させるプラグイン。関連記事関係はたくさんあって選ぶのに迷ったのですが、下のリンク先の記事がとてもわかりやすかったのでこれにしました。

投稿記事に関連記事を表示するWordPressプラグイン「WordPress Related Posts」

Simple posts list

全記事一覧を表示させることができるプラグイン。箇条書きで表示される。実は管理人は箇条書きをやめたいけど修正のしかたがわからないから、そのまま使っている。

好きな場所に　全記事リストを表示するプラグイン / Simple posts list

run-PHP

記事でPHPコードが実行できるプラグイン。上級者はバリバリ使ってるんだろーなー。

runPHP | 投稿記事内で PHP を実行させるWordPressプラグイン

Easy Smooth Scroll Links

記事内のアンカーリンクにスムーズに移動できるプラグイン。管理人のサイトでは何故か不安定。参考のサイトでは気持ちいいぐらいスムーズに動くんだけどなー。

WordPressで簡単に!?スムーズスクロールを実現するプラグイン[Easy Smooth Scroll Links]

Child Pages Shortcode

固定ページに子ページの一覧を表示させることができるプラグイン。こういう入れ子関係がうまくいくとプロっぽくなった気分になれる。

商品一覧や、サービス案内等に使えるプラグイン | Child Pages Shortcode


WP Gallery Custom Links

wordpressのギャラリーの機能の強化をするプラグイン。管理人はギャラリーの各画像に好きな場所へ飛ぶリンクをつけたくて使っています。ギャラリーの機能とこのプラグインだけでもそれなりのグリッドタイプのサイトは作れるね。

---

ダウンロード

File Download Manager

ファイルのダウンロードができるようになるプラグイン。

ファイルダウンロード機能追加：WordPressプラグイン「File Download Manager」| WordPressの学校（youtube） 

---

5.その他参考サイト

WordPress入門

動画チュートリアル。全23回で初心者脱出だ！

[Wordpress]Wordpressで修正したCSSを即効でWebサイトに反映させるテクニック

目から鱗の記事。CSSは反映が遅かったのでありがたかった。

WordPressの記事タイトル一覧にアイキャッチ画像を表示

ちょっとだけコードをいじると、それっぽいサイトが作れるいい見本。

optipng png画像を圧縮して軽くしてくれるフリーソフト。便利。

FC2画像縮小
手持ちの画像をアップロードして自由に縮小できるサービス。

こんな感じです。長文お疲れ様でした。

いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方

posted with amazlet at 14.05.25

石川栄和 大串肇 星野邦敏
インプレスジャパン
売り上げランキング: 4,973

Amazon.co.jpで詳細を見る

WordPress Perfect GuideBook 3.x対応版

posted with amazlet at 14.05.25

佐々木 恵
ソーテック社
売り上げランキング: 4,744

Amazon.co.jpで詳細を見る

SimonK firmware

I heard quite a bit about the SimonK firmware and thought i would try to fiddle around with it and  try to get the firmware programmed on my Turnigy Multistar 20A ESC´s. The SimonK firmware apparently give you a smoother flight, a more responsive quad by changing the timing provided by the ESC. It also removes features that work well for planes, but are not good for multirotors, like the low voltage cut off, saving your battery. This procedure is specific to my hardware setup, not all ESC´s have the ATMEL chip, so be sure to check out this site https://docs.google.com/spreadsheet/ccc?key=0AhR02IDNb7_MdEhfVjk3MkRHVzhKdjU1YzdBQkZZRlE#gid=0 to check your configuration. All that i have done is of coarse your own responsibility if you do decide to try it, things can go wrong and you might end up buggering your ESC.

You can off Hobbykings site purchase several preprogrammed ESC´s pre flashed with the SimonK firmware like the Afro ESC series saving you the hassle of what I am doing, but I love to do it the hard way. So I purchased a USBasp programmer for 3 dollars off Ebay. 

The USB ISP programmer

The USBasp comes with a 10-pin connection cable, so i needed to create a tool to do the flashing. You can purchase a Atmel Atmega socket firmware flashing tool from Hobbyking at quite a steep price, $19, this does the job pretty quickly and does it by simply placing the tool on the MCU socket and flashing, but i prefer to save the 19 bucks, so I set out to build a tool to take care of the job.

I grabbed two, JR servo extensions leads with three wires and some header pins and a broken ESC for testing purposes.

I then broke off two rows of the header pin, keeping the plastic intact to keep the pins stable and straight.

I inserted the header pins into the JR servo leads with the long edge inserted first

 

I placed the two JR servo leads adjacently and taped them together, I was careful not to cover the wiring as I needed to follow the wire when connecting it to the asp unit

I cut the ten-pin cable and split the cable as shown above, striped the ends so I could solder the JR servo leads to the 10-pin cable.

 I found this diagram on the internet and used it to solder the cable correctly.

The Cables have to paired together and soldered, remember the correct direction as one can easily get confused and end up swapping the direction when flashing, I used a piece of tape to help me remember left from right.

Once done the cable looked like this and ready for flashing. I downloaded the flash tool and the driver for the USBasp http://lazyzero.de/en/modellbau/kkmulticopterflashtool. I installed the software and the driver, fired up the software. 

My software settings were as above.

Prior to flashing my quad ESC´s I took my broken ESC striped off the heat shrink and ran a flash test with the new cable to see if things went as planned. The USBasp provides power via the VCC cable so keep the 5volt jumper shorted on the asp

On my quad I cut out  a small section of the heat shrink, that was equivalent to the ESC that I had stripped, took off my props and simply did the same flash procedure. After flashing I simply taped the hole that I used for flashing.

A quick Ebay tip

The X650F comes with a stack of M3 plastic screws, Nylon Hex Spacers, stainless steel hex screws. The Hex spacers tend to wear and the threads become useless, this will in time require changing the screws. Around the motor mounts some of the stainless steel screws tend to fall out, making the motors vibrate more, this problem can be as mentioned in a previous article eliminated by using loctite on all the screws prior to mounting them. Hobbyking has most of these spare parts but at an expense. 10 plastic screws at $9 dollars is quite steep and on top of that you have to deal with $3-4 dollar postage rate. I searched Ebay for nylon hex spacers and here, there were bucks to be saved a whole box of assorted hex spacers and screws for the sole price of $8,89 including postage seemed like a good bargain, there should be enough parts in this box for replacements on this model and future models for a while. The only drawback is the three week delivery time.....

 This set will cost you you $8,89 including postage

This set is a bit more expensive $11,98 was the total charge.

This set like the above cost $11,98

Photoshop:フォトショップのアクション「Magic 3D」を使って、いろんなものを1クリックで立体にしてみるtips

今回はphotshopのプラグインアクションの「Magic 3D」の紹介がてら、いろいろなものを立体にしてみようというtips。

クリック一つで平面のオブジェクトを光沢のある立体にできるので、ちょっと気取った立体ロゴを作ったり、お洒落な立体円グラフなんかもつくれるかもです。
ちなみに、管理人のphotoshopのバージョンはCS5です。

1.まずはatnファイル（アクション）をダウンロードしようず。

Magic 3D Photoshop Action ページの「Download the action and associated files」をクリックして、アクションをダウンロードしてね。

圧縮ファイルを解答すると、こんな感じのファイルがはいってるよ。

「Magic 3D.jpg」このアクションの紹介だね。
「Magic 3D.atn」アクションデータ。このファイルをフォトショップで読み込んでね。
「Glow.png」光沢の画像。アクションの実行中にこのファイルを読み込むから、ちゃんと場所が分かるところに保管しておいてね。
「Demonstration.psd」デモンストレーション用のpsdファイル。お試しでこのファイルを使ってMagic 3Dアクションを実行してみてねっていうファイル。製作者の心遣い感謝。

ダウンロードが済んだら、こことかを参考にして、Photoshopにアクションを読み込んでね。

2.「Demonstration.psd」ファイルで「For shape」アクションを試してみる。

アクションを読み込んだら、せっかくなので作者さんが用意してくれた「Demonstration.psd」ファイルを使って立体をつくるよ。「Demonstration.psd」を開いてみよう。

[アクション]と[レイヤー]ウィンドウを出そうね。

確認してみると、[アクション]ウィンドウに「For shape」「For text」「For layers」と3つのアクションがあるね。

レイヤーの方には歯車のシェイプレイヤー（レイヤー名「3DMe！」てっやつね）があるね。

早速この「3DMe！」レイヤーにアクションを適用してみよう。
シェイプレイヤーなので、「For shape」を実行するよ。
「3DMe！」レイヤーが選択されているのを確認して、「For shape」を選んで、下の三角形のボタン（再生ボタン）を押そう。

そうすると、何故か「開く」ウィンドウが出るはず。ここで、このアクションをダウンロードした時に一緒に入っていた「Glow.png」ファイルを読み込むんだ。アクションが続行されるぞ。

次に画像のような状態で、一旦アクションが止まるはず。

このタイミングでオブジェクトの大きさ、位置、遠近を決めるんだね。それぞれを決めたら、画面上部の○を押してアクションを進めよう。

しばらく、アクションが進んで（レイヤーが大量にできているはず）またウィンドウが出てくるよ。

今度は[レイヤースタイル]ウィンドウだね。ここではオブジェクトの上部（立体のフタにあたる部分）のスタイルを決めれるよ。

プレビューを見ながら好きなようにいじってね。okを押すとアクションが進むよ。

またまた[レイヤースタイル]ウィンドウが出てるくよ。

今度は底辺に付く影の設定だね。okを押すとアクションが進むよ。

またまたまた[レイヤースタイル]ウィンドウが出てるくよ。

今度は側面の影のグラデーションについての設定だね。okを押すとアクションが進むよ。

さて、またアクションが止まって、「Top glow」という白くて透き通ってるレイヤーができてるね。

このレイヤーを使って表面の光沢（ハイライト）を表現してねってことだね。

なのでいかにも光っているように見えるような位置に移動させてあげよう。

今回は大きい歯車の角に合うように移動してみたよ。移動が終わったら、画面上部の○を押してアクションを進めよう。

最後に、「Glow1」「Glow2」というレイヤーが出来てアクションが終わるよ。
「Glow1」「Glow2」をお好きな位置に移動して3Dの歯車の完成だ。やったぜ。

なにげに、レイヤーとかをグループにまとめてくれて整理されてますね。このアクションの制作者さんは絶対いい人だと思う。

3.テキストレイヤーで「For text」アクションを試してみる。

今度は「For text」アクションを試してみようと思うよ。

新規ファイルにテキストツールで適当に思いつくまま文字を書いてみよう。

一つのレイヤーに色と大きさが違う文字を書いてみたよ。

では早速「For text」を実行してみよう。
上記と同じように「Glow.png」ファイルを読み込んで、進んでいくと・・・

あらら、大きさを決める段階まできたところで文字の色が変わっちゃいました。
違う色の文字で立体を作りたい時はレイヤーを分けて別々にアクションを適用しなくちゃいけないみたいだね。
○を押して取り敢えず先に進みます。


[レイヤースタイル]ウィンドウが出てきたね。

このまま何回か[レイヤースタイル]ウィンドウが出てきて完成するよ。

( `･ω･) ｳｰﾑ…あまり細い文字や行数が多いものには向かないみたいだね。

この記事のサムネのようにサンセリフのシンプルなフォントのときに使うといいかも。

4立体の円グラフを作ってみる。

イラストレーターで作った平面の円グラフをこのアクションで立体にしてみるよ。

イラストレーターでの円グラフの作り方はこの記事（Illustratorメモ：イラストレーターで隙間のある円グラフを作る）を参考にして作ってね。（宣伝）

今回は平面のイラストレーターで作って、このアクションで立体にしてみるよ。

イラストレーターのデータを上のメニューの「ファイル」→「書き出し」と進むとフォトショップのpsd形式で保存できるよ。

保存したデータをフォトショップで開いて、「For layers」を適用してみよう。

ここから先は上の2つと同じだから、適当に大きさや位置なんかを決めてね。

今回は何もいじらないで進めるよ。

さて、アクションが終わったところなんだけど・・・。

違和感がありまくりなので、次のことをしました。

「Glow1」「Glow2」「Top glow」レイヤーを非表示

「3d Effect」レイヤーの効果のカラーオーバーレイを非表示

「Top」レイヤーの効果のグラデーションオーバーレイの調整

まあ、マシになったかな。

よく見てみると、ちゃんと閉じた立体になってない部分があるね。しょうがないのでブラシで近くの色を拾いながら描きました。

はい、完成（無理やり）

とまあ、こんな感じのアクションです。今回は特に細かいところには手を加えませんでしたが質感なんかを考えてそれぞれの効果のパラメータをいじってあげれば、もっとかっこいい立体に仕上げることが出来ると思いますので、是非使ってみてください。

ポイント

・いちいち「Glow.png」読み込むのがメンドイかも

・イラストレーターやフォトショップの標準の3D効果とは違った雰囲気の立体を作れる。

・可能性は感じるアクションです。
・ていうか、どこが1クリックだよ。

3D ザ・ベスト [Blu-ray]

posted with amazlet at 14.05.01

NBCユニバーサル・エンターテイメントジャパン (2014-04-23)
売り上げランキング: 119

Amazon.co.jpで詳細を見る