「wordpress」タグアーカイブ

Facebookの「いいね」ボタンと、タイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

Facebookのタイムラインを埋め込むと横幅が660px固定になる

 
スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。
 
 
これはCSSでうまく対応できるので、紹介しておこう。

 
 

<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>

 

これがFacebook公式からコピペした状態だ。

見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。
 
 

実はFacebookは自動でスマホ向けに最適化される

 
実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。
fb-responsive1
↓↓↓↓スマホ表示↓↓↓↓
fb-responsive2
 
 
 
 
これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。

結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。
 
 

「data-width: auto;」は無効化されるので、その対策

 
古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。
 
これは、下記をスタイルシートにコピペでうまく対応できる。
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}

 
つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。
 
もちろん90%でも80%でもいい。
 
 
これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。

@media screen and (max-width:600px){

}

 
 
メディアアンカーを使わないなら、
 

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}

こちらをCSSにコピペの方がいいかもしれない。

関連記事:
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。

この記事も読まれています

WordPressのPhotonが酷すぎる件。画像が表示されなくなる問題

WordPressで画像が表示(ロード)されなくなった

 
全ての写真ではなく一部が表示されなくなった場合、Jetpackのプラグインの「Photon」が原因かもしれない。
 
↓こちらはPhoton無し。↓
 
gazounarabeta
 
 
 
↓こちらPhotonを有効化した場合。↓
 
photon-kuso
 

原因と解決策はあるのか

表示されていない画像を検証してみると、ファイルサイズが大きい画像が表示されなくなっていることが分かった。

基本的にWordpressでは、画像は小さくサムネイル化されるので、普段はあまり問題にならないが、画像素材などを並べている場合は、どうしても高画質のファイルをアップする必用があるので、この場合、Photonは使えない。

なお、解決策はない。

高画質ファイルを表示する時にこそ高速化したいのに、なんとも使えない奴だ!

twentyfifteenで灰色の線をなくす方法 Wrodpress

Twenty Fifteen シンプルな記事型ブログに最適なテーマ

シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。

 

具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。

 

Twentyfifteenは意外とカスタマイズしにくかった

 

理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
 

twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法

CSSで以下のような記述の部分を探そう。

.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}

.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}

ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。

なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要!

@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}

↑こういう感じのやつ。

 

twentyfifteenで、灰色のborderを非表示に

 
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。

.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}

こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。

これを以下のように、

box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);

すればとりあえず線は消える。

これも、メディアアンカーに注意だ!

Stinger3で「関連記事」の表示を変える方法

Stinger3をちょっとだけカスタマイズしたい人へ

Stinger3はWordpressの中でも人気のテンプレートの一つ。
 
色々と思うところあってこのブログではStingerは使っていないが、友人にごく簡単なカスタマイズをお願いされる事は結構多い。
 
英語環境でStinger3を運用したいという人や、単純に言葉を変えたい人も多いので、今回は「関連記事」を変更する方法をメモしておく。
 
kanrenkiji

 

編集方法

 

WordPressの管理画面へ入り、左のメニューバーから

「外観」→「テーマの編集(画面上はエディター)」→「単一記事の投稿(single.php)」と選択し

<!–関連記事–>
<h4 class=”kanren”>関連記事</h4>

と書いてある場所を見つけよう。

これを

<!–関連記事–>
<h4 class=”kanren”>”好きな言葉”</h4>

stinger3-kanren

編集して  「ファイルを更新」  してカスタマイズ完了。

phpをいじるので、子テーマにしてもいいのだが、正直これぐらいの小さなカスタマイズなら気にしなくていい。

これでこんな感じに好きな言葉に買える事ができる。

suggest-stinger

 

これでStinger3を英語サイトとして運用することもできる。

関連記事:stinger3で関連記事の「記事を読む」の表示を変える方

WordPressにブログを移転したら、画像の縦横比がおかしくなった時の対処法

なぜみんなWordpressを持つのか、その意味は?

blog
最近では、ブログを書いてお小遣いを稼ごう的なことも簡単にできるようになってきたので、Wordpressで自分のブログを持とうという人も多いだろう。

「別にアメブロでも、Seesaaブログでも、ライブドアブログでも何でもええやんけ」

って思う人もいるかもしれないが、同じブログを書いて人に見てもらうなら、広告収入も、ブログ運営会社じゃなくて自分の懐に入る方がいいに決まってる。
money
だからこそ、みんながスマホでネットを見る今だからこそWordpressなのだ。

 

アメブロ辞める人へ

アメブロはクソなので記事のエクスポートができない。なのでFC2のブログ移転サービスを経由して、記事をエクスポート、その後Wordpressへ移転するという手順をとることになる。

