ワードプレスで新しくブログを作成する場合に導入したいテクニック

レスポンシブ

当サイト(ザ・バズーカ)は今から約5年前の2012年末に作ったまま大幅な変更を加えていない。今度いつか改造する時に導入したいテクニックを備忘録として記す。

スマホの登場で急激に変わった

2012年末にTwenty Twelveというワードプレスに標準添付されているレスポンシブテーマを改造してブログを作った。

当時は今ほどスマホも普及しておらずレスポンシブって何?状態だったが、レスポンシブにしといてよかった。

スポンサーリンク

ブログに導入したいテクニック

当ブログは数年記事も書かずにほぼ放置状態だったのだが、その間にウェブ制作のテクニックがいろいろ進んでついていけなくなってしまった。今後ブログ改造(作成)時に導入したい流行のテクニックを再確認したいと思う。

スマホ対応のレスポンシブテーマ

もはや誰もがスマホを持っている時代なので、モバイル対応していないサイトはGoogleからも冷遇されると言われるほどだ。

2012年頃まではPC上の見た目だけを考えてウェブデザインすればよかったが、今はいちいちスマホでどう見えるかを考慮しなければデザインできない。

レスポンシブに対応したテーマを改造しながらオリジナルのデザインを作ろう。無料でもたくさんのテーマが入手できるし、有料テーマなら便利なオプション機能付きもあるようだ。

PC上でのスマホ表示確認は下記サイトのブックマークレットが便利。

SEOが変わった、ブログ内容が決め手

昔はブログにつけたタグなどのキーワードが検索エンジンに拾われていたように思う。しかし今は内容の厚い長文のブログが検索上位に表示されやすい。

Googleは公式には文字数は関係ないと言っているが、ひとつの記事で最低でも1000文字以上が望ましいというのがネット上でのもっぱらのウワサ。とにかくユーザーにとって有益な情報かどうかが検索上位表示の鍵となるようだ。

でも本当は文字数なんて気にせずに好きなことを書いてた方が幸せだと思う。

フェイスブック、ツイッターなどのソーシャルボタン

これは5年前からあったがフェイスブックやツイッターのボタン設置も当たり前になっている。

はてなブログにはデフォルトでいいのがあるようだが、ワードプレスだと自分で設置しなければならない。

下記サイトにいくつかあるプラグインを比較した詳細が書かれていて参考になる。どのプラグインも一長一短あるようだ。

WordPress/SNSシェアプラグインどれがいい?上位5件を徹底比較
WordPressでFacebook・Twitter・Google+・LINE等のSNS共有ボタンを設置できるプラグインをWordPress内での点数とインストール数を加味した上位5件で機能・操作性・デザインを徹底比較。インストール後の設定、機能、対応SNSを確認。最後におすすめのシェアプラグイン...

僕は2012年当時は便利だと思われたWP Social Bookmarking Lightというのをいまだに使っている。このプラグインは海外製にもかかわらずはてブとラインが標準装備されているのが良い点だが、ボタンが小さくて見栄えが悪いのが難点。正直変えたい。

どっちにしろ当ブログは弱小なんで記事がシェアされることも滅多にないんですけどね(笑)

保護された通信httpsが増えてきた

まだ個人ブログではhttpが多数派だが最近httpsのところを良く見るようになった。もうhttpsじゃないと二流って雰囲気が徐々に出てきた。あと2~3年もすれば個人ブログでもhttpsが多数派になるのかもしれない。

httpsに変更してもGoogleはhttpを自動的にhttpsと認識してくれるわけではなくURLが別物扱いになってしまうらしい。これを解決するには早めに変更するしかないとのこと。下記サイト参照。

「文字数が多いページはグーグルで上位表示されやすい」はSEO都市伝説 などSEO記事...
「ページのコンテンツは1000文字以上書く方が、検索エンジンの評価が高い」そんな話を真に受けていないだろうか? グーグルの中の人が、「文字数とSEO」に関して解説した。

僕の使っているサーバについてはまだ情報が少ないので、もっと情報が増えてきたら変更に挑戦するかもしれない。はぁ、めんどくさ。

追尾型メニュー

