現在このブログはSANGO＋PORIPU＋スターサーバーで運営しています。
この組み合わせで運営しているブログをなかなか見かけないため、現在私がこのブログでどんなことをしているかまとめてみました。
これから同じようにSANGO＋PORIPU＋スターサーバーでの運営を検討している方の参考になれば幸いです。
詳細は下記のエントリーをご覧ください。
- このブログの環境
- functions.phpに追記しているもの
- style.cssに追記したもの
- 見出しのカスタマイズ
- 上部に見出しを追従させる
- おすすめ記事のPICKUPラベルを非表示にする
- 記事ページの更新マークに丸い背景をつける
- 目次のデザインを変える
- 追尾型目次にスクロールバーをつける
- ふきだしBOXや注釈用ふきだしの色を変更する
- PORIPUtearsの下に出る吹き出しの名前の位置を変更する
- 吹き出しクリエイターと他のふきだしのアイコンの大きさを合わせる
- 引用時の見た目を変える
- 内部リンクのブログカードに続きを読むを追加する
- アフィリエイトリンクをボタンにする
- コメント欄の見た目を変更
- コメント欄やウィジェットタイトルのアイコンを変える
- この記事を書いた人に欲しいものリストのアイコンを追加する
- サイドバーのプロフィール画像の調整
- サイドバーのSNSボタンを横長2列にする
- スマホにフッター固定の丸いシェアボタンを設置する
- スマホにフッター固定の目次へ飛ぶボタンを設置する
- スマホのフッター固定メニューをシンプルに
- コンタクトフォームの送信ボタンを左寄せにする
- Rinkerのデザインをマクリンさんverにする
- アプリーチ新コードの見た目を他の商品リンクの見た目に合わせる
- くまさんのFANBOXで支援している人限定公開のカスタマイズ
- .htaccessに追記したもの
このブログの環境
- サーバー：スターサーバー
(スタンダードプラン) - ドメイン：エックスドメイン
- テーマ：SANGO | 心地良さを追求したWordPressテーマ
- 子テーマ：PORIPUtears
- PHPバージョン：7.1.4
SANGO・PORIPU・スターサーバーについては下記エントリーでそれぞれ紹介しています。
functions.phpに追記しているもの
私がfunctions.phpに追記したものは下記の5つです。
コンテンツ内の非SSLのURLを表示前にSSL化する
上記エントリーで紹介されているコードで、コンテンツ表示前に下記の処理をを行っています。
- 内部リンクURLのSSL化
- Amazonアソシエイト画像のSSL化
- バリューコマース画像（インプレッション画像）のSSL化
- もしもアフィリエイト画像（インプレッション画像）のSSL化
- A8.net画像（インプレッション画像）のSSL化
- アクセストレード画像（インプレッション画像）のSSL化
- 古いはてなブログカードの iframe URLのSSL化
とりあえず、これだけはデータベースの置換作業を行わなくてもSSL化表示されるようにしてみました。
さらに
- アプリーチのSSL化
- 楽天アフィリエイトのSSL化
- 価格.comのSSL化
- カエレバのSSL化
を追記しています。
追記した4つはコードの貼り替えによっておそらく不要になっていると思うのですが、保険でそのままにしています。
アフィリエイトリンクを改変せずにボタンを使う
アフィリエイトのリンクをボタンにするために、下記エントリーを参考にコードを追記しています。
Contact Form 7のCSSとJavaScriptの出力を制御する
Contact Form 7はすべてのページでCSSとJavaScriptを読み込もうとします。
サイトが重くなる原因にもなりますので、コンタクトフォームのページのみCSSとJavaScriptを読み込むよう制御しています。
この記事を書いた人にAmazon欲しいものリストのアイコンを追加する
下記エントリーを参考に、Amazon欲しいものリストのアイコンを表示させるためのコードを追記しています。
楽天ROOMのアイコンの追加も可能です。
Googleのスマホ版で検索したときにアイキャッチの画像を表示させる
下記エントリーのコードを追記すると、検索結果にアイキャッチの画像が表示されたりされなかったりするそうです。
style.cssに追記したもの
私がstyle.cssに追記したものを紹介します。
見出しのカスタマイズ
h2・h3・h4の見た目を変える
現在はサルワカさんのサイトで紹介されている見出しを参考に変更しています。
h3のタテ線はもともと指定されているものを活かしています。
上部に見出しを追従させる
SANGOサポーター標準の機能ですが、アイコンを肉球にしたり、PCとスマホで表示を変えたりしています。
おすすめ記事のPICKUPラベルを非表示にする
PORIPU公式サイトのよくある質問に記載されているものです。
記事ページの更新マークに丸い背景をつける
同様に投稿日・読了時間にも丸い背景を付けています。
目次のデザインを変える
目次のプラグインをTOC+からEasy Table of Contentsに変更しました。
目次の開閉ができませんが、きちんと設定すればTOC+と同じようなデザインにできますよ。
右下にちょこんと猫がいるのがお気に入りです。
追尾型目次にスクロールバーをつける
追尾型目次をスクロールできるようにします。
ふきだしBOXや注釈用ふきだしの色を変更する
デフォルトカラーが微妙に合わないため、カスタムの色をメインカラーに合わせています。
PORIPUtearsの下に出る吹き出しの名前の位置を変更する
名前の位置をアイコンの下ではなく横に変更しました。
吹き出しクリエイターと他のふきだしのアイコンの大きさを合わせる
吹き出しクリエイターのアイコンのほうが小さいため、もともと使っているふきだしのアイコンに大きさを合わせました。
このブログでは親子の会話で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;
}内部リンクのブログカードに続きを読むを追加する
続きを読むがあるだけでデザインが引き締まる気がします。
アフィリエイトリンクをボタンにする
ボタンを表示するためにcssを追記します。
コメント欄の見た目を変更
コメント欄のイタリック体をノーマルに
引用でもそうなんですが、イタリック体が好きではないのでその都度ノーマルに変えています(引用の字体もノーマルに変更しています)。
/* コメント欄の字体をnormalに */
.logged-in-as {
margin: 0;
font-style: normal;
}コメントの送信ボタンを左寄せにする
スパム対策に入れたInvisible reCAPTCHAのアイコン表示位置と合わせるために、左寄せに変更しました。
/* コメントフォームの送信ボタンを左寄せに */
.form-submit {
text-align: left;
}コメント欄やウィジェットタイトルのアイコンを変える
ほかのアイコンも同じ方法で応用すれば簡単に変更できますよ。
この記事を書いた人に欲しいものリストのアイコンを追加する
アイコンを表示するためにcssを追記します。
サイドバーのプロフィール画像の調整
現在のプロフィールアイコンを透過.pngで作っていただいたので、以前からやってみたかったゆうこりんさんのカスタマイズをそのまま取り入れました。
サイドバーのSNSボタンを横長2列にする
プロフィールの下にあるボタンをカスタマイズしています。
スマホにフッター固定の丸いシェアボタンを設置する
メニューボタンの横にシェアボタンを設置してみました。
色や透明度を少し変えています。
スマホにフッター固定の目次へ飛ぶボタンを設置する
メニューボタンを消して目次へ飛ぶボタンを設置したかったんですが、なぜかメニューを消すとトップへ戻るボタンが復活してしまうため、
諦めてメニューの上に設置しました。
謎のL字になってるのはそのためです。
少しアレンジしています。
スマホのフッター固定メニューをシンプルに
上2つの固定メニューを追加したためシンプルではなくなってしまいましたが、丸いのは可愛くてよきです。
コンタクトフォームの送信ボタンを左寄せにする
コメント欄と同じ理由でコンタクトフォームの送信ボタンも左寄せにしています。
なぜかtext-align: left;でうまく行かなかったのでゴリゴリに調整しました。
/* コンタクトフォームの送信ボタンを左寄せに */
.wpcf7 input[type="submit"]{
margin: 0em 0em 0em 0em;
padding:.5em 8em;
}Rinkerのデザインをマクリンさんverにする
スマホでみたときの見た目が好みだったので変更しました。
アプリーチ新コードの見た目を他の商品リンクの見た目に合わせる
サーバーを移転するまで気づかなかったのですが、アプリーチでリンクを作る際、新コードと旧コードの2つのコードが表示されるようになりました。
PORIPUには旧コードのcssは記載されているのですが、新コードのcssはありません。
新コードの方がコードがスッキリしていて好きなので、新コードの見た目も他の商品リンクの見た目に合わせてみました。
ひつじさんが配布しているデザインパターン3のcssを参考に、ボーダーの部分のみborder: double 4px #dbdbdb;に変更しています。
くまさんの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の一番最後に追記しています。
長くなりそうなのでエントリーを2つに分けます。
続きはこちらからどうぞ。
コメント