Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

neru — Tue, 14 Apr 2015 08:52:26 +0000

Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。

公式サイトはこちらです。入会する場合はJoin to downloadです。
Elegant Themess Premium WordPress Themes

Elegant Themesの販売モデル

Elegant Themesは今まで年額モデルのみでしたが、１回払い(Lifetime Access)がモデルができたのが嬉しいところ。といっても、2013年ごろには１回払いに対応してくれたため、かなり前の話です。１回払い(Lifetime Access)モデルができた瞬間に、デザインなども格好良く気になっていたため、購入しました。

料金は、昔と比較すると、ちょっと価格はあがってしまいましたが、サポートが大変だからでしょうか。しかし、Elegant Themes内にある、さまざまなテンプレートを使うことができます。最近は、テーマ数は増やすよりも、テーマの更新の方が多いかもしれません。海外のコンテンツもサービスが充実すると、値上げ傾向にあります。

Elegant Themess Premium WordPress Themes

Elegant Themesの特徴や機能

エレガントのデザインが格好いい(かわいいものもあり)です。Webデザイナーはデザインの参考になるかもしれません。PSDファイルもすべてダウンロード可(１番安いライセンスはPSDダウンロード不可です)。

テーマにより多少機能が違いますが、次のような機能があります。
日本語のWordpressのテーマにはない機能ももりたくさんです。

たとえば、Diviの場合、

レスポンシブWebデザイン(最近のテーマは対応されています)
スライダー機能
メガメニュー
背景動画
Page Builderつき。レイアウトを自由自在に組み立てられるもの
ヘッダーのナビゲーションはいくつかのパターンを選択可
縦のナビゲーションもあり
横スクロール型スライダー
レビューつきショップ
アイコン
カスタムカラー
ワンカラム
セールのタイマー
グラフ(円グラフ、数字、棒グラフ)
豊富なプラグイン(Developerライセンス以上)

などなど

もちろん、テーマにより多少できることは違います。いっぱい機能があるため、最初は基本的な機能を使いこなし徐々に作りこんでいけばいいのかも。

CSSのカスタマイズは、カスタムCSSが用意されているため、そちらに記述すれば、テーマを更新した際にも消えません。

サポート

サポートはかなりよいです。複数の人がサポーターがいるため、わりと早めに回答があります。早いときは数分で回答があります。もちろん、英語ですけどね。
シンプルな回答を返してくれます。

フォーラムの方も使いやすく、ミススペルがあった場合、再編集できます。テーマごとに文字列検索に対応。

英語の勉強にもなるかもしれませんし、中学生レベルの英語で対応可能かと思います。

日本語も含み多言語対応。そして英語という壁は小さな問題

たとえば、１番人気がありそうなDiviのログ(購入者フォーラムのログ)をみると、

The theme has been translated into the following languages
Japanese

日本語と書かれていますしね。

そして、Wordpressのカスタマイズは日本語でも英語でも、基本的に変わらないですからね。コードは英語なので。それほど難易度は高くありません。

個人的な評価としては、海外のテーマの方がおすすめです。日本語のテンプレートより、コスパもよく格好いいです。

Elegant Themess Premium WordPress Themes

Elegant Themesのカスタマイズ

当サイトでcssなどのカスタマイズ方法もまとめてあるため、よかったら参考にしてください。

elegant theme(エレガントテーマ) Extraのレビューとおすすめカスタマイズ

elegant theme(エレガントテーマ) Extraのレビューとついでにカスタマイズ方法をまとめておきます。全体のレビューはこちらから。管理画面からのカスタマイズ方法はみればだいたいわかるような気がします。ただ、cssの具体的なカスタ

elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

elegant theme(エレガントテーマ) diviのカスタマイズをまとめておきます。エレガントテーマのdiviの完成例エレガントテーマのdiviの完成例です。レディース・メンズファッションやメンズ脱毛・コスメなどのサイトですね。クオリ

Elegant Themesのテーマの自動更新対応

自動更新に対応しています。

ダッシュボード > 更新

から更新できます。外観 > テーマからはなぜか更新できないようです。

ただし、APIキーをいれてないと更新が失敗します。

エレガントテーマの会員サイトの

ログイン > API KEYS

にあるAPIキーを、WordPressの管理画面の

(テーマ名) > テーマオプション > 更新情報

にいれて保存しましょう。そうすると更新できます。

WordPress移転は動作確認urlよりhosts設定(xserverなどのipアドレス)

neru — Sat, 28 May 2016 16:50:52 +0000

WordPressの移転はプラグインを使えばあっという間なのですが、ネームサーバーを切り替える前に、hostsを設定して絶対全確認した方がおすすめです。なぜならこの方法は訪問者に引越しの様子を見られないから。

