【WordPress】ブログのデザインをChromeデベロッパーツールで修正する方法

こんにちは。ちゃぼP(@chabo0429)です。

WordPressのデザインをカスタマイズするときは、各phpファイルの編集とともに、スタイルシート(style.css)の編集が欠かせません。

それに、日々部長から届くオーダーに対しても、迅速に対応する必要があります(笑)

そこで、普段ちゃぼPがこの「風の羅針盤」や「部長ナビのページ」をどのようにしてカスタマイズしているか、その方法を今日はご紹介してみようと思います!

Chromeデベロッパーツールを駆使して、視覚的イメージを確認しながら修正

スタイルシートというのは、WEBサイトの文章や画像など、様々な要素に対してデザインを指定するための「定義ファイル」のようなもの。

とは言っても、ただの「テキストファイル」で、それだけ見るとただの呪文のようにしか見えません。

私はもうある程度、そこに書かれているものが何を意味しているのか解るようになってきましたが、それでもそれだけで完成形をイメージするのは至難の技。

 

そこで私を助けてくれるのが、「Chromeデベロッパーツール」というものです。

Chromeデベロッパーツールは、Chromeブラウザに標準で搭載されている機能で、WEBサイトを表示しながら、各要素の修正を加えるとリアルタイムで変更した要素が画面上で確認できる、非常に優れたツールです。

私もコレなしでは何もできないくらい、愛用しているツールですが、その呼び出し方法はいたって簡単。

画面上で右クリックして、「検証」を選べばすぐに起動することができます。

Chrome_Developer01

こんな感じで簡単に呼出せます。(ちなみに右上のツールバーから、「その他ツール」-「デベロッパーツール」でも呼出せます)

すると、画面右側にソースコードが表示されてきます。

 

Chrome_Developer02

この右側の上部分が、ページのソースです。基本的に画面の上から下に行くにつれて、順番に各要素がソースとして表示されます。

そして、その下にあるペインがスタイルシートに定義された部分です。

 

Chrome_Developer03

例えば、上の例でいきますと、ソースに「div class=”main”」と表示された部分がありますね。これがブログの本文を表示する部分。

いわゆる「メインカラム」と呼ばれる部分です。この名前に関しては使用するテーマによっても異なりますが、基本的に「main」という名前が付いていることが多いようです。

ちなみに部長の使っている「simplicity」でも同じです。

 

この行を選択すると、左画面の該当する部分がブルーの透過画面になって、「ここが該当している部分ですよ」と教えてくれます。

さて、今回はページトップに三つ並んでいる、「カテゴリ新着記事」をちょっといじってみましょう。

該当する要素を、ソースの部分から探してゆく

Chrome_Developer04

ソースの「div class=”main”」と表示された部分の左側にある「‣」の部分をクリックすると、そこに含まれる要素がその直下に表示されます。イメージとしては、大きな「main」カラムに含まれる、様々な要素がだんだんと絞り込まれれてくる感じです。

ページトップの「カテゴリ新着記事」は、cat_article1,cat_article2,cat_article3と並んでいます。cat_article2を選んでみると、やはり先ほどと同じように、左側の該当部分が青く反転していますね。

試しに、ここに表示されているタイトル文字をちょっと大きくしてみましょう。

 

Chrome_Developer05

記事タイトル部分の要素を、同じ要領で探し出します。ここでは、「cat_text_area」が該当するタイトル文字列を表示する部分です。

そして、右下の部分、ここがこのタイトル文字列をデザインしているスタイルシートの部分なので、ここをちょっと変更してみます。

 

Chrome_Developer06

ここの文字の大きさは、ご覧のように「font-size:15px;」で指定されています。ですから文字の大きさは15pxです。

これを少し大きくしてみましょう。

 

Chrome_Developer07

この「15px」のところをダブルクリックして、「19px」に変更してみました。

すると、すぐに左のタイトル文字がデカくなっているのが分かります。こうやって実際の変更後の画面を確認しながら、修正が出来るのが、このデベロッパーツールの素晴らしいところです。

あとは、気に入ったらここの値をスタイルシートに転記して更新するだけです。

モバイル表示も見ながら確認できるぞ!

さて、ブログをやっていれば、考慮しなければならないのはモバイルでの表示。

その重要度は日に日に増加しており、この「風の羅針盤」でも約半数はモバイルやタブレット端末からのアクセスですので、その表示にも気を遣わなければなりません。

このChromeデベロッパーツールでは、そんなモバイルでの表示も確認しながら、修正を行うことができます。

 

Chrome_Developer08

デベロッパーツールを起動したら、ソース上のスマホアイコンをクリックして、左ペイン中ほどの「端末の種類」をプルダウンで選択、そしてブラウザの再読み込みボタンをクリックします。

 

Chrome_Developer09

するとちゃんとモバイルの表示で同じように修正が出来ます。

ちなみにiPhoneやGalaxyなどのメジャーなスマホのほかに、iPadという項目もあるので、タブレットでの表示も確認しながら修正が可能です。

さいごに

いかがでしたか?

かなりざっくりとした説明になってしまいましたが、こんな感じで日々ちゃぼPはカスタマイズしています。

タグの名前やスタイルシートの定義など、ある程度の知識はやっぱり必要なので、なかなか簡単ではありませんが、そこは習うより慣れろで、調べながら試行錯誤の毎日です。

でも分からないことが分かるようになるのはとっても楽しい!

ブログのデザインは、訪れてきた人がリピーターになってくれるかの大きな分かれ道になりますので、ブログを運営されている方は是非チャレンジしてみてくださいね!

SNS Count Cache 時間通りにフォロワー数を取得しないことがある

こんにちは。ちゃぼP(@chabo0429)です。

先日、WordPress用プラグイン、「SNS Count Cache」のバージョンアップについての記事を書きましたが、

【WordPress】SNS Count Cacheが0.9.0へバージョンアップ!新たにPush7などへ対応

新しく実装されたTwitterやPush7のフォロワー数取得の関数を使って、フォローボタンを作りました。

【WordPress】記事下にTwitter,Feedly,Push7のフォローボタンを設置する方法

さて設定に指定間隔ごとにデータ収集を行うかと思いきや、ここで問題が発生しました。

フォロー数を設定時間ごとに収集しないことがある場合は、気長に待とう

ちゃぼPのところでは、フォロワー数を取得する間隔を秒で設定しても、いっこうに取得されない現象が確認されました。

いろいろと設定を確認したのですが、どこもおかしなところはなさそうだったので、このプラグインの作者まるぼんさん(@marubon_jp)に問い合わせてみたところ、同じような問い合わせを他からも受けているということで、しばらく時間がかかりそうとのことでした。

作者のまるぼんさんの報告を待ちたいと思います。

 

同様の現象が発生している方は、今はおとなしく待ってみましょう!

FeedlyをiPhoneから購読登録できないときは~モバイル用の正しいURLはコレだ!

こんにちは。今日もWordPressカスタマイズ中のちゃぼP(@chabo0429)です。

Feedlyが超絶便利なので、毎日愛用しているわけなのですが、おかげさまで私のサイトでもFeedlyのフォロワーさんが順調に増えてきております。

皆さんありがとうございます!

 

そんな便利なFeedly、前からなんでかな〜と思っていたことがありました。

それは、iPhoneのSafariでサイトのFeedlyリンクをクリックすると、「Get Feedly」という文字が表示されて、アプリのインストールを促されること。

おいおい、毎日使ってるんだぞ!もう入っとるがな!

これを解決する方法がやっとわかりましたので、ご紹介します。

Feedlyのリンクを張っている部分を以下のように修正

記事下のフォローボックスの中の、Feedlyのリンクを以下のように修正します。

ファイル名は「single.php」です。

 

修正前

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.omoide-soko.jp%2Fapps%2Fwordpress%2Ffeed'  target='blank'>

 

