elegant theme(エレガントテーマ) diviのおすすめカスタマイズ

シェアする

wordpress001

elegant theme(エレガントテーマ) diviのカスタマイズをまとめておきます。

子テーマを作成して運用しています。
WordPressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

スポンサーリンク

サイドバーの幅の変更

elegant theme(エレガントテーマ)のdiviって格好いいのですけど、
ちょっとサイドバーが狭いと感じる人がいるかもしれません。300pxのバナーが置けません。そこで広げる方法です。

/* サイドバーのサイズ調整 */
@media only screen and (min-width:1100px){
	div#left-area {
		width: 700px !important;
		margin-right: 30px;
	}
	div#sidebar {
		width: 320px !important;
	}
}

.et_right_sidebar #main-content .container:before {
	right: 350px;
}
スポンサーリンク

電子書籍のおすすめ比較

メニューのフォントサイズ変更

海外のテーマは日本語で利用するとフォントサイズを変更をしたくなることがしばしばあります。
メニューのフォントサイズを変更します。!importantをつけないとダメです。

li.menu-item{
	font-size: 16px !important; 
}
スポンサーリンク

フッターリンクの削除

フッターリンクの削除は許可されています。

#footer-info {display: none;}

プラグインtable of contents plusでアンカーのアドレスが表示されない

elegant theme(エレガントテーマ) diviでは、wordpressのプラグインtable of contents plusのアンカーのアドレスが表示されませんでした。 なんかやっているんだな、と(^^;。

プラグインtable of contents plusのカスタマイズはこちら!
table of contents plusのジャンプ先の位置がずれるため、アンカーの調整をしました。

もしかしたらソーシャルブックマークのアドレスが別になってしまうための対策かもしれませんが、うちはデメリット表示の方がよかったので、アンカーがしっかりと表示するようにしました。

調べたら

js/custom.js

に原因があり、jsファイルのこちらの部分を削除してあげればOKでしたね。

文字コードが欧米になっていたため、日本語コメントを入れる場合はUnicode(UTF-8)に変換します。

/*
Table of Contents Plusのアンカーアドレスが表示されないためコメントアウト

		$( 'a[href*=#]:not([href=#])' ).click( function() {
			if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) {
				return false;
			}

			if ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) {
				var target = $( this.hash );
				target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
				if ( target.length ) {
					et_pb_smooth_scroll( target, false, 800 );

					if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
							setTimeout(function(){
							et_pb_smooth_scroll( target, false, 200);
						}, 500 );
					}

					return false;
				}
			}
		});
*/

Elegant Themes(エレガントテーマ)のまとめ記事はこちらです。
Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

…追記予定

スポンサーリンク

シェアする

フォローする