動作確認urlとhostsの設定の違いについても簡潔にまとめていきます。

WordPressの引っ越しはhosts設定なしにはありえない!

ネームサーバーを切り替えは、サイトを全確認した後

技術者はhostsの設定でぐぐっているんだろうけど、よくネームサーバーを切り替えた後に、プラグインをインストールしている記事をみかけます。。。

しかし、先にネームサーバーを切り替えてしまうと、訪問者が引っ越し完了まで引っ越し最中の状態を見てしまうことになります。

規模が大きいサイトは1時間でもダメージもでかいです。

ネームサーバーを切り替える前に、サイトをすべて動作確認をとったのちにネームサーバーを切り替えるのが本来あるべき流れというか、基本な人には基本中の基礎だという気がします。特別に設定は難しいものではありません。私はWeb技術者ではありませんが、この方法しか使いませんね。この手順以外の方法はせっかく訪問してくれた人に悪くて、他の悪影響も怖くて使えませんね。

エックスサーバー、スターサーバーなどにある「動作確認url」

ネームサーバーを切り替える前に確認できる方法として「動作確認url」もありますね。

「動作確認url」は各レンタルサーバーの管理画面のトップ画面に項目があるため、すぐわかるでしょう。使い方はアドレスを追加するだけです。

この方法でもネームサーバーを切り替える前に確認できるのですが、Wordpressの引っ越しは動作確認urlよりhosts設定をする方がおすすめです。

「動作確認url」と「hosts」の違い

「動作確認url」と「hosts」の違いは、1番大きな点は作業ができるか否かでしょう。「動作確認url」はあくまで見栄えの確認です。個別記事もアドレスを打てば確認できます。

ただし、Wordpressの管理画面にログインできません。 CMSの動作保証はされていません。スターサーバーやエックスサーバーなどの公式サイトを見ると次のような文面を見つけることができますね。

※設定URLにてリンクを生成する動的サイトや、設定ドメインへのリダイレクトを行うCMS等では、こちらの方法にて確認いただけない場合があります。

ユーザーサポート – サポートマニュアル /高機能な大容量レンタルサーバーのファイアバード

WordPressを移行する際、「hosts」の設定をすれば、Wordpressの管理画面に入ってプラグインにより全復元できます。しっかりとサイトを確認したのち、ネームサーバーを切り替えられるため、移行期間中にユーザーのアクセスを減らしたくない人は必ず設定すべき段取りです。一時的に作業中でアクセスできない時間がなく、スムーズにサーバー移転ができます。

「hosts」ファイルとは!素晴らしいところ!

「hosts」ファイルとは、ドメインの本来のアクセス先を無視し、「hosts」ファイルで指定したサーバーへと強制的にアクセスさせるためのファイル。

本来であればドメインに設定されているネームサーバーにしたがってサーバーへとアクセスされますが、hostsファイル内に当該ドメインに関する設定が記述されたPC端末からアクセスすると hostsファイルに記載されているIPアドレスが優先されます。

たとえば、移転元がさくらインターネットで、移転先がスターサーバーだった場合、さくらインターネットへとアクセスされるところを、強制的にスターサーバーへとアクセスします。自分のPCからのみのため、他の人は今までどおりネームサーバーを切り替えていなければ、さくらインターネットに繋がっています。

hostsファイルによる動作確認は仮想サーバーなどのようなものではなくスターサーバー自体にアクセスがされます。そのため、hostsファイルを用いてアクセスした際に行われた作業はスターサーバー上に反映されます。

エックスサーバーには「ネームサーバー切り替え前に動作を確認したい場合」というマニュアルがありますね。さすがです。1番下の方に書いてあります。

お使いのパソコンの「hosts」ファイルを編集することで、ネームサーバーの切り替え前に動作確認ができるようになります。
https://www.xserver.ne.jp/manual/man_install_transfer_wordpress.php

hosts設定を使ったWordPressの引っ越し手順!

WordPressの引っ越しプラグインの使い方

引っ越しプラグインを使うところは一緒です。

WordPressの引っ越しはプラグインを使うと楽です。

WordPressの引っ越し/サイト移行プラグイン3選比較、All-in-One WP Migrationがおすすめ!

数サイトレンタルサーバーを移転したため、Wordpressの引っ越しプラグインをまとめていきます。サイト移行時はhosts設定を基本としてしましょう!個人的には必須です。duplicatorのメリット・デメリット●　メリットメリットをあまり

All-in-One WP Migrationの使い方はこちらの記事です。

Duplicatorのトラブルエラー!All-in-One WP Migrationに乗り換え