修正後

<a href='http://www.omoide-soko.jp/apps/wordpress/feed'>

 

上は風の羅針盤のFeedのURLですので、ご自身のサイトのFeedのURLに書き換えてください。

注意すべきなのは、モバイルからアクセスした際だけこのリンクが使われるようになることです。

必要に応じて、

<?php if (is_mobile()) :?>

(中略)

<li class="feedly">
<a href='http://www.omoide-soko.jp/apps/wordpress/feed'>
<span class="icon-feedly-square" aria-hidden="true"></span> <?php echo scc_get_follow_feedly(); ?>
<span class="sns-comment">最新記事を<br>購読</span>
</a>
</li>

(中略)

<?php else: ?>

(中略)

<li class="feedly">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.omoide-soko.jp%2Fapps%2Fwordpress%2Ffeed'  target='blank'>
<span class="icon-feedly-square" aria-hidden="true"></span> <?php echo scc_get_follow_feedly(); ?>
<span class="sns-comment">Feedlyで最新記事を購読</span>
</a>
</li>

(中略)


<?php endif; ?>

こんな感じで、モバイルの条件分岐を設定するようにしてください。

たったこれだけでできるようになるなんて、もっと早く調べておけばよかったよ!

実際にiPhoneで追加してみよう

まず、記事下のフォローボックスを表示させます。

Feedly_iOS01

 

iPhoneでこのリンクをタップすると、

 

Feedly_iOS02

Feedlyで開くか聞かれるので、「開く」をタップします。

 

Feedly_iOS03

右上に「+」ボタンが表示されますのでタップして、

 

Feedly_iOS04

該当するカテゴリをタップするだけです。

 

Feedly_iOS05

これで追加されました!!

実は、モバイルでうまくFeedlyに追加できないよ!という声ももらっていましたので、これでかなり楽に追加できるようになったと思います!

絶賛フォロー募集中ですので今後ともよろしくお願いしますネ!!

【WordPress】記事下にTwitter,Feedly,Push7のフォローボタンを設置する方法

こんにちは。ちゃぼP(@chabo0429)です。

今回は先日お知らせしました、記事下のフォローボックスの導入方法をご紹介します!

前回ご紹介した記事はこちら

【WordPress】記事下のSNSフォローボックスを見やすくしてみました

やりたいことは、美しいTwitter,Feedly,Push7のフォローボックスを作ること。そして、それぞれのフォロワー数が表示されるようにしたい!

ただ、これにはちょっとした仕掛けが必要です。

今回はちょっとややこしいので、出来るだけわかりやすく書きたいと思いますけど、分からないところは問い合わせして欲しいぞ!

それではまず下準備から行ってみよう!

①アイコンフォントを準備

よくWEB上で見かけるTwitterやFeedlyのマーク。

このオフィシャルアイコンは、ひと目でどのSNSなのかが判別できるので、とてもインパクトがあります。

なんとかこれをボタンに表示させたいですが、これを画像にしてしまうと、拡大すると画像が荒くなったりしてちょっと見栄えが悪くなる。

そこで今回はアイコンフォントというものを使うことにしました。

上のサイトは、Font Awesomeというフリーのアイコンフォントを公開している有名なサイトですが、今回、こちらのものを使います。

トップページにある「Download」のボタンから、アイコンフォント一式をダウンロードしておきます。

続いて、各SNSアイコンの表示する方法に入っていきます。

Twitter

Twitterのアイコンフォントは、既にサイト上に作られているので、これを使うことにします。

このページの一番下にある、リンクを使います。

<i class="fa fa-twitter" aria-hidden="true"></i>

これです。これを後で使います。

Push7

Push7のアイコンフォントはまだ存在しませんが、Push7のアイコンはカミナリマークに似ていますよね?

そこで、探してみるといいのがありました。

だいたい同じ感じのアイコンでしょ?言われなきゃ気付かない(笑)

ちなみにこちらのリンクはこちら。これも後で使います。

<i class="fa fa-bolt" aria-hidden="true"></i>

Feedly

そして、Feedly。

これがないのよ。アイコンフォント。ムムッ!(by川平慈英)

そしたら、なんとWordPressのテーマ「Simplicity」の作者わいひらさんが作られていたのでした。クゥーーーッ!!(by川平慈英)

自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)

詳しくはこちらをご覧ください。

最後の「ダウンロード」ボタンから、アイコンフォント一式をダウンロードしておきます。

②ダウンロードしたファイルをアップロード

さて、これで素材は揃いました。

いよいよサイトに設定していきます。

まず、Font Awesomeとわいひらさんの寝ログからダウンロードしたアイコンフォント一式を、お使いのサーバーにFTPなどでアップロードします。

SNS_Follow_box01

この二つのフォルダに、それぞれスタイルシートが入っていますので、このスタイルシートの絶対パスを確認しておきます。

私のサイトの場合は、以下が必要なスタイルシートです。

Twitter,Push7

http://www.omoide-soko.jp/apps/wordpress/wp-content/themes/wp_material_child/font-awesome-4.6.3/css/font-awesome.min.css

Feedly

http://www.omoide-soko.jp/apps/wordpress/wp-content/themes/wp_material_child/font-feedly/style.css

③header.phpにスタイルシートの場所を追記

次に、アップロードしたスタイルシートの場所を、タグに変換してWordPressのheader.phpに追記します。

<link href="http://www.omoide-soko.jp/apps/wordpress/wp-content/themes/wp_material_child/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="http://www.omoide-soko.jp/apps/wordpress/wp-content/themes/wp_material_child/font-feedly/style.css" rel="stylesheet">

このスタイルシートのパスは、自身のサイトのパスに変更してください。

④style.cssへ、フォローボックスのデザインを追記

これで素材とそれを呼び出すスタイルシートは揃いました。

次にWordPress自体のスタイルシートでボックスのデザインを追記していきます。

.sns-comment {
  font-size: 11px;
  text-align: center;
  display: block;
}
ul.snsfollow-area li.twitter {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #00aced;
  padding: 0;
  margin: 0;
  border: 8px #fff solid;
}
ul.snsfollow-area li.twitter a {
  padding: 5px;
  display: block;
  text-decoration: none;
  color: #fff;
}

ul.snsfollow-area li.feedly {
  color:#fff;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #6cc655;
  padding: 8px;
  border: 8px #fff solid;
}
ul.snsfollow-area li.feedly a {
  padding: 5px;
  display: block;
  text-decoration: none;
  color: #fff;
}
ul.snsfollow-area li.push7 {
  color:#fff;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #eeac00;
  padding: 8px;
  border: 8px #fff solid;
}
ul.snsfollow-area li.push7 a {
  padding: 5px;
  display: block;
  text-decoration: none;
  color: #fff;
}

これを追記します。今まで使っていたフォローボックスがある場合は、その部分のスタイルをコメントアウトしておきましょう。

ul.snsfollow-area {
  display:table;
  table-layout: fixed;
  width:100%;
}
/*
ul.snsfollow-area li {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #e6e5e1;
  padding: 8px;
  border: 8px #fff solid;
}
ul.snsfollow-area li span {
  font-size: 16px;
  text-align: center;
  display: block;
}
ul.push7-area {
  display:table;
  table-layout: fixed;
  width:100%;
}
ul.push7-area li {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #e6e5e1;
  padding: 8px;
  border: 8px #fff solid;
}
ul.push7-area li span {
  font-size: 11px;
  text-align: center;
}
*/

これで完了です。

⑤最後に、single.phpにコードを追記

さあ、あと一息。

最後に記事ページになるsingle.phpにコードを追記します。

まずPC用の部分の「この記事が気に入ったらいいね!しよう」の下にある、これまで使っていたフォローボックスを、

