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

2022.1.10 更新

本日はワードプレスに外部ファイルを読み込ませる方法についての備忘録です。

ワードプレスで外部ファイルを読み込ませるためには、ワードプレス用のphp関数である、wp_enqueue_script を使います。

今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルを、このブログの本文に対して指定してみようという試みです。

目次

  1. jsファイルをダウンロード後、外部ファイルをテーマフォルダにセットする
  2. 自分用の設定を書くためのjsファイルを作る
  3. 竹取の縦書きの設定をする
  4. wp_enqueue_scriptで外部ファイルを読み込ませる
  5. @import urlで外部cssを読み込ませる
“ワードプレスに外部ファイルを読み込ませる方法” の続きを読む

インターネットラジオJango

jango

2022.1.10 更新

自分好みの楽曲をかけてくれるパーソナライズ・ラジオはないものかと
探して行き着いたのがJangoです。
このラジオ、自分専用のステーションを作る事が出来るんです!

jango

自分の好きなアーティストを、自分の作ったステーションのリストにプラスしていくことで
登録したアーティストはもちろん、同じ傾向のアーティストの曲をかけてくれるんです。

例えば、Led Zeppelin Radio ならクラシックロックな選曲で延々とかけてくれます。

Sonny Clark Radio ならジャズ、クラシック音楽だって、マニアックなジャンルだって何でもござれ。

いくつでも作れるので、ジャンルごとにステーションを分けて作っておいても良いですね!
歌詞やアーティスト情報もクリックひとつで呼び出せますし、なにより新しい発見もあり、手持ちのCDをかけているよりだんぜん楽しいんです!

音楽好きさんは是非お試しあれ(^^)


amazonアフェリエイトを設置してみよう

2022.1.10 更新

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

私はamazonでよくお買い物をするので、amazonアフェリエイトに登録してみました。

今回は amazonアフェリエイト の登録からサイトへ設置する方法をお届けします。

“amazonアフェリエイトを設置してみよう” の続きを読む

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

2022.1.8 更新

今回はテーマの編集に欠かせない、htmlとcssの基本の備忘録になります。

1.htmlとcssとは?

  • html サイトの枠組みを作る
  • css 枠組みにデザインを加える

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

今回は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の書き方の基礎でした。この基本のタグと構造が頭に入っていれば、今後新しいタグが増えても理解しやすいと思います。

次回はcssの基本と書き方をおさらいします。お疲れさまでした。

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

2022.1.8 更新

ワードプレスにソーシャルブックマークボタンを設置する

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

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

  • ボタンをサイトに設置することで、訪問者があなたのサイトを簡単にブックマークへ追加することが出来ます=「リピーター」になってくれる可能性が高くなります。
“ワードプレスにソーシャルブックマークボタンを設置してみよう” の続きを読む

MAMPのインストールから設定のやり方

mamp

2022.1.9 更新

web上に公開する前にローカル環境でテストが出来れば、失敗を恐れずあれこれ試せて便利ですよね。

そんなローカルのテスト環境を作ってくれるのがMAMP(mac)とXAMPP(windows)です。

本日はMac用のMAMPのインストールから設定までをやってみようと思います。

目次

  1. MAMPをインストールする
  2. MAMPを起動する
  3. 環境設定を変更する
  4. データベースの設定をする
  5. wordpressをダウンロード
  6. ブラウザでwordpressを開く
  7. ローカルサイトが見つかりません?!
“MAMPのインストールから設定のやり方” の続きを読む

macでスクリーンショットを撮る方法

2022.1.9 更新

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

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

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

ちなみに…

コマンド + shift + 4 + スペース = 選択範囲を切り抜き

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

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

2022.1.9 更新

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

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

“スタイルシートに子テーマを設定する方法” の続きを読む

wordpressのテーマを変更してみよう

2022.1.9 更新

wordpressはデフォルトの公式テーマ、Twenty~シリーズのままでも機能的で見た目も素敵ですが、他にもたくさんのステキなテーマを選んで着せ替えが出来るんです。

テーマを変更してみよう

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

マルチサイト化している方は、左上のメニューバーから

参加サイト→サイトネットワーク管理者→ダッシュボード→外観→テーマ→新規追加

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

外観→テーマ→インストールされているテーマ

から選んで有効化するだけ。簡単ですね!

一瞬にしてガラッと雰囲気を変えられますし、いきなり完成度の高いサイトの出来上がり!
ぜひお試しください♪

wordpressをマルチサイト化する方法

2022.1.9 更新

WordPressをマルチサイト化してみよう

ジャンルごとにサイトを分けたい、アイディアがいっぱいあり過ぎて、ひとつのサイトだけじゃ物足りない!そんな貴方は、wordpressをマルチサイト化してみましょう。なんと、ひとつwordpressをインストールするだけで、複数のサイトを持つ事が出来るのです。しかも一元管理が出来るのでサイトが増えても管理が楽々です。

1. サブドメイン型とディレクトリ型とは?

まず初めに、アドレスをサブドメイン型にするかサブディレクトリ型にするかを決めましょう。

◆サブドメイン型<例>それぞれのサイトが全く違うジャンル
http://blog1.wpress.com/
http://blog2.wpress.com/

◆サブディレクトリ型<例>それぞれのサイトが関連性がある
http://wpress.com/blog1/
http://wpress.com/blog2/

アドレスとなる(ここではblog1,2)部分が先頭にくるか、後ろにくるかで雰囲気も変わりますよね。それぞれのサイトが全く違うジャンルならサブドメイン型、何かしら関連性のあるサイトならサブディレクトリ型、などとしても良いですね。ちなみに私はこのサイトの他にポートフォリオサイト、趣味のサイトを作りたいなと思っているので、サブドメイン型にしてみました。

“wordpressをマルチサイト化する方法” の続きを読む

©2012 freyjasrm.com