Ns Note

「たのしい」「おいしい」のライフログ

ブログカスタマイズ

WordPress

サイトのデザイン等を変更したので備忘録的なカスタマイズまとめ

2015/06/19

ブログのデザインってかなり大事だと思っています。
来訪したサイトで見た目が気に入らなければ記事も読んでもらえないでしょうから。
少なくても私は、検索でたどり着いたサイトの見た目が気に入らければ記事を読みません…。

サイトのデザインを少し変更したので備忘録として書いてみました。
ブログカスタマイズ

Sponsored Link


前置き

私はブログのコードやプラグインとかの話を書かない主義です。
今までもほとんど記事にしていません。

何故かというと

よくわからないから

そもそも私は、そういうものに関してド素人です。
自分の周りにもそういう分野に詳しい人は皆無です。
サイトの構成やデザインを変えるのも全てGoogle先生に聞いています。

つまりは、だれかの知恵を拝借してサイトを作っているわけです。

もしかしたら、大部分の方がそうなのかもしれません。
それくらい、WordPressとStingerは素晴らしいです。

基本的な考えとして、ブログを書いて紹介する以上はその記事に責任を持つべきだと思っています。

例えば新型iPhoneのリーク画像や性能の噂。
それって、どこかで見かけた情報を自分のサイトで転載している訳ですよね。
本当にそうなのか分からない憶測の記事で。

情報をできるだけ速く伝えることを目的としているサイトならそれで良いと思います。
でも、私のブログでは上記の理由でやっていません。

食べ物や買い物のレビュー。
ゲームの攻略。
どこかで遊んできた感想。

そういった記事は、あくまでも私の主観です。
書いた記事に対して質問があったとしても、私の意見として答えることができます。

ところが、サイトのデザインや構成の話になると違います。

私が行ったことに対して、興味をもった方が質問をしたりコメントをくれたりすることがあるかもしれません。
そのことに対して、私は自信を持って明確な返答をすることができないでしょう。

誰かの知恵を拝借して真似させてもらったことですから。

だから今まではブログの構成の記事は控えてきました。

何で書いたの?

タイトル通りの備忘録です。


備忘録とは
忘れたときの用意に用件などを書きとめておく帳面。メモ。
kotobankより引用



思い立ったのがこちらの記事を読んだから。

WordPressの復旧作業をする前にやらないといけない3つのこと



(初めて知ったけど、甲さんのパーマリンクこんなだったんだ…)

先日プラグインの更新をしたら、いきなりサイトが「メンテ中表示」になってビックリしました。
どうも更新作業が失敗したようで、少し時間が経過したら表示されたんですけど。
今までなったこと無いんですけど、WordPressではたまにあるのでしょうか?

その時に、「もしもサイトが初期化されたらデザインを1からやり直すのか?」
そんなことが脳裏をよぎったので、その後に読んだこの記事が余計気になりました。

そんな訳で、自分のためにブログのデザイン関係の備忘録を残そうと考えました。

ブログテーマ


Stinger3

公式サイト



SEOに強いという触れ込みで有名なStinger。
軽くて速くて使いやすいです。
何より色々な方がカスタマイズをしているので、参考にしてデザインのアレンジをしやすいところがありがたいです。

子テーマ

ブログのテーマは編集すると、テーマ更新時に色々作りなおす手間が面倒だったりします。
なので、元々のテーマを「親テーマ」それを元に編集したテーマを「子テーマ」とすると良いと言われています。

私は横着で無知なため、Qtaroさんの作ってくれた子テーマをアレンジして使っています。

room9 子テーマ一覧



素敵なデザインのテーマがたくさんあります。

スマホ用子テーマ

Niji_Lifeさんから提供されているテーマ
「Stinger-minimum」のスマホ用のテーマを利用させてもらっています。

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!



Stingerにしてカスタマイズを始めた当初から、こちらのサイトにはお世話になっていました。
デザインの参考にしたり、カスタマイズの備忘録を真似させてもらったりして。

この子テーマのデザインはスゴく良いなと思っていました。
女性向けなデザインで私のブログに使うのはちょっと違うと思って敬遠してたんですけど。
スマートホン用のテーマを作成されたのを知って、そちらだけ利用させてもらいました。
女性的にならないように、少しだけアレンジさせてもらっています。

という訳で、私のブログはPC用サイトとスマートフォン用のサイトではデザインが大きく違っています。

普段iPhoneやAndroid端末で見てくださっている方も多いと思います。
たまに、PCで見て頂けると、デザイン頑張って考えているのがわかってもらえて嬉しいです。