さくらインターネットからネットオウル系のファイアバード(現スターサーバー)にDuplicatorを利用して引っ越ししようとしましたが、小一時間弱で見切りをつけてAll-in-One WP Migrationを利用したという流れの記事です。

ただネームサーバーを切り替える前にhosts設定をして、自分のみの環境で全動作確認をとります。すべて安心・安全の状態になったのち、ネームサーバーを切り替えてはじめて一般公開するわけです。

1台のPCでお手軽に両方のレンタルサーバーの状況を確認する方法

最初に作業のイメージを伝えます。

hosts設定した際、両方のレンタルサーバーの状況を確認する場合、2台PCがあればOKです。タブレットでもOKです。ただ個人的にはParallels Desktopを利用しているため、1台のPCでできます。状況を確認するのにとても便利です。1台のPCだけでやるならhostの設定を追加したり削ったりでしょうか。

たとえばParallels Desktopなどの仮想環境を使っている場合、 Windowsだけhosts情報を書き換えます。すると自分だけの作業環境ができあがります。新しいサーバーにWordPressを簡単インストールします。hello worldの記事だけしかない管理画面にログインできます。しかし、MacからWordPressの管理画面に入ると、通常どおり運営している状況になっています。

Mac側でWordpressの引っ越しプラグインAll-in-One WP Migrationインストールしてファイルをエクスポート。Windows側もAll-in-One WP MigrationインストールしてファイルやDBを復元します。

思う存分、テーマ、プラグイン、リンク切れなどがないかを動作を確認できます。また急いでなければ、この機会にWordpressが真っ白になりそうなリスクが高い作業をやってしまうのも手です。PHPのカスタマイズなどです。個人的にも引っ越しする際に普段は手をつけにくいカスタマイズを思いっきりやれてよかったです。引っ越しも悪いことばかりではないと思ったり。最後にネームサーバーを切り替えればOKです。

エックスサーバー(xserver)とスターサーバーのipアドレス

設定は意外と簡単です。まずhosts設定にはレンタルサーバーのipアドレスの情報が必要です。

エックスサーバーは次のとおりです。

管理画面 > サーバー情報 > ipアドレス

スターサーバー(旧ファイアバードやミニバード)は次のとおり。ってか一緒ですね。

管理画面 > サーバー情報 > ipアドレス

このアドレスにドメイン名を追加したものをテキストエディタを書きます。

hostsファイルに記述すること

hostsファイルの記述するのは2行だけです。

00.00.00.00 ebookbrain.net
00.00.00.00 www.ebookbrain.net

00のところに先ほど、調べたipアドレス。ドメイン名は自サイトのドメインにしてください。hostsファイルにはいろいろ書かれているため、それらは絶対消さずに1番したの行に一時的に追加します。

このサイトではサブドメインは使っていないため試したことがありませんが、サブドメインの場合はサブドメインを追加する必要があるはず。

00.00.00.00 test.ebookbrain.com

hostファイルは作業終了後、必ず元に戻しておきましょう。

windows7やmacなどのhostsファイルがある場所

あとはそのhostsファイルがどこにあるのかってことですよね。Windows７の場合は次の通りです。

C:\WINDOWS\system32\drivers\etc\hosts

まずはC:\WINDOWS\system32\drivers\etcのフォルダにアクセスしましょう。

そこにhosts情報を書き込めばいいだけです。

Macの場合
Finder > 移動 > フォルダへ移動 > /etc/hosts と入力

hostsファイルをインストールする情報もありましたがもともとある場合もあるようです。

OSにより多少仕様が違います。Windows XP、Windows 7 & VISTA、Windows、macの設定方法が画像つきでこちらのサイトで解説されていました。ありがたいサイトですね。

ERROR: The request could not be satisfied

hostファイルは作業終了後、必ず元に戻しておきましょう。

hostsファイルの上書き禁止

Windowsの場合、hostsファイルを開くとき、強制的に開きますか?という警告がでて、追加しても上書きできない場合があります。その場合、権限を書き換えます。

右クリック > プロパティ > セキュリティ > 編集 > Users > フルコントロール

チェックを入れて適応します。大事なファイルのため、心配ならローカルバックアップを取っておきましょう。

Macの場合も権限がないと言われるため、デスクトップなどにコピーした上で書き換えを行って戻すようなイメージです。

hosts書き換え後

hostsを書き換えると新しいサーバーにアクセスできるはずです。

簡単インストール前はサーバーによりますが何も表示されません。インストール後はhello worldのサイトが表示されます。

逆に移行後は移行前のサーバーにhostsすることもあります。引っ越し後、最後の記事が反映されていない。データがおかしい場合などの検証に使えます。

