はてなブックマーク

こんにちは。僕はWordPressを使い始めてから５年位になるんですが、それまでに何度も何度も何度も何度も…サイトを潰したり、設定を変えたりしてきました。 そんな中で今の状態（設定とか機能）に落ち着いたわけですが、「これ、最初から知ってたらよかった！！」って内容がある多々あります。 「誰か教えといてくれよ！！」と何度心の中で叫んだことかｗ WordPressではプラグインの追加とか、デザインの変更なんかは後からいくらでもできるんですが、そうじゃない部分ってのがあります。 「パーマリンクの設定」や「記事内の見出しの使い方」、「最低限利用するコア系のプラグイン」なんかです。 というわけで、今回はWordPressをはじめたばかりという方やこれからWordPressにしようとしているという方に向けて、自分なりの見解をもとに決めた最低限の初期設定をご紹介したいと思います。 パーマリンクの設定 まず

あなたはAdobe Comp CCというアプリを知っていますか？ WEBデザインを仕事にしている人のメインのツールといえば、IllustratorやPhotoshopだとは思うのですが、これって本格的に作業したい時はいいんですが、打ち合わせの際はパソコン開いてワイヤーフレームつくるなんてできませんよね。（まあ、出来なくはないですがスマートではないですよね。） 初回の打ち合わせのときなんかは、内容がぜんぜん決まっていないことが多いので色々とやりたいことなんかを聞いて、内容を持ち帰って作業することが多いと思います。 でも、今までの経験としては、初回の打ち合わせの時にどれだけイメージをふくらませることができるか。というのが重要。 ようは初回の打ち合わせの時により完成に近い内容（レイアウト）をお互いに共有しておく必要があるんです。 「後日ワイヤーフレームをお送りしますので確認してください。」 って

デザイナーであれば悩みのひとつであるフォントの管理。MacではデフォルトでFontBookというアプリが入っているがお世辞にも良いアプリとはいえない。 フォントが一覧で見えることくらいで大した機能がない上に、動作が非常に重たい。Macの標準フォント程度を確認＆検索するくらいであれば特に気にすることはないが、そういった使い方をする人はおそらくデザイナーではないし、そもそもFontBookを開くこともないだろう。 デザイナーであればフォントを1000種類とかいれていることもザラ。そんなフォントのヘビーユーザーにとって、FontBookはかなり貧弱なソフトでした。 フォントを高速に検索できて、カテゴライズも可能なアプリはないものだろうか。そんなユーザー切なる思いを一気に解消することができるフォント管理アプリ「RightFont for Mac」について紹介しておきたいと思う。 まずはこの動画をみ

Macで最近おもしろいメーラーアプリがでました。機能を簡単に言うとメールアドレスごとにメールを振り分けてくれるというものです。 アプリを知ったきっかけは、WEBサービスの問い合わせメールの管理用に、メールアドレスごとに振り分けてくれるアプリが欲しいなーと思いながらおもむろにFacebookを眺めていたら下記の記事を発見。 メールを送ってくれた人ごとにメールを整理してくれる新感覚のMacアプリ「Unibox」 | iTea4.0 メールアドレスごとにわけてくれるのが超絶便利 Uniboxはメールアドレスごとにメールを振り分けてくれる。すなわちユーザーごとに振り分けてくれるということです。 問い合わせメールの管理に力を発揮 小さなWEBビジネスをやっていて、同じ人から問い合わせがあった場合、以前どんな内容のやり取りをしていたかって、結構重要だと思うんです。 Gmailは検索機能が秀才で便利なん

WordPressでブログを更新してきて思ってたことがあります。 「なんでスマホで使い勝手のいいアプリがないんだろう」 「なんでスマホのブラウザで管理画面から更新しようとするとこんなに使いにくいんだろう」 と思っていました。今の時代スマホから記事を更新したいという需要はかなり高いと思うんだけどな……っと。 ですが、最近何気なくiPhoneでブラウザからWordPress管理画面にログインしてみたら、あら？なんだか使いやすいぞ？という印象でして、試しにこの記事を書いてみたわけです。 そしたら思いの外スラスラと書くことができる！これは実用レベルまできてるんじゃないか！という発見があったのでご紹介します。 最も恩恵があるのはマークダウン記法 WordPress4.3以降からビジュアルエディタ内でマークダウン記法を標準で使えるようになりました。 それまではプラグイン（Jetpackなど）を使わない