スクロールしても画面の上に表示され続ける追尾型メニューは5年前にはなかったと思う。これはJavaScriptを使って実現するようだ。

スマホで見た時に画面の下に現れるメニューも同じように実現するようだ。しかし調べれば調べるほど素人には無理っぽい。

下記の有名サイトに詳しく書かれているが僕には無理そうだ。

スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方
ページを読もうとスクロールしたら、メニューが付いてくるサイトなどをよく見かけます。 LIGとかもそうですね。(2015年9月時点) こういった追従式グローバルメニューを手軽に実装することができるClingifyを使ってみました。 そしたら

当ブログのスマホ閲覧時のメニューはテーマデフォルトの触ると開くタイプだが、当ブログではメニューはそれほど重要ではないのでこれ以上の改造はしない。画面右下のトップへ帰る矢印があれば今のところはかまわない。

サイドバーの追尾型の広告

画面をスクロールするとサイドバーのスペースに追尾してくる広告。このタイプの広告は2012年当時には見られなかった。

アドセンスでこれをやると規約違反になるとの話だからどちらにしろこのサイトではやるつもりはないが、これもJavaScriptで実現するようだ。追尾型広告には賛否両論あるので導入は慎重にした方が良い。

はてなみたいなブログカード

はてなブログでは他ブログや自ブログの記事にリンクを貼る時に、サムネイル、記事タイトル、説明文、サイト名が入ったおしゃれなブログカードというやつが作れる。こんなやつ。

ブログカード

これはPz-LinkCardというワードプレスのプラグインで似たようなのを作ることができたが、ニュースサイトなどはAccessDeniedと出てリンクを作成できない場合が多い。あとはてなのブログカードのように日付が表示されないのが残念。

詳細は作者さんのサイトが参考になる。

WordPressでリンクをカード形式で表示する Pz-LinkCard
リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています

ワードプレスにも最近のバージョンでは標準でブログアドレスを貼り付けるだけでブログカードが作れる機能があるが、すごく大きくて不恰好なのでPz-LinkCardを使った方が良い。

下のブログカードを見てほしい。ワードプレス標準だとこれだけ大きくなってしまうのだ!ね、大きいでしょう。目立つけどスマートさに欠ける。カスタマイズには挑戦してないけどちょっと難しいらしい。

スターウォーズ反乱者たちで復活したダース・モールは今どうなっているのか

キャラクターによる吹き出しの会話

教える系のブログでよく見るキャラクター二人が左右に置かれて、それぞれ吹き出しで会話形式で喋るやつ。あれも5年前には見なかった。

これはSpeech Bubbleというプラグインで導入できるようだ。下記有名サイトに詳しい導入方法が載っている。

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!
LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。今回は、漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグインのインストール方法&使い...

ワードプレスだとテーマによっては最初から機能が盛り込まれていたりプラグインで実現したりするらしいが、当サイトは正直言って内容がまだ不十分なので導入は見合わせる。

各ページに目次がついている

これも5年前はウィキペディアぐらいにしかなかったと思われる。

今は個人のブログも長文化する傾向にあるから、記事の上に表示/非表示のできる目次がある所が多い。これもプラグインで実装できる。

下記ブログに詳しい導入方法が記載されている。

Table of Contents Plus - 記事の目次を自動生成できるWordPressプラグイン - ネタ...
Table of Contents Plusは、記事の目次を自動生成できるプラグインです。投稿や固定ページの記事に記述したH1からH6までの見出し用のHTMLタグを基に目次を自動生成します。手動で目次を作成して更新したり、アンカーリンクを張る手間が省けます。

感想まとめ

以上が最近のブログでよく見るテクニックで、新しくブログを作る時や大幅な改造を加える時に導入したいことである(いつになるかわからないけど)。

まずやらなければならないのは良質な記事を多く書くことだが、ブログのデザインが決まらないとやる気がそがれるというのはあると思うので、がんばってデザインを作ろう!

最近ホッテントリになりやすいはてなブログに興味があるが、ワードプレスの一番いいとこってデザインを自由にいじれるところだと思います。

スポンサーリンク


広告
広告