【Simplicity】2016年にLEO LOGで実践した「カスタマイズ11選」!【WordPress】

この記事は約91秒で読めます。

シェアしてねっ!

log-161228css

このブログは、無料Wordpress用テーマの「Simplicity」を基礎にカスタマイズして使わせていただいています。

SEO対策等も考えられたデザインらしく、さらにWebデザイン未熟者のボクでも気軽にカスタマイズできるので重宝していますが、同じテーマを使っている人も少なくないので、オリジナリティーを出したり、自分の思うデザインに近づけたりするために定期的にいじってきました。

今日は2016年も終わりということで、ここまでこのブログでやって見た「カスタマイズ11選」としてまとめ記事を書いてみます!

1. ロゴの設置

log-161228logo

まずは、CSSとか関係ない話になりますが、ロゴの設置をしました。

デフォルトではブログタイトルが文字で表示されますが、「カスタマイズ」内で任意のロゴを設定できます。

そこまでロゴにこだわるつもりはなかったので、思いつくままにLOGとLEOの「L」を組み合わせてナショジオっぽくしたマークと、「LOG」の字をデザインしてみました。

2. サイドバーにプロフィール欄を設置

log-161228css03

下に、「書いてる人」ボックス設置について載せていますが、それを実装する前に、サイドバー最上部に自分のプロフィール欄を作りました。

基本的にはTEXTウィジェットにHTMLを入れての設置ですが、プロフ画像の位置等CSSで指示しています。

log-161228css04

とりあえずこんな感じでプロフ画像の指定をして、ちょっと右上に画像が来る様にしました。

ウィジェット内には下記の様に書いています。

log-161227css02

全体をsideprofというクラスで囲い、メディアにプロフ用画像をアップロードし、そのURLを<img src=”xx“>に挿入。プロフィール本文を書いた後ろに別に固定ページで作っているプロフィールページへのリンクボタンを作っています。

もっとシンプル(or 合理的)なやり方があるのかも知れませんが、LEO LOGではこうしています。

3. Hタグカスタマイズ

log-161228css08

「Simplicity」デフォルトのHタグは比較的シンプルで、それも悪くないのですが、カスタマイズは比較的簡単なのでこれもいじりました。

CSSのみでカスタマイズする場合は「シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50」というページがとても参考になります。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体...

ここを参考に色々といじりましたが、結果、LEO LOGでは下記の通りのタグになっています。

Simplicityデフォルトデザイン

log-161228css07

「Simplicity」のデフォルトHタグはこんな感じ。H1はただのおっきいフォントで、H2が枠線に細い黒線があるパターン、H3とH4に下線といった感じです。

LEO LOGのデザイン

log-161228css06

こちらがLEO LOGのHタグ群。

H1タグはセンター寄せにして、下に薄いラインを引きました。

H2タグはほぼデフォルトですが、文字に影をつけてすこーし浮いた感じに。

H3タグは最初の文字の色を変えて、細い下線、H4タグは一文字目を大きめサイズにし、H3と同じく下線を。H5、H6はあまり本文で使うタグではないので、H5は他の場所でも使う吹き出しタイプ、H6は「関連リンク」などを書き込む様に作ってみました。

log-161228css08

記事タイトル部分にあたるH1タグを比較するとこんな感じの差です。

こだわったり色々頑張りたい人は色をつけたり、折り返しっぽくしたり(一時期それにしてました)、CSSだけで色々できるのでHタグデザインでオリジナリティーを演出するのもありかも知れません。

4. コメント欄を「Facebook Comment」に変装

log-161012fbcomment04

各記事についているコメント欄を「Facebook」と統合できるプラグイン、「Facebook Comments」をインストール、「Facebook」にもコメントを投稿できる様にしました。

現状あまりコメントをいただくことはないですが、Wordpressデフォルトコメント欄よりはおしゃれになったと思います。

下記記事に詳細をまとめています。

5. 「記事を読むのにかかる時間」を表示させる様に

log-161019readtime-03

「この記事は約ox分で読めます」という記事の長さの目安を自動表記させる様にしました。