ビジネスアカウントでPayPalを使用している場合、お客様側にわかりやすくするために事業者名を変更したい場合があるかと思います。 その変更方法がイマイチわからなかったのですが、PayPalに直接電話で問い合わせたところあっさり解決してしまいました。 その手順を今回メモっておきたいと思います。 といってもとっても簡単で… 箇条書きで概要を説明 ビジネス用のPayPalアカウントにログイン マイアカウントの「個人設定」のページへ 事業情報のタブの「氏名」の部分の「変更」というテキストリンクをクリック 4つ目の「事業者名の変更（事業者名）」を選んで「続行」ボタンをクリック あとは「新しい事業者名」の部分に変更したい名前をいれて「続行」 これで変更が完了します。 下ではキャプチャ付きで説明しています。 画像で詳しく説明 ビジネス用のPayPalアカウントにログイン 普通にログインしてください（ビジ

こんにちは。久しぶりの更新となってしまいました。最近いい出会いがあって新たなイノベーションが起こりそうな予感でワクワクして夜も寝られません。というわけでこの記事書いたら寝ます。 今回はWordPressを複数人（複数人のライター）で管理運営しているメディアサイトがあったとして、各ライターの紹介ページを作る方法をご紹介。 一応コピペだけである程度のプログラムは動くと思いますので、ぜひ挑戦してみてください。 投稿者（ユーザー）一覧ページを作成する さて本題。投稿者一覧ページですが、2〜3人のライターで運営してるWordPressであれば手書きでコードを書いてあげたほうが早いと思うのですが、ライターが10人以上いたり、ライターの出入りが多い場合などは投稿者一覧ページの更新作業が面倒になってきます。 そんな時はその投稿者一覧ページを、WordPressユーザーと連動させて自動化してあげると便利です

先日、「プラグイン不要！function.phpにコピペするだけで出来るカスタマイズコードまとめ」という記事を書いたのですが、その中でmoreタグの位置に広告など任意のコードを配置するというのを紹介しました。その部分の応用変としてスマホとPCで別々の広告を表示させたいというお声をブログ仲間のヨスさん（@yossense ）からいただきまして、挑戦してみました。 すると意外と簡単にできたので、moreタグの位置にスマホとPCで別々のAdsenseコードを貼り付ける方法を書いておきたいと思います。 wp_is_mobile関数を使って条件分岐する // MOREタグの下に広告を表示 add_filter('the_content', 'adMoreReplace'); function adMoreReplace($contentData) { if (wp_is_mobile()){ $ad

