2017.07.08WordPressのテーマ「Simplicity」に、実際に施したカスタマイズの一覧をまとめておきました。SEOに強い無料テーマとして有名なSimplicity。他にもSEOに強い無料テーマはありますが、その中でもカスタマイズしやすいテーマとして知られています。このサイトもSimplicityで作っているので、実際にどう変わったのかは見てもらえば分かると思います。カスタマイズするたびに随時更新していきますよ。追記)その他、WordPressで作成したブログサイトでいずれやりたくなるようなこともまとめておきました。これはある程度知識がついてきた頃にやるのがおすすめ。最後にスポンサーリンクSimplicityのカスタマイズまとめSimplicityのテーマをもとにしたカスタマイズをまとめています。他テーマも根幹の部分は同じなので、理解できればSimplicity以外のテーマにも適用できるはずです。1、Simplicityで使えるアイコンフォントSimplicityでは「FontAwesome」というアイコンフォントが使われています。種類が豊富なので、一通り目を通しておくといいと思います。【simplicity】豊富なアイコンが使い放題!アイコンフォント「FontAwesome」WordPressのテーマsimplicityには色々な箇所にアイコンが使われています。「FontAwesome」というアイコンフォントを利用しているんですが、かなりの種類のアイコンが揃っていて便利です。自分好みにアイコンの種類を変えたり、新しくアイコンを追加する方法を紹介します。簡単なので使ってみてください。coonelnel.net2017.04.132、記事一覧のサムネイルをカスタマイズSimplicityで使われるサムネイルは、通常サイズが自動的に決まってしまいます。CSSで調整するだけでは、画像が引き伸ばされてしまうんです。PHPを使って、自分の好きな横幅・高さにカスタマイズする方法を紹介。【simplicity】記事一覧のサムネイル画像を好きなサイズに変更!簡単な方法で横長に出来ますWordPressのテーマsimplicityは、デフォルトで記事一覧のサムネイルが小さな正方形に設定されます。単純にCSSでサイズ変更が出来ません。そこで今回はサムネイルの画像サイズを自由に変更する方法を紹介します。画像を横長に表示することもできるようになります。簡単な3つの手順でカスタマイズすることが出来ますよ。coonelnel.net2017.05.033、スライドインメニューをカスタマイズモバイルで表示されるスライドインメニュー。ここでは、スライドインメニューをカスタマイズするためのCSSセレクタをまとめてます。アイコンフォントと組み合わせることで、オリジナリティを出すこともできますよ。【Simplicity】スライドインメニューをカスタマイズするためのCSSセレクタを紹介Simplicityには「スライドインメニュー」というスマホで見た時専用のモバイルメニューが備わっています。そこで今回はそのスライドインメニューをカスタマイズするためのcssセレクタを紹介します。一部のボタンのみを非表示にしたり、アイコンの種類や色を変える方法も細かく見ていきましょう。coonelnel.net2017.06.024、Simplicityの子テーマをカスタマイズWordPressのカスタマイズは、子テーマを使うのが常識です。Simplicityでも簡単に子テーマをダウンロードできますが、最初は編集画面より扱えるPHPファイルが一部しか表示されていません。親テーマのPHPファイルを子テーマに移す方法を紹介します。Simplicity子テーマ内のファイルが少ない?必要なファイルを追加するよSimplicityのカスタマイズには子テーマが欠かせません。なんか親テーマに比べて編集できるファイルの数減ってませんか?Simplicityの子テーマはもともと「テーマの編集」で10種類のファイルしかカスタマイズできません。FTPソフトを使って必要なPHPファイルを子テーマに追加する方法を紹介します。coonelnel.net2017.06.135、サイドバーにプロフィールを追加サイドバーに画像を使ったプロフィールを追加する方法を紹介。した自己紹介を乗せたい時なんかに使ってみてください。Simplicityのサイドバーにおしゃれなプロフィールを付けてみたSimplicityのサイドバーにオリジナルのプロフィールを付けてみました。4つの手順で簡単に実装できるので、人と違ったおしゃれなプロフィールを作りたい人はぜひ使ってみてください。Simplicityのサイドバーの横幅300pxにぴったり馴染んだプロフィールをつけることが出来ますよ。coonelnel.net2017.06.156、SNSシェアボタンを横一列にカスタマイズSimplicityはデフォルトで、シンプルなSNSシェアボタンを実装できます。SNSの表示数によっては2、3行になってしまいます。スマホサイトでは、これがなかなか鬱陶しいんですよね。そんなわけでシェアボタンを横一列に並べる方法をまとめました。SimplicityのSNSシェアボタンを横1列に並べるカスタマイズを施すよSimplicityのSNSシェアボタンを横一列に並べるカスタマイズをしてみました。記事のトップにあるシェアボタンがすっきりして、スマホでも見やすいデザインになると思います。CSSを使ってボタンの横幅のサイズを小さくするだけ。基本cssのコピペのみで実装できるのでぜひ試してみてはどうでしょうか。coonelnel.net2017.06.227、SimplicityのTwitter設定SimplicityとTwitterを連携させる方法のまとめです。自信のTwitterアカウントの登録方法や、タイムラインを表示させる方法を紹介します。SimplicityのTwitter設定まとめ。サイドバーにタイムライン追加SimplicityのTwitterに関する設定をまとめました。Simplicityの場合は自分のTwitterアカウントを簡単に登録できます。フォローボタンの設置以外にも、サイドバーにウィジェットを利用してツイッターのタイムラインを表示させる方法も紹介しますね。coonelnel.net2017.06.278、外部文字リンクにアイコンを付けるアイコンフォントを使って、外部文字リンクの後ろにアイコンを付ける方法。ボタンのようなデザインにすることで、少しおしゃれなリンクにしてみました。【Simplicity】外部リンクをアイコン付きボタンにカスタマイズSimplicityの外部リンクを、シンプルなボタンにする方法を紹介。どんなサイトにも馴染むんじゃないかと思います。リンクホバー時に色を変えるCSSも加えてますので、サイトに合う色を選んでみてください。アフィリエイトのリンクも分かりやすいボタンにすることが出来るので試してみてはどうでしょうか。coonelnel.net2017.07.029、記事一覧のデザインをカスタマイズSimplicityの記事一覧は、最初結構ごちゃごちゃしてます。そこで、不必要な情報は削除しよりシンプルなデザインにしてみました。これで他のSimplicityサイトと比べ、デザイン的にかなりの差別化を図れると思いますよ。Simplicityの記事一覧をまさしくシンプルにカスタマイズしてみたSimplicityの記事一覧のデザインをカスタマイズしてみました。不要な部分を削除して、枠線もシンプルに仕上げました。PHPファイルを一切かまうことなく、CSSのみのカスタマイズ。これでかなりオリジナリティを出すことが出来ると思いますよ。HTMLの要素ごとに分けてカスタマイズしたCSSを見ていきましょう。coonelnel.net2017.07.0610、Simplicityの見出しをカスタマイズCSS初心者は、まず見出しからカスタマイズするのがおすすめ。文字のスタイル変更から徐々にカスタマイズに慣れていきましょう。シンプルで目に入りやすい見出しのCSSを紹介します。初心者も簡単!Simplicityの見出しをカスタマイズしてみようSimplicityのカスタマイズをするなら、まずは見出しから取り掛かるのがおすすめ。CSS初心者でも簡単にできます。今回はユーザーが記事を読みやすくなるような、シンプルかつパッと目に入る見出しのデザインを紹介。CSSの「backgroundプロパティ」を使い、背景色を自分の好きな色に設定することが出来ます。coonelnel.net2017.07.1311、サムネイル画像上にカテゴリーのラベルを付けるサムネイル画像の左上にカテゴリーを移動するカスタマイズです。有料テーマでよく見かけるので、Simplicityにも実装してみました。PCサイト専用ですが結構気に入ってます。【Simplicity】サムネイル画像上にカテゴリーのラベルを付けてみたSimplicity記事一覧のサムネイル画像にカテゴリーのラベルを付けるカスタマイズをしてみました。Simplicityデフォルトでは日付の右側にカテゴリー名が表示されていますが、それをCSSでサムネイルの左上に移動させます。カテゴリーの表示デザインを変更してみましょう。通常アイキャッチ画像の上にあるシェアボタンを、アイキャッチ下に移動してみました。デザインにメリハリが出ます。【Simplicity】シェアボタンの場所をアイキャッチ画像の下に移動してみたSimplicityのSNSシェアボタンをアイキャッチ画像の下に移動してみました。ユーザーの目に入りやすくなったのかなと。シェアボタンの存在を知ってもらうことは重要ですからね。全体のデザイン的にもまとまった感じになるので、気に入った人はぜひ試してみてはどうでしょうか。coonelnel.net2017.07.2713、ブログカードをカスタマイズブログカードのデザインをちょっとカスタマイズするためのCSSセレクタを紹介します。本文の邪魔にならない程度にシンプルにしてみました。【Simplicity】ブログカードをカスタマイズするCSSセレクタSimplicityのブログカードをカスタマイズするCSSセレクタを紹介します。ブログカードを横幅いっぱいに変更したり、カードホバー時の色を変更したりと、実際のカスタマイズを例に見ていきたいと思います。coonelnel.net2017.08.0114、関連記事のデザインをカスタマイズ本文下にある関連記事のデザインをカスタマイズします。記事一覧同様シンプルなデザイン。サムネイルのサイズ変更もまとめてあります。【Simplicity】関連記事をカスタマイズ。サムネイルのサイズ変更とかSimplicityの関連記事デザインをカスタマイズしてみました。PHPファイルを使ってサムネイル画像のサイズを変更させた後に、CSSを使って全体のデザインをアレンジします。Simplicityの関連記事はコンパクトな割には、説明文が入っていてごちゃごちゃしてるんですよね。coonelnel.net2017.08.0715、おしゃれなモバイルメニューを設置プラグインを使っておしゃれなモバイルメニューを設置してみました。有効化するだけですぐに実装することが出来ます。設定画面より見た目のカスタマイズも可能。【Simplicity】モバイルメニューをおしゃれにカスタマイズするプラグインSimplicityのモバイルメニューをカスタマイズしたい。Menu」というプラグイン。有効化するだけでおしゃれなモバイルメニューが実装できます。プラグインの設定画面より、誰でも簡単に好みのデザインにカスタマイズできる手間をかけずにカスタマイズしたい人におすすめ。最初に出てくるh2タグの上に、アドセンス広告を2つ横並びに設置する方法を紹介。Simplicityは「投稿本文中ウィジェット」があるので簡単です。コンテンツ量が不十分な時は広告の貼りすぎに要注意。【Simplicity】h2タグ前にアドセンス広告を2つ横並びに表示させる方法Simplicityには、投稿記事中の最初に出てくる「h2タグ」の上にアドセンス広告を挿入する機能があります。今回はそこに広告を2つ横並びに表示させる方法を紹介。CSSで横並びのレイアウト済みなので、Simplicityの「投稿本文中ウィジェット」にコードを張り付けるだけです。アドセンス広告をきれいに挿入できます。文字リンクの頭に矢印のアイコンを付ける方法を紹介。リンクがパッと目に留まるようになるのでおすすめです。文字リンクの頭に矢印アイコンを付ける方法を紹介。リンク前にアイコンがあると目に留まりやすくなりますよね。Simplicityでブログを運営している方は、「FontAwesome」のアイコンフォントを使えば簡単に実装できます。手順は、アイコンを選んでコードを張り付けるだけ。アイコンを使って見やすいサイトにしましょう。coonelnel.net2017.11.0718、重要な文章にマーカー線を引く文章の重要な箇所にマーカーのような線を引く方法を紹介します。長文を書いている人はこれを実装することで、ユーザーが見やすい文章にすることが出来ると思いますよ。文章の要点が伝わりやすくなります。【Simplicity】文章の重要なところにマーカーのような線を引く方法WordPressで書いた文章の重要なところにマーカーのような線を引く方法を紹介します。文章の重要部分を際立たせることにより、長文も見やすくなります。マーカーを追っていくだけで、その記事の要点を読み取ることも出来るので、ユーザーの負担も激減。文字全体に色をかぶせるのではなく、下半分だけに色付きのラインが引かれるので見にくくなる心配もありません。Simplicityの場合はもともとクラス名「marker」に対して、文章の背景を黄色にするCSSがもともと備わっているので、それを使うのもありですね。CSSとHTMLを使いますが、初心者でもコピペで簡単に実装できるのでぜひ試してみてください。coonelnel.net2018.02.08カスタマイズの基本「HTML」と「css」を学ぶWordPressのデザインをカスタマイズしたいときは「HTML」と「css」の知識が必要。実はこの2つって他の難しいプログラム言語と比べ、簡単に理解することが出来るものなんです。上記Simplicityカスタマイズの各記事内で簡単に紹介はしていますが、一度基本知識に目を通してからの方が理解も進みますし、今後どんどんオリジナルのカスタマイズができるようになると思います。1、カスタマイズの基礎知識「HTML」HTMLはwebページ構成する枠組みを作るためのものです。デザイン変更するのはあくまで次に紹介するcssなんですが、HTMLを理解しておかないとcssも使えません。何度も言いますが超簡単なので、これからwebに携わっていく人は一度目を通してみることをおすすめします!あわせて読みたいHTMLを独学で学ぶ!web専門学校で学んだHTMLの基本まとめ2、カスタマイズの基礎知識「css」HTMLが理解できたらいよいよcssです。webページのレイアウトは全てこれでできます。基本知識とよく使うプロパティをまとめておきました!あわせて読みたいcss記述の基本「セレクタ」について。web専門学校で学んだcssの基本web制作でよく使うcssプロパティ。追記:Simplicityの後継Cocoonにテーマを移行しましたSimplicityの後継テーマCocoon(コクーン)がリリースされたので、テーマを移行しました。カスタマイズして愛着のあったSimplicityでしたが、Cocoonは現web環境に最適化されたテーマ。Simplicityと比べいろんな面でアップデートされてます。有料テーマにも匹敵する最強の無料テーマ。CocoonもSimplicity同様、カスタマイズのしやすさは抜群です。ブログ初心者や、サイトを独自にカスタマイズしたい人に特におすすめですね。無料テーマを使っている人ならだれもが気になる、有料テーマの話も少しまとめた記事も書きました。僕はこのサイト以外にも複数のサイトを運営しているんですが、simplicityのような無料テーマ以外に有料のテーマを使ってます。大体10,000円くらいするんですが、やっぱり有料テーマは扱いやすい。僕は自分でカスタマイズするのが楽しくて無料テーマも使ってますが、記事の執筆に集中したい人は有料テーマも検討してみる価値がありますね。あわせて読みたいSimplicity使いが有料テーマを使ってみて思うことWordPressで作ったブログサイトでいずれやりそうなカスタマイズWordPressでブログ運営している人なら、いずれやることになるかもしれないこともまとめます。どちらかというとこれは中級者向けかもしれません。1、WordPressをSSL化する方法WordPressで作ったサイトをSSL化する手順をまとめます。徐々にではありますが、GoogleによるSSL化サイトの優遇が発表されるようになってきました。やるつもりの人は早めにやっておくことをおすすめします。【WordPress】ロリポップの無料独自SSLを使ってサイトをSSL化する手順レンタルサーバー「ロリポップ」でも無料でサイトをSSL化することが出来るようになりました。そんなロリポップの独自SSL証明書を申し込み、WordPressのサイトをSSL化する手順をまとめした。SEO的にも問題なくサイトをSSLに移行する方法。WordPressの場合は出来るだけ早めにSSL化するのがおすすめです。coonelnel.net2017.09.072、サイト全体のパーマリンクを上手に一括変更する方法パーマリンクはサイト作成の最初の段階で決めるのが基本ですが、方法さえ間違えなければ上手く移行することが出来ます。しても変更したいときは参考にしてください。htaccess1行で一括リダイレクト!パーマリンクの上手な変更手順【WordPress】WordPressのパーマリンクを、SEOを維持したまま変更する方法を紹介。実は.htaccessファイルに1行追記するだけで、パーマリンクを変更しても簡単に301リダイレクトすることが可能です。記事数が多い場合も1つのコードで一括処理。WordPressのパーマリンク選びに失敗した方はぜひ試してみてください。coonelnel.net2017.07.04最後に簡単なものから少し手間のかかるものまで、ざっくばらんにまとめました。順番もごちゃごちゃですが、そこはご容赦を。他のSimplicityサイトでは見ないカスタマイズもあると思うので、ぜひ参考にしてみてください。徐々にブログサイトに合うようなデザインにしていきたいと思っておりますよ。カスタマイズTwitterFacebookはてブPocketLINE今村りょうCooNelNelスポンサーリンクスポンサーリンクスポンサーリンクスポンサーリンクプロフィール今村りょう普段は家でブログ、アフィリエイト、ネットショップをやってます。趣味は料理と家飲みです。きたうなぎを捌いて「蒲焼き」と「白焼き」を作ってみた2020.01.23民芸コンロを使ってちょっと贅沢な家飲みを!卓上七輪としても使えます2020.01.19焼き鳥との相性97%以上の日本酒「純米吟醸94(きゅうじゅうよん)」で家飲み!2020.01.13熊本馬刺しは熊本産じゃない!?「純熊本産馬刺し」は全国流通たったの1%2019.12.18ポテトサラダにクリームチーズを加えて居酒屋風ポテサラを作る!2019.11.29きびなごの刺身の漁師漬けが酒のつまみとして最高な件2019.11.21家でサーモンの藁焼きを作る!倍増した脂と燻した香りがたまらない2019.11.11プロフィール今村りょう料理が好きな家飲みブロガーです。お店ではなく、家でゆったり飲む「家飲み」の情報を発信中。普段は在宅でwebのお仕事してます!包丁に関する知識や、家で魚を捌いて食べる楽しさを発信する「包丁日記」も運営中。CooNelNel.。