<!--
<ul class="snsfollow-area">
(中略)
</ul>
-->

このようにコメントアウトしておいて、

<ul class="snsfollow-area">
<li class="twitter">
<a href="https://twitter.com/(Twitterアカウント)" target='blank'>
<span class="fa fa-twitter" aria-hidden="true"></span> <?php echo scc_get_follow_twitter(); ?>
<span class="sns-comment">TwitterでちゃぼPをフォロー!</span>
</a>
</li>
<li class="feedly">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2F(FeedlyのURL)'  target='blank'>
<span class="icon-feedly-square" aria-hidden="true"></span> <?php echo scc_get_follow_feedly(); ?>
<span class="sns-comment">Feedlyで最新記事を購読</span>
</a>
</li>
<li class="push7">
<a href="https://(自身のpush7のURL)" target='blank'>
<span class="fa fa-bolt" aria-hidden="true"></span> <?php echo scc_get_follow_push7(); ?>
<span class="sns-comment">Push7で更新をプッシュ受信</span>
</a>
</li>
</ul>

これを挿入します。4行目や16行目にFont Awesomeで控えておいたclassをspanに変更して記載しています。

同様にモバイル表示の部分も、

<ul class="snsfollow-area">
<li class="twitter">
<a href="https://twitter.com/(Twitterアカウント)" target='blank'>
<span class="fa fa-twitter" aria-hidden="true"></span> <?php echo scc_get_follow_twitter(); ?>
<span class="sns-comment">ちゃぼPを<br>フォロー!</span>
</a>
</li>
<li class="feedly">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2F(FeedlyのURL)'  target='blank'>
<span class="icon-feedly-square" aria-hidden="true"></span> <?php echo scc_get_follow_feedly(); ?>
<span class="sns-comment">最新記事を<br>購読</span>
</a>
</li>
<li class="push7">
<a href="https://(自身のpush7のURL)" target='blank'>
<span class="fa fa-bolt" aria-hidden="true"></span> <?php echo scc_get_follow_push7(); ?>
<span class="sns-comment">プッシュ<br>受信</span>
</a>
</li>
</ul>

このように挿入して完成です。

完成図

変更前のフォローボックスの表示は、

PC表示

SNS_Follow_box01

モバイル表示

SNS_Follow_box03

こんな感じでした。

改造後はというと、

PC表示

SNS_Follow_box02

モバイル表示

SNS_Follow_box04

だいぶすっきりしました!

これはイイ感じだぜ!!やったぜ!!

参考 フォロー数を呼び出す関数

ちなみにこのボックスに表示しているフォロワー数の値は、プラグイン「SNS Count Cache」で収集されたフォロワー数を呼び出していますので、必ずプラグインをインストールしたうえで実装してください。

各SNSのフォロワー数を呼び出す関数はこちらです。

Twitter
<?php echo scc_get_follow_twitter(); ?>

Feedly
<?php echo scc_get_follow_feedly(); ?>

Push7
<?php echo scc_get_follow_push7(); ?>

 

SNS Count Cacheの設定はこちら

【WordPress】SNS Count Cacheが0.9.0へバージョンアップ!新たにPush7などへ対応

もし使ってやろうという方がいらっしゃいましたら、是非ひとことコメントやDMなどいただけると非常に嬉しいですので、よろしくお願いしますネ!

【WordPress】記事下のSNSフォローボックスを見やすくしてみました

どうもこんにちは。ちゃぼP(@chabo0429)です。

先日、WordPressのプラグイン「SNS Count Cache」がバージョンアップしたという記事を書いたのですが、

【WordPress】SNS Count Cacheが0.9.0へバージョンアップ!新たにPush7などへ対応

このバージョンアップによって、TwitterやPush7のフォロワー数をキャッシュしてカウントを取れる仕組みになりました。

そこで、この風の羅針盤の記事ページの下の部分のフォローボックスの見栄えをちょっと良くしてみることにしました。

公式のフォローボタンをやめて、アイコンフォントでフォローボタンを作ってみた

ブログをやっていらっしゃらない方は、あまり興味をそそられないと思いますが・・(^^;)

一応ね。もうちょっとオリジナリティーを出してみようということで、トライしてみたところ、いい感じで仕上げられたと思っています。

①PC表示のボックス

まず、今までのボックス。こんな感じでした。

SNS_Follow_box01

これもスッキリ綺麗でしたが、Twitterはフォロワーの数が出ていないし、ボタンの大きさもバラバラ。

まあ、用は事足りるんですが、イマイチデザインが私の美的センスを刺激してしまうものでございました。

そこで、これをこのようにしてみました。

SNS_Follow_box02

はい、ドーン(笑)

それぞれのオフィシャルカラーのボックスに全て白抜きの文字で、アイコンの右側にフォロー数を表示。

かなり美しくないっすか?(笑)

うん、いい感じだ!(ちゃぼP、悦に入るその1)

②モバイル表示のボックス

続いて、モバイル表示。

SNS_Follow_box03

このように、モバイルの場合は表示領域が狭いので、TwitterとFeedlyで一列、その下にPush7がもう一列あります。

これを新しいデザインで作ってみると・・・

SNS_Follow_box04

はいどうよ、これ!!

すげーイイじゃん!イカすじゃん!(死語)

横長の公式フォローボタンがなくなったので、横幅に余裕が出来、2列に分ける必要がなくなりました。

スッキリしていて綺麗でしょ??

うん、こりゃーイイ!我ながらよくできた。やったぜー!(ちゃぼP、悦に入るその2)

さいごに

というか、アイコンフォントとか、よくわかんなかったので、調べながらの作業でしたので、時間がかかりましたが、これでめでたく綺麗なデザインにできました。

部長に明日教えてあげよう(笑)

欲しがるかな?

部長の常連さん、どう思います?(笑)

要らないって言うかなー。

もし需要があるようなら、導入方法を記事にしたいと思います。もしよろしければコメントくださいね〜

【WordPress】SNS Count Cacheが0.9.0へバージョンアップ!新たにPush7などへ対応

このサイトでも、一生懸命にSNSからシェア数の収集を行ってくれているプラグイン、「SNS Count Cache」ですが、久々のアップデートとなったようです。

[試] WordPressプラグイン SNS Count Cache (Ver. 0.9.0)リリース | Twitterシェア数、Push7フォロワー数対応等

早速インストールしてみたところ、幾つか項目が増えていました。

Twitterの新しいAPIに対応!

TwitterのシェアカウントAPIが停止されてから、風の羅針盤でも代替APIへ切り替えてシェア数をカウントしていました。

【WordPress】Twitterカウント復活!代替APIがあったよ!

この度SNS Count Cacheでもこの代替APIに正式に対応したようです。

SNS_Count_Cache02

ちなみに、提供元APIが不安定な時の対応も考えられており、計三つのAPIがデフォルトで登録されています。

それぞれのサービス先での事前の登録が必要になると思いますが、うまくシェア数がカウントできない場合は、切り替えてみるといいかもしれません。

Push7正式対応!

風の羅針盤でも導入しているPush7。これはリアルタイムで更新を通知してくれるサービスです。

リアルタイム更新通知「Push7」の導入方法を解説します

今回のアップデートで、SNS Count CacheでもこのPush7に正式対応

Push7を有効化して、Push7のダッシュボードにある「AppNO」を登録すると、シェア数がカウントできます。

SNS_Count_Cache03

まず最初に、有効化するサービスにチェック。

 

SNS_Count_Cache04

Push7を既に使っているなら、Push7のダッシュボードから、AppNOをコピーするだけでOK。

とても簡単です。

SNS Count Cacheのダッシュボードで、フォロワー数が一覧表示できるように

これまで、Feedlyのフォロワー数は、管理画面に出てきませんでしたが、今回からWordPress管理画面に表示されるようになりました。

