このブログは、無料Wordpress用テーマの「Simplicity」を基礎にカスタマイズして使わせていただいています。
SEO対策等も考えられたデザインらしく、さらにWebデザイン未熟者のボクでも気軽にカスタマイズできるので重宝していますが、同じテーマを使っている人も少なくないので、オリジナリティーを出したり、自分の思うデザインに近づけたりするために定期的にいじってきました。
今日は2016年も終わりということで、ここまでこのブログでやって見た「カスタマイズ11選」としてまとめ記事を書いてみます！
MoKuJi
1. ロゴの設置
まずは、CSSとか関係ない話になりますが、ロゴの設置をしました。
デフォルトではブログタイトルが文字で表示されますが、「カスタマイズ」内で任意のロゴを設定できます。
そこまでロゴにこだわるつもりはなかったので、思いつくままにLOGとLEOの「L」を組み合わせてナショジオっぽくしたマークと、「LOG」の字をデザインしてみました。
2. サイドバーにプロフィール欄を設置
下に、「書いてる人」ボックス設置について載せていますが、それを実装する前に、サイドバー最上部に自分のプロフィール欄を作りました。
基本的にはTEXTウィジェットにHTMLを入れての設置ですが、プロフ画像の位置等CSSで指示しています。
とりあえずこんな感じでプロフ画像の指定をして、ちょっと右上に画像が来る様にしました。
ウィジェット内には下記の様に書いています。
全体をsideprofというクラスで囲い、メディアにプロフ用画像をアップロードし、そのURLを<img src=”xx“>に挿入。プロフィール本文を書いた後ろに別に固定ページで作っているプロフィールページへのリンクボタンを作っています。
もっとシンプル（or 合理的）なやり方があるのかも知れませんが、LEO LOGではこうしています。
3. Hタグカスタマイズ
「Simplicity」デフォルトのHタグは比較的シンプルで、それも悪くないのですが、カスタマイズは比較的簡単なのでこれもいじりました。
CSSのみでカスタマイズする場合は「シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50」というページがとても参考になります。
[blogcard url=″https://www.nxworld.net/tips/50-css-heading-styling.html″]
ここを参考に色々といじりましたが、結果、LEO LOGでは下記の通りのタグになっています。
Simplicityデフォルトデザイン
「Simplicity」のデフォルトHタグはこんな感じ。H1はただのおっきいフォントで、H2が枠線に細い黒線があるパターン、H3とH4に下線といった感じです。
LEO LOGのデザイン
こちらがLEO LOGのHタグ群。
H1タグはセンター寄せにして、下に薄いラインを引きました。
H2タグはほぼデフォルトですが、文字に影をつけてすこーし浮いた感じに。
H3タグは最初の文字の色を変えて、細い下線、H4タグは一文字目を大きめサイズにし、H3と同じく下線を。H5、H6はあまり本文で使うタグではないので、H5は他の場所でも使う吹き出しタイプ、H6は「関連リンク」などを書き込む様に作ってみました。
記事タイトル部分にあたるH1タグを比較するとこんな感じの差です。
こだわったり色々頑張りたい人は色をつけたり、折り返しっぽくしたり（一時期それにしてました）、CSSだけで色々できるのでHタグデザインでオリジナリティーを演出するのもありかも知れません。
4. コメント欄を「Facebook Comment」に変装
各記事についているコメント欄を「Facebook」と統合できるプラグイン、「Facebook Comments」をインストール、「Facebook」にもコメントを投稿できる様にしました。
現状あまりコメントをいただくことはないですが、Wordpressデフォルトコメント欄よりはおしゃれになったと思います。
下記記事に詳細をまとめています。
5. 「記事を読むのにかかる時間」を表示させる様に
「この記事は約ox分で読めます」という記事の長さの目安を自動表記させる様にしました。
ネットで見た情報によるとこれを設置することで訪問者の滞在時間が長くなるという話を鵜呑みにしての設置ですが、その効果がなかったとしてもちょっと”っぽい”表示になるのでありかなーってことで入れた感じです！
下記記事に設置法など詳細をまとめています。
「WordPressに「記事を読むのにかかる時間」を表示させる方法」
6. 「はてブ」風のブログカードでリンクを表示できる「Pz-LinkCard」導入
「はてブ」風のブログカードリンクが簡単に設置できる「Pz-LinkCard」というプラグインを導入しました。
リンクの見せ方を少し特徴的（？）にできるプラグインです。
別記事で設置についてまとめています。
「『はてブ』風のブログカードでリンクを表示できる「Pz-LinkCard」導入」
7. Blockquoteをちょっと変更
引用文などを掲載する時に使う「Blockquote」のデザインをいじりました。
上のがこのブログでのデザインで、下のが「Simplicity」デフォルトのデザインです。
ボクのデザインはクオーテーションマークにウェブフォントの、「Font Awesome」を利用しています。
CSSの記述的には下記の通りになります。
案の定、これが正しいのかとか、綺麗な記述かはわかりませんが、これで上記の様な見え方になっています。
一応こだわりポイントとしては右と左でクオーテーションマークのサイズが違うんですよ！
8. 今流行りのバイラルメディア風のFacebookいいねボタンを設置！
こちらも同じく”っぽさ”を演出する装備を「VA Social Buzz」というプラグインで実装しました！
記事の最後に「この記事が気に入ったらいいね！しよう」というボックスが自動で出てくるプラグインでバイラルメディア風になるのがおしゃれで良きです。
プラグインなので設置も簡単。これについても別記事でまとめていますのでよかったらそちらで見てください！
「今流行りのバイラルメディア風のFacebookいいねボタンを『VA Social Buzz』で簡単設置！」
9. 「404エラーページ」のカスタマイズ
「Simplicity」はデフォルトでは404ページが結構シンプルなので「404エラーページ」もカスタマイズしました。
基本的にはウィジットのドラッグ＆ドロップで簡単にカスタマイズできる様になっているので比較的楽に完了。
詳しい話は別記事にて紹介しています。
「404」エラーページは下記でご覧いただけます。
10. 記事下に「書いてる人」欄を追加できる「Simple Author Box」導入！
記事の最後に、「書いてる人」のボックスを簡単に設置できるプラグイン、「Simple Auther Box」を入れました。
自分しか書き手がいないブログですが、ちょっとプロっぽくなる装備なので”っぽさ”演出のために入れてみました。
こちらも別記事でまとめていますので興味がある方はどーぞ！
「記事下に『書いてる人』欄を追加できる『Simple Author Box』導入！」
11. トップへ戻るボタンを「オレサマライオン」に
こちらもテーマ付帯の「カスタマイズ」から簡単に設定できる「トップへ戻るボタン」を自作キャラの「オレサマライオン」にしました。
デフォルトではパソコンもモバイルも同じサイズの画像になってしまうため、少しいじっています。
まとめ
これら11種のカスタマイズ以外にも地道に色々いじってきましたが、今後も気分次第でいじると思うし、普通に誰も気づかない様な変更も多いので2016年のカスタマイズ「健忘録」としてはこんなところで終わりたいと思います。
WordPressが広まって、無料でこれだけカスタマイズできるテーマやカスタマイズHow toな情報が得られて、ネットを介して活動するにはとてもいい時代になったなーと思うと同時に、もっともっと知識があればネットをもっともっと有効に使って事業を展開できるのになーと思うわたくしであります。
今、悪戦苦闘しながら3つのウェブサイトを作っていますので、2017年はもっともっとCSSやPHPの知識をつけて、より有効なウェブ活動ができる年にできたらいいなと思います。
またサイト公開の時にはこのブログでも報告したいと思います！