逆にPCでの閲覧が多い方はスマホで見てもらえると面白いと思います。

プラグイン

WordPressを使い始めた頃は、巷で良いと言われているプラグインのほとんどを使っていました。

当然のことながら、サイトは重くなります…

以前のレスポンシブデザインテーマのサイトを辞めてStingerに変えた最大の理由がサイトの軽量化でした。
ありがたいことに、Stingerはプラグインを使わなくても済む機能が多いんですね。

そんな訳で、大して入れていないプラグインまとめ
各プラグインの詳細記事はわかりやすいサイトをリンクで紹介しています。

Acunetix Secure WordPress

セキュリティ系のプラグイン。

Acunetix WP Security - セキュリテイ対策と脆弱性スキャンができるWordPressプラグイン

AddQuicktag

よく使うHTMLタグを登録して簡単に呼び出せる超絶便利なプラグイン。

AddQuicktag - エディタにHTML雛形を登録して記事作成を効率化できるWordPressプラグイン



Akismet

最初から入っているプラグインです。
スパムを防いでくれるので有効にしましょう。

All in one Favicon

ファビコンを作成して表示できるようになります。
ちなみにファビコンとはサイトのアイコン画像みたいなものです。
お気に入りに追加したり、タグを開いた時にサイト名の横に表示されるアイコンです。

All in one Favicon でファビコンを設置する方法

ファビコン用の画像の作り方

faviconを超簡単に作成できるサイト「Dynamic Drive – FavIcon Generator」

良い機会だったので、この記事を書いた時にファビコン画像を変更しました。

All In One SEO Pack

SEO対策に必須のプラグインです。

All in One SEO Pack - SEO対策の設定を総合的に管理できるWordPressプラグイン

Auto Post Thumbnail

アイキャッチ画像を自動で設定してくれるプラグイン。
Stinger3はアイキャッチ画像を自動で設定してくれないので、過去記事に画像を付けるのに使いました。

BackWPup

バックアップを自動でしてくれるプラグイン。
実はこれを復元する方法はしらないんですけど…

Better Delete Revision

WordPressは記事を書いていると自動で下書き保存をする機能があります。
記事を公開すると、下書きは溜まったまま保存されます。
その下書き記事を削除するプラグインです。

Better Delete Revision(リビジョン削除プラグイン)

brBrbr

WordPressは通常の書き方だと好きなように改行ができません。
このプラグインを使うと思い通りに改行できるようになります。

WordPressで思い通りに改行するプラグイン brBrbr

Broken Link Checker

記事内のリンク切れを自動でチェックしてくれるプラグイン。
定番の必須プラグインです。

Broken Link Checker - 自動リンク切れチェック

Browser Shots

Webサイトのスクリーンショットをサムネイル画像として使用できる超絶便利なプラグイン。
これがないと他サイトの紹介記事を書けません。

Browser Shots - スクリーンショットを撮影してサムネイル画像に使用できるWordPressプラグイン



Custom-More-Link-Complete

SEO対策用プラグイン。

ワードプレスプラグイン「Custom More Link Complete」のSEOにいい初期設定

EWWW Image Optimizer

サイトで表示する画像をアップする時に自動で圧縮してくれるプラグイン。

EWWW Image Optimizer の設定方法と使い方

G Analytics

Google AnalyticsをWordPressで確認できるようにする超絶便利なプラグイン。
私は公式のGoogle Analyticsをほとんど見ることがないです。

G Analytics

Google XML Sitemaps

SEO対策用プラグイン。
定番ですね。

これ超簡単![WordPress対応]XMLサイトマップ登録法


Image Widget

ウィジェットを利用してサイドバーに画像を表示できるプラグイン。
今はこれを利用してプロフィール欄を作っています。

Image Widget - ウィジェットでサイドバーに画像を表示できるプラグインWordPressプラグイン

Login LockDown

不正アクセス防止用のプラグイン。

Simple Login Lockdown - WordPressログイン画面のログイン試行回数を制限できるプラグイン

My Category Order

WordPressは標準でカテゴリーの順番を任意に変更することができません。
それを可能にするプラグイン。

カテゴリーの順番を並べ替えるWordPressプラグイン「My Category Order」

Open Graph Pro

SEO対策用プラグイン。

Open Graph Pro - OGPに対応したメタタグを出力するWordPressプラグイン

PuSHPress

SEO対策用プラグイン。

PuSHPress - Googleの検索エンジンに瞬時にインデックスさせるWordPressプラグイン

Quick Adsense

広告をサイトに入れる時に便利なプラグイン。

