ワードプレスに外部ファイルを読み込ませる

明けましておめでとうございます!

一年の計は元旦にあり!今年はもっと更新頻度を上げて行く様、頑張ります☆

さて、本日はワードプレスに外部ファイルを読み込ませる方法についてです。
ワードプレスで外部ファイルを読み込ませるのには、ワードプレス用のphp関数である、wp_enqueue_script を使います。
今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルをこのブログの本文に対して指定してみようという試みです。

1.縦書きにするためのファイル、『竹取』をダウンロード

『竹取』から、taketori_js.zipをダウンロードします。これを解凍しますと、中に taketori.js と taketori.css というファイルが入っています。

2.外部ファイルをセッティングする

次に、ご自分のFTPへアクセスします。
私の場合は現在子テーマを使っていますので、そのフォルダの中へ1.でダウンロードした taketori.js と taketori.css を入れます。そうでない方はご自分で使用しているテーマのフォルダの中にこの二つのファイルを入れて下さい。

3.自分用の設定を書くためのjsファイルを作る

二つのファイルを入れたテーマのフォルダの中に、新たに自分用の設定を書くためのjsファイルを作ります。名前は何でも良いです。拡張子は.js です。
(ちなみに子テーマを使用している方は、親テーマのheader.phpファイルを丸ごとコピーして、これを子header.phpファイルとしてテーマのフォルダの中に入れておくと良いです。設定はこちらに記述していきます。間違えても安心ですね。)
“ワードプレスに外部ファイルを読み込ませる” の続きを読む

インターネットラジオ Jango

jango

自分好みの楽曲ばかりをかけてくれるアメリカのインターネットラジオ、Pandoraは
残念ながら日本からは使えないので、何か似たようなパーソナライズ・ラジオはないものかと
探して行き着いたのがJangoです。
このラジオ、自分専用のステーションを作る事が出来るんです。

jango

自分の好きなアーティストを、自分の作ったステーションのリストにプラスしていくことで
登録したアーティストはもちろん、同じ傾向のアーティストの曲をかけてくれるんです。
例えば、Led Zeppelin Radio ならクラシックロックな選曲だったり、
Sonny Clark Radio ならジャズ、等々。
いくつでも作れるので、ジャンルごとにステーションを分けて作っておいても良いですね!
歌詞やアーティスト情報もクリックひとつで呼び出せますし、なにより新しい発見もあり、手持ちのCDをかけているよりだんぜん楽しいんです!
是非お試しあれ。

amazonアフェリエイトの設置

お気に入りの本やCD、買って良かったものなど、ブログでみんなに紹介してみたくないですか?
しかも、それを見てもしお買い物をしてもらえたら、お小遣いまで貰えちゃうんです。

私はamazonでよくお買い物をするので、早速amazonアフェリエイトに登録してみました。
簡単ですよ♪
アフェリエイトに興味をお持ちの方は、入門としてどうぞお試し下さいませ。

amazonアフェリエイトに挑戦!

1.amazon アフェリエイト
まずはこのページから、無料アカウントを作成します。

2.アカウントを作成出来ましたら、ログインして下記の要領で紹介したい商品を検索します。

アフェリエイト1

アフェリエイト2

3.カスタマイズとhtml取得 から、
「3.この商品のhtmlを取得する」で表示されているhtmlをコピーして、ご自分の投稿の好きな所に
貼付けるだけでOK。

アフェリエイト3
それでは早速アフェリエイトを貼ってみます。
今回ご紹介するのは
「魁!クロマティ高校」

しかし初めて貼るアフェリエイトが「クロ校」て。(稼ぐ気皆無;)
ここの登場人物のひとり、ネット番長・藤本が、私のツボでして。
”ケンカ最強にしてCGIを使いこなす、違いのわかるパソコンユーザー”
な、彼の吐くセリフが堪らない!

「もとはと言えば息抜きと趣味の一環で始めたインターネットなのに、
いつのまにか仕事のようなプレッシャーを感じている…」

まさに私の心境を代弁するようなセリフがポンポン飛び出すので、読んでて思わず吹いちゃいます!
ネット好きにはこの漫画、共感できるんじゃないかな?(不良高校が舞台の漫画です^^;)
機会があったら是非、読んでみて下さい♪
このレビューを読んで気になったら、是非ここからお買い物して下さいませ ^^

本気でアフェリエイトで稼ぎたい!と一念発起した方は、商品を買ってもらうために魅力的な記事をupしたり、専門書なども多々ありますのでぜひ研究してみて下さい。
もし成功したら、私にも教えて下さいね!

cssの基本文法をおさらい

css3の勉強に入る前に、今回はcssの基本文法をおさらいしておきます。