hostsのトラブル回避

hostsの切り替えが即時反映されない

hostsの設定は使用しているブラウザなどにより、即時切り替わない場合があるようです。
別ブラウザの場合、即時切り替わる場合があります。

キャッシュのクリアは今まで効果なしです。ただ時間を置くと反映されている場合がほとんどです。30分ぐらいですかね。急ぎの場合はブラウザの再起動や別ブラウザの方がうまくいくかもしれません。

ほかに、httpsにアクセスしたとき、移行前のサイトにアクセスできるような症状がありました。ブラウザを変えたら表示されなかったです。hostsを設定すると新サーバーで何も準備していなければ表示されないが正しいはず。

chromeで作業を行なっています。safariも正しい状態でした。firefoxはなぜか接続拒否されました。接続拒否は詳しい調査はしていません。

詳しく調べていないので何ともですが、念の為httpのアドレスになっているか確認して作業をするとよいかもです。問題にはなりませんでした。

この接続ではプライバシーが保護されません

ブラウザ上に「この接続ではプライバシーが保護されません」を表示される場合があります。

あまり使用しないかもですが、thisisunsafeとキーボードで打つと回避できます。隠しコマンド的ですけど。

chromeでhttpからhttpsに勝手にリダイレクトされてwp-login.phpにログインできない

FireFoxはログインできるのに…。

この問題はキャッシュだけな気がします。クリアするとなおります。

縦3点メニューアイコン > その他のツール > 閲覧履歴データを消去する > [キャッシュされた画像とファイル]をチェックしてデータ消去を実行

sslの設定はネームサーバーを切り替えた後でしかできない!?

sslの設定はネームサーバーを切り替えた後でしかできません。少なくともエックスサーバーではそうなっていました。

sslの設定もhostを切り替える前にしたかったのですが、しょうがないですがあきらめましょう。sslで保護された通信にならない場合はこちらの記事を参照してください。

https化(ssl化)で保護された通信にならない、表示されない原因となるプラグインなど

ssl化する際にhttpsが表示されない原因をまとめておきます。簡単にいうと保護された通信にならないのはhttpのリンクが残っている、この1点につきると思います。実体験に基づき、問題になった箇所を網羅しました。https化(ssl化)で保護

作業のイメージの参考になりましたら幸いです。

simplicity2のデザインなどWordPressカスタマイズ一覧まとめ

neru — Thu, 22 Oct 2015 19:17:28 +0000

phpやcssなどいろいろなsimplicityのカスタマイズの小ネタをまとめていく予定です。みたいところから見てください。

WordPressのテーマおすすめ

日本のWordPressのテーマ

日本のWordPressのテーマはこちらの記事をみてください。

【比較】SWELL/stork19/JIN:R/sango【テーマの違い、どっち!】 | ithands

WordpressのテーマはSwell、ストーク、JIN:R、sango、Cocoonなどいろいろとありますが、Twitterの感想と自分の利用経験についてまとめていきます。【比較】SWELL/stork19/JIN:R/sango/Co

海外のWordPressのテーマ

かなりの量の海外のテーマも使ってきましたが、simplicityは非常によくできたテンプレートだと思います。日本のsimplicity2に乗り換えましたが、海外のテーマの方が進んでいる部分もあります。いくつかサイトを運営しているため、今後は海外のテーマとわいはらさんが作ったsimplicityの後続cocoonのいずれかを利用していこうと思います。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。公式サイトはこちらです。入会する場合はJoin to downloadです。Elegant Themess Premium Wor

WordPressの海外テーマ/テンプレート7選おすすめで安いのは?

simplicityの子テーマ

simplicityは子テーマを作者自身が用意してくれているため、子テーマを利用した方が後々楽です。
ダウンロードできます。というか他のテーマも子テーマを使った方がいいですけどね。
子テーマの作り方や理解を深めるために、こちらの記事なんかを参考にしてください。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。style.

simplicityのh2手前にウィジェット表示

h2手前にウィジェット表示するカスタマイズはこちらにまとめました。simplicityの広告機能は利用せずこちらを利用していますね。

【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】

WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtips

simplicityでスマホのリンクがはみ出すため対応

リンクがはみ出すと、本文が端から端まで短くなってしまう場合があります。
リンクを直書きした場合も起こるようです。

/* simplicityでスマホのアドレスがはみ出すため対応 */
body {
    word-wrap: break-word;
}

simplicityでスクロール追従領域の座標を変更

トップメニューの領域を広げた場合、追従領域の座標を変更したいことがあります。 javascript.jsのファイルを開き、こちらの値を増やせば下に表示されます。

