アフィンガーを購入したので色々とカスタマイズしてみる

投稿日:2017年4月7日 更新日:

今までゼロからサイトの構築をしていたわけですが、正直面倒になったので『アフィンガー』なるものを購入してみました。

で、今までは自分で構築しているのでどこに何が記述してあって、どこからどこがレスポンシブデザインのブレイクポイントなのか? モバイルファーストなのか違うのか? なども把握していたのですが、全くわからない状態からのスタートとなってしまいます。

アイキャッチ画像も表示したらデフォルトの状態だと最上部+両サイドの幅に合わせた100%表示ですし、デザインいじくり回さないと個人的なやる気の問題で記事の更新すらできないんじゃね?

と思ったので、カスタムの備忘録として色々書き残していこうかなと思います。

スポンサーリンク

アフィンガーのPHPとCSSをカスタムしていく

子テーマで個別記事を編集する前に

まず最初にやりたいのはこれです。

個人的にはパンくずリストとかタイトルの下にあって欲しいので “single.php” の中身をいじらなければいけません。ですが、中を確認すると “single-type1.php" “single-type2.php" のどちらかからファイルを読み込むように定義されています。

single-type2.php" は特定のカテゴリーでのみ見た目を変えたい場合に使うファイルなので、通常の “single.php” の中身は “single-type1.php" となっています。

なので下記の部分を

include(TEMPLATEPATH . '/single-type1.php');

以下のように変更します。

include(STYLESHEETPATH . '/single-type1.php');

これで “single-type1.php” を子テーマに追加すると編集した部分が反映されるようになります

 

もしかすると変更しなくても反映されるかもしれませんが、私の環境では反映されませんでした。ですので、子テーマにファイル追加して改変しても反映されないぞ! という方は試してみてください。

投稿記事のアイキャッチの位置を変更する

変更する前だと、今現在書いている記事の見た目はこんな感じです。

アイキャッチ画像が表示され、その下にパンくずリスト。
その下部にタイトルがあり、その下には投稿日があって本文が始まります。

そこで、アイキャッチの表示位置を変更します。

single-type1.php" の10行目に以下のような記述があります。

<?php get_template_part( 'st-eyecatch' ); //アイキャッチ画像を挿入 ?>

これを80行目にある




<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>



の下へと持っていきます。するとアイキャッチの位置がこのように変わります。

これでパンくずリストやタイトルの下にアイキャッチ画像を持っていくことが出来ました。

ですが、このままでは画像にアイキャッチが重なってしまっているので子テーマのCSSに記述を追加します。

とりあえずPCから見たときの表示を変えてみるということで、

@media print, screen and (min-width: 960px) {

この部分に

/*-- 個別投稿アイキャッチの表示 --*/
	.st-eyecatch
	{	width:auto;
		max-width: 640px;
		margin: 0 auto;
	}

	.st-eyecatch img
	{	width: auto;
  		text-align:center;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	}

するとこんな感じになります。

上下に『margin』をつけていないのにタイトルに重なっています。

これは何故かというと、アフィンガーはHTMLやCSSを改変しなくてもそれなりにデザイン出来ますよ! と言うものなので、ゴリゴリ自分で設定を変更したい人は『AFFINGER4 管理』の項目から『オリジナルテーマカスタマイザーを使用する』のチェックを外さなくてはいけません

そして設定を外すと、以下のような表示になります。

これでしっかりとCSSが適用されるようになったわけですが、カスタマイザー機能を外しているのでヘッダー部分の色が変わってしまっています。

ヘッダー部分の改変記事はこちら

【AFFINGER】をベースにヘッダーをカスタマイズする

アフィンガーを自分でカスタムしていく過程で思ったことは、自分でカスタムしやすいようには作られていないということ。 これはHTMLやCSSを自由に弄り回せない人からすれば良いことなのだろうけれど、ある程 ...

続きを見る

【AFFINGER】ヘッダースペースにドロップダウンメニューを作る

どうも『ぽよまる』です。 今回はアフィンガーにデフォルトでついているメニューの位置が気に入らないので変更するついでに、自分で管理しやすいように自作してみようと思います。 自作と言ってもすることは少ない ...

続きを見る

フッタースペースを改変する。

先程記載しましたが、カスタマイザー機能のチェックを外しているのでヘッダーだけではなくフッターの色も初期の状態に戻ってしまっています。

ですので、これもCSSに記述を施して改変してやりましょう。

/*--------------------------------
フッターの設定
---------------------------------*/
	#footer{
		background: #333;
		color: #FFF;}

 

これでフッターの色が標準の色から黒系の色に変わり、文字が白くなっていると思います。

そして、個人的にはフッター部分にメニューを表示したくないのでこれを削除します。

削除方法は『st-footer-link.php』を子テーマにアップロードし、その中に記述されている内容を削除すればOKです。

ですがこれだけでは芸がないので、モバイル端末で見た時にフッターの上にカテゴリーやアーカイブが表示されるようにしてみましょう。

まず『functions.php』に以下の記述を追加します。

        register_sidebar( array(
            'id' => 'sidebar-31',
            'name' => 'モバイルフッター用エリア',
            'description' => 'モバイルのフッター上に表示されるコンテンツです',
            'before_widget' => '<div class="w2-footer-nav">',
            'after_widget' => '</div>',
             'before_title' => '<h4 class="w2-footer-menu">',
             'after_title' => '</h4>',
        ) );

これを追加することでウィジェットに新しく『モバイルフッター用エリア』という項目が追加されます。

そこに『検索』『カテゴリー』と『アーカイブ』をドロップダウン表示にチェックを入れて設置します。

そして先程の『st-footer-link.php』の中に、

<?php if ( st_is_mobile() ) : ?>
	<?php dynamic_sidebar(31); ?>
<?php endif; ?>

この用に記述してやれば、モバイル端末で表示したときのみ

このようにカテゴリーやアーカイブを選択できるボックスが表示できるようになります。

ですが、ここで終わってしまうと上記のような表示にはならず『カテゴリーを選択』『月を選択』といった文字が読めません。

フッターエリアの文字色を白にしてしまっているので、ここにもそれが適用されてしまっているのです。

なので、さらに下記のコードをスマートフォンでのみ適用させる箇所に追加します。

/*--------------------------------
フッターの設定
---------------------------------*/
.w2-footer-nav{margin-bottom:5px;
		color: #333;}
.w2-footer-nav .w2-footer-menu{display: none;}
.w2-footer-nav .screen-reader-text{display: none;}

これで上記の表示と同じになるはずです。

カテゴリー等をアコーディオンメニューに表示させるのであれば必要のない機能ですので、必要に応じて導入するようお願いします。

このブログのように見出しを変えたい場合

その場合はこちらの記事をご参照ください。

【AFFINGER】h1~h4までの見出しを変更する

今回はアフィンガーのカスタマイズということで、見出しのデザインを変更していきたいと思います。 別に元から設定してある見出しのままでも構わないのですけれど、やはり自分好みのデザインって誰しもありますよね ...

続きを見る

スポンサーリンク

-AFFINGER
-, ,

Copyright© ビブリオテーク , 2017 AllRights Reserved.