css(スタイルシート)の利点は、何といってもサイトのデザインを一発で変更出来るところです。
htmlファイルには一切触れずに、cssファイルを修正するだけでガラッとデザインを変えられるんです。まるで、ワードプレスのテーマを着替えるみたいに。なんて素晴らしい☆〃
まずは基本をマスターして、新しい効果をどんどん取り入れていきたいものですね!

cssの基本文法

《例》
「見出しh3は、フォントの色は#666で、フォントのサイズは16ピクセルです。」をcssで記述すると…

h3 {
 color:#666;
 font-size:16px;
  }

と、なります。
まず、デザインを加えたい対象のセレクタを一番前に記述します。この例の場合、セレクタはh3です。

{ }の中に、○○○:○○○;(プロパティ:値;)で、デザインを加えていきます。
○○○:○○○; のセットは続けて記述出来ます。

セレクタ { ○○○は: ○○○です; }

文法についてはこれだけです。簡単ですね。

cssのプロパティは山ほどあります。
どのプロパティがどんな効果を出すのかについては、これからcss3を使って色々と実験しながら、使えそうなものはどんどんご紹介していこうと思います。
“cssの基本文法をおさらい” の続きを読む

htmlの基本構造とタグのおさらい

ワードプレスのテーマの変更も出来ます。フォントも好きに変えられるし、ソーシャルブクマボタンも設置したし、マルチサイト化も、子テーマの設定の仕方もわかりました。
これだけでも充分カッコイイデザインにカスタマイズ可能ですが、これからは今注目の
html5css3
を勉強しながら、もっとオリジナルなサイト作りに挑戦していきたいと思います。

今は誰かの作ってくれたテーマをお借りしている状態ですが、最終的にはオリジナルのテーマを作るのが目標です!

hml5とcss3を勉強する前に、まずはhtmlとcssの基本をおさらいします。

htmlとcssって何が違うの?

簡単に言うと「htmlでサイトの基本の枠組みをつくり、cssでデザインを加えていく」、です。

1.ブラウザfirefoxとアドオンfirebugをインストールする

コーディングを勉強するのに欠かせないブラウザがfirefoxです。まず、firefoxをインストールしましょう。
インストールしましたら、これまた欠かせないアドオン、firebugをインストールします。

firefoxをインストール
firebugをインストール

2.htmlファイルを作る

メモ帳など、適当なテキストエディタで書いたものを名前を付けて保存する際に、html形式で保存します。(ファイル名のあとの拡張子を.htmlにします。)
これで、このファイルをブラウザで開く事が出来る様になりました。

3.htmlの基本的な構造、基本となるタグを覚える

htmlは入れ子構造になっています。開始タグ< >と終了タグ</ >がワンセットです。改行の<br>タグなどの一部例外を除いて、必ず最後に</ >で閉じる、という事を覚えておきましょう。結構こういった簡単なミスで、表示されない〜っ(><)!とかいうことがよくあります。 それでは、htmlの基本の構造を記します。 **********************************

<html> 
 
<head>  headタグ内にはサイトのタイトルや文字コード等、サイトに関する情報を入力します。
        ブラウザでは表示されません。     
<title> ブラウザのタイトルバーに表示されます。検索にも使われるので重要なタグ。
</title>                
</head>	

<body> bodyタグの中に書いた内容がブラウザに表示されます。
<h1></h1> 見出しタグ。hの次の数字が小→大で、大見出し→小見出しとなります。
          <h6>まであります。
          これも検索に使われるので、キーワードに注意を払います。
<h2></h2>
<h3></h3>
<p></p> 囲んだ文章をひとつの固まりにします。

<ul> 箇条書きのリストを作る時に使う。このタグで囲った範囲がリストです。
    (<ul>の代わりに<ol>を使えば、項目が1、2、3…と表示されます。)
<li></li> リストの中のひとつの項目。先頭に●が付きます。
<li></li>
<li></li>
</ul>

<table> 表を作成する。
<tr>  <td></td>  <td></td> <td></td> </tr>  (<tr>とは表の中のひとつの行)
<tr>  <td></td>  <td></td> <td></td> </tr>  (<td>とは行の中のひとつのセル)
<tr>  <td></td>  <td></td> <td></td> </tr>
</table>

その他、頻繁に使われるタグ
<a></a> 囲んだ文字列にリンクを設定します。	
<br> 改行タグ。終了タグは無し。	
<img> 画像を表示させます。終了タグは無し。	
<!– 表示させたくないコメントはこの中に書きます。 –>

</body>	

</html>

**********************************