var side_top_margin = 60;

#sidebar-scrollあたりからソースを追えばすぐ見つかるでしょう。

simplicityで追従SNSボタンの座標を変更

javascript.jsのファイルを開いて変更します。
追従前と追従後の座標は同じにしておけば、座標が飛んだように見えないでしょう。

      if (now > main_top) {
        //sharebar.fadeIn('fast');
        sharebar.css({
          position: 'fixed',
          top: '70px' // この値を変更すると追従後の座標が変わる
        });
      } else{
        sharebar.css({
          position: 'absolute',
            top: main_top+70 // この値を変更すると追従前(デフォルト)の座標が変わる
        });
      };

simplicity 2の全部の記事でfacebookのいいねがゼロ0に

facebookの仕様変更が原因で取得方法が変わったようです。ファイルはjavascript.js

1行コメントアウトして追加すれば終了です。

//facebookの仕様変更 jQuery( selector ).text( res.shares || 0 );
jQuery( selector ).text( res.share.share_count || 0 );

facebookページのいいねとTwitterのフォロワー数表示

simplicityの項目をみてください。

facebookページのいいねのWordpressプラグインまとめ

Facebookの個別ページのいいね数ではなく、Facebookページのトータルのいいねを増やすプラグインやテーマについてまとめてみます。これらのプラグインは、いいねを増やす方法としても有効なようです。プラグイン「VA Social Buz

simplicity 2でGoogleの検索結果に最終更新日を伝える

Googleの検索結果に最終更新日を伝えることは、かなり重要ですよね。ユーザーによっては期間で絞りこんでくるので。通常、公開日と更新日を表示して、更新日を伝えるようにしています。

外観 > カスタマイズ > SEO > 検索エンジンに伝える日付 > 更新日

ただし、うまく伝わらないときは、一時的にスイッチしてもいいかもしれません。

外観 > カスタマイズ > SEO > 検索エンジンに伝える日付 > 更新日（更新したら更新日だけを表示）β版

Googleの検索結果が更新日に切り替わったら元に戻してもいいかもですし。simplicityはデフォルトで用意しているため、コードを書かなくてよく楽ですね。

simplicity 2のアイキャッチの表示

デフォルトではアイキャッチは表示されないようですが、コードをいじらなくても表示する機能を持っています。

レイアウト（投稿・固定ページ） > 本文先頭にアイキャッチ画像を表示
にチェックをいれます。

画像 > アイキャッチを自動設定
は本文中の画像を自動取得なので間違えないようにします。個人的にはこちらは使用しません。

simplicity 2の初期のサムネイズサイズ

functions.phpに以下のように書かれていました。

//サムネイルサイズ
add_image_size('thumb100', 100, 100, true);
add_image_size('thumb150', 150, 150, true);
add_image_size('thumb320', 320, 180, true);

アイキャッチのプラグインを利用する際、把握する必要があったため調べてみました。

【乗り換え】Flash Uploader → Media from FTP → Bulk Media Register《Wordpressのプラグインの使い方》

FTPからアップロードした画像をメディアライブラリに登録するにあたり、結構昔にFlash Uploaderを使っていました。そのあと、Media from FTP → Bulk Media Registerと乗り換えています。任意のフォルダ

simplicity 2専用のコメントウィジェットの日付を消去

Simplicityには専用のコメントウィジェットがあります。その日付を消去してみました。

/* Simplicity専用のコメントウィジェットの日付を消去 */
.recent-comment-date {
	display:none;
}
.recent-comment-title {
	clear: none;
}

ちなみに、現在は他のプラグインを採用しています。ただのデザインの好みの問題です。

WordPressで「最近のコメント」ウィジェットをカスタマイズするプラグイン比較、おすすめはどれ？

WordPressで「最近のコメント」ウィジェットをカスタマイズするプラグインをまとめていきます。わりとたくさんでていますね。角丸のアバターにできる、Recent Comments Widget Plus「最近のコメント」ウィジェットを拡張

simplicity 2でSimple Author Boxを追加

simplicityはプロフィールを追加する機能がないため、Simple Author Boxを使って追加します。

Simple Author Boxについてはこちら。

「Simple Author Box」の使い方・CSSのカスタマイズ | Wordpressのプラグイン

Simple Author Boxの使い方・CSSのカスタマイズの覚書を残しておきます。プロフィールを表示するプラグインで重視するポイントとSimple Author Boxを採用した理由プロフィールを表示するプラグインは実にたくさんでてい

simplicity 2の場合、single-page.phpに追加します。

このサイトでは追加していません。

simplicity 2でPCのメニューを固定にする

このサイトは実装していません。