FC2のブログ移転サービスは優秀なのだが、画像の幅や高さが全て指定されてしまう。

結果として
1

こんな感じになってしまう。

 

縦横比が崩れちゃったあなたへ

そもそもの原因は、Wordpressのテンプレートに、画像を幅100%にするスタイルシートの記述がある事に由来する。

例えば、有名テンプレートのStinger3も

.kizi img, .kizi wp-caption {
margin-bottom: 20px;
height: auto;
max-width: 100% !important;
}

スタイルシートにこんな感じの記述がある。

簡単に言うと

幅を100%にします。

という事だ。
これでFC2ブログからインポートした時に

<img src=”xxx.jpg” width=”xxxpx” height=”xxxpx”>

とソースを書きかえられちゃうので、縦横の比がおかしくなる。

ということで、解決策は、ソースの縦、横のサイズを無視して、自動で調節してやればいいだけなので、

.kizi img, .kizi wp-caption {
margin-bottom: 20px;
height: auto !important;
max-width: 100% !important;
}

height: auto; に !important; をつけるだけでOK。

よく分からない場合は、Stinger3のCSSの一番下にそのままコピペするだけでもOK。

分かりにくかったらコメントプリーズ!

お名前.com 共用サーバーSDって実際どうよ?

お名前.com 共有サーバーSDの限界

 

今やレンタルサーバーの最大手に上り詰めたGMOのお名前.com。

色々悪口も言われているが、総じてコストパフォーマンスは非常に高い。
特にWordPressを始めたい人初心者には強い味方だ。かくいうこのサイトもお名前.comの共有サーバーSDを使っている。

 

その他にも、Xサーバー、海外のJust Host、さくらのレンタルサーバ スタンダード、ロリポップ、を併用している。

併用している事でお分かりいただけるかと思うが、大前提として、全てある程度のコストパフォーマンスと安定性を兼ね備えている。

 

お名前.com 共有サーバーSD11

onamae-saever
まず共有サーバーSDだが、かなり激しく使用していた時期があった。具体的にはWordPressを5個(データベースも別で5個)、Zen Cart1個(データベース1個)程度。

共有サーバーSDではデータベースが30個まで追加可能なので、まだまだ大丈夫だと思っていたが、ある日突然限界が来た。

g-access
WordPressの1つの人気が徐々に高まり、それに合わせてサイト表示速度が遅くなっていった。
ユニークアクセスが1日10000件に近づいたあたりから、かなりの確率で500 Internal Server Errorが表示されるようになってしまった。

 

他のサイトのアクセスは多くても1日1000以下、なので、原因はハッキリしていた。

プラグインの整理、キャッシュの最適化、軽いサイトを作る方法などを試したが一向に改善せず。

 

サイトの品質が下がると、それにつれて徐々にアクセス数も低下していった。

 

そこで一念発起し、人気サイトのみXサーバーに移転させたのだ。その後、表示速度は元通りになり、アクセスも1日9000あたりで落ち着いたので一件落着。

結論は、新品状態のお名前.comよりもXサーバーの方が圧倒的に高速だという事だ。

 

体感速度・機能や値段等の比較はこちらを参照

 

Xサーバー

xserver1

お名前.com共有サーバーSDからの避難場所として選んだXサーバー。サーバー代金こそお名前.comより、ほんの少し高額だが、その価値はある。

安定性、表示速度はかなりのもの。

データーベース、perl、sendmailなども問題なく使える。

目下もっともおすすめするサーバーだ。

体感速度・機能や値段等の比較はこちらを参照

 

さくらのレンタルサーバ スタンダード

sakura-internet

初めて使用したレンタルサーバー。

大きな不満もないので今でも継続使用している。

サービスそのものは可もなく不可もなくといったところだが、データベースの個数制限、サブドメインの個数制限などは貧弱。

cron設定も個数制限が厳しい。

普通のホームページ用のWebサーバーとしては問題ないが、データベースなどを仕様するWordPress用としてはあまりおすすめはできない。

体感速度・機能や値段等の比較はこちらを参照

 

Just Host

just-host

大手アメリカ系ホスティングサービスで、アメリカ、イギリス、カナダなどで最大手の一角。

2000年ごろまでは、海外サーバーは国内系に比べて安かったが、現在では国内系もかなり頑張っており、料金はほぼ同等。(サーバー代月額1000円程度)。

データベース、メールアドレス、サブドメイン、cron等は全て無制限で使用できる太っ腹ぶり。でもそんなにいらないっすよね…

国内からのアクセスは遅め。

やはり海外サーバーは海外からのアクセスをメインで考える方がよさそうだ。