以上、簡単ながらhtmlの書き方の基礎のおさらいでした。この基本タグと構造が頭に入っていれば、これから勉強していくhtml5への理解もスムーズ…な筈(^^;?

次回はcssの基本と書き方をおさらいします!

ワードプレスでソーシャルブックマークボタンを設置してみよう

ワードプレスでTwitterやFacebookなどのソーシャルブックマークボタンを設置する

TwitterやFacebook、Google+1…等々、ソーシャルメディアは欠かせない昨今。
せっかく自分のサイトを作ったのですから、さっそくソーシャルブックマークボタンを設置してみましょう!

    ソーシャルブックマークボタンを設置する意味

  • ボタンをサイトに設置することで、訪問者があなたのサイトを簡単にブックマークへ追加することが出来ます=「リピーター」になってくれる可能性が高くなります。

  • ソーシャルメディアに登録されることで、検索エンジンにひっかかりやすくなるなどのメリットがあります。よって、他のユーザーからのアクセスアップも見込めます。

  • ユーザーの反応を数値で把握できるので、どんな記事をUPするとアクセスが伸びるのか?なんて解析も出来ますね。


  • さて。こんなにステキなソーシャルブックマークボタン、このプラグインを使えばあなたのWordPressのサイトにも簡単に一括配置することができるんです!

WP Social Bookmarking Light

↑これをコピーして、
ダッシュボード→プラグイン→新規追加
検索の欄にペーストして検索→インストール→ネットワークで有効化
します。

有効化してダッシュボードに戻りますと、
設定にWP Social Bookmarking Lightのタブが出来ていますので、ここでどのメディアのボタンを設置するか選びます。

右側のリストから選んで左側にドラッグするだけなので本当に簡単!
選んで「変更を保存」するとメニューバーの一般設定の横に、選んだボタンのタブが現れますので、そこで言語やボタンの種類、カウントの有無など各種設定をしていきます。

social media

ちなみに…

●個別記事のみ→トップページにもボタンを表示させたい場合は「No」を選択します。

●ページ→固定ページでボタンを表示させたくない場合は「No」を選択します。

●Facebookの日本語設定は、一番上のLocaleの欄に「ja_JP」と入れます。

●Twitterはデフォルトのままですと右側にやけに余白が出来てしまいますので、それが気になる方は
Widthのデフォルト130を、とりあえず95くらいにしてみて下さい。カウントの有無でサイズも変わりますから、調整してちょうど良い幅を見つけてみて下さいね。



ボタンを設置してみてどうでしょう?これだけで今っぽくなったような気がしません?(^^)v
個人的にはボタンは5〜6個くらいまでがスマートで良いのかなあ、と思います。

MAMPを設定してみる

mamp

web上に公開する前にローカル環境であれこれテスト出来れば、失敗を恐れずにあれこれ試せるし便利ですよね。プラグインやテーマも使い勝手を試してからインストール出来ますし。そんなローカルのテスト環境を作ってくれるのがmamp(mac),xampp(win)です。

これはうちにもぜひとも設置しておきたい!と、早速MAMPをインストールしてみました。
※ちなみに、MAMPとは「Macintosh+Apache+MySQL+PHP」の略です。

1.MAMPをインストールする

MAMP&MAMP PROへ
mamp

Mac OS X 10.6.6、OS X 10.7 Lionをお使いの方はここからインストール。
それ以前のMac OS X 10.4〜をお使いの方はメニューバーにある「downloads」をクリック→「MAMP & MAMP PRO 1.9.6.1」のバージョンをどうぞ。
クリックしたら、ファイルを保存でダウンロードが始まります。
インストールが終わったら、「使用許諾契約」から「続ける」をクリック。
PCのApplicationsに「MAMP」をドラッグして追加。(※「MAMP PRO」は有料版です。)

2.MAMPを起動する

MAMPを起動させると自動でApacheサーバとMySQLサーバが立ち上がります。
状態が緑になっていればOKです!
mamp-1a

3.環境設定を変更する

それでは「環境設定」をクリックし、設定を変更していきましょう。

★「起動・停止」をクリック
MAMPを起動するたびにスタートページが開いてしまわないよう、「起動時にスタートページを表示」のチェックを外しておきます。
mamp-2

★「ポート」をクリック
ここで、マルチサイト化をしている方、する予定の方はポート番号を変更しておきます!
(※マルチサイト化しない場合は必要ありません。)

デフォルトのApacheのポート番号「8888」→「80」に変更し、「ApacheとMySQLの標準ポートに設定」をクリックします。
mamp-3

すると、後に使うアドレスに変化が起きます。
「http://localhost:8888/wordpress/」(デフォルト)となるところが、
「http://localhost/wordpress/」となります。

4.データベースの設定をする

“MAMPを設定してみる” の続きを読む

macでスクリーンショット

知ってる様で意外と知らない、macでのスクリーンショットの撮り方です。

コマンド + shift + 3 = 画面全体を撮ります。winのプリントスクリーンと同じ。

コマンド + shift + 4 = 切り抜き

ちなみに…

コマンド + shift + 4 + スペース = カメラのアイコンが出てきます。

これは、ウィンドウ、メニューバー、DOCK、アイコン…など、その他の領域を選んで撮影することが出来ます。切り抜きたい画像などをデスクトップ上に開いておくとGood。何気に便利です。

以上、macでショートカットキーを使って画面を撮影する方法でした。

スタイルシートに子テーマを設定する

皆さまこんにちは!
wordpressはデフォルトのTwenty Elevenのままでもとっtも素敵ですが、他にもたくさんあるテーマの中から気に入ったデザインを選んで着せ替えることが出来るのが魅力ですよね!また、気に入ったレイアウトのテーマを選んで、自分好みにカスタマイズ出来るところも魅力です。本日はwordpressのカスタマイズに必須な子テーマについてのお話です。

1. ワードプレスのテーマを変更してみる

ダッシュボード→外観→テーマ→新規追加

お好きなキーワードで検索、お気に入りが見つかったらインストールするだけです。後は、

外観→テーマ→インストールされているテーマ から選んで「有効化」するだけ。簡単ですね!

気に入ったデザインに着せ替えてはみたものの、「タイトルのフォントの色をもう少し明るくしたい」とか、「メニューバーの位置を変えたい」とか、使っているうちに何かしら不満が出てきますよね。
せっかく自分のサイトを作ったのだから、やはり見た目も機能も自分好みにカスタマイズしたくなるというもの。
そこで登場するのが「子テーマ」です。コーディングに自信が無くても、既存のテーマを基に自分好みに見た目を変えられるんです!素晴らしいですね(^^)

2. なぜ子テーマが必要なのか?

テーマの編集から、右上の▼で編集したいスタイルシートを選んで、その中に変更したい内容を記述したり書き換えても問題ありませんが、例えばこのTwenty Elevenというテーマも時々アップグレードされたりします。そうなるとテーマを新しいバージョンに更新する訳ですが、この時、元のテーマのスタイルシートに直接記述をしていると、テーマを更新することでスタイルシートも新しいものに置き換わってしまい、せっかく書いた構文も消えてしまう、という訳なんです。
でも、元になるスタイルシートに子テーマを設定してあれば、元になっているテーマが新しいバージョンに更新されても自分の設定が維持出来るんです。

3. 子テーマを設定してみる

それではデフォルトのテーマ、Twenty Elevenを例に説明していきます。
ご自分のサーバーへ行き、WPのフォルダの中の「wp-content」を開きます。
その中にある「themes」フォルダを開きます。「Twenty Eleven」のフォルダがありますね。この同じ階層に新しいフォルダ「twentyeleven-child」を作ります。(※ここではtwentyelevenの子テーマということでわかりやすくtwentyeleven-childとしました。)
フォルダを作りましたら、その中に新規にファイルを作成してファイル名を「style.css」とし
下記の様に記述します。

/*
Theme Name: twentyeleven-child   
Author: wpress   
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);



〈説明〉

  • ※Theme Name: お好きな名前をつけて下さい。ここではtwentyelevenの子テーマということでわかりやすくtwentyeleven-childとしました。
  • ※Author: この子テーマの作者名です。あなたのお名前など。
  • ※@import url: 「この子テーマは、親テーマ(ここではTwenty Eleven) のテンプレートを引き継ぎます」と宣言します。くれぐれもcssの記述はこの宣言の後に書いて下さいね。でないと記述したcssが反映されません。

wordpressへ戻り、子テーマを適用したいサイトの
外観→テーマ→インストールされているテーマ
から、先ほど作ったtwentyeleven-childを選んで「有効化」します。

テーマの編集画面へ行きます。
右上の▼から先ほど作成したtwentyeleven-child のスタイルシート(style.css)を選択します。

※すぐ下を見ると、
「この子テーマは親テーマ Twenty Eleven のテンプレートを引き継ぎます。」
と書いてあります。

では試しに下記の記述をして、ファイルの更新ボタンを押します。

/*
Theme Name: twentyeleven-child
Author: wpress
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);

body {
	background: #bdb76b;
}

※変更したところ…backgroundの色をデフォルトの #fff から #bdb76b に変更。

ファイルの更新をしてサイトへ戻ると…
背景色が白からカーキ色に変わりましたね!

これからは変更したい記述はここに書くようにします。

インストールした他のテーマについても、子テーマを作って試してみて下さい♪