ブログ初心者だった僕がsimplicityでカスタマイズした１３のこと【コピペでOK!!】

ブログ始めたいけど、設定とかカスタマイズとかわからないし、無料ブログでいっか。

そんな誘惑に打ち勝った人たちが主にこのページを見てくれているんでしょう！ありがとうございます！

でも、wordpressでブログを始めてみたはいいけど、何をどうしたらいいのかわからないですよね。

僕もそうでした(というか今でも詳しくわかっていませんｗ)。

というのも、僕は今までwordpressどころか、無料ブログすら開設したことのなかったブログ童貞だったんですよね。

そんな僕でも、いろいろと調べながらカスタマズや設定をしていくと、少しづつ見た目がよくなってきますし、まぁ楽しいんですよね。

だけど、調べたり、設定の仕方がよくわからなくて無駄な時間を浪費してしまった感じが否めません。

なので、今回は僕がこのゆたとりでカスタマイズ・設定したことを１３個にまとめてみました！

少しでも参考になれば嬉しいです。

ちなみに僕のブログもまだまだ発展段階にあるので、設定を変更した際にはこの記事も更新していきます。

ブログ初心者にはsimplicityがおすすめ

simplicityは内部SEO施策済みのテーマなので、良い記事を書けばその分しっかり検索サイトに反映されます。

また、テーマを編集せずに、管理画面からある程度サイトをデザインすることが可能なことも初心者におすすめのポイントです。

それに、simplicity専用のサポートフォーラムがあるため、設定上の質問などもすることができます。

それなのにいくら使っても無料！

初心者の方はとりあえずsimplicityから始めてみることが最適解です。

参考：Simplisityサポートフォーラム

simplicityは以下のページからダウンロード可能です。

simplicity1と2がありますが、特にこだわりがない場合は、simplicity2をダウンロードしてください

参考：Simplisity2のダウンロード

カスタマイズするときには子テーマを使おう

サイト運営に慣れてくると、見た目を進化させたくなるんですよね。

そんな時にテーマを編集するのですが、直接編集しないことをおすすめします。

simplicityは現在も頻繁に更新されているテーマで、更新されてしまうと自分が設定したカスタマイズも一度リセットされてしまうからです。

じゃあ、いちいちテーマを更新するたびに、１つずつまた編集しなおさなければいけないのかというとそんなことはありません。

子テーマをダウンロードして、そちらを編集することにしておけば、simplicityが更新されようともカスタマイズは生き残ります。

今のところはサイトをカスタマイズする予定のない方も、とりあえずダウンロードしておくことをおすすめしますよ。

以下からダウンロードページに移れます。設定方法もめちゃくちゃ簡単なので、ページに記載されてある鵜通りに設定してください。

参考：Simplisity2の子テーマ

では、僕がsimplicityでカスタマイズ・設定したことを順に説明していきます。

ブログ用ロゴを設定

ブログのタイトルのところですね。

ここは何も設定しなければ、ブログタイトルがテキストとして表示されます。

でもそれだとちょっと寂しくないですか？ってことで画像にも変更することができます。

僕はココナラで５４０円で画像を作成してもらいました。

ブログのタイトルが決まっている方で、絵なんてウマく描けるかボケぇって人は使ってみることをおすすめします！

http://www.firiinfo.com/2016/06/26/coconala-logo/

【外観⇒カスタマイズ⇒ヘッダー】までいったら、あとはそこの『ロゴ画像』にロゴとして使いたい画像を設定するだけです。

『ロゴを画像にする』の項目にチェックが入っていることを確認してくださいね。

ブログアイコンを変更

ブラウザのタブに表示される画像です。

細かいところですけどね、神は細部に宿るって言いますし、少しでも印象に残るブログにしたいですからね。

これの変更も簡単で、【外観⇒カスタマイズ⇒サイト基本情報】の『サイトアイコン』に使いたい画像を設定するだけです。

ちなみにこの『サイト基本情報』からはブログタイトルの変更やブログタイトルの下に表示されるサイトのキャッチフレーズを変更することができます。

なにか良いフレーズがあればいいんですけれどもね。。なかなか思いつかない。。

プロフィール画像をサイドバーに設置

やっぱりプロフィール画像は『ブログの顔』だと思うんですよね。

だからしっかりとしたものを設定するようにしましょう。

僕みたいにイラストにしなくても、自分の写真を使ってもいいんですよ。

むしろそっちの方がサイトの信頼度はアップすると思うので、差支えのない方は自分の写真を使ってみてもいいかもしれません！