SNS_Count_Cache01

こんな感じで、一目でフォロワー数がWordPressの管理画面で確認できてとても便利ですよ!

この数値が簡単に取得できることで、サイト上のいろいろな部分に簡単にシェア数やフォロー数を表示することが可能になります。これはサイトデザインの上でもかなーり便利!

この機会に、早めにアップデートしてしまいましょう!

【WordPress】Twitter埋め込みをセンタリング(中央寄せ)する方法

こんにちは。ちゃぼP(@chabo0429)です。

先日、部長から、「Twitterのツイート埋め込みしたら、急にセンタリングできなくなった」ってメッセで言われました。

あれ?今までセンタリングされていたっけ??

過去記事を見ても、全て左に寄って表示されます。

Twitterカードのclass名でも変わったかな?

Twitter_center01

この「風の羅針盤」で使っているテーマは、「マテリアル」ですが、確かにツイートを本文中に埋め込むと、左寄せされます。

部長のテーマは「simplicity」ですので、同じかどうか今となっては知る術がありませんが、「style.css」を見る限り、このTwitterカードのデザインを指定する部分はありませんでした。

なので、簡単に埋め込みをする際に自動的にセンタリングされるように、スタイルシートを修正しました。

「style.css」へ追記!

Twitterカードをブログ本文に埋め込むには、引用したいツイートの右下部分をクリックして、「サイトにツイートを埋め込む」を選択します。

Twitter_center02

この「・・・」の部分を選択すると出てきます。

Twitter_center03

出てきたコード選択画面の、コードを選んでブログに貼り付けるだけでいいのですが、今回はこのツイート全体を中央寄せするため、このclass名を使うことにしました。

Twitterの引用部分のclass名は、「twitter-tweet」です。

これを使って、以下のように「style.css」へ追記します。

.twitter-tweet{
	margin: 0 auto;
}

はい、たったコレだけです。

試しに、埋め込みを表示させてみましょう。

 

ちゃんとセンタリングできました!

これで今後のツイートは全てセンタリングで埋め込みできるでしょう。

部長も喜んでくれました〜(笑)

Twitterカードをセンタリングしたい方はやってみてくださいね!

簡単ですよ〜

【WordPress】マテリアルとSimplicityでカテゴリ一覧ページを作成する方法

こんにちは。ちゃぼP(@chabo0429)です。

私のサイトではマテリアルというテーマを使っていますが、このテーマは、カテゴリごとにボックスが並ぶスタイルになっているので、各カテゴリの最新記事がトップページで確認できるようになっています。

category_page07

 

WordPressでカテゴリ一覧を参照するには、以下のように、サイドバーにウィジェットを追加すれば簡単ですね。

category_page05

ただ、これだと画面をスクロールしないと出てこないので、記事やカテゴリが多くなってくると大変です。

そこで、グローバルメニューから、カテゴリ一覧を呼び出せるように、一つ固定ページを作成して、そこにカテゴリを表示させることにしました。

ただ、カテゴリ一覧だけを表示させても下がスカスカになってしまうので、私の場合は、カテゴリ選択ボタンの下にトップページと同じ、カテゴリ一覧のページを表示させるようにしてみました。

 

ちなみに、これも例によって部長のオーダーが発端でございます(笑)

なんか、私のサイトは部長オーダーで作ったデザインを逆輸入して実装するというスタイルが定着しつつあります。

フツー逆だよね(^◇^;)

まず、カテゴリページ(phpファイルを作成)

まず最初に、ローカル上でカテゴリ一覧表示用のページを作成します。

名前は何でもいいですが、「cat_all.php」としておきます。

<?php
/*
 Template Name: Category All
 */
?>

<?php get_header() ?>
<div class="sibling">
	<div class="siblingTitle">ジャンル・カテゴリの一覧です</div>
	<ul style="list-style: none;">
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/pc">PC</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/pc/windows">Windows</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/pc/macbook">MacBook</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/iphone">iPhone</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/wordpress">WordPress</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/camera">カメラ</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/netgear_readynas">ReadyNAS</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/gallery">フォトギャラリー</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/gourmet">グルメ</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/timepiece">TimePiece</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/devices">Devices</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/fashions">Fashions</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/sale">セール情報</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/rensai">連載</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/rensai/anthology">アンソロジィ</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/rensai/tanpen">エッセイ</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/rensai/column">コラム</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/rensai/hiraku">ひらくPCバッグminiが教えてくれた新世界</a></li>
		<li><a href="http://www.omoide-soko.jp/apps/wordpress/category/rensai/aibou">俺の相棒</a></li>
	</ul>
</div>

<?php get_template_part("cat_lists") ?>
<?php get_sidebar() ?>
<?php get_footer() ?>

上記は、「マテリアル」での使用例ですが、部長の使う「simplicity」の場合は、最下部の3行を、

<?php get_template_part("list") ?>
<?php get_footer() ?>

とすればOKです。

これを、FTPでサーバにアップロードします。

category_page01

子テーマフォルダ内にアップしてください。

管理画面で「固定ページ」を作成

次にWordPress管理画面で固定ページを作ります。

「固定ページ」から「新規追加」を選択します。

category_page06

 

ここで「ページタイトル」の入力、「パーマリンク」の編集を行います。

category_page03

パーマリンクは、カテゴリ一覧ページのURLになります。既存のものを重複しないよう注意してください。

次に、「テンプレート」を先ほどアップロードしたファイルに設定します。

category_page02

今回は「Category All」がそのファイルです。

 

category_page04

本文は特に入力する必要はありません。そのまま「公開」をクリックします。

グローバルメニューで有効化

これでページができました。グローバルメニューに追加してみましょう。

category_page08

「メニュー」を開き、「カテゴリ一覧」にチェックを入れ、「メニューに追加」したら、右側メニュー構造部分で「カテゴリ一覧」をドラッグして表示させたいところに移動させます。

最後に「メニューを保存」をクリックします。

あとがき。

これで完成ですが、あとはstyle.cssでデザインを揃えればOKです。

完成形はこんな感じです。

category_page09

ちなみに、これはgori.meさんのデザインを参考にしています。

http://gori.me/

そのため、style.cssを載せるのは控えますが、今回この各カテゴリのボタンを表示しているのは、

<div class="sibling">

という要素になりますので、いろいろとデザインを考えてみてくださいね!

LINE@のアカウント追加方法

こんにちは。ちゃぼP(@chabo0429)です。

ずっとアカウントだけ作って放置状態だったのですが、line@の友達追加リンクボタンとQRコードを作りました。

アクセスはサイドバーからお願いします!

line_at01

サイドバーに友達追加とQRコードがありますので、こちらから是非追加してやってくださいませ。

スマホ画面ですと、下の方にスクロールしていただければ、出てまいります。

「LINE」と「LINE@」の違い

普段私たちが便利に使っている「LINE」ですが、これはあくまで知り合い同士のコミュニケーションツールになります。

ですから、電話番号で追加したり、SMSやメールで招待するなど、連絡先が分かっている相手でなければ基本的に追加することができません。あ、芸能人などの公式アカウントは別です。これはオフィシャルなアカウントですから。

ただ、公式アカウントの開設は非常に高価な投資が必要なので、一般人には難しいですね。

 

そこで、「LINE@」の登場となります。

「LINE@」は個人でも作れるオフィシャルなアカウントで、基本無料で作れます。

http://at.line.me/jp/

アカウントの作成方法などは上記リンクに詳しく解説されています。

ここでは、スマホでの友達追加方法をご案内していきます。

スマホでの追加方法

WEBサイトから直接追加する場合

スマホでサイトを開いて、「LINE友達追加」ボタンをクリックします。

line_at05

LINEの画面が起動するので「追加」をクリックすればOKです。

line_at04

LINEアプリから直接追加する場合