WordPressのカスタマイズの時に便利なプログラムサンプルをまとめたいと思います。 今回はfunctions.php内にコピペするだけでできるコードに絞って紹介します。 パンくずナビを実装する function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "breadcrumb inner")){ global $post; $str =''; if(!is_home()&&!is_admin()){ $tagAttribute = ''; foreach($divOption as $attrName => $attrValue){ $tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue); } $str.= '<div'. $tagAttr

どうも。WordPressでも静的サイトでも何でもいいんですが、サイトでCSSをちょっとカスタマイズしたいと思った時ブラウザで実際の表示を確認しながらカスタマイズする方法が便利です。 デザインをカスタマイズしようとした時にstyle.cssを開いてみたものの何がなんやらわからない… やっぱ俺にはできないや…という方にオススメしたいカスタマイズの方法なので、この方法を知らない場合はぜひお試しください。 今日はGoogleChromeを使って、サイトのCSSをカスタマイズする方法をご紹介します。 「要素を検証」を使ってCSSを確認する GoogleChromeでは右クリック→要素の検証 で適用されているCSSを確認することができます。 これは自分のサイトはもちろん、サイト上に公開されている別の人のサイトであっても確認することが可能です。 例えばこのサイトの見出しの部分のCSSを確認してみましょ

WordPressでサイトを運営していると、ついつい便利なプラグインを追加してしまい、後でみた時にあれ？このプラグインってなんだったっけ？なんてことになりかねません。 そんなとき、プラグイン一覧ページに何のプラグインなのかを自分で後からわかるようにメモを残せたらいいのにな。と思っていたら、それを実現してくれるプラグインを発見したのでご紹介です。 ただし、このプラグインWordPressのバージョン4.1以降ではちょっとバグがあるみたいなので、その対処法（応急処置）もあわせて備忘録しておきたいと思います。 プラグイン一覧にメモを残せる「Plugin Memorandum」 まずはプラグインからご紹介。（あとでバグについての情報も記載します。） まずは通常通りプラグインをインストールします。方法としては下記のふたつ。 公式サイト「Plugin Memorandum」からプラグインをダウンロード

WordPressで配布されているテーマのほとんどがレスポンシブ対応されており特に何も対策しなくてもスマホ最適化のサイトをつくりあげることができます。 ですが、レスポンシブ対応しているからといって、それが完璧だとは限らない。 スマホ版に対応しているのに表示順序が悪かったり、スマホ版では表示させたくないものが表示されたり、あるいは表示されていなかったとしても見た目上見えなくなっているだけでソースデータとしては存在していて、データ容量を大きくしてしまう原因となったりします。 WordPressでスマホ対応を行う場合、上記のようなレスポンシブ対応の他にPC版スマホ版と別々のテーマので作るという手があります。 スマホとPC版の2種類のテーマを作成するメリット スマホの場合はスマホ用のテーマを使用することで、広告やバナーを出しわけたりレイアウトをスマホ用に組めて最適化が可能なので、メリットが多いです

WEBサイトを作成でデザイン性を高めてくれる背景パターン。繋ぎ目のない背景パターンはWEBデザインに置いて非常に効果的な要素です。 ですが、背景パターンを作成するとなると繋ぎ目をキレイに仕上げようとするとそれなりの技術が必要です。本当にオリジナルの背景パターンをつくるなら自作する必要がありますが、画像編集ソフトの知識がなければ難しいですよね。 そんな方は今日ご紹介するサイトでハイクオリティな背景パターンを無料でダウンロードすることができます。現在（2015/03）400種類のパターンから選ぶことができるので自分のサイトにピッタリのものを見つけることが出来るはずです。 400種類の背景パターンがダウンロードできるサイト Subtle Patterns 「Subtle Patterns」は400種類の背景パターンをダウンロードして使うことができます。 シンプルなものから可愛らしいデザイン、さら

擬似クラスと擬似要素って便利ですよね。 :first-child :even-child:before :after みたいなやつですが、デザインのワンポイントとしてアイコンを表示させたり、テキストを表示させたりできます。 両方指定したい場合の書き方 これらを複数指定したい場合は書き方にちょっとクセがって「○:擬似クラス:擬似要素」という順番で書いてあげないといけません。 こんな感じで。下記は正しい書き方。 もしこれらの順番が違っていたり間でスペースが空いていたらうまく効いてくれません。下記がダメな例です。 ほとんど同じなのになんで？っと思ってしまいますよね。でも、これは擬似クラスと擬似要素の名前の意味を理解すればなんとなく答えは見えてきます。 擬似クラスと擬似要素についての知識 擬似クラスと擬似要素。ここまで読んでいる方なら聞いたことはあるとおもいますが、それぞれどういったものがあるか知

先日「Analyticsでサイト分析の時に「URL一覧からページタイトルを取得する方法」」という記事を書かせていただいたのですが、思いの外反響がありました。 そのコメントの中で セカンダリディメンションに「ページタイトル」指定してあげればアナリティクス上でも表示出来てスマートだと思うのだけど・・・。 という気になるコメントを発見し、試してみるとそれが超絶簡単で、正直言うと前の記事は見る必要はないです。 この記事だけ読んでもらうだけでもGoogleAnalyticsでページタイトル一覧を表示できます。 やることはとっても簡単！1分でできます。 セカンダリディメンションで「ページタイトル」を追加 セカンダリディメンションというオプション？を使って「ページタイトル」を追加してあげるだけで、以前の記事と同じことができてしまいます。しかもこちらは記事数制限なしに… とりあえず「ランディングページ」を

Analyticsはサイト分析に便利ですが、ところどころ不便な点があります。 その一つとして、ランディングページの上位をみている際にURLしか表示されない。 URLがどのページなのかを把握していないといけなくて「あれこのURLどのページだっけ？」なんて経験、あったりなかったり… 自身のブログなどであれば何となく覚えているかもしれませんが、クライアントさんのサイト分析を行う際にはURLを見てもわからないことは結構あります。 通常であればそのURLをコピペしてページを表示させてようやくわかる。という流れになるのですが、それってとっても非効率的ですよね。 そんな時、わずか数ステップでタイトル一覧を取得できるWEBサービスを見つけましたのでご紹介します。 追記（2015/03/02） もっと簡単な方法がありました。というかGoogleAnalyticsのデフォルト機能でも表示させられるみたいｗ も

Googleが提供している無料のWEBフォント、「Google Fonts」。画像を使わずに様々なデザインのWEBフォントが無料で利用できるようになるのですが、スタイルシートから読み込めるようにする方法をご紹介。 GoogleFonts Googleフォントってなに？っという方は下記を参照して下さい。 スタイルシートからGoogleFontsを読み込む といっても使い方はとっても簡単で、現在使用している外部CSSに下記のように読み込むだけ。とっても簡単です。 @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 基本的には<head>内に書き込むことが多いのですが、<head>内をスッキリさせたり、ソースが簡単に見れないようにすることもできるので、スタイルシートに記述して使う方法も覚えておいてもいいのでは

WordPressで構築したサイトで、一部のページだけPC版で表示させたい…と思ったことはありませんか？ 以前、スマホでPC版の表示に切り替えることができるMulti Device Switcherというプラグインを紹介したのですが、最近このプラグインがアップデートされて「指定した特定ページだけをPC版で表示できる」ようになりました。 人によって使いどころが限られますが、今後使う可能性があったので備忘録も兼ねてエントリー。 Multi Device Switcherの簡単なご紹介 Multi Device Switcherはテーマを2つ（以上）作り、それぞれスマホ版、PC版のテーマとすることでレスポンシブデザインではできない、それぞれスマホ版・PC版で最適なレイアウトとしたり、スマホでみている時にPC版に切り替えるといったことが可能になるプラグインです。 さらに詳しく見たい方は過去記事も参

タイトルの通りですが、WordPressでサイトを作る際テスト環境から本番環境へ（URLが変わる環境へ）移行する際の注意点とその方法をまとめておきたいと思います。 様々なサイトでその方法が解説されていますが、実際自分はこれを理解するのに少し時間がかかりました。そもそも当時はWordPressの構造のことなどさっぱりわかっていなかったので、今思えばうまくいかなかったのは当然ですが。。。 この先ここではなるべくわかりやすく解説できればと思います。 1. 基本的理解 必要ない場合は「2. 実装編！スクリプトを使う。」まで読み飛ばして下さい。 2022年4月8日 記事内容を最新の情報に修正しました。 まずWordPressは何でできているのかを理解しよう まずWordPressはMySQLと呼ばれるデータベースに様々なデータが記録され、PHPというプログラムを使って、実際にサイトとして表示させてい

WordPressカスタマイズにおいて覚えておくと便利なif文（条件分岐タグ 以下：if文）。 もしも〇〇なら〜という構文ですが、WordPress内ではよく使われています。今回はその基本的な理解と、よく使われそうなif文をまとめておきたいと思います。 WordPressはプログラマでなくてもサイトの構築は簡単に出来てしまうので、カスタマイズをしている方の中にもPHPってなんなの？という方も多いとは思います。 そんな方が次のステップアップをする足がかりとして覚えてみてはいかがでしょうか。 if文の基本的理解 そもそもこのif文というのは何なのか？if文は〇〇の条件の時に××を行う。といったPHPの命令文です。 では実際にどのように記載するのかを見てみましょう。 <?php if(条件式) { ?> 条件式が正しい場合に実行する処理（PHPやHTMLなど） <?php } else { ?>

この記事は個人でWordPressのカスタマイズをしている方に読んで欲しい。 WordPressは管理画面の「外観 > テーマの編集」からテーマカスタマイズができるんですが、ここを使うのはマジで自殺行為なのでやめた方がいい。 なのですが、面倒くさいからという理由や、他に方法を知らないという理由で、管理画面から編集しているという方が結構いるので、この記事を参考にして、その危険性とエディタを使うメリットを知っていただけたらと思う。 管理画面からテーマをカスタマイズするリスク まずは管理画面から編集する場合のリスクを押さえておこう。 バックアップがとれない これが最も危険！管理画面から編集した場合当然のことながらバックアップがとれません。 ということは、もしもプログラミングに失敗してしまったら後戻りができないということ。もしも重大なミスを犯してしまい、画面が真っ白になってしまったら面倒です。もち

先日、無料でつくれるホームページ制作サービス10選の記事を書いたのですが、無料とはいっても実は無料ではないということを書きたいと思います。 先に先日の記事を読んでもらった方が話がわかりやすいかもしれません。 ▼無料でホームページがつくれるWEBサービス10選の記事はこちら サイトが出来上がるまでにどれくらいの時間がかかるのか？ 前回の記事を見てみると、サイトを作ること事態は無料でできる。 ただ、ここでひとつ考えてみて欲しい。 サイト公開までにいったいどれくらいの時間がかかるのか？ 例えば無料サービスを使ってサイト制作をしたとする。 あなたは全くの初心者です。でも調べながら作っていきました。1日平均3時間、コツコツと1ヶ月かけて作ったとする。 日曜は休んだとしても、25日くらいはかけたことになる。 3時間×25日で、75時間かかったことになる。 出来上がったページ内容は、 トップページ 会社