ネットで見た情報によるとこれを設置することで訪問者の滞在時間が長くなるという話を鵜呑みにしての設置ですが、その効果がなかったとしてもちょっと”っぽい”表示になるのでありかなーってことで入れた感じです!

下記記事に設置法など詳細をまとめています。

6. 「はてブ」風のブログカードでリンクを表示できる「Pz-LinkCard」導入

log-161101pzlink04

「はてブ」風のブログカードリンクが簡単に設置できる「Pz-LinkCard」というプラグインを導入しました。

リンクの見せ方を少し特徴的(?)にできるプラグインです。

別記事で設置についてまとめています。

7. Blockquoteをちょっと変更

log-161228css09

引用文などを掲載する時に使う「Blockquote」のデザインをいじりました。

上のがこのブログでのデザインで、下のが「Simplicity」デフォルトのデザインです。

log-161228css10b

ボクのデザインはクオーテーションマークにウェブフォントの、Font Awesomeを利用しています。

CSSの記述的には下記の通りになります。

log-161228css11

案の定、これが正しいのかとか、綺麗な記述かはわかりませんが、これで上記の様な見え方になっています。

一応こだわりポイントとしては右と左でクオーテーションマークのサイズが違うんですよ!

8. 今流行りのバイラルメディア風のFacebookいいねボタンを設置!

log-161113-social-buzztop

こちらも同じく”っぽさ”を演出する装備を「VA Social Buzz」というプラグインで実装しました!

記事の最後に「この記事が気に入ったらいいね!しよう」というボックスが自動で出てくるプラグインでバイラルメディア風になるのがおしゃれで良きです。

プラグインなので設置も簡単。これについても別記事でまとめていますのでよかったらそちらで見てください!

9. 「404エラーページ」のカスタマイズ

log-404-top1612

「Simplicity」はデフォルトでは404ページが結構シンプルなので「404エラーページ」もカスタマイズしました。

基本的にはウィジットのドラッグ&ドロップで簡単にカスタマイズできる様になっているので比較的楽に完了。

詳しい話は別記事にて紹介しています。

「404」エラーページは下記でご覧いただけます。

10. 記事下に「書いてる人」欄を追加できる「Simple Author Box」導入!

log-161130wpdesign15

記事の最後に、「書いてる人」のボックスを簡単に設置できるプラグイン、「Simple Auther Box」を入れました。

自分しか書き手がいないブログですが、ちょっとプロっぽくなる装備なので”っぽさ”演出のために入れてみました。

こちらも別記事でまとめていますので興味がある方はどーぞ!

11. トップへ戻るボタンを「オレサマライオン」に

log-161207gotopbutton01

こちらもテーマ付帯の「カスタマイズ」から簡単に設定できる「トップへ戻るボタン」を自作キャラの「オレサマライオン」にしました。

デフォルトではパソコンもモバイルも同じサイズの画像になってしまうため、少しいじっています。

まとめ

これら11種のカスタマイズ以外にも地道に色々いじってきましたが、今後も気分次第でいじると思うし、普通に誰も気づかない様な変更も多いので2016年のカスタマイズ「健忘録」としてはこんなところで終わりたいと思います。

WordPressが広まって、無料でこれだけカスタマイズできるテーマやカスタマイズHow toな情報が得られて、ネットを介して活動するにはとてもいい時代になったなーと思うと同時に、もっともっと知識があればネットをもっともっと有効に使って事業を展開できるのになーと思うわたくしであります。

今、悪戦苦闘しながら3つのウェブサイトを作っていますので、2017年はもっともっとCSSやPHPの知識をつけて、より有効なウェブ活動ができる年にできたらいいなと思います。

またサイト公開の時にはこのブログでも報告したいと思います!

この記事が気に入ったら
いいね!しよう

TwitterでLeo Miyanagaを

シェアしてねっ!

PR
気軽にコメントください!
書いてる人
シアトル生まれ、大阪育ち。第一言語は大阪弁。現在は日米行ったり来たり。EXSでは、留学や国際交流プログラムの企画を軸にキャリア支援、ライフプランニング事業を展開。フォトグラファー&心理家としても活動中。大阪に写真ギャラリーあり。主に風景と人物を撮っています。撮影依頼気軽にどうぞ!
PR
トップへ戻る