PCなどの画面から、QRコードを使って、直接LINE上でアカウントを追加することができます。

右上の「友達追加」をクリックします。

line_at01

「QRコード」をクリックします。

line_at02

カメラが起動するので、枠内にQRコードが表示されるように、画面を合わせます。

line_at03

「追加」ボタンをクリックして完了です。

line_at04

あとがき。

LINEでは、個別にご質問や雑談(笑)などを受け付けることにしようと思います。

ちゃぼPも部長と同じく卯年なので、基本寂しがり屋ですから、お気軽に登録とお問い合わせください!

ちなみに、ブログ関連の裏話とか話せればいいなーと思っていますので、ヨロシクお願いしますネ!

Push7アップデート!v1.4.2では下書き不具合と予約投稿に対応!

こんにちは。ちゃぼP(@chabo0429)です。

昨日は初動画を撮影してみましたが、、、なんか自分ではあんまり見直したくないですねえ・・(笑)

どうしても長くなってしまうので、やっぱり編集は必須と感じますが、やり方もよくわからんので少しずつ調べながらやっていきたいと思います。

ただ、「動画はやっぱり大変だなー」というのが正直な感想orz

文章だと自分のペースで書けますし、後で書き直すこともできますが、動画は撮影したら編集はできても、言葉を変えたりとかできませんからね。

うーん、Youtuberの人ってすごいんだな(笑)

なので、やっぱりブログメインでこれからもやっていきますのでよろしくお願いします!

プッシュ通知サービス「Push7」が1.4.2にアップデート!

先日このブログでも実装したPush7ですが、

リアルタイム更新通知「Push7」の導入方法を解説します

WordPress用プラグインがつい数時間前にアップデートされたようです。

このツイート、3日の22時頃のものでしたが、、大変だなあ。日曜日の夜に・・・

私のサイトでも、時折プッシュされなかったり、大幅に通知が遅れたりすることがありましたけれど、新しいサービスでもあるので、頻繁にアップデートが行われていますね。

今回の変更点は、

  • 下書きを保存した後に公開すると、Push通知が行われなくなる不具合の修正
  • 予約投稿にも対応

ということのようです。

プラグインの更新後に、WordPressの設定画面を見ると、

Push702

「更新時のプッシュ通知」がなくなっていました。

更新時はプッシュする必要性があまりないので、無くしたのでしょう。

また、新規投稿画面に於いても、

Push701

通知を送信しない場合のみ、チェックを入れる仕様になっています。

確か、更新前は「送信する」「送信しない」のどちらかを選ぶようになっていたような気がしますが、ちょっとスクリーンショットとってなかったので、わかりません。

でも、デフォルトで「送信する」になっていて、個別に「送信しない」を選択できた方がわかりやすいですね。

先進性の感じられるサービス「Push7」

ブロガーとともに作り上げていく新しいサービスと、不具合の修正は新機能の実装に積極的に取り組まれている姿勢に大いに頑張って欲しいと思うところです。

こういった作業、私も元SEですからわかりますが、大変なんだよねぇ・・・

開発者さん、是非頑張ってくださいね!!

3月を振り返って〜アクセス向上に寄与した記事

こんにちは。エイプリルフールに何も気の利いた嘘がつけなくて、しかもお仕事が月初で色々と忙しくて、気がついたら辺りは暗くなり、帰りにすでに八分咲きのお堀端の桜を何枚か撮影して、いそいそと帰ってきたちゃぼP(@chabo0429)です。

sakura01

sakura03

もう暗くなっていたので、夜桜になってしまいましたが、桜、綺麗ですね。

さすがは一眼レフ。ちゃんと背景ぼかし撮影ができます。

明日、明後日が見頃ではないかと思いますが、今年は東京の開花時期とほとんど同じような感じで、時差がないみたいです。

 

そして皆さんの中には生活環境が今日から大きく変化する人もいたのではないかと思います。

4月になっての私はといえば、特に何か変化が身の回りで起こっているわけではないのですが、これから会社も新年度が始まりますので、サラリーマンとしては、いろいろな計画やキックオフ、部下の評価面談とか、いろいろとイベントが増える時期です。

こんな時は、美味しいものを食べて体力をつけたいところですが、せっかくなので、私のブログでは3月にどんなことがあったのかを振り返ってみたいと思います。

PV数は順調に増加中!

数字を出すのはやめておきますが、

ss01

昨年末から比べると、順調に右肩上がりに伸びています。

この調子でいけるかはまだまだこれから次第ということになるでしょうが、とにかく検索の順位が最近「MacBook 12インチ」「Surface3」、そして「モバイルバッテリー」関連で上昇してきたのが大きいと思います。

「MacBook」関連や、「モバイルバッテリー」関連は、当然ながらユーザーや関連ブログも多く、検索でたどり着いてくれるほど上位に食い込むようになるには、かなり大変なのですが、「ひらくPCバッグmini」関連の記事にリンクさせるなどの相乗効果を狙いました。

その結果、検索語句別で見ると、

「MacBook 12インチ」:7位

私がMacBook 12インチ Retinaを使ってよかった10の真実

「Surface3 レビュー」:6位

【レビュー】私がSurface3を愛用するいくつかの理由

「MacBook12インチ モバイルバッテリー」:2位・3位

MacBook 12インチをモバイルバッテリーでゼロから充電した結果

MacBook 12インチを使いながら、モバイルバッテリーで充電した結果

 

という検索順位の結果に。

実際かなり検索経由でのアクセスが増加しています。3ヶ月前と比べると、その量は約2倍になっていますので、少しずつではありますが、サイトの信頼度がグーグル先生の中でも上がってきているのかもしれません。

やっぱり強い「ひらくPCバッグmini」

さすがブロガー界隈では有名なだけあって、「ひらくPCバッグmini」のレビュー記事はたくさんあります。

そんな中で、ちゃぼPのブログはというと、

「ひらくPCバッグmini レビュー」:8位

【レビュー】ひらくPCバッグminiにMacBookとデジタル一眼レフを入れて持ち歩こう!

堂々の1ページ目入賞です。やったー(笑)

しかも、6位は「部長サイト」、7位「スーパーコンシューマー」、8位「風の羅針盤」ですからね。つか、部長どんだけやねんな(笑)

ひらくPCバッグminiは今現在売り切れておりますし、今月末には第二次発売が開始される予定ですが、そうなるとまた多くのブログが出てくるでしょうね。私も負けないように、バリバリと新しいガジェットを放り込んで、これからもレビューを書きたいと思いますのでよろしくね!

最後の猛チャージはやっぱりApple

Appleスペシャルイベント後に、Apple SIMの記事を幾つか記事を書きましたが、それらが非常に多くのアクセスを集めて、一気にアクセス数が伸びました。

今回発表された新しい「9.7インチ iPad Pro」ですが、Apple SIMなるものが内蔵されていて、この使い方や、どのキャリアで使うのか、利点は何か、などを解説してみたのですが、

「Apple SIM 内蔵」:3位

9.7インチiPad Proの「内蔵Apple SIM」について、気になる記事が

すげーなおい(笑)

まあ、私はiPad購入しないので、実物もなく、レビューができないのですが、こう言った「普通の人が普通に疑問に思う点」を考察した記事はやはり多くの注目を集めるようですね。

しかも、なんと前回のSurface3に続いて、「まとめNAVER」に記事が掲載されました。

http://matome.naver.jp/odai/2145883647083409901

これにはちょっとびっくりしますね。内容をわかりやすく、中身のある記事を書くということは常々意識していることではありますが、意外な出来事でした。

あとがき。

というわけで、簡単ではありますけど、3月を振り返ってみました。