設定方法はブログのロゴを設定するよりかは複雑ですが、simplicity様様のおかげでシンプルにできちゃいます！

まず【メディア⇒新規追加】をクリックしたらプロフィール画像として使いたい画像をアップロードしましょう。

次に【メディア⇒ライブラリ】から、先ほどアップロードした画像をクリックします。

するとURLが見れるのでそれをコピーしておきます。

ここまでで事前準備完了です。

では、いよいよプロフィール画像の設定に移っていきます。

【外観⇒ウィジェット】から『テキスト』をクリックしてサイドバーウィジェットを選択し、『ウィジェットを追加』をクリック。

『テキスト』がサイドバーウィジェット欄に移動し、文字を入れていくことができるようになるので、そこの「タイトル」の下にある「内容」の部分に以下のコードを記入し、『保存』をクリック。

(URLの部分には、先ほどライブラリページでコピーした、プロフィール画像として使いたい画像のURLを入れるようにしてください)

ブログを確認すると画像がでるようになります。

コードの下にそのまま文章を記入すれば、僕のプロフィール欄のようにプロフィール文として使えます。

ちなみに、上の文字列のwidth,heightはプロフィール画像の大きさを表しているので、好みに合わせてサイズ変更してみてください。

h2、h3タグをおしゃれに

もちろん書いている内容が一番大切なんですよ！

でも、見た目を重要なのは間違いありません。

少しでもブログの見た目を良くするために、見出しであるh2,h3タグを編集しておきましょう。

僕が使用しているコードであれば、以下のモノをコピペして貼り付けでおーけーです。

貼り付ける場所は【外観⇒テーマの編集】で出てきたページです。

下の参考ページでは、見出しタグのサンプルがたくさんみれます。

気に入ったものがあれば、コピペしちゃいましょう！

僕的に、h2タグとh3タグの色だけはそろえた方がまとまりがでるなと思っています。

参考：少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ

「記事を読む」ボタンをおしゃれに

ブログのトップページのイメージが大きく変わります。

デフォルトのモノもシンプルでいいんですけれども、やっぱり「ブログ」ってなると少しはハデさも欲しくなりますもんね。

それに「記事を読む」ボタンが目を引くとついクリックしたくなっちゃいますし。

僕は背景色をピンクに、文字色を白にして、「記事を読む」ボタンを右側に移動させました。

これも【外観⇒テーマの編集】に以下のコードを貼り付ければおーけーです。

参考：初心者でもできた！「Simplicity」でカスタマイズしたこと6つ！

こちらは僕が参考にさせて頂いた『たもトピ』の記事です。

ここでは、「記事を読む」ボタンを表示させない方法なんかも書かれています。

最近はスマホのみ、表示させていない人が増えてきていますよね。

僕は今のところ、スマホでも「記事を読む」ボタンを表示させているのですけど、今後どうするか迷い中です。

トップページで記事間に区切りを

区切りをつけた方が見た目的に良いんですよね。

これもコピペでおーけーです。

またまたたもトピさんからパクッ、、マネしてみました。

たもトピverは区切りは『点線』になっているんですけれども、また別のサイトのMASALOGでは、『線』になっていますのでお好みで使い分けてください。

ちなみに『線ver』のコードはこちらになります。

参考：コピペで一発！「Simplicity」カスタマイズ11項目

関連記事カスタマイズ

関連記事も「記事を読む」ボタンや記事間に区切りを入れることができます。

僕は関連記事には区切りを入れていないのですが、そのコードはこれです。

区切りを入れたい場合は追加でこれを記入してください。

SNSボタンを設置

ブログを拡散させるためにはTwitterとかFacebookなどのSNSが役に立つみたいです。

僕もつい最近始めてみたんですけれども、いまのところフォロワーがいなさすぎて効果ありません(笑)

でもそのうちね、そのうちきっと効力を発揮してくれるよ！・・

ってことでSNSボタンを設置しています。

設置の方法も簡単です。

Twitter

Follow @SuzukiYutatori

⇒Twitterフォローボタン設置

このページでフォローボタンを設置したいTwitterアカウントでログインします。

あとは自分の好みのボタンを選んでURLをコピー、おきたい場所に貼り付けでおーけーです。

Facebook

まず【外観⇒カスタマイズ⇒SNS】の『facebook.com/XXXXXXX』の欄に、いいねボタン設置したいページのURLのXXXXXXX部分を記入します。

その後、【外観⇒ウィジェット】の利用できるウィジェット欄から『[S]Facebookページ「いいね！」』をクリック、おきたい場所を選択すれば完了です。

