★この記事にはPRが含まれます★

保護中: オリジナル子テーマセッティング方法

投稿日：2016年11月6日更新日：2018年1月13日

ネコティーチャー

WordPressのカスタマイズが好きです。魔改造したりプラグインやテーマを作ったりしています。

-アフィンガー4購入者限定記事

購入者より:

2016年11月16日 3:32 PM

昨日、特典付きでアフィンガーを購入し、今日色々やってみたのですが「記事一覧がカード型に表示させる方法」のやり方がわかりませんので教えてください。

返信
購入者より:

2016年11月16日 3:36 PM

すみません、もう一つ。「affinger4-child-export.dat」をインポートして使うように説明されていますが、「affinger4-child」というフォルダとその中のファイルの利用方法を教えてください

返信
- ネコティーチャーより:
  
  2016年11月16日 7:39 PM
  
  記事一覧をカード型に表示するには、このページの手順通り、子テーマ適用⇒プラグインインストール⇒affinger4-child-export.datをインポートしてください。
  ブラウザのキャッシュが残る場合がありますので、別ブラウザなどで更新してみてください。
  
  返信
  - 購入者より:
    
    2016年11月16日 10:41 PM
    
    このページに書かれた通りにやってもできませんでした。
    ただ、次の方法で試したらできました。
    
    tokuten.zipを解凍して出てきた「affinger4-child」というフォルダをZIP化し、それを子テーマとしてアップロード設定したら無事カード型に表示されました。
    
    正しいやり方かどうか分からず不安ですが、出来たので良かったです。
    ありがとうございました。
    
    返信
    - ネコティーチャーより:
      
      2016年11月16日 10:55 PM
      
      購入者　さま
      
      手順に漏れがあったようで、申し訳ありません！
      試していただいた、やり方であっています。
      
      記事の該当部分を修正しておきました。
      ご指摘ありがとうございました！
      
      返信
購入者より:

2016年11月24日 1:42 AM