海外のテーマではメニューが固定になっているデザインも少なくありません。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

simplicityはすごくよくできたテーマなのですが、デメリットはデザインにあるかもしれません。そこでタイトルとグローバルメニュを入れ替えてメニューを固定にします。よくある海外のテーマと同じにします。

まず、上書きしないようにheader.phpの子テーマを作ります。作り方はこちらをみてください。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

header.phpでナビゲーションのコードを探します。

上の方に移動します。

cssのposition: fixed;でメニュを固定にします。影などはお好みでつけてください。

/* 固定メニュー */
#navi {
	position: fixed;
	width: 100%;
	z-index: 999;

	padding-top: 33px;
	-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

タイトルの位置がメニューとかぶるため、修正します。

#site-title {
    margin: 70px 0 0 0;
}

このままだと端から端までメニューが広がりません。

simplicityの「グローバルナビを横幅いっぱいにする」をチェックします。simplicityからsimplicity2になったとき、「グローバルナビを横幅いっぱいにする」の場所が移動しています。

simplicity:色 > グローバルナビを横幅いっぱいにする
simplicity2:ヘッダー > グローバルナビを横幅いっぱいにする

色 > グローバルナビ色で色も調整します。

simplicity 2でスマホのメニューを固定にする

simplicityにはsliderが組み込まれているため、それで固定する方法がありますが、sliderの仕様が左右からでるメニューになっていました。個人的にそれは気に入らずプラグインで固定にしました。

Wordpressでスマホのヘッダーメニューを固定するプラグインまとめ

Wordpressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、もっとお手軽にプラグインで実装できないのかを調べたところ意

元からあるスマホのメニュは消します。

simplicity 2でスマホのメニュを消す

mobile.cssに追加します。

#mobile-menu {
    display: none;
}

ただし、この方法はタブレットは消えません。

simplicity 2のトップページにスライダーを追加する

このサイトとは実装していません。

海外のテーマではトップページがスライダーになっているものが少なくありません。layerslider(有料)などのプラグインを利用し、is_front_pageで切りわけます。

simplicity 2でurlをブログカード化しない

ドメインに関する技術的な解説をする場合、アドレスをブログカード化したくない場合があります。

URL

半角スペースや文字をひっつけてもうまくいきます。

参考：https://ebookbrain.net/

simplicity 2でブログカードの色変え

hoverも色を変えるとわかりやすいでしょう。

/* simplicityのブログカード色変え */
.internal-blog-card{
	background-color: #f2f2f2;
}
.internal-blog-card:hover{
	background-color: #D9D0BE;
}
.blog-card-title a{
	color: #1e50a2;
	text-decoration: none;
}

.blog-card-title a:hover {
	color: #cc0033;
	text-decoration: none;
}

simplicity2でブログカードの日付を消す

管理画面からできます。

外観 > カスタマイズ > ブログカード > 日付表示

ブログカードは内部リンクと外部リンクがわかれています。

simplicity 2で本文下(記事下)に追記

2つの方法がありますね。simplicity2のthe_contentはsingle.phpではなく、entry-body.phpに書いてあるんですね。

本文の最後にコードを追記したいのですが、どのファイルのどこにいれればいいのでしょうか？

Simplicityの特徴 › フォーラム › Simplicityについての質問 › 本文の最後にコードを追記したいのですが、どのファイルのどこにいれればいいのでしょうか？このト

今回、うちはthe_contentのフックで対応しました。モバイルとの切り分けを行いました。

404 NOT FOUND | ebookbrain

simplicity 2で背景を指定する、背景は重たいの?

デフォルトのカスタマイズのみでできます。すごい!

ちなみに、背景はそれほど重たくありません。念のためスピードテストをしましたが、影響はありませんでした。ただし、12kbぐらいまで減色し、シームレスのパターンで繋ぎました。

simplicity2で背景を指定する方法です。

外観 > カスタマイズ > 背景

背景を指定すると、サイドバーとメニューが背景に埋もれる場合が多いです。

外観 > カスタマイズ > レイアウト設定（全体・リスト） > サイドバーの背景を白色に

メニューの背景色も指定します。

外観 > カスタマイズ > 色 > グローバルナビ色

simplicity 2でmarkerのカスタマイズ

マーカーを全部塗らず、色も変えたいと思いました。

simplicity2には実は黄色のアンダーラインマーカーが用意されています。

黄色のアンダーラインマーカー

しかし、デフォルトのマーカー1種類しか使っていなかったため、そちらをカスタマイズしました。置き換えるのも面倒だったので。子テーマに記述して上書きすればいいだけです。