ちなみに僕は、『投稿SNSボタン下』に設置しています。

Feeedly

⇒Feedlyフォローボタン設置

このサイトの指示に従ってください。

⓵Feedlyボタンのデザインの選択

⓶トップページのURLを貼り付け

⓷URLをコピーして

⓸設置したい場所に貼り付ければおーけーです。

シェアするボタンの変更

【外観⇒カスタマイズ⇒SNS】から好みに合わせて選択できます。

PCとモバイルを別々のシェアボタンを設置することも可能です。

１度全部試してみて、どれが自分のサイトに合っているのか確認してみるのが良いでしょう。

またどのSNSボタンを置くかも同じ場所から選択することができるのですが、その際は自分のSNSサイトのURLを記入することを忘れないでください。(Facebookのいいねボタンを設置した時と同じやり方です)

人気記事ランキングを設置

まず下準備として【プラグイン⇒新規追加】の検索窓に『wordpress popular post』と記入し、ダウンロード・有効化しましょう。

次に【外観⇒ウィジェット】から『[S]人気記事』を選択、サイドバーウィジェットに設置しましょう。

何位までの記事を反映させるかや、集計単位の期間を設定することもできるので試してみましょう。

集計単位を１日にして、『本日の人気記事』なんてしているブロガーの方達も多いですよね。

ちなみに僕は１週間にしています。

ブログカードを使う

ブログカードはもう本当に簡単です。

【外観⇒カスタマイズ⇒ブログカード(内部リンクor外部リンク)】で、『ブログカード有効』の項目にチェックを入れるだけです。

あとは、【投稿⇒新規追加】で『テキスト』に設定してリンクさせたいURLをそのまま貼り付けるだけです。

内部リンクは自分のブログ内の記事をブログカードとして表示させます。

http://www.firiinfo.com/2016/06/22/100-list-to-do/

外部リンクは他の人のサイトの記事をブログカードとして表示します。

http://www.aokiu.com/

なんとなくおしゃれに見えるので僕は好きです(笑)

※simplicityのバージョン4.5.3からは内部リンクがURLの貼り付けだけじゃブログカード表示ができなくなりました。

ブログカード表示したいリンクを「URL」と記入すればおーけーです。

外部リンクはそのままURLのみの貼り付けで大丈夫です。

カエレバ・ヨメレバのデザイン変更

Amazonや楽天などの商品をまとめて紹介できるのがカエレバ・ヨメレバです。

⇒カエレバ
⇒ヨメレバ

これは便利なサービスなんですが、デフォルトだと少し味気ないんですよね。

なのでカスタマイズしちゃいましょう！style.cssに記入です。

・カエレバ

パイロット ボールペン フリクションボール LFBK230EF10C 10色セット

posted with カエレバ

パイロット

Amazon

楽天市場

・ヨメレバ

夢をかなえるゾウ 文庫版

posted with ヨメレバ

水野敬也 飛鳥新社 2011-05-20

Amazon

Kindle

楽天ブックス

参考：カエレバのCSSをカスタマイズしてボタン化、ヨメレバのCSSとの干渉回避[CSS紹介]

次・前のページをアイキャッチ画像に

Simplicityのおかげでかなり簡単にできちゃいます。

【外観⇒カスタマイズ⇒レイアウト（投稿・固定ページ)】の一番下にある『[前ページ] [次ページ] ナビタイプ』の項目の「サムネイル付き」にチェックをいれるだけ。

これだけで、次・前ページをアイキャッチ画像にすることができます。

グローバルナビの色を変更

これもSimplicityなら超簡単。

【外観⇒カスタマイズ⇒色】から『グローバルナビ色』から好きな色を調整してみましょう。

ブログのイメージが変わりますよ！

まとめ

参考にさせて頂いたブロガーのみなさん、ありがとうございます！

様々なブログでサイトカスタマイズ方法が記事にされているので、徹底的に調べてみることが大切ですね。

それで気に入ったデザインがあれば真似させてもらう。

これが初心者ブロガーがブログ運営を楽しく続けるコツだと思います。

だって最初からCSSとか学んでたら記事書く時間がないですからね(笑)

どーせつまらなくなっておしまいです。

だから最初は手短にブログデザインを自分の好きなようにして、記事を書くことに集中した方がいいです。

そっちの方が楽しいですしね！

その際に、このブログのデザインがどこかのお役に立てば、本当に嬉しいです！

では、これからも頑張っていきましょう！