まだまだ初心者に毛の生えたようなブログではありますが、この1か月、意識したことはというと、

  • やはりApple系の新製品、新情報は強いが、メジャーなブロガーさんもだいたいレビュー記事書いてますので、ちょっとあまり注目されていないところにフォーカスして掘り下げてみる
  • 購入直後のレビューより、購入1か月後や3か月後のまとめ記事の方が、これから買おうと思っている人の役に立つ
  • モバイルバッテリーはとにかく私が大好きなガジェットだから、何回も書く

という感じで、好きなものは角度を変えて、何度でも書くことが結果としてよかったのだと思いますし、まとめを書いて、ファーストレビューの際の記事と相互リンクを追加することで、内部リンクを増やせば、記事に対する信頼度が上がる結果になるのでしょう。

 

今月、来月を過ぎると、次のAppleイベント、「WWDC 2016」が6月に予定されています。

すでに部長には「MacBook買うんでしょ?」と言われてますけど、このMacBookを購入してからまだ3ヶ月ですからね。それほど簡単な買い物じゃありませんよぅ。

でも、新しい情報などが入ったら、随時紹介していく予定ですので、ぜひ楽しみにしていてくださいまし!

リアルタイム更新通知「Push7」の導入方法を解説します

どうもどうも、ちゃぼP(@chabo0429)です。

今日はですねー、ブログのリアルタイム更新通知サービス「Push7」のブログへの設置方法と、設定方法をご紹介しようと思います。

部長サイトの常連さんはもうご存知かと思いますけど、部長がgoriさんのサイトで始めたPush7を見まして、例のごとく、

「ちゃぼP、コードちょうだい。お願い」

と言われ、試行錯誤しながら作ったというものでございますが、なんかうまくモバイルで表示ができなくて、「おかしいなあ〜」とか言いながらも、なんとか出来ました。

http://nabi1080.com/management/blog/51701

早速、部長は実装して運用を開始しております。

開始しておりますが、というかですねえ、

 

「21時までにできる?らんらんらーん(´・ω・`)」

 

とメッセージがきてですね、まだデザインがちゃんとできてないのにサ。

なんで21時なのかというと、部長の就寝時間だよね。

しかも最後の、

 

 

「(´・ω・`)」

これは何やねん!

 

もうね、その時の私の正直な気持ち、書いていいですか?

 

 

 

 

 

ハアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアああああああああああああああああああああああああああああんんんんんん!(by 西城秀樹)
via部長ナビ

 

だよ。まったくもう!(笑)

もう思いっきりコピペだけどさ、正直西城秀樹が頭の中を駆け巡ったさ。

それでさ、一生懸命コード書いて試行錯誤している時に、

 

「もう記事できているから、できたら教えて。アップするから」

 

だって。

あのね、

 

 

 

 

 

ハアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアああああああああああああああああああああああああああああんんんんんん!(by 西城秀樹 2回目)
via部長ナビ

 

だよね。部長らしいよ、ホントに(笑)

2回もパクっちゃってゴメンナサイ。でも、どうしても使いたかった(笑)

 

とゆーわけで、ちゃぼPの雄叫びはこれくらいにして、マジメにPush7の記事書きましょう。

「Push7」とは

Push7とは、PC版のChrome(Windows/Mac)と、iOS端末(iPhone/iPad)とAndroid端末にブログの更新のタイミングでプッシュ通知を送れるサービスです。

先日風の羅針盤に設置した、Pushdogというサービスも同じ機能でしたが、

【WordPress】Pushdogを設置して、ブログの更新を簡単に通知

これですね。

これはiOS端末に通知を送ることができませんでした。やはりiOS端末に通知が送れるのは魅力的なので、今回チャレンジしてみることにしました。

ちなみに、私のサイトのテーマは「マテリアル」、部長サイトは「Simplicity」ですが、どちらでも使えますよ!

まずは新規登録

ブログの更新通知を流すには、まずPush7のサイトで新規登録を行います。

https://push7.jp/

ここの「新規登録」からメールアドレスを登録します。

push701

自分のメールアドレスを入力して、「仮登録」ボタンをクリックすると、記入したメールアドレス宛に仮登録通知が届きます。

このメールにある本登録のリンクをクリックして、必要事項を記入したら、登録が完了します。

Push7を「プロモード」で設定

登録が完了したら、細かい設定に移ります。

push702

  • サイト名:ブログのタイトル
  • サイトURL:ブログのURL
  • サイトアイコン:サイトに登録しているファビコン(アイコン)をファイルの選択で指定
  • アプリケーションURL:任意の名前

以上を入力して「登録」をクリックします。

「導入方法」のタブを開いたら、三つのモードを選択する画面になります。

独自ドメインを取られている方は、せっかくなので②の「プロモード」を選びましょう。

ちょっと設定する項目が増えますが、せっかくの独自ドメインを活用してしまいましょう。

push705

ここで幾つか設定項目があります。

4のボタンのスタイルは、バルーン付きのものを選びます。

重要なのは3のホスト名です。上の図はすでに設定済みのものですが、ここに入力しなくてはいけないのが、「サブドメイン」です。

例えば、あなたのブログサイトのURLが「hogehoge.com」だとします。

その前に、一つの文字列をくっつけて、「push.hogehoge.com」というURLにアクセスしたら、Push7の購読ができるようになりますので、この「push」を足した、「push.hogehoge.com」という文字列を入力します。

別に「push」でなくても構いません。「read」とか「koudoku」でもなんでもいいです。

ただし、いきなりここに入力して「申請」ボタンを押してもエラーになります。

その前に、一つやることがあります。

DNSを設定する

DNSというのは、Domain Name Systemというインターネット上の名前解決の仕組みのことを言いますが、ドメイン名で問い合わせがあったら、その場所(IPアドレス)はココですよ、というようにアクセスしてきた人に教えてあげる仕組みです。

もう少し簡単に言うと、今回であれば、「push.hogehoge.com」にアクセスがあったら、そのアクセス先は、Push7のサーバ(コンピュータ)ですよ、とインターネット上に公開してあげる操作をします。

一般的に、独自ドメインを取得してレンタルサーバなどで運用している場合は、そのレンタルサーバのコントロールパネルなどで、「DNSの設定」という項目があると思いますので、そこで設定します。

私の場合は、ドメインはバリュードメインで取得していますので、DNSもバリュードメインを使っています。

バリュードメインでのDNS設定

バリュードメインにアクセスしてログインすると、コントロールパネルがありますので、その中で登録済みのドメインを表示させます。

push707

ここで選ぶのは「登録済みドメイン一覧」です。

push708

「omoide-soko.jp」がありますので、ここの「DNS/URL」をクリックします。

push709

上記のように、

「cname push7 xxx.app.push7.jp」と入力します。「xxx.app.push7.jp」は上のPush7コントロールパネルのプロ設置方法2にある、「内容(VALUE)」の文字列をそのまま入れます。

ここでやっていることは、「push7.omoide-soko.jp」へのアクセスは、「xxx.app.push7.jp」ですよ、と公開することになります。ここで設定を間違うとブログそのものへのアクセスができなくなったり、メールが届かなくなったりしますので、慎重に行うようにしてください。

ホストネームを申請

ここまで出来たら、30分ほど時間を空けて(設定が反映されるまでに時間がかかる場合があります)Push7のコントロールパネルにホスト名を入力してみます。

push706

「ドメインを申請しました」と表示されれば正常です。

ここが作成完了になるまで、さらに30分ほどかかる場合がありますので、作成完了になったら、いよいよWordPress側に設定していきます。

プラグインのインストール

WordPressからプッシュ通知を送るため、プラグインをインストールします。

push710

「Push7」で検索すると、二つほど出てきます。

左側が必須の公式プラグイン。右側のものは簡単に購読ボタンを設置するためのプラグインです。

今回はボタンを手作業で設置するので、右側のプラグインは不要ですが、インストールするとサイドバーなどへも簡単に購読ボタンが設置できますので、必要な方はインストールしてください。