Quick Adsense - アドセンスの広告コードを記事やサイドバーに挿入できるWordPressプラグイン

RSS Footer

記事の盗用・転載対策のプラグイン。

エントリー盗用対策に「RSS Footer」を導入してみた




Simple Tags

タグの管理に使います。

Simple Tags - WordPressのタグ管理を使いやすく拡張できるプラグイン

Simple Tweet

新しい記事を投稿すると連動して自動でツイートしてくれるプラグイン。

WordPressとツイッターを連携させて更新をツイートする「Simple Tweet」

SyntaxHighlighter Evolved

記事でソースコードを表示させたい時に使うプラグイン。

SyntaxHighlighter Evolved - 記事でソースコードを綺麗に表示できるWordPressプラグイン

Tweetily

過去記事をランダムにツイートしてくれるプラグイン。
ランダムと言っても設定でツイートするものとしないものは選別できます。

Tweetily - Twitterで過去記事をランダムに自動投稿できるWordPressプラグイン

WordPress Popular Posts

人気のある記事一覧を表示できる超絶便利なプラグイン。
キャッシュ系のプラグインとは相性が悪いので要注意。

ブログの人気記事を表示「WordPress Popular Posts」の設定方法

WP Hyper Response

画面表示のレスポンスを向上させるプラグイン。

WordPressを高速化するプラグインを作りました

WP Multibyte Patch

元々は英語版のWordPressを日本語対応させるためのプラグイン。
標準搭載なので有効にして利用。

こんなものですね。

あまり難しいものや珍しいものは利用していません。
特にみなさんの役に立つ情報にはなりませんが備忘録です。

カスタマイズ関係

最初に書いた通り、自分のカスタマイズはググって調べて辿り着いたものがほとんどです。
なので、カスマイズの詳細は省略しますが、自分が何をどうやったのかを分かるように書いてます。

タイトルロゴ

らふらくさんのサイトでロゴの紹介記事を見て参考にさせてもらいました。

無料でロゴ作成できるサービスでロゴをつくってブログに導入してみました



一度だけロゴを変更してアイコンを入れようかと考えたことがありました。
満足できる完成度ではなかったのでお蔵入りに。
何か良い方法があれば教えて下さい。

見出し関係

参考にしたサイト一覧。

Webクリエイターボックス



スタイルシート見出しメーカー



SQUEEZE



記事内の見出しも、サイドバーの見出し追加もこちらから参考にさせてもらいました。
見出し関係は画像を使うと重くなるのでCSSで処理するのが良いかと思っています。

Profile

プラグインを利用して作成しています。

上に書いてある「Image Widget」です。

続きを読むボタンのカスタマイズ

こちらのサイトを参考にして変更しました。

Stinger「続きを見る」ボタンをカスタマイズしてクリック率アップ

サイドバーの紹介記事をタイトルだけに変更

Stingerサイドバー新着記事部分に日付を追加して見やすく表示しよう

フッター

フッターに背景色をつける

記事と記事の間にラインを入れて見やすく

[凛]WordPressテーマ”Stinger”カスタマイズ初心者編!点線で見た目を可愛くしよう!



記事の囲み方

文章を枠で囲む方法

ワードプレス 記事文章を枠線で囲む方法

配色関係

Web配色ツール



カラーチャート




背景に壁紙を利用していた時期もありましたが、少しでも軽い方が良いと思ってやめました。
配色は専用のサイトで考えて作っています。
以前はその場で作った色をそのまま利用していました。
現在はカラーコードをEvernoteに控えて後からでも分かるようにしています。

元々は白をベースに青を差し色として構成していました。
今はベースもポイントのカラーもブルーをメインとしています。

まとめ

他にも手を付けたところはありますが、とりあえず書いて残すのはこんな所で。

本当はもっともっと色々と手を付けたいところがあるのですが…
ド素人なもので、1箇所デザインや仕様を変えるのも検索しなければなりません。
ほんの少しのデザインの変更で、かなりの時間を要しています。

そんな訳でなかなか思うように進まないのが現状です。

私の勝手な思い込みですが、サイトのデザインに満足できないと記事を書く気持ちも起きないです。
デザインがある程度好みなものになると、記事を書こうという情熱も湧いてきます。

どこまでやっても「これで完成!」となるものではありません。
それでも、できるだけ格好良いサイトデザインを目指して改良を続けたいです。

最後まで読んでいただきありがとうございます。
RSSの登録はこちらからどうぞ

follow us in feedly

気に入って頂けた記事はシェアして頂けると嬉しいです!

-WordPress
-,