現在このブログはSANGO＋PORIPU＋スターサーバーで運営しています。
この組み合わせで運営しているブログをなかなか見かけないため、現在私がこのブログでどんなことをしているかまとめてみました。
これから同じようにSANGO＋PORIPU＋スターサーバーでの運営を検討している方の参考になれば幸いです。
もくじ
このブログの環境
- サーバー：スターサーバー
(スタンダードプラン) - ドメイン：エックスドメイン
- テーマ：SANGO | 心地良さを追求したWordPressテーマ
- 子テーマ：PORIPUtears
- PHPバージョン：7.1.4
SANGO・PORIPU・スターサーバーについては下記エントリーでそれぞれ紹介しています。
functions.phpに追記しているもの
私がfunctions.phpに追記したものは下記の5つです。
コンテンツ内の非SSLのURLを表示前にSSL化する
参考 Wordpressサイトの内部リンクSSL対応（HTTPS化）をコードコピペでちょっと楽にする方法寝ログ上記エントリーで紹介されているコードで、コンテンツ表示前に下記の処理をを行っています。
- 内部リンクURLのSSL化
- Amazonアソシエイト画像のSSL化
- バリューコマース画像（インプレッション画像）のSSL化
- もしもアフィリエイト画像（インプレッション画像）のSSL化
- A8.net画像（インプレッション画像）のSSL化
- アクセストレード画像（インプレッション画像）のSSL化
- 古いはてなブログカードの iframe URLのSSL化
とりあえず、これだけはデータベースの置換作業を行わなくてもSSL化表示されるようにしてみました。
さらに
- アプリーチのSSL化
- 楽天アフィリエイトのSSL化
- 価格.comのSSL化
- カエレバのSSL化
を追記しています。
追記した4つはコードの貼り替えによっておそらく不要になっていると思うのですが、保険でそのままにしています。
アフィリエイトリンクを改変せずにボタンを使う
アフィリエイトのリンクをボタンにするために、下記エントリーを参考にコードを追記しています。
参考 【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法SANGOカスタマイズガイドContact Form 7のCSSとJavaScriptの出力を制御する
Contact Form 7はすべてのページでCSSとJavaScriptを読み込もうとします。
サイトが重くなる原因にもなりますので、コンタクトフォームのページのみCSSとJavaScriptを読み込むよう制御しています。
参考 CSS と JavaScript の出力を制御するブログ初心者応援サイト：Naifixこの記事を書いた人にAmazon欲しいものリストのアイコンを追加する
下記エントリーを参考に、Amazon欲しいものリストのアイコンを表示させるためのコードを追記しています。
楽天ROOMのアイコンの追加も可能です。
Googleのスマホ版で検索したときにアイキャッチの画像を表示させる
下記エントリーのコードを追記すると、検索結果にアイキャッチの画像が表示されたりされなかったりするそうです。
参考 【WordPress】Googleスマホ検索結果にサムネイル（アイキャッチ）画像を出す方法（コピペでOK）バビ論style.cssに追記したもの
私がstyle.cssに追記したものを紹介します。
見出しのカスタマイズ
h2・h3・h4の見た目を変える
参考 SANGOでデフォルトの見出しを変える方法SANGOカスタマイズガイド現在はサルワカさんのサイトで紹介されている見出しを参考に変更しています。
h3のタテ線はもともと指定されているものを活かしています。
参考 CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選サルワカ上部に見出しを追従させる
SANGOサポーター標準の機能ですが、アイコンを肉球にしたり、PCとスマホで表示を変えたりしています。
参考 SANGOサポーターの使い方【こじかWPプラグイン】SANGO Supporter 参考 【SANGOを自分でカスタマイズ】上に表示される目次をスマホとPCで切り替えるfor menおすすめ記事のPICKUPラベルを非表示にする
PORIPU公式サイトのよくある質問に記載されているものです。
参考 よくある質問 PORIPU-SANGO公認の子テーマ記事ページの更新マークに丸い背景をつける
同様に投稿日・読了時間にも丸い背景を付けています。
参考 記事ページの更新マークに丸い背景をつけるfor men目次のデザインを変える
目次のプラグインをTOC+からEasy Table of Contentsに変更しました。
目次の開閉ができませんが、きちんと設定すればTOC+と同じようなデザインにできますよ。
右下にちょこんと猫がいるのがお気に入りです。
追尾型目次にスクロールバーをつける
追尾型目次をスクロールできるようにします。
参考 【SANGOを自分でカスタマイズ】PCの追尾型目次をカスタマイズしてみたfor menふきだしBOXや注釈用ふきだしの色を変更する
デフォルトカラーが微妙に合わないため、カスタムの色をメインカラーに合わせています。
参考 追加タグのコード一覧PORIPU-SANGO公認の子テーマPORIPUtearsの下に出る吹き出しの名前の位置を変更する
名前の位置をアイコンの下ではなく横に変更しました。
参考 下に出る吹き出しの名前の位置とかを変更する（PORIPUtearsユーザー限定）for men吹き出しクリエイターと他のふきだしのアイコンの大きさを合わせる
吹き出しクリエイターのアイコンのほうが小さいため、もともと使っているふきだしのアイコンに大きさを合わせました。
このブログでは親子の会話でLINE風のふきだしをよく使っています。
引用時の見た目を変える
引用時のイタリック体をノーマルに
イタリック体が好きではないのでノーマルに変えています。
/* 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】ブログカードに「続きを読む」を追加するカスタマイズ節約ブログ『節約リッチ生活』アフィリエイトリンクをボタンにする
ボタンを表示するためにcssを追記します。
参考 【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法SANGOカスタマイズガイドコメント欄の見た目を変更
コメント欄のイタリック体をノーマルに
引用でもそうなんですが、イタリック体が好きではないのでその都度ノーマルに変えています(引用の字体もノーマルに変更しています)。
/* コメント欄の字体をnormalに */
.logged-in-as {
margin: 0;
font-style: normal;
}コメントの送信ボタンを左寄せにする
スパム対策に入れたInvisible reCAPTCHAのアイコン表示位置と合わせるために、左寄せに変更しました。
/* コメントフォームの送信ボタンを左寄せに */
.form-submit {
text-align: left;
}コメント欄やウィジェットタイトルのアイコンを変える
ほかのアイコンも同じ方法で応用すれば簡単に変更できますよ。
参考 ウィジェットタイトル前のアイコンを変更or消す方法SANGOカスタマイズガイドこの記事を書いた人に欲しいものリストのアイコンを追加する
アイコンを表示するためにcssを追記します。
参考 【SANGO】Amazonウィッシュリスト＆楽天ROOMにリンクを貼ろう！２【コピペ】さぶかるぐらしサイドバーのプロフィール画像の調整
現在のプロフィールアイコンを透過.pngで作っていただいたので、以前からやってみたかったゆうこりんさんのカスタマイズをそのまま取り入れました。
参考 プロフィール画像サイズを変更、枠線を消す方法【SANGO】ゆころぐサイドバーのSNSボタンを横長2列にする
プロフィールの下にあるボタンをカスタマイズしています。
参考 【SANGOを自分でカスタマイズ】SNSボタンを横長２列にしてみたfor menスマホにフッター固定の丸いシェアボタンを設置する
メニューボタンの横にシェアボタンを設置してみました。
色や透明度を少し変えています。
スマホにフッター固定の目次へ飛ぶボタンを設置する
メニューボタンを消して目次へ飛ぶボタンを設置したかったんですが、なぜかメニューを消すとトップへ戻るボタンが復活してしまうため、
諦めてメニューの上に設置しました。
謎のL字になってるのはそのためです。
少しアレンジしています。
スマホのフッター固定メニューをシンプルに
上2つの固定メニューを追加したためシンプルではなくなってしまいましたが、丸いのは可愛くてよきです。
参考 【SANGOを自分でカスタマイズ】モバイル用フッター固定メニューをシンプルにするfor menコンタクトフォームの送信ボタンを左寄せにする
コメント欄と同じ理由でコンタクトフォームの送信ボタンも左寄せにしています。
なぜかtext-align: left;でうまく行かなかったのでゴリゴリに調整しました。
/* コンタクトフォームの送信ボタンを左寄せに */
.wpcf7 input[type="submit"]{
margin: 0em 0em 0em 0em;
padding:.5em 8em;
}Rinkerのデザインをマクリンさんverにする
スマホでみたときの見た目が好みだったので変更しました。
参考 【ブログ月100万円の稼ぎ方】凡人でもそれなりの結果を出すための物販記事戦略マクリンアプリーチ新コードの見た目を他の商品リンクの見た目に合わせる
サーバーを移転するまで気づかなかったのですが、アプリーチでリンクを作る際、新コードと旧コードの2つのコードが表示されるようになりました。
PORIPUには旧コードのcssは記載されているのですが、新コードのcssはありません。
新コードの方がコードがスッキリしていて好きなので、新コードの見た目も他の商品リンクの見た目に合わせてみました。
ひつじさんが配布しているデザインパターン3のcssを参考に、ボーダーの部分のみborder: double 4px #dbdbdb;に変更しています。
参考 【コピペで完成】アプリーチのデザインCSS配布！全7種類用意したのでお好みをどうぞアフィリエイトの始め方｜初心者が月5万稼ぐ方法をすべて公開！くまさんのFANBOXで支援している人限定公開のカスタマイズ
くまさんのFANBOXでは支援者限定でいろんなカスタマイズを公開してくれています。
このブログでは下記のカスタマイズを導入しています。
- SANGO-見出しにジャンプしたときに上部固定見出しとh2を被らないようにする
- SANGO – 手順ボックス
- SANGO – 引用のデザイン
- SANGO – 外部リンク 色違いなど
- SANGO-ページャーを四角に（元は丸）
- SANGO – Instagramボタン
- SANGO – シェア時の背景を変更
さっちん.htaccessに追記したもの
2つ追記しています。
常時SSL化に必要なコード
スターサーバーのマニュアルに記載されている下記コードを一番上に貼り付けています。
<ifModule mod_expires.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>ブラウザキャッシュの設定
下記エントリーのコードをそのまま.htaccessの一番最後に追記しています。
参考 対処法8：ブラウザのキャッシュを活用するサルワカ | サルでも分かる図解説明マガジンさっちん続きはこちらからどうぞ。
SANGO＋PORIPU＋スターサーバーまとめ【後編】
コメントを残す