ブラグインをインストールしたら、有効化してください。

push711

「設定」−「Push7設定」を開くと、以下の画面が表示されます。

push712

「APPNO」と 「APIKEY」の欄は、先ほどのPush7コントロールパネルの「自動プッシュ設定」の画面にあります。

push704

ココですね。これをそれぞれコピーペーストして入れてください。

また、「更新記事をデフォルトでプッシュ通知する」は「しない」にしておくことをお勧めします。ここを「する」にしておくと、記事を修正しただけでも更新通知がプッシュされてしまいます。

すべて入力したら、「変更を保存」をクリックします。

single.phpへ追記

「外観」−「テーマの編集」から、single.phpをクリックします。

push717

ここでは、記事下の部分に購読ボタンを入れますが、これまでTwitterのフォローボタンと、Feedlyの購読ボタンを並べて表示していました。

同じ感じで、PC表示はもう1列増やして3列にし、モバイルの場合は3列だとキツイので、新たに設置するPush7はその下に1行追加して表示することにしました。

<?php if (is_mobile()) :?>

<ul class="snsfollow-area">
	<li><span>Twitterで〇〇を</span><a href="https://twitter.com/(あなたのTwitterアカウント)" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @(あなたのTwitterアカウント)</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
	<li><span>Feedlyで最新記事を購読</span>
<span class="feedly-btn-horizontal">
  <a href='(FeedlyのURL)'  target='blank'>
    <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png' alt='follow us in feedly' width='66' height='20'>
  </a>
  <span class="arrow_box">
    <a href='(FeedlyのURL)'  target='blank'>
      <?php echo scc_get_follow_feedly(); ?>
    </a>
  </span>
</span>
</li>
</ul>

<ul class="push7-area">
<li>(ここにコピーしたPush7のコードを貼り付け)
<span>Push7で更新をリアルタイム受信</span>
</li>
</ul>

<?php else: ?>

<ul class="snsfollow-area">
	<li><a href="https://twitter.com/(あなたのTwitterアカウント)" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false" data-dnt="true">Follow @(あなたのTwitterアカウント)</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><span>Twitterで〇〇をフォロー!</span></li>
	<li>
<span class="feedly-btn-horizontal">
  <a href='(FeedlyのURL)'  target='blank'>
    <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'>
  </a>
  <span class="arrow_box">
    <a href='(FeedlyのURL)'  target='blank'>
      <?php echo scc_get_follow_feedly(); ?>
    </a>
  </span>
</span>
<span>Feedlyで最新記事を購読</span></li>
<li>
(ここにコピーしたPush7のコードを貼り付け)
<span>Push7で更新をリアルタイム受信</span>
</li>
</ul>

<?php endif; ?>

今回のPush7の部分はハイライトされた部分です。

貼り付けるコードは、上のPush7のコントロールパネルの③の部分です。

追記したら、保存します。

style.cssへ追記

次に、style.cssへ追記します。

style.cssを開きます。

push718

ここに、以下のコードを挿入します。

ul.snsfollow-area {
  display:table;
  table-layout: fixed;
  width:100%;
}
ul.snsfollow-area li {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #e6e5e1;
  padding: 8px;
  border: 8px #fff solid;
}
ul.snsfollow-area li span {
  font-size: 11px;
  text-align: center;
  display: block;
}

ul.push7-area {
  display:table;
  table-layout: fixed;
  width:100%;
  padding: 0px;
}
ul.push7-area li {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #e6e5e1;
  padding: 8px;
  border: 8px #fff solid;
}
ul.push7-area li span {
  font-size: 11px;
  text-align: center;
}

ハイライトされた部分は、モバイル表示のみで使用します。

これで完成です。

実際に表示させてみる

実際に表示させてみましょう。

まずPCでは、以下のようになります。

push719

無事、3列になりました。綺麗に整頓されていていいですね。

続いて、モバイルの方はというと、

push720

TwitterとFeedlyの下にもう1行追加されて表示できました。

購読の方法

購読方法はいたって簡単です。

PC・Androidの場合

WIndows/MacともChromeで記事下もしくはサイドバーにあるオレンジ色の[push7-sb]をクリックすると、プッシュ通知の受信が開始されます。

Androidでもブラウザ上で同様にクリックすれば、通知が開始されます。

iOSの場合

アプリをインストールして、ブラウザ上で同様に[push7-sb]をクリックすれば、プッシュ通知の受信が開始されます。

あとがき。

登録から設置まで、結構な手間がかかるPush7ですが、無事部長のオーダーにも応えることができてよかった!(笑)

ただ、どうもPush7自体が安定しないようで、通知される時と、されない時があるようです。

まだ始まってそれほど日が経っていないサービスのようなので、この辺りは気長に待ちましょう。

それでもiOSに通知できるのはとても便利なサービスなので、ぜひこの機会に読者登録、よろしくお願いしますね!

自分らしいブログのスタイルを見つけたいと悩んだら

こんにちは。ちゃぼP(@chabo0429)です。

朝起きましたら、ワタシ、部長の朝更新の記事を読むのですけど、

http://nabi1080.com/management/blog/51234

この記事を朝の電車のなかで読んでました。

内容はすごく納得のいくもので、ブログ書いている人ならみんなそうなんだと思いますけど、アクセスを増やそうとする過程で、どうやって自分のサイトのファンを増やすかという壁に必ずと言っていいほどブチ当たります。

一方で、自分のペースで、自分の日々起こったことを思うがままに綴るというブログの在り方もアリだと思います。

私も前はそうでしたし。

でもせっかくブログやって、しかもWordPressという優れたツールまであるなら、読者の方の役に立つようなちゃんとした記事を書いて、「また読みたいな!」と思われるようなサイトを作ってみたくなりました。

ただそれって簡単なことじゃあないんですよね。

だれもが他の人の真似から始まる

で、まずは誰でもお手本としたいサイトやブロガーさんを参考にして、真似することから始めるんじゃないかと思います。

「この人がこういうやり方で成功したんだから、俺にもできるだろう」

これですね。

でもたとえ、技術的なことは真似できても、その人の文章や雰囲気、個性は真似できるものではないですよね。

かくいうワタクシ、以前マックの名前募集バーガーのグルメレビュー記事を書きました。

http://www.omoide-soko.jp/apps/wordpress/gourmet/2546

この記事、全文にわたりほとんどすべて一度書きなおしています。

書きなおす前は、部長のレビュー記事のように、ハイテンションのアゲアゲ記事でした。

ところが、すかさず部長からメッセージが来ました。

「面白いとは思うけど、ちゃぼPらしい記事がよかったな。常連さんからもそういう声が多かったよ」

という内容でした。

 

そうなんですよね、部長の記事は部長にしか書けないし、同じように書いたところでモノマネでしかないわけですからね。

で、「ちゃぼPらしく」というのは何なのか聞いてみると、

「連載の時のような、写実的で繊細な感じがちゃぼPだ」

という回答でした。

 

うーん、繊細なのかあ?俺の文章は・・・(笑)

まあ、繊細かどうかはともかく、こう言われてなにか「ハッ」と気づかされるものがありました。

「自分らしさ」は他人が評価するもの

「自分らしいスタイル」というものが何なのか。

これはとっても難しいテーマですが、結局はたくさん記事を書いて、いろいろと試してみるしかないんじゃないかと思います。

文語調、口語調、比喩表現や擬人法、主語は自分なのか、第三者なのか。

情熱込めて書きたいのか、穏やかに書いてゆきたいのか。

いろいろと試してみて自分のしっくりくるスタイルを見つけていくしかないと思うのです。

 

そして何より重要なのは、自分に意見してくれる、信頼できる人の話を聞くこと。

やっぱり、自分じゃ自分のことはわかっているつもりでいて見えてません。

