Present the France Trip

トレンドニュースや炎上、考察、面白いアプリやグッズなどを紹介

【wordpress】CANDY CRAZY カスタマイズ!テクニックまとめ【stinger3】

   

screenshot

大分サイトを改装したので、まとめてみました。あと、これからやりたいことも後で見返せるようにこのページにちゃんと書いておこうと。

また改造するかもしれないですが。前回のカスタムはこんなかんじです。

wordpressで誰にも見られずカスタマイズ

こう見ると大してカスタムしてない・・・。現在では上の方法は使わずxserverを最初に作ったときに別のドメインが勝手作られているので、そっちをダミーページとしてwordpressをインストールしてカスタマイズしてます。

カスタマイズの前にバックアップが大切です。

何度泣いたことか。何度消えたことか・・・。何度修復に時間がかかったか!畜生このやろう。

というわけで、前回のカスタマイズ編バックアップについて読むことをおすすめします。

↑こういうのもいろいろ調べて出来るようになりました。やり方書いておきます。

最近はこのバックアップ方法は

SnapCrab_NoName_2015-5-30_17-16-3_No-00

もうこんなふうに別枠を作って用心深くバックアップしてます。一つカスタムしたら保存しておくと、直前に戻れて嬉しいです。

もうどうしようも無くなったら一気にこのファイルで上書きしちゃえば解決です。やったね。

カスタム1 見出し

見たまんまですがだいぶ見出しをカスタマイズしてます。

h2だよー

h3だよー

h4だよー

h5だよー
h6だよー

大分変えましたが、ダサさ抜けません。センスください。

見出しを変えると結構イメージ変わって嬉しいです。見出しのカスタマイズは

こういうところで良いデザインを見つけてコピペして使ってます。

私はCANDYCRAZYというstinger3の子テーマを使っていますが、stinger3のstyle.cssのh2タグをいじってます。

Ctrl+Fで見つかると思うんで、探してそこの記述を書き換えてみてください。smart.cssの方の見出しタグも一緒に変えてあげるとサイトと同じような表示になってデザインが統一されます。

カスタム2 フッター変えました。

SnapCrab_NoName_2015-5-30_19-42-39_No-00

今まで真っ黒だったフッターを星柄に変更してみました。なかなか可愛いです。

やり方は

#footer { background-image: url("images/footer_29_01.png"); }

こんな感じにCANDYCRAZYのCSSのフッターのカスタマイズのバックグラウンドのイメージを変えただけです。 簡単で可愛い。

カスタマイズ3広告

SnapCrab_NoName_2015-5-30_20-42-25_No-00

スポンサーリンク

ダブルレクタングルっていうテクニックらしいSNSの上に広告を2つ並べるテクニック。

やり方はちょっとここで書くと長いので、また他の回で書きます。

こうすると、広告をよく見てくれる人が増えるそうで。

スマホサイトの広告もいろいろいじってます。

IMG_7549IMG_7550

こんなかんじに、ブログタイトルの下に広告入れたり、moreタグの後に広告入れたり調整。

moreタグの後に広告

Quick Adsense Setting というプラグインを使用してます。

ダウンロードし有効化したら、

SnapCrab_NoName_2015-5-30_21-39-49_No-00

上から4番目のtag と書いてあるところをチェックし

SnapCrab_NoName_2015-5-30_21-40-2_No-00

ads1にグーグルアドセンスのレスポンシブ式のコードを入れてます。

リンク→グーグルアドセンス

そうすると、PC側とスマホ側で表示を変えてくれるようです。

サムネ付き引用

ここに詳しく載ってます。参考にしました。すごく見やすくリンクを貼れるようになりました。

SNSBOX変更

IMG_7551

かなり大きく変わりました。なぜかPC版では黒い点が着くんですけど、ulタグのせいだと思います・・・。そのうち直します。

いままでのデザインより可愛く押しやすくなりました。詳しくは

ここのサイトへ!ここのデザインは落ち着いてて綺麗にまとまってて真似したくなるような部分がたくさんあります。

参考になります・・・。ありがたや。個人的に書き換えた部分は

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {

}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {

/*-- ここまで --*/
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

の部分をstyle.css(PC側)のSNS設定には載せず、smart.css(スマホ側)のCSSにはこれを付けたまま書き換えました。
書き換えた結果トップページへ行くがぶっ飛びましたが、直し方がわかりません。
あとfooterに昔のSNSの入力画面が現れたので、footer.phpに記述してあったsnsbox02は消しました。

あまり私のやり方はマネしない方がいいかも・・・。

終わりに

大きくまとめたのはこんなものかなぁ?大分色々カスタマイズしましたが、あまりにもカスタマイズに熱を入れていると本業の記事執筆が手につかないのが悩みです。

CSSもPHPも初心者の私でもここまで色々出来たんで、どんどんカスタマイズして自分のサイトを作っていきまっしょう!

バックアップをちゃんと取るのが一番大事です。

        

ad

ad

  関連記事

92
Amazonアソシエイト・プログラム 受からない人へのアドバイス

スポンサーリンク やっとこさ、アマゾンのアソシエイト・プログラムに受かったので、 …

images
名前.comで独自ドメインの取得方法

お名前.com スポンサーリンク ドメインの取得 前回サーバー編でサーバー契約を …

stinger3-customize
stinger3をwordpressに適用させる。

スポンサーリンク wpXにwordpressをインストールする方法 前回wpxに …

reset
wordpressをリセットから復旧まで

スマホの表示がおかしいと嫌になるよね 何度やってもスマホサイトが なぜだかクソだ …

テスト
【TwitterにUP】バースト写真で簡単GIF動画の作り方【無料】

(トヨタ○○○○の回し者じゃないです) Twitterでも3MまでならGIF動画 …

images
wordpress 簡単バックアップ方法【画像たっぷり】

stinger3 子テーマ CANDY CRAZYの導入&カスタム方法 スポンサ …