お世話になります。
また質問なのですが、H2(見出し2)タグのところの色設定が反映されないのですが、私だけなのか他にエラーがあるのか分からないので確認して頂けますか？
参考画像(http://i.imgur.com/EKz8N16.png)

あと、カード型配置以外のデザインは全てアフィンガーに任せたいので、デザインなど含まないカード型配置だけの子テーマを頂けると嬉しいです。

返信
- ネコティーチャーより:
  
  2016年11月24日 8:55 PM
  
  購入者さん
  
  H2タグの色変えは、このページの「見出しの色を変更する」にありますように、CSSを編集する必要がございます。
  http://affinger.7oxd.com/child/set/#i-11
  
  カード型だけの子テーマ差分についてご意見ありがとうございます。
  購入者さんのようにカード部分だけを反映したいという需要が有りそうですから
  作成しましたら、購入者限定ページで配布しますね。
  
  返信
  - 購入者より:
    
    2016年12月6日 3:26 PM
    
    色の変更方法、アフィンガーの管理画面でできるとばかり思っていたので見逃してました。
    
    ありがとうございました。お返事も遅れてしまい大変失礼いたしました。
    
    返信
ポテコより:

2016年11月26日 4:57 PM

カード型にならないし、SNSボタンは見本のものみたいにグレーの小さいものにならない。
カード型にだけなるもの欲しいです。

それとSNSボタンのサイズやカラーも変えれるカスタマイズ記事お願いします。

返信
- ネコティーチャーより:
  
  2016年11月27日 2:57 AM
  
  ポテコさん
  
  カード型だけの物、需要あるようですね。
  カスタマイズについてのリクエスト、必ずお応えできるわけではありませんが、ありがとうございます！
  
  このページの手順に従ってもカード型とSNSボタン実装されませんでしょうか？
  キャッシュが結構しつこく残りますので、別ブラウザなどで見てみてください。
  
  それでも、変更されない場合はこちらのページからお問い合わせください。
  
  返信
  - ポテコより:
    
    2016年11月27日 2:19 PM
    
    カード型だけできました!!!
    
    tokutenのZIPファイルを解凍後、さらにsffinger4-child.zipを解凍して、functions.phpとitiran-thumbnail-on.phpをサーバーへ。jsフォルダをサーバへ。
    style.cssをクロームで表示させて、その中のカードのところをコピペで、できました。
    
    するとトップページに使ってる固定ページも幅がそろってしまったので、今はどこを修正もしくは足せばいいか探しています。
    
    もしかしたら、記事に対して表示するように指定しているのかと思っているので、新しく固定ベージは反映させないというコードを入れるのか、固定ページはこう反映させるというコードを入れる必要があるのか、ググっているところです。
    
    またヘッダーのところも追加できましたが、今はまたカスタイズ中です。
    
    返信
    - ネコティーチャーより:
      
      2016年11月29日 10:37 PM
      
      ポテコさん
      
      カード型にするだけのカスタマイズ方法をアップしましたので、よろしかったらご参照ください。
      http://affinger.7oxd.com/gentei/card02/
      
      返信
ミヤより:

2016年12月3日 3:31 AM

お世話になります。
このAffingerカスタマイズ講座のトップページのボックスの見出しである「アフィンガー基礎知識」や「アフィンガーのレビュー」は具体的にどうやって作成されているのでしょうか？どういったタグ・ショートコードを使ったか知りたいです。
また、トップページのボックスの中の個別記事へのリンクは手動でつけているのでしょうか？

返信
- ネコティーチャーより:
  
  2016年12月5日 1:30 AM
  
  ミヤさん
  
  トップの見出しは、アフィンガーに使われているfontawesomeを利用して作りました。
  http://fontawesome.io/icons/
  
  上記ページのコードをコピペすることで、好きな場所にアイコンを表示することができます。
```
アフィンガーのレビュー
```
  見出しは上記のような、コードで作成しています。
  この部分がアイコンの表示部分です。
  「fa-comments」部分を変更することで、好きなアイコンを表示させることが可能です。
  アイコン種類については、fontawesomeページをご参照ください。
  
  また、見出しの背景色をトップにだけ表示させないようにするCSSカスタマイズを少ししています。
  下記のcssを子テーマ内のstyle.cssに追加してください。
```
#home-contents h2 {
background: rgba(0, 0, 0, 0);
}
#home-contents h2:after,
#home-contents h2:before {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    border-top: 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
}
```
  トップページのボックスの中の個別記事へのリンクは、最初は手動で付けていましたが、今はfunction.phpに追加して外観メニューの内容を表示させています。
  
  こちらに、アフィンガーカスタマイズ講座の子テーマをアップしましたので、よろしかったらご利用ください。
  
  返信
  - ミヤより:
    
    2016年12月5日 7:12 AM
    
    ありがとうございます！
    早速挿入コンテンツにhtmlをいれたら、できました！
    ただ、datファイルがインポートできず「error importing settings!」と表示されるので、CSSが反映されません…
    カード型のdatファイルはインポートできるんですが、このdatファイルではエラーが出てしまいます…
    何かやり方が悪いのでしょうか？
    
    返信
    - ネコティーチャーより:
      
      2016年12月7日 8:06 PM
      
      ミヤさん
      
      datファイルの1行目に改行が入っていることがエラーの原因のようでした。
      修正データを上書きしましたので、そちらのデータをインポートしていただけますでしょうか。
      
      返信
      - ミヤより:
        
        2016年12月8日 6:27 AM
        
        ありがとうございます！無事反映しました。助かりました！
匿名より:

2017年1月15日 4:24 PM

お世話になっております．
先日，こちらからaffingerのテンプレートを購入させていただきました．
カード型の子テーマを適用をさせようと，
・テーマのアップロード（affinger4-child.zip）をし，
・プラグイン（Customizer Export/Import）のインストールする
ところまでいったのですが，
affinger4-child-export.datをインポートさせようとすると，
「このファイルタイプはセキュリティの観点から許可されていません。」とアラート画面が出てしまい，インポートすることができません．

もし解決策をご存知でしたら，ご教授お願いいたします．
以上，よろしくお願いいたします．

返信
- ネコティーチャーより:
  
  2017年1月17日 3:20 AM
  
  確認してみました。
  WPで最新版にアップデートすると、datがインポート出来なくなるようですね。
  プラグイン側で対応するのを待つしかないのですが、
  外観カスタマイズで手動でカード型の色味を設定できる手順を追加しておきます。
  
  返信
  - 匿名より:
    
    2017年1月17日 3:20 PM
    
    返信ありがとうございます！
    wordpressをインストールし直したら無事datファイルをインポートすることができました．
    子テーマ使わせていただきます！
    
    返信
カゲチヨより:

2017年1月17日 3:32 AM

はじめまして！
アフィンガーのカスタマイズについて、お聞きしたいことがあるのですが。
１コメント蘭のcommentの文字を変更したい。
２記事下にあるソーシャルボタンの下に関連コンテンツユニットや関連記事（プラグイン）を表示させたいのですが、何処にコードを張り付ければよろしいでしょうか？
３アフィンガー側の関連記事の抜粋を削除したい。
４スマホのみ記事タイトルの文字の大きさを変えたい。
色々とあつかましい質問ですが、よろしかったらご教示お願いします。

返信
ぱおより:

2017年1月28日 1:11 PM

始めまして。
カード型の子テーマを利用しようと思ったのですが、
・プラグイン（Customizer Export/Import）から「affinger4-child-export.dat」をインポートすることが出来ません。
またヘッダーメニューが横に2個しか表示されなく縦長になってしまいます。

ヘッダーメニューが横に2個表示されてしまうのは「affinger4-child-export.dat」をインポート出来てないからなのでしょうか。

大変申し訳ありませんが「affinger4-child-export.dat」をインポートできない際の対処法をご教授頂けないでしょうか。

どうぞ宜しくお願い致します。

返信
- ネコティーチャーより:
  
  2017年1月31日 3:22 AM
  
  Customizer Export/Importでdatファイルをインポートできない時の設定方法の記事を追加しました。
  http://affinger.7oxd.com/gentei/customizer/
  
  ヘッダーメニューが横に二個表示されてしまうという現象は、おそらくdatファイルと関連は無いかと思います。
  外観カスタマイズの設定をしても直らない場合、お問い合わせフォームから該当URLとインフォトップの購入者IDをお知らせの上、個別にご質問ください。
  
  返信
てつより:

2017年2月17日 5:22 AM

ウィジットですかね、文字とボタンがずれるのですが何が原因でしょうか？

返信
- ネコティーチャーより:
  
  2017年2月18日 10:50 PM
  
  文字がずれている状態は、どのような状態でしょうか？
  該当のページを教えて頂けますと、具体的なアドバイスができます。
  
  返信
まりもより:

2017年2月25日 10:59 AM

凄くわかりやすい説明ありがとうございます！ネコティーチャーさんから買ってよかった！

返信
やまより:

2017年5月20日 10:33 PM

お世話になっております。datをアップロードしたタイミングでサイト名とヘッダー画像が「×」のような表示になります。ヘッダー画像は選べば普通に出来るのですが、サイト名の表示がどうすれば戻るのかわからず苦戦しています。助言をいただけないでしょうか。よろしくお願いします。

返信
- ネコティーチャーより:
  
  2017年5月22日 10:35 PM
  
  ＷＰ管理画面⇒外観⇒カスタマイズ⇒ロゴ画像
  
  この部分でロゴ画像をアップロードして頂けますでしょうか。
  
  返信
やまより:

2017年5月27日 2:48 PM

お世話になっております。初心者のくせにいきなり5サイト作って全てこちらのカード型テーマを使わせていただいているほど気に入っております。
使っていく上で、サイト内容によっては、スマホトップ表示がカード型だと多少利便性が悪くなってしまうものが出てきました。
こちらの子テーマで、スマホだけカード型を解除する設定などは初心者では厳しいでしょうか？もし、難しいようなら、カード型じゃない子テーマに変更するのがベストでしょうか？子テーマでも変更すると記事やらカテゴリーやらの設定を色々やり直す必要が出ますでしょうか？

もし、そんなんじゃなくて、スマホでこういうやり方すればスッキリ見やすくなるんじゃない？という提案がネコティーチャー様からありましたら、そのへんを是非ご教授願いたいのですがよろしくお願いします。

返信
- ネコティーチャーより:
  
  2017年5月29日 9:34 PM
  
  スマホですと画像の分、スクロールが長くなって見ずらいという感じでしょうか？
  
  スマホのみ、カード型で無くすには、ＣＳＳのメディアクエリを利用すればできると思います。
  ご自身でやられるには、ＣＳＳに精通している必要があるため、かなりの上級者向けのカスタマイズになるかと思います。
  
  子テーマのみの変更は記事やカテゴリの設定をやり直す必要はないと思います。
  
  返信
やまより:

2017年5月29日 11:01 PM

はい、そういう意味でしたが、上級者向けなのですね。サイドバー扱いの新着5記事のようなスタイルをカード型の上に表示することは可能なのでしょうか？

もしくは上部に充実したメニューを作るのが現実的でしょうか

返信
- ネコティーチャーより:
  
  2017年5月30日 12:33 AM
  
  サイドバー扱いの新着5記事のようなスタイルをカード型の上に表示することは、PHPのカスタマイズを行うと出来ます。
  CSS以上に上級者向けのカスタマイズですが、PHPを勉強すればできない事はないです！
  
  PHPやCSSの勉強をするよりも上部に充実したメニューを設置する方が現実的かもしれないです。
  
  返信