最初は思いもよらないことを言われたりして戸惑うこともあるかもしれませんが、やっぱり違うな、と思ったら戻せばいいだけのことです。

やれるだけのことをやってみた方が、自分が見つかる確率が高まりますよ、きっと。

ファンの獲得やPVは「結果」であり、「目的」じゃない

ファンの数やPV数は気になりますよねえ(笑)

そりゃ確かにファンを獲得したり、PVが増えたらいいとは私も思います。

特にPVなんて純粋に数字ですから、目標にもしやすいですしね。

でも、これはどんなことにも共通しますけど、数字はあくまで結果で、目標を達成するために教科書通りのことをやったり、人真似をしたところで、ちゃんとした結果は出ないんですよね。

 

大事なのはきっと、PVでもファン数でもなくて、「自分らしいスタイル」なんじゃないかと思うようになりました。

文章も写真も、部長のように「ガツンとくる情熱系」ではなくて、「散文的でセンシティブ」なのがワタシらしいということなのかなと。

ちなみに、これはカメ仙人さんにも言われたことですけれど、写真にもどうもそういうわたしの性格は表れているようで、部長と私の写真は対照的のようです。

まあ、レビュー写真なんかは、「ガツン系」の方がいいんだろうなあ(笑)

 

でも、こういう風にちゃんと言ってくれる仲間は大事ですよね。ありがたいと本当に思います。

もしずっと誰にも言ってもらえなかったら、気付かないで何年も過ごしていたかもしれないのですから。

ですから、私は私らしく、文章も写真も続けていけたらと思っています。

部長とちゃぼPがジジイになったころ

で、部長のブログに話は戻りますが、これは笑ったw

部長のEOS 150Dはいいですよ。ついこの前、次のモデルの80Dが発表されたところでしょ。

順当にバージョンアップされたとしたら、10年後くらいには150Dになるかもしれまへん。

でもさずがにさあー、D87600って(笑)

今5500よ?その前が5300よ?

何百年かかるのー!?(笑)

しかも、その頃まだレビューやってるしー

部長は「温泉施設レビュー」って書いてるけど、多分その頃は

「病院レビュー」

だな(笑)

で、病院食や点滴をマクロ撮影して興奮して血圧上がって、医者にカメラとパソコン取り上げられるというアホなジジイになっていないことをお互い祈りましょう(笑)

画像をiPhoneやMacBookに合成してダウンロードできるサービス

今日は、Apple製品の画面に好きな画像を合成してダウンロードできる、とてもステキなサイトを発見したのでご紹介!

http://smartmockups.com/

これ、海外のサイトですが、とても簡単に使えます!!

「Smartmockups」は、Appleデバイスに好きな画像を合成できる

MacBookやiPhone、iPadやApple Watchに至るまで、多くのテンプレートが用意されています。

Smartmockups01

こちらはMacBook。上部にあるメニューでデバイスを絞り込むことができます。

試しにMacBookで合成してみよう!

試しに、1枚やってみましょう。左上の画像をクリックすると、

Smartmockups06

部長の愛用するMacBook Pro 15インチですね。ここにちゃぼPのブログ「風の羅針盤」を合成してみましょう。

「Upload your image」から画像をアップロードします。

Smartmockups02

あらかじめ撮っておいたスクリーンショットを選んで開いたら、

Smartmockups03

挿入したいエリアをトリミングします。

すると、

Smartmockups04

MacBookの画面に風の羅針盤がちゃんと表示されましたー!笑

あとは、「Download full image」を選んで、好きなサイズでダウンロードするだけ。

Smartmockups04

綺麗な15インチのディスプレイに風の羅針盤が表示されました!

Apple Watchでもやってみる

折角なので、これも私が持っていない、Apple Watchでやってみます。

Smartmockups07

こちらがテンプレート。

同じ要領で我が家のニャンコを表示させてみます。

Smartmockups09

このブログには初登場。メスの三毛猫パン子です。もう推定20歳を超えてるんですよ〜。ヨロシクニャン。

Smartmockups08

トリミングしたらちょうど顔の部分が入りました。

Smartmockups10

ちゃんとApple Watchにニャンコが入りましたね。カワイイですな笑

最後に

Appleデバイスの写真を使いたい場面というのは結構ありますけど、Appleからダウンロードできる画像は限られていますし、好きな画像を入れたり、なんというのは合成するにも手間も時間もかかります。

でも、このサービスを使えば、手持ちの画像を使って簡単にオリジナルのMacBookやiPhone、Apple Watchの写真が作れます。

自分のブログを、ちょっと違った感じで彩ってみてはどうでしょうか。

結構使えると思いますよー!

 

【WordPress】Pushdogを設置して、ブログの更新を簡単に通知

ブログの更新、簡単に通知したいですよね。

TwitterやFacebookで更新通知を流すのが一般的ですが、ブラウザ上にポップアップする形で更新通知を表示する方法があります。

それが、Pushdogというサービス。

https://push.dog/

このサービス、kkosugiさんの開発されたWebサービスとのことで、WordPressだけでなく、他のブログサービスでも利用可能とのこと。

今のところ、PCはChromeやFirefoxにのみ対応。その他Androidのスマホにも更新通知を流せます。

そして、ユーザー登録の必要もなければ、アプリやプラグインのインストールも不要。

ただ、SNSのアカウントを持っていなくても、登録ボタンを押すだけで、そのブログが更新されたタイミングで通知されるようになります。

これは便利そうということで、サイドバーに登録ボタンを設置してみました。

サイドバーに「プッシュ購読する」ボタンを設置

ボタンを設置する方法は実に簡単。

https://push.dog/owned

こちらにアクセスして、ブログのトップページのURLを入力するだけ。

Pushdog01

すると、下のボックスにコードが表示されるので、これをコピーします。

そして、リンクを表示させたいところに貼り付ければ完了。私はサイドバー部分に表示させるようにしました。

このブログのテーマ「マテリアル」であれば、「sidebar.php」に貼り付ければ、サイドバーに表示できます。

<p style="font-size:0.8em;">Google Chrome、FirefoxとAndroidで更新通知を受け取る</p>
<div class="_btn-pushdog" data-url="http://www.omoide-soko.jp/apps/wordpress/" data-text="プッシュ購読する"></div>
<script type="text/javascript" src="//s3-ap-northeast-1.amazonaws.com/tokyo.push.dog/stable/btn-pushdog-v3.js" charset="utf-8" async="async"></script>
<div></div>

「風の羅針盤」でのコードはこちら。

Pushdog02

こんな感じで、購読ボタンが表示されました。

購読方法

購読方法は、「プッシュ購読する」ボタンをクリックするだけ。

Pushdog03

SNSのアカウントをお持ちであれば、上の部分でユーザー登録をことも可能ですが。購読するだけなら、下の「プッシュ通知購読する」をクリックしてください。

Pushdog04

これで登録が完了しました。

この操作を行ったパソコンで、以降更新通知が表示されます。

Pushdog05

こんな感じの通知が表示されます。

プラグインを入れると、ワンクリックで登録できる

Chromeにプラグインを入れておくと、購読リンクのないサイトも登録できるようになるみたいですよ。

https://chrome.google.com/webstore/detail/pushdog-%E3%81%93%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5%E9%80%9A%E7%9F%A5%E8%B3%BC%E8%AA%AD%E3%81%99%E3%82%8B/ojcmofpibndofiamgijkbkjhbeadmhmn

すごいですね。すごく便利。

ただし、これからの対応となるようですが、iOSへの通知はまだできません。

やはり、iPhoneやiPadユーザーは多いので、対応して欲しいですねえ(笑)

とはいえ、ユーザー登録なしで購読できるのは、ユーザーにとっても非常に大きなメリットですので、リンクを貼ってみてはいかがでしょうか!