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

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

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

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

このブログの環境

SANGO・PORIPU・スターサーバーについては下記エントリーでそれぞれ紹介しています。

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

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

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

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

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

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

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

さらに

を追記しています。

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

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

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

サイトが重くなる原因にもなりますので、コンタクトフォームのページのみCSSとJavaScriptを読み込むよう制御しています。

style.cssに追記したもの

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

見出しのカスタマイズ

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

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

h3のタテ線はもともと指定されているものを活かしています。

見出しの下の余白を広げる

見出しの下の余白が狭く感じたので少し広げました。

文字を太くする

特にPCで見たときの文字が見づらかったので、少し太くしました。

今回参考にさせていただいたひつじろぐさんもSANGO＋スターサーバーで運営されています。

ロゴの大きさを変える

スマホとPCでそれぞれロゴの大きさを変えています。

スマホ、大画面表示それぞれロゴ画像サイズを変えるのコードを参考に大きさを変えました。

関連記事のボックスの色を変える

関連記事のボックスの背景を薄いグレーに変更しました。

/* 内部リンクボックスの色を変える */
.linkto {
    background: #f5f5f5;
}

参考リンクボックスのアイコンの色を変える

サイトのカラーを変更したらアイコンの色が浮いてしまったので、アイコンの色を変更しました。

/* 参考リンクボックスのアイコンの色を変える */
.reference 
.refttl:before {
    color: #ff9398;
}

引用の見た目を変更

引用ボックスの枠の色を変える

デフォルトの枠の色が少し濃く感じたので薄くしています。

/*引用*/
.entry-content blockquote{
  border: solid 2px #BDBDBD;
}

引用ラベルの色を変える

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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント欄のアイコンもあわせて変更しています。

同じ方法で応用すれば簡単に変更できますよ。

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

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

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

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

ひつじさんが配布しているデザインパターン3のcssを参考に、ボーダーの部分のみborder: double 4px #dbdbdb;に変更しています。

.htaccessに追記したもの

2つ追記しています。

常時SSL化に必要なコード

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

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

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

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

SANGO＋PORIPU＋スターサーバーまとめ【後編】