WordPress STINGER7

STINGER7:カスタマイズまとめ

eye_stinger7

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

【追記:2016.9.22】
各記事を順次STINGER Plusでも対応できるように修正しています。

導入編

テーマのインストールと初期設定

STINGER7/Plus:テーマのインストールと子テーマの使用方法

STINGER7/Plus:親テーマの任意のファイルを子テーマで編集する方法

STINGER7/Plusでブログを始める時に、最初に必要な設定はこれだけ!【WordPress超初心者向け】

WordPress:パーマリンクの設定は結局どうすればいいの?【初心者向け】

基本設定・記事の投稿

STINGER7/Plusの基本設定と記事の投稿 part.1【WordPress超初心者向け】

STINGER7/Plusの基本設定と記事の投稿 part.2【WordPress超初心者向け】

STINGER7/Plus:記事本文の文字サイズと行間を調整して読みやすくする方法

STINGER7/Plus:記事中と投稿編集画面の見出しデザインをカスタマイズする方法

STINGER7/Plus:投稿エディタで TinyMCE のフォントサイズを追加する方法

Google Analyticsの設定

STINGER7/Plus:Google Analyticsでアクセス解析をしよう!

OGPの設定

2016年版:WordPressでOGPを正しく簡単に設定する方法 [プラグイン不使用]

ファビコン・Webクリップアイコンの設定

STINGER7/Plus:ブラウザのブックマークやタブに独自アイコンをキレイに表示する方法

STINGER7/Plus:apple-touch-icon(Webクリップアイコン)を設置する方法

ヘッダーのカスタマイズ

STINGER7/Plus:ヘッダーを幅いっぱいに広げてオリジナルデザインにカスタマイズする方法

STINGER7:ヘッダーメニューをロゴ(ブログタイトル)の横に配置する方法

STINGER7:スマホ用ナビゲーションを横スクロールメニューに変える方法

サイドバーのカスタマイズ

STINGER7/Plus:サイドバーに自己紹介・プロフィール・画像を表示しよう!part.1【WordPress超初心者向け】

STINGER7/PLus:サイドバーに自己紹介・プロフィール・画像を表示しよう!part.2【WordPress超初心者向け】

STINGER7:サイドバーの見出しデザインをカスタマイズする方法

STINGER7:タグクラウドのデザインをカスタマイズする方法【サイドバーウィジェット】

STINGER7:サイドバーのカテゴリーをカスタマイズする方法【ウィジェット】

WordPress:サイドバーにSNSやfeedlyのオリジナルボタンをオシャレに設置!

簡単!WordPress Popular Postsでサイドバーに人気記事を追加しよう!

フッターのカスタマイズ

STINGER7:フッターのカスタマイズ【シンプル編】

投稿記事ページのカスタマイズ

STINGER7/Plus:SNSのシェア数を表示するためのプラグイン「SNS Count Cache」

STINGER7:記事下&トップページのシェアボタンをカスタマイズ!

記事一覧のカスタマイズ

STINGER7/Plus:トップページ記事一覧のサムネイル画像のサイズを変える方法

STINGER7:記事一覧をカード型にカスタマイズ【その1】

STINGER7:記事一覧をカード型にカスタマイズ【その2】

STINGER7:記事一覧をカード型にカスタマイズ【その3】

WordPress:ページ送り(ページネーション)をプラグイン無しで設置【スマホも1行表示】

コメント欄のカスタマイズ

STINGER7/Plus:コメント欄を非表示 or 最下部に移動する方法【超簡単】

STINGER7:コメント欄をカスタマイズする方法【シンプル掲示板風】

STINGER7:コメント欄をカスタマイズする方法【その2】

アフィリエイト関連

これは簡単!WordPressで最初のH2見出しの前にアドセンス広告を自動挿入

STINGER7:記事下にアドセンスを横並びで配置する方法【ダブルレクタングル】

WordPress:記事一覧ページにアドセンス広告を設置する方法

その他の役に立つカスタマイズ

WordPress:テーマを非公開でこっそり編集できる「Theme Test Drive」