/* デフォルトマーカー変更　 */
.marker {
	background: linear-gradient(transparent 50%, #f0e68c 50%);
	font-weight: bold;
}

linear-gradientの使い方はこちらの記事をみてください。

safari(ios)で効かない!?linear-gradientの使い方(transparentの透明度、斜め、%指定、蛍光ペンのマーカー)

css3のlinear-gradientを使うことにより、蛍光ペンのマーカーのような効果を作成できます。linear-gradientの使い方linear-gradientはもともとグラデーションの効果を作成する命令です。このlinear-

何かあれば追記していきます。

広告なし!?Googleカスタム検索の設置方法デザインなど

neru — Tue, 08 Mar 2016 07:21:28 +0000

Googleカスタム検索やアドセンスのカスタマイズ方法の覚書程度にまとめておきます。

Googleカスタム検索の設置方法デザインなど

現在、PCのサイドバーに検索フォームを設置しています。

WordPressの検索フォームもありますが、サーバー負荷と考えるとGoogleにお任せした方がいいかもしません。逆にWordPressの検索がいいのは非公開の記事も検索できることです。管理の都合でたまに役立ちますが、基本カスタム検索の方が優れているような気がします。

仕様は以下のとおり。

アドセンスもだす。
新しいページを開かずサイト内に検索結果をだす
アイキャッチも表示する
色をあわせる
ロゴなども表示できます。

Googleカスタム検索の検索結果をだすようにカスタマイズ

個人的には以前に作ったことがあったため、以下で変更を加えました。

まず、Wordpressに検索結果の固定記事を作る必要があります。固定記事にそれっぽいアイキャッチ画像も設定してください。

アドセンスにログイン > 検索向け広告 > 作った広告を選ぶ(作っていなかったら作る必要があります) > 検索結果 > 自社のウェブサイト > 検索結果を表示する URL:に固定記事のアドレスを入れる

色の変更は以下のとおりです

アドセンスにログイン > 検索向け広告 > 作った広告を選ぶ(作っていなかったら作る必要があります) > スタイル > スタイルを設定します > [ カスタマイズ ]のタブ

ロゴや色の設定を決められます。

最後にコードを取得しします。2つコードが表示されるため、サイドバーのウィジェットに検索ボックスのコードを入れ、固定記事に検索結果のコードをいれるとできあがります。

アドセンス経由じゃないと広告なし?

最初にカスタム検索を作成し、後からアドセンスにも関連づける方法もあります。

関連付けない場合も、広告は表示されます。

まず、こちらのアドレスにアクセス。

Programmable Search Engine by Google

Help people find what they need on your website. Add a customizable search box to your web pages and show fast, relevant

次に紐付けたいGoogleのアカウントでログインします。

追加 > Urlを入力

個々のページ: www.example.com/page.html
サイト全体: www.mysite.com/*
サイトの一部: www.example.com/docs/* または www.example.com/docs/
ドメイン全体: *.example.com

言語：日本語
検索エンジンの名前：わかりやすい名前

作成 > コードを取得

[検索エンジンの編集]から再度いじれます。

サービスのヘルプページがサブドメインの場合、ヘルプ用のカスタム検索とわけてもいいかもしれません。

ちょっとだけ見た結果、インデックスされるまで10日ぐらいかかりますかね？サイトによるんでしょうけど。

Googleカスタム検索でポップアップ回避

初期設定の[オーバーレイ]はいわゆるポップアップ表示のようです。[オーバーレイ]を[2ページ]に変更します。

検索エンジンの編集 > デザイン > 2ページ > 保存

Googleカスタム検索は終了?

そんなキーワードがでたので一瞬びっくりしたのですが、そんなことはありません。Google Site Searchという企業向け有料サービスがなくなりましたが、カスタム検索は普通に設置できるようです。有料サービスはGoogleのロゴなしで表示できることとサポートがつくぐらいだったけど、今はカスタム検索でもロゴも表示できますし別に設定するの簡単だし意味がなくなっただけでしょう。

Googleカスタムの代替えは広告なしのlunr.js

全文検索を導入する際に、Googleカスタムは簡単ですが、インデックス時間の問題もあります。

Javascriptなら、lunr.jsあたりが候補にあがってきますかね。有料ならelasticsearch、algoliaあたりでしょうか。

【全文検索は?】firebase(firestore)の検索機能/elasticsearchやalgoliaもちょい調査した

firebaseの検索に関する覚書です。elasticsearchやalgoliaについてもちょっと調べてみました。firestoreの検索(vuexの場合)vuexの場合。クエリー検索する場合は検索条件をしてあげましょう。const us

アドセンスでレスポンシブ広告ユニット

Adsenseでレスポンシブ広告ユニットを導入しました。わりと簡単ですし、一度、理解すると5分で導入できるため利用した方がいいなと思いました。

data-ad-format=”auto”が追加されているレスポンシブ広告ユニット

レスポンシブ広告ユニットは、通常のアドセンスのコードと比較すると、 data-ad-format=”auto”が追加されていますね。

Googleさんがもともと用意しているdata-ad-formatに使える値は、次のものです。

auto : 自動
rectangle : 長方形
horizontal : 横長
vertical : 縦長

しかし、今回はこちらの値を使うのではなく、より柔軟に対応できるstyleの指定より指定したサイズを表示します。

レスポンシブ広告ユニットのレクタングル大とレクタングル中の切り替え手順

PCやタブレットではレクタングル大(336px*280px)を表示してスマホではレクタングル中(300px*250px)を表示します。

0、まずはアドセンスの管理画面でレスポンシブ広告ユニットを作りましょう。こん時点ではサイズを気にする必要はありません。このコードをそのまま貼り付けても使えますが、値がautoになっているため横長のバナーが表示されてしまい思ったとおりのサイズになりません。

そのコードをメモ帳かなんかに貼り付けたら次にすすみましょう。

１、styleを追加。下記のpost_ad1はアドセンス広告を作成した際の任意の名前に書き換えてください。 min-widthは少しゆとりをもって、min-width:350pxでサイズが切り替わるようにしました。

下記のようにコードをアドセンスのコードの上に書きましょう。

おすすめ | ebookbrain

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

Elegant Themesの販売モデル

Elegant Themesの特徴や機能

サポート

日本語も含み多言語対応。そして英語という壁は小さな問題

Elegant Themesのカスタマイズ

Elegant Themesのテーマの自動更新対応

WordPress移転は動作確認urlよりhosts設定(xserverなどのipアドレス)

WordPressの引っ越しはhosts設定なしにはありえない!

ネームサーバーを切り替えは、サイトを全確認した後

エックスサーバー、スターサーバーなどにある「動作確認url」

「動作確認url」と「hosts」の違い

「hosts」ファイルとは!素晴らしいところ!

hosts設定を使ったWordPressの引っ越し手順!

WordPressの引っ越しプラグインの使い方

1台のPCでお手軽に両方のレンタルサーバーの状況を確認する方法

エックスサーバー(xserver)とスターサーバーのipアドレス

hostsファイルに記述すること

windows7やmacなどのhostsファイルがある場所

hostsファイルの上書き禁止

hosts書き換え後

hostsのトラブル回避

hostsの切り替えが即時反映されない

この接続ではプライバシーが保護されません

chromeでhttpからhttpsに勝手にリダイレクトされてwp-login.phpにログインできない

sslの設定はネームサーバーを切り替えた後でしかできない!?

simplicity2のデザインなどWordPressカスタマイズ一覧まとめ

WordPressのテーマおすすめ

日本のWordPressのテーマ

海外のWordPressのテーマ

simplicityの子テーマ

simplicityのh2手前にウィジェット表示

simplicityでスマホのリンクがはみ出すため対応

simplicityでスクロール追従領域の座標を変更

simplicityで追従SNSボタンの座標を変更

simplicity 2の全部の記事でfacebookのいいねがゼロ0に

facebookページのいいねとTwitterのフォロワー数表示

simplicity 2でGoogleの検索結果に最終更新日を伝える

simplicity 2のアイキャッチの表示

simplicity 2の初期のサムネイズサイズ

simplicity 2専用のコメントウィジェットの日付を消去

simplicity 2でSimple Author Boxを追加

simplicity 2でPCのメニューを固定にする

simplicity 2でスマホのメニューを固定にする

simplicity 2でスマホのメニュを消す

simplicity 2のトップページにスライダーを追加する

simplicity 2でurlをブログカード化しない

simplicity 2でブログカードの色変え

simplicity2でブログカードの日付を消す

simplicity 2で本文下(記事下)に追記

simplicity 2で背景を指定する、背景は重たいの?

simplicity 2でmarkerのカスタマイズ

広告なし!?Googleカスタム検索の設置方法デザインなど

Googleカスタム検索の設置方法デザインなど

Googleカスタム検索の検索結果をだすようにカスタマイズ

アドセンス経由じゃないと広告なし?

Googleカスタム検索でポップアップ回避

Googleカスタム検索は終了?

Googleカスタムの代替えは広告なしのlunr.js

アドセンスでレスポンシブ広告ユニット

data-ad-format=”auto”が追加されているレスポンシブ広告ユニット

レスポンシブ広告ユニットのレクタングル大とレクタングル中の切り替え手順