逆に、英語でのサイト運用などを考えている場合は、国内系サーバーだと海外で遅くなっているの可能性もある。

体感速度・機能や値段等の比較はこちらを参照

 

ロリポップ(ロリポプラン)

lolipop-server
一言で言うと、ここで挙げた中では最低のサーバー。プランによっては価格は一番安いかもしれない。

さくら同様、データベース数、cron、cgiなどの環境は消していいとは言えない。

悪名高き、データ全部消えちゃいました事件も記憶に新しいし、サイトの表示速度も残念ながらお名前.comよりも遅い。

上位プランを仕様するぐらいなら、Xサーバーなどを使うほうが断然おすすめ。

とにかく安くあげたい人向けか。
体感速度・機能や値段等の比較はこちらを参照

 

 

名称お名前.com 共有XサーバーさくらJust Hostロリポップ
体感速度××
DB個数30個30個20個無制限1個
cron×無制限5個無制限5個まで
月額料金1300円1000~4000円500円8.99ドル500円

 

 

結論

お名前.com共有→ドメインをいっぱい取りたい人におすすめ。コストパフォーマンス良。速度はそれほど速くはないが…

Xサーバー→なんといっても高速。高速サーバーが欲しい人におすすめ。2chもXサーバーを使ってるとかなんとか。

さくら→使い勝手は悪くない。可もなく不可もなく。DB数も最近拡充され意外と悪くないし、大手なので結構速い。

Just Host→DBやCronを大量に使いたい人おすすめ。あと海外向けのサービスを考えている人にも。

ロリポップ→とにかく安くあげたい人。データベースなんていらねー、月額を限りなく安く。という人向き。

 

WordPress初心者におすすめバックアップ用プラグイン(3)

WP-DBManager

wp-dbmanager

ロリポップであった、サーバーのクラッシュ。ただのメンテナンスなら時間が経てば復旧するが、データが全て消えてしまうこともないとは言えない。

それだけでなく、Wordpressが乗っ取られ、スパムメッセージだらけにされた事例もある。

全てを削除し、元通りに戻すにも、バックアップデータは必ず必要になる。大切なブログは必ずバックアップを取っておこう。

そんな時に便利なプラグインが「WP-DBManager」

プラグインをインストールして有効化したら、忘れずにセッティングをしておこう。

FTPを使い、バックアップフォルダの作成、.htaccessの移動をする必要があるが、それはインストール後に表示される画面上の注意文通りにやればOK。

その後設定

dbmanager-set

管理画面のサイドバーから「Database」を選ぶ。

dbmanager-setting1

「Path To mysqldump」→自動で入力されているなら触らなくてOK。自動で入力されていない場合は「Auto Detect」をクリック。

ただし、お名前.com(共有サーバーSD)の場合は自動入力が効かない。後述参照。

「Path To mysql」→同じく、自動入力されているならそのままでOK。

「Path To Backup」お名前.comの場合でも、ここは絶対に触らないこと!

お名前.comの場合、
「no mysqldump in /usr/local/bin /usr/bin /bin」
「no mysql in /usr/local/bin /usr/bin /bin」

となっている場合がある。この場合は、「Auto Detect」のボタンは効かない。

「Path To mysqldump」には「/usr/local/mysql/bin/mysqldump」。

「Path To mysql」には「/usr/local/mysql/bin/mysql」と記入し、一番下の「Save Changes」をクリック。

 

dbmanager-setting2

この辺の設定は特に触らなくてもOK。

 

関連記事:

WordPressの必須プラグイン、有名プラグインの推奨設定など(1)

WordPressインストールしたら、とりあえずこのプラグインだけは入れておけ(2)

WordPressインストールしたら、とりあえずこのプラグインだけは入れておけ(2)

Akismet(アキスメット)

akismet-logo
Wordpressの推奨するスパム対策プラグイン。コメントやメールフォームのスパム対策などを全て無料で最適に保ってくれる優れもの。

非常に有名なプラグインなので、Jetpack同様、デフォルトでインストールされている場合もある。
akis-set

プラグインをインストールし、有効化すると簡単な設定が可能になる。

 

API キー

Akismetを使用する為にはAPIキーの入力が必要になる。

APIキーの入力にはメールアドレスなどの入力が必要だが、使用自体は「 Personal Free Account」を選択することで無料で使用可能。

メルマガ配信なども一切なく、煩わしいこともないので、普通にメールアドレスを登録してOK。

 

注意点

Akismetの設定ではないが、注意点が1点。
1日のアクセスが1000を越えてくると、スパムコメントも大量にやってくるようになる。

Akismetの設定で「最も悪質な種類の広範囲なスパムを自動的に削除し、目に触れないようにする。」にチェックを入れておけば、スパムが目に入ることは殆どない。

でも目に入らずとも、データベースの中には蓄積されていき、サイトの表示が遅くなったり不安定になったりする場合がある。

厳密には、データベース内に蓄積されたものがサイトを遅くするわけではない。

あまりに大量のスパムを蓄積すると、スパムコメントを1週間経過後に削除する機能があるのだが、その削除機能が正常に働かなくなったり、負担がかかったりして結果的に遅くなるのだ。

恐るべしスパム。

 

当サイトもその現象に悩まされた時期があり、その時に活躍したプラグインが
↓の WP-Optimize だ。スパムが増えてきたら検討してほしい。

 

WP-Optimize

wpoptimize-logo

必ず入れるべきプラグインではないが、中堅人気サイトを快適に保つために必要になるプラグイン。
Wordpressのデータベースを綺麗にしてくれる。

おすすめセッティングはコチラ。
wp-optimizer-setting

wp-optimizer-set

これで毎週自動でデータベースを綺麗にしてくれる。

 

注意点

上の添付画像のセッティングにしていると、リビジョンや下書きも消去されてしまう。

下書きなどを削除したくない場合は「Remove auto revisions」「 Remove auto drafts」のチェックは外しておけばOK。

 

関連記事:

WordPressの必須プラグイン、有名プラグインの推奨設定など(1)

WordPress初心者におすすめバックアップ用プラグイン(3)

WordPressのSEOに必須プラグイン、有名プラグインの推奨設定など(1)

Word Press、最近、サーバーに簡単インストール機能がついていたり、phpやデータベースの知識がなくても自分で簡単に導入できるようになってた。

カスタマイズ性が高く、Google Adsense で気軽にブログを書いて副収入を得られるなどの理由もあってか、年々人気が高まっている。

Word Pressには「プラグイン」と呼ばれる追加機能があるので、ド定番の必ず入れるべきプラグインと、その他有名プラグインを紹介、検証しておこう。

 

Jetpaco by WordPress.com

jetpack-plug-in

言わずと知れた超有名プラグイン。WordPress公式プラグインということもあり、お名前.comで簡単インストールすると、デフォルトでついていたりする。

そのジェットパックの中でも絶対に必要と言えるのが、以下のもの。

 

CSS編集(Jetpack内に付属)

customcss

CSSカスタマイズが簡単にできて、しかもテンプレートのアップデートがあってもカスタマイズが上書きされ消える心配がない。スタイルシートだけならば、初心者には少し難しい子テーマを作ってのカスタマイズの必要がなく簡単にデザインを変更できる。

ちなみにこの 「あすたまいず」 のカスタマイズも、高度な手段を一切使わず、CSS編集のみで行っている。便利。

 

コンタクトフォーム(Jetpack内に付属)

contact-form
メールでの問い合わせを受け付けたいけれど、メールアドレスを晒すのは嫌だ、という人には必ず必要になるプラグイン。

色々なコンタクトフォームのプラグインがあるが、ジェットパック内のものは公式だけあって、安定性が抜群。設定も簡単で、スパム対策も優秀。

 

これ以外のプラグインは必要に応じて有効化しておこう。上記の2個だけは必須!

 

All In One SEO Pack

all-in-one-seo-Pack-plug-in
SEO系のプラグインとして有名なAll In One SEO Pack。優秀なのだが以外な落とし穴もあるので注意。
General Settingの中の、Title Settingで、ブログのタイトルを自由に編集できたりする機能が便利だが、危険な部分もある。

ここでは、よく分からないまま触らない方がいい部分をピックアップしておく。

 

サイトマップ(All In One SEO Packの設定)

sitemap
「Enable Sitemap Indexes」ここのチェックは絶対に入れないように。注意文にもあるが、サイト内でページ数(URL数)が50000を超えるような大規模サイトの場合にのみチェックを入れるように。

 

タイトルセッティング(All In One SEO Packの設定)

title-
タイトルセッティングは、General Settingの中で設定可能だが、例えば世界遺産のページだと「世界遺産」と入れて検索を強くしたいと思うだろう。

ただコレを乱発すると、スパム認定されてしまう。Wordpressのタイトルを編集する場合は、各ページでどのように表示されるのかを確認しながら、慎重に行おう。

 

 

WordPress Popular Posts

WordPress-Popular-Posts
ジェットパックの中にも似たような機能があるのだが、こちらの物の方が優秀。

popular-posts

人気記事を色々な条件をつけて表示可能。

表示形式もCSSで簡単にカスタマイズ可能なので便利。

 

関連記事:

WordPressインストールしたら、とりあえずこのプラグインだけは入れておけ(2)

WordPress初心者におすすめバックアップ用プラグイン(3)