WordPress:記事中にサムネイル付のリンク(ブログカード)を表示できるプラグイン「Celtispack」

WordPress:外部リンクに自動でアイコン&新しいタブで開く設定ができる「WP External Links」

WordPress:画像に文字をキレイに回り込ませる方法【スマホ対応】

脱初心者!WordPressのカスタマイズに便利な「Firebug」の使い方

WordPressのカスタマイズをするなら、ネット検索はもちろん有効ですが、まずは本で基本を勉強することをオススメします。
HTML、CSSなどの基本的な部分を習得するだけでも、ネット上にある記事の理解度がかなり変わってきますよ。

初心者の方でも分かりやすいオススメの本をご紹介します。

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

コメント

  1. vermut より:

    こんばんは!

    ワードプレスを始めたばかりで、しかもSTINGER7の編集方法が少ない中、とても参考にさせていただいています。ありがとうございます。

    質問なのですが、google以外のアクセス解析を試したく、解析コードを張り付けたいのですが、どうも張り付け方がおかしいらしくてサイトに反映されません。

    (header.php)の直下に解析コードを張り付ければいいとされていますが、私のやり方がおかしいのでしょうか?

    もしお時間があれば、コンテンツに他社アクセス解析ツールの解析コードの張り付け方をアップしていただけたら嬉しいです。

    これからも購読させていただきますので、どうぞよろしくお願いします!

  2. DICE より:

    vermut様

    コメントありがとうございます!
    お役に立てて幸いです!

    アクセス解析のコードですが、header.phpでしたら</head>のすぐ上に貼り付ければ大丈夫かと思いますので貼り付け場所の再確認をされてみてはいかがでしょうか?

    </head>のすぐ上に貼っても動かないようであれば、どこの会社のものか分かれば確実にお応え出来ると思います。
    何かあればまたご連絡ください(^^)

  3. vermut より:

    早々に対応いただいていたのに気づいていなくて失礼しました(;^ω^)

    先ほどアドバイスの通りにさせていただきましたらうまくできました!

    分かりやすいアドバイスありがとうございます!

    まだブログを始めたばかりでシステム関係が本当に意味不明なのですが、色々調べて少しずつ前進している最中です。

    また質問があればさせていただいてもよろしいですか?

    今回は本当にありがとうございました!!

  4. naomi より:

    初めまして!
    STINGER7のカスタマイズがしたくても、よくわからない初心者です。

    こんなにわかりやすく書いてくださってありがとうございます!
    こちらに載っているカスタマイズは、コピーして使っていいのでしょうか?

  5. DICE より:

    naomi様

    コメントありがとうございます!
    掲載しているコードはコピーして使っていただいて大丈夫ですよ!
    分からないことなどあればまたお気軽にコメントください(^^)

  6. naomi より:

    ありがとうございます!
    楽しくなってきました^^さっそく使わせていただきます。

  7. ケイ より:

    スティンガー7をやり始めたばかりの初心者です。
    こちらでいろいろ勉強させていただいています。
    ありがとうございます。
    ところで、
    アドセンスを記事下の中央にひとつ貼りたくて、
    header.phpを子テーマに移しました。
    その後、広告コードをどこに挿入すればよいかわかりません。
    ご指導頂けますでしょうか。
    よろしくお願いいたします。

  8. DICE より:

    ケイ様

    コメントありがとうございます!
    お役に立てて幸いです。
    アドセンスを記事下に貼る場合、1つだけならウィジェットを使うとすぐできますよ。

    1.管理画面メニューの「外観 → ウィジェット」を開く
    2.「投稿記事の下に一括表示」の項目に、左側にある「テキスト」のウィジェットをドラッグ&ドロップで入れる
    3.広告コードを貼り付けて保存

    これで記事下に表示されると思いますのでお試しください(^^)

  9. スペシャルミルク より:

    お世話になっています、スペシャルミルクです。
    いつも有益な記事とアドバイスありがとうございます。

    先日、カード型デザインで表示がおかしいという件で色々試したのですが、結局表示も直らず、原因もわからなかったので、Instant WordPressをアンインストールして、復習のためにもゼロからカスタマイズしようとしたのですが、stinger7がもうすでにダウンロードできなくなっていて、しかたなくplusの方を使い出したのですが、「ヘッダーをオリジナルデザインにカスタマイズする方法」の記事通りに進めると、うまく反映されないようなのですが、やはりplusには使えない方法なのでしょうか?

    今思えば、7のファイルを保存しておけば良かったと公開しています。作者の方が旧バージョンもダウンロードできるようにしてくれれば良いのですが。。。

    stinger関係を調べるときに、こちらDICE様のブログが一番分かりやすく、検索でも上位表示されるほどの良質なブログで、いつも効率よく勉強させて頂いています。今後plusの方のカスタマイズも記事にして頂くご予定はございませんでしょうか?どうぞ前向きなご検討宜しくお願い致します。

    • スペシャルミルク より:

      いつもありがとうございます。お世話になっています。
      plusの方でも同じ手順で、カード型デザインをブロック状にならべるカスタマイズができました!

      そこでお聞きしたいのですが、ブラウザのウィンドウサイズを変えたときに、それに伴ってタイトル文字の大きさも変化するようにしたいのですが、どのような記述をすれば宜しいでしょうか?

      あとデザインについてですが、カード全体の背景は白にして、写真下にあるタイトル部分にボックスの様なものを設けて背景を黒にして文字を白にしたいと思っています。
      そしてタイトルの一文字目だけフォントサイズを大きくして色を赤にしたいのです。
      下記のサイトの様な感じでデザインしたいのですが、可能でしょうか?

      ttp://jishin-yogen.com/

      昨日から20時間以上かけて調べても分からなかったのでご教授願いたいと思いまして、
      お時間があるときにでもアドバイス頂けたらとお願い申し上げます。

      • DICE より:

        お返事遅くなってすいません(^^;)

        まずタイトル文字の大きさですがこうなっているかと思います↓
        @media only screen and (min-width: 414px) {
        .itiran-custom dl h3 a {
        font-size: 20px;
        line-height: 1.4em;
        }
        }
        「@media〜」でスクリーンサイズの指定を調整してください。上記は「414px以上のウィンドウ幅ならフォントサイズ20px」という指定になります。

        カードのデザインは以下のコードで全体のボックスを背景白、タイトル部分を背景黒にできます。
        .itiran-custom dl {
        padding: 10px;
        background: #fff;
        }
        .itiran-custom dd {
        background: #000;
        }

        一文字目を大きくするのは以下のコードです↓
        .itiran-custom dl h3 a {
        display: inline-block;
        }
        .itiran-custom dl h3 a:first-letter {
        font-size: 2em;
        }

        他の日付やカテゴリなどは「カード型カスタマイズ【その2】」の記事を参考にしてください。頑張ってくださいね!

  10. スペシャルミルク より:

    DICE様、いつもご丁寧にありがとうございます!
    早速今晩に作業してみます!うわ~~嬉しすぎます!
    あとplus対応へ更新なさって下さった記事も拝見し、こちらも感謝でいっぱいです。

    今は作業するときはこまめにバックアップをとって、編集に失敗したら戻してまた編集にチャレンジする形で作業しています。あとphpやcssをいじるときは、コメントタグを入れてたりして自分で後で見ても分かりやすいようにしてはいるのですが、上手く反映されないと頭が真っ白になって焦ります^^;

    本当に少しずつですが、タグが何をしようとしているのか分かってきました。それもDICE様の記事が初心者にも分かるように、丁寧に分かりやすい言葉と図示で教示してくださっているおかげです。ありがとうございます。

  11. スペシャルミルク より:

    DICE様いつもお世話になっています。
    stingerのフォントサイズについてお聞きしたいのですが、プラグインのTinyMCE Advancedをインストールして有効にしても、記事編集時にフォントのプルダウンから選べるサイズの最大が18pxとなっています。
    これを48pxくらいまで増やしたいのですが方法をご存知でしょうか?
    どうぞ宜しくお願いいたします。

    • DICE より:

      だいぶ遅くなってすいません。
      もう解決されたかもしれませんが、記事追加しましたので見てみてくださいね。