SANGO+PORIPU+スターサーバーまとめ【前編】

現在このブログはSANGO+PORIPU+スターサーバーで運営しています。

この組み合わせで運営しているブログをなかなか見かけないため、現在私がこのブログでどんなことをしているかまとめてみました。

これから同じようにSANGO+PORIPU+スターサーバーでの運営を検討している方の参考になれば幸いです。現在はサーバーをConoHa WINGに移転し、テーマをCocoon+Season(シーズン)に変更しています。
詳細は下記のエントリーをご覧ください。テーマをCocoonに変更したのでカスタマイズやプラグインをまとめてみるよサーバー移転を機にテーマをCocoonに変更しました。以前、わいひらさんという方のSimplici…love-2nd.netスターサーバーからConoHa WINGに移転しましたサーバー更新のタイミングでこのブログのサーバーをスターサーバーからConoHa WINGに移転しました。きっか…love-2nd.net目次

スポンサーリンク

このブログの環境

  • サーバー:スターサーバー(スタンダードプラン)
  • ドメイン:エックスドメイン
  • テーマ:SANGO | 心地良さを追求したWordPressテーマ
  • 子テーマ:PORIPUtears
  • PHPバージョン:7.1.4

SANGO・PORIPU・スターサーバーについては下記エントリーでそれぞれ紹介しています。テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみたよブログのテーマをSTORKからSANGOに変えました。STORKはとってもいいテーマだと思いますし、今まで特に…love-2nd.netPORIPUはかゆいところに手が届くSANGO公認の子テーマですPORIPUというSANGO公認の子テーマがリリースされました。子テーマをリリースしたのはSANGOのカスタマ…love-2nd.netエックスサーバーからスターサーバーに移転しました先日このブログをスターサーバーに移転しました。結論からいうと費用をあまりかけないでWordPr…love-2nd.net

functions.phpに追記しているもの

私がfunctions.phpに追記したものは下記の5つです。

コンテンツ内の非SSLのURLを表示前にSSL化する

WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法WordpressサイトをHTTPS化した時に必要となる内部リンクURLや、画像・iframeの手軽なSSL対応方法の紹介です。Wordpressで、the_contentをフックしてコンテンツ表示前に置換して表示させる方法です。nelog.jp

上記エントリーで紹介されているコードで、コンテンツ表示前に下記の処理をを行っています。

  • 内部リンクURLのSSL化
  • Amazonアソシエイト画像のSSL化
  • バリューコマース画像(インプレッション画像)のSSL化
  • もしもアフィリエイト画像(インプレッション画像)のSSL化
  • A8.net画像(インプレッション画像)のSSL化
  • アクセストレード画像(インプレッション画像)のSSL化
  • 古いはてなブログカードの iframe URLのSSL化

とりあえず、これだけはデータベースの置換作業を行わなくてもSSL化表示されるようにしてみました。

引用WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法

さらに

  • アプリーチのSSL化
  • 楽天アフィリエイトのSSL化
  • 価格.comのSSL化
  • カエレバのSSL化

を追記しています。

追記した4つはコードの貼り替えによっておそらく不要になっていると思うのですが、保険でそのままにしています。

アフィリエイトリンクを改変せずにボタンを使う

アフィリエイトのリンクをボタンにするために、下記エントリーを参考にコードを追記しています。【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法SANGOにはたくさんの種類のボタンが用意されています。これらのボタンは、リンクタグに対して、クラス名を追加することで装飾が施されています。 しかし、一部のアフィリエイトサービスではリンクタグの改変が禁止されている場合が …saruwakakun.com

Contact Form 7のCSSとJavaScriptの出力を制御する

Contact Form 7はすべてのページでCSSとJavaScriptを読み込もうとします。

サイトが重くなる原因にもなりますので、コンタクトフォームのページのみCSSとJavaScriptを読み込むよう制御しています。Contact Form 7のCSSデザインとカスタマイズ方法WordPress人気プラグイン「Contact Form 7」の基本的な設定方法と、スパム対策・プレースホルダー設定などのカスタマイズ、CSSデザインを解説。ブログのスタイルに合わせて、かっこいい問い合わせフォームを作ってみましょう。naifix.com

この記事を書いた人にAmazon欲しいものリストのアイコンを追加する

下記エントリーを参考に、Amazon欲しいものリストのアイコンを表示させるためのコードを追記しています。
楽天ROOMのアイコンの追加も可能です。https://cubkitson.net/blog/sango-wishlist-room2/cubkitson.net

Googleのスマホ版で検索したときにアイキャッチの画像を表示させる

下記エントリーのコードを追記すると、検索結果にアイキャッチの画像が表示されたりされなかったりするそうです。【WordPress】Googleスマホ検索結果にサムネイル(アイキャッチ)画像を出す方法(コピペでOK)Googleのスマホの検索結果に記事のサムネイル(アイキャッチ)画像を出す方法を紹介しています。コピペで簡単に導入できるので、このカスタマイズで集客効果を高めましょう。shikamori-p.com

style.cssに追記したもの

私がstyle.cssに追記したものを紹介します。

見出しのカスタマイズ

h2・h3・h4の見た目を変える

SANGOでデフォルトの見出しを変える方法SANGOではデフォルトの見出しは以下のようになっています。 目次見出し2(h2)見出し3(h3)デフォルトの見出しのデザインを変えてみよう見出しデザインを探そうセレクタを修正保存してキャッシュを削除無事反映された!色を …saruwakakun.com

現在はサルワカさんのサイトで紹介されている見出しを参考に変更しています。

h3のタテ線はもともと指定されているものを活かしています。CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。saruwakakun.com

上部に見出しを追従させる

SANGOサポーター標準の機能ですが、アイコンを肉球にしたり、PCとスマホで表示を変えたりしています。SANGOサポーターの使い方【こじかWPプラグイン】インストール方法 プラグインを入手したら、まずはWordPressにインストールして有効化しましょう。 インストール手順はこちらの記事で紹介しています。 設定ページ インストールが完了すると、WordPressの管理メニ …kojikalog.com【SANGOを自分でカスタマイズ】上に表示される目次をスマホとPCで切り替えるWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回は追尾型の目次をカスタマイズした方法について解説します。for-men.jp

おすすめ記事のPICKUPラベルを非表示にする

PORIPU公式サイトのよくある質問に記載されているものです。よくある質問PORIPUは正常な状態のSANGOをベースに作成された子テーマです。 親テーマにて自作されたカスタマイズを一…oldno07.com

記事ページの更新マークに丸い背景をつける

同様に投稿日・読了時間にも丸い背景を付けています。記事ページの更新マークに丸い背景をつけるWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回は更新マークに丸い背景を追加した方法について解説します。for-men.jp

目次のデザインを変える

目次のプラグインをTOC+からEasy Table of Contentsに変更しました。
目次の開閉ができませんが、きちんと設定すればTOC+と同じようなデザインにできますよ。
右下にちょこんと猫がいるのがお気に入りです。SANGOでEasy Table of Contentsの目次を表示するSANGOではこれまで目次プラグインとして「Table of Contents Plus(TOC+)」に対応していました。しかし、TOC+は3年以上アップデートされておらず、WordPressとの互換性やセキュリティの問 …saruwakakun.com目次部分にオリジナル画像を挿入してみたWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回は目次にさり気なく画像をプラスした方法について解説します。for-men.jp

追尾型目次にスクロールバーをつける

追尾型目次をスクロールできるようにします。【SANGOを自分でカスタマイズ】PCの追尾型目次をカスタマイズしてみたWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回はPCで閲覧したときにサイドバーにある目次をスクロールに変更した方法について解説します。for-men.jp

ふきだしBOXや注釈用ふきだしの色を変更する

デフォルトカラーが微妙に合わないため、カスタムの色をメインカラーに合わせています。追加タグのコード一覧ふきだし 追加CSSデザインをまとめます。PORIPUならコードを貼るだけでOKです。 投稿画面のテキストエデ…oldno07.com

PORIPUtearsの下に出る吹き出しの名前の位置を変更する

名前の位置をアイコンの下ではなく横に変更しました。下に出る吹き出しの名前の位置とかを変更する(PORIPUtearsユーザー限定)WordPressテーマSANGOのちょっとしたカスタマイズを紹介します。この記事ではPORIPUtearsの下に出る吹き出しをカスタマイズした方法について解説します。for-men.jp

吹き出しクリエイターと他のふきだしのアイコンの大きさを合わせる

吹き出しクリエイターのアイコンのほうが小さいため、もともと使っているふきだしのアイコンに大きさを合わせました。
このブログでは親子の会話でLINE風のふきだしをよく使っています。ふきだしクリエーター動作条件 PHP 5.6.x 以上 WordPress 4.9.x 以上  store.kojikalog.comプラグインの吹き出しクリエイターを使ってみたら最高だったWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回はSANGOの吹き出しを作るプラグイン「吹き出しクリエイター」をちょこっとだけカスタマイズした方法について解説します。for-men.jp

引用時の見た目を変える

引用時のイタリック体をノーマルに

イタリック体が好きではないのでノーマルに変えています。

/* citeの字体をノーマルに */
cite {
    font-style: normal;
}

ラベルの色を変える

Simplicityのときから使っている引用と書かれたラベルの色をサイトカラーに合わせて変更しました。

/* ラベル */
.sankou {
    position: relative;
    margin: 0 10px 0 3px;
    padding: 3px 5px;
    color: #ffffff;
    background: #6f6f6f;
    font-weight: bold;
    font-size: 0.7em;
}
.sankou:before{
    margin: 0 3px 0 0;
    content: \f00c;
    font-family: FontAwesome;
    color: #ffffff;
}

内部リンクのブログカードに続きを読むを追加する

続きを読むがあるだけでデザインが引き締まる気がします。【SANGO】ブログカードに「続きを読む」を追加するカスタマイズSANGOのショートカードで生成できる「ブログカード」はおしゃれですが、リンクであることがユーザーに伝わりにくいという問題があります。そこで、ブログカードに「続きを読む」という言葉をたして、視認性をアップさせました。ついでに、影をつけて浮いsetsuyaku-rich.com

アフィリエイトリンクをボタンにする

ボタンを表示するためにcssを追記します。【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法SANGOにはたくさんの種類のボタンが用意されています。これらのボタンは、リンクタグに対して、クラス名を追加することで装飾が施されています。 しかし、一部のアフィリエイトサービスではリンクタグの改変が禁止されている場合が …saruwakakun.com

コメント欄の見た目を変更

コメント欄のイタリック体をノーマルに

引用でもそうなんですが、イタリック体が好きではないのでその都度ノーマルに変えています(引用の字体もノーマルに変更しています)。

/* コメント欄の字体をnormalに */
.logged-in-as {
    margin: 0;
    font-style: normal;
}

コメントの送信ボタンを左寄せにする

スパム対策に入れたInvisible reCAPTCHAのアイコン表示位置と合わせるために、左寄せに変更しました。

/* コメントフォームの送信ボタンを左寄せに */
.form-submit {
    text-align: left;
}

コメント欄やウィジェットタイトルのアイコンを変える

ほかのアイコンも同じ方法で応用すれば簡単に変更できますよ。

この記事を書いた人に欲しいものリストのアイコンを追加する

ウィジェットタイトル前のアイコンを変更or消す方法SANGOでは「一部のウィジェットのタイトル前」にアイコンが表示されるようになっています。このアイコンにはFontAwesomeというWebフォントを使っています。 今回は、このアイコンを「変更したり」「消したり」「(も …saruwakakun.com

アイコンを表示するためにcssを追記します。https://cubkitson.net/blog/sango-wishlist-room2/cubkitson.net

サイドバーのプロフィール画像の調整

現在のプロフィールアイコンを透過.pngで作っていただいたので、以前からやってみたかったゆうこりんさんのカスタマイズをそのまま取り入れました。プロフィール画像サイズを変更、枠線を消す方法【SANGO】yucorin.com

サイドバーのSNSボタンを横長2列にする

プロフィールの下にあるボタンをカスタマイズしています。【SANGOを自分でカスタマイズ】SNSボタンを横長2列にしてみたWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回はプロフィール部分のSNSボタンをちょっとオシャレにカスタマイズした方法について解説します。for-men.jp

スマホにフッター固定の丸いシェアボタンを設置する

メニューボタンの横にシェアボタンを設置してみました。
色や透明度を少し変えています。【SANGO】スマホフッター固定の丸いシェアボタンを設置するこのページでは、SANGOのフッター固定メニューをシンプルに丸い「メニュー」と「シェアボタン」だけにするカスタマイズを紹介しています。 最近はSNSなどでシェアするため、ユーザーがシェアボタンを利用することが多くなってい …shikamori-p.com

スマホにフッター固定の目次へ飛ぶボタンを設置する

ずっといる目次へGOボタン目次へ戻ることができるボタンをつくりました。今回はスマホ表示の時に固定で出てくるようにしています。for-men.jp

メニューボタンを消して目次へ飛ぶボタンを設置したかったんですが、なぜかメニューを消すとトップへ戻るボタンが復活してしまうため、
諦めてメニューの上に設置しました。
謎のL字になってるのはそのためです。
少しアレンジしています。

スマホのフッター固定メニューをシンプルに

上2つの固定メニューを追加したためシンプルではなくなってしまいましたが、丸いのは可愛くてよきです。【SANGOを自分でカスタマイズ】モバイル用フッター固定メニューをシンプルにするWordPressテーマSANGOのちょっとしたカスタマイズを紹介します。今回はスマホの固定フッターをシンプルにカスタマイズした方法について解説します。for-men.jp

コンタクトフォームの送信ボタンを左寄せにする

コメント欄と同じ理由でコンタクトフォームの送信ボタンも左寄せにしています。
なぜかtext-align: left;でうまく行かなかったのでゴリゴリに調整しました。

/* コンタクトフォームの送信ボタンを左寄せに */
.wpcf7 input[type="submit"]{
  margin: 0em 0em 0em 0em;
  padding:.5em 8em;
}

Rinkerのデザインをマクリンさんverにする

スマホでみたときの見た目が好みだったので変更しました。【ブログ月100万円の稼ぎ方】凡人でもそれなりの結果を出すための物販記事戦略ブログ開始2年にして月100万円以上の確定収益に到達しました。しかもその収益のほとんどは、Amazon・楽天などの物販アフィリエイトによるものです。当ブログ【マクリン】では、ブログで収益をあげたい人のご参考になればと思い、僕が行った具体的な手法・戦略・稼ぎ方を書き残していきます。makuring.com

アプリーチ新コードの見た目を他の商品リンクの見た目に合わせる

サーバーを移転するまで気づかなかったのですが、アプリーチでリンクを作る際、新コードと旧コードの2つのコードが表示されるようになりました。

PORIPUには旧コードのcssは記載されているのですが、新コードのcssはありません。

新コードの方がコードがスッキリしていて好きなので、新コードの見た目も他の商品リンクの見た目に合わせてみました。

ひつじさんが配布しているデザインパターン3のcssを参考に、ボーダーの部分のみborder: double 4px #dbdbdb;に変更しています。【コピペで完成】アプリーチのデザインCSS配布!全7種類用意したのでお好みをどうぞ|ひつじアフィリエイトここでは「アプリーチ」のデザインCSSを無料配布しています! アプリーチってめちゃくちゃ便利なんですが、デフォルトデザイhituji-affiliate.com

くまさんのFANBOXで支援している人限定公開のカスタマイズ

くまさんのFANBOXでは支援者限定でいろんなカスタマイズを公開してくれています。
このブログでは下記のカスタマイズを導入しています。

  • SANGO-見出しにジャンプしたときに上部固定見出しとh2を被らないようにする
  • SANGO – 手順ボックス
  • SANGO – 引用のデザイン
  • SANGO – 外部リンク 色違いなど
  • SANGO-ページャーを四角に(元は丸)
  • SANGO – Instagramボタン
  • SANGO – シェア時の背景を変更

さっちん

くまさんを応援したい方は下の応援ページをチェックしてねSupport for-menありがとうのページ。for-men.jp

.htaccessに追記したもの

2つ追記しています。

常時SSL化に必要なコード

スターサーバーのマニュアルに記載されている下記コードを一番上に貼り付けています。

<ifModule mod_expires.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

ブラウザキャッシュの設定

下記エントリーのコードをそのまま.htaccessの一番最後に追記しています。