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

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

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

これから同じようにSANGO+PORIPU+スターサーバーでの運営を検討している方の参考になれば幸いです。

もくじ

このブログの環境

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化表示されるようにしてみました。

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

さらに

  • アプリーチの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のアイコンの追加も可能です。

参考 【SANGO】Amazonウィッシュリスト&楽天ROOMにリンクを貼ろう!2【コピペ】さぶかるぐらし

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でEasy Table of Contentsの目次を表示するSANGOカスタマイズガイド 参考 目次部分にオリジナル画像を挿入してみたfor men

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

追尾型目次をスクロールできるようにします。

参考 【SANGOを自分でカスタマイズ】PCの追尾型目次をカスタマイズしてみたfor men

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

デフォルトカラーが微妙に合わないため、カスタムの色をメインカラーに合わせています。

参考 追加タグのコード一覧PORIPU-SANGO公認の子テーマ

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

名前の位置をアイコンの下ではなく横に変更しました。

参考 下に出る吹き出しの名前の位置とかを変更する(PORIPUtearsユーザー限定)for men

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

吹き出しクリエイターのアイコンのほうが小さいため、もともと使っているふきだしのアイコンに大きさを合わせました。
このブログでは親子の会話でLINE風のふきだしをよく使っています。

参考 ふきだしクリエーターこじかショップ本店 参考 プラグインの吹き出しクリエイターを使ってみたら最高だったfor men

引用時の見た目を変える

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

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

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

ラベルの色を変える

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

css
/* ラベル */
.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カスタマイズガイド

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

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

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

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

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

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

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

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

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

参考 ウィジェットタイトル前のアイコンを変更or消す方法SANGOカスタマイズガイド

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

アイコンを表示するためにcssを追記します。

参考 【SANGO】Amazonウィッシュリスト&楽天ROOMにリンクを貼ろう!2【コピペ】さぶかるぐらし

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

現在のプロフィールアイコンを透過.pngで作っていただいたので、以前からやってみたかったゆうこりんさんのカスタマイズをそのまま取り入れました。

参考 プロフィール画像サイズを変更、枠線を消す方法【SANGO】ゆころぐ

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

プロフィールの下にあるボタンをカスタマイズしています。

参考 【SANGOを自分でカスタマイズ】SNSボタンを横長2列にしてみたfor men

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

メニューボタンの横にシェアボタンを設置してみました。
色や透明度を少し変えています。

参考 【SANGO】スマホフッター固定の丸いシェアボタンを設置するバビ論

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

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

参考 ずっといる目次へGOボタンfor men

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

上2つの固定メニューを追加したためシンプルではなくなってしまいましたが、丸いのは可愛くてよきです。

参考 【SANGOを自分でカスタマイズ】モバイル用フッター固定メニューをシンプルにするfor men

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

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

css
/* コンタクトフォームの送信ボタンを左寄せに */
.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 – シェア時の背景を変更
さっちん
くまさんを応援したい方は下の応援ページをチェックしてね
参考 Support for-menfor men

.htaccessに追記したもの

2つ追記しています。

常時SSL化に必要なコード

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

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

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

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

参考 対処法8:ブラウザのキャッシュを活用するサルワカ | サルでも分かる図解説明マガジン
さっちん
長くなりそうなのでエントリーを2つに分けます。
続きはこちらからどうぞ。
SANGO+PORIPU+スターサーバーまとめ【後編】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です