Joomla!のExtension関連のTipsなど。

使いやすい、スッキリとしたレイアウトのテンプレート。モジュールのポジションも、かなり用意されているので、便利。テンプレート管理画面も概ね日本語化されているのもグッド。

フリー版もありますが、機能的に多少制限があります。ここではPro版前提のメモを。

ダウンロード先と参照サイト

タグの書き換え

ソースを見ると、1行目にこんなのが書いてあります。

<!DOCTYPE html>

さすがに今どきこれは無いだろ… という事で書き換えます。書き換えるファイルは、

  • templates/jsn_solid_pro/index.php

これです。

タグの変更メモ

  • DTDの書き換え

    23行目あたりをこんな感じに書き換え。

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    PHPのエラーが起こる場合は、

    <?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>

    こうします。

  • metaタグの追加

    headタグの中に以下の2行を。

      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />

CSSファイルの追加

テンプレート管理の、SEO&システムの設定タブの、Custom CSS/JS File(s)で設定。ここに、mystyle.cssと入力すればすれば、

  • /Joomla!のルートフォルダ/templates/jsn_solid_pro/css/mystyle.css

が読み込まれます。もちろんここにCSSファイルをアップロードしないと駄目です。

各スタイルの修正メモ

やはり日本語環境で使うと、寸詰まりな印象を受けるのであちこち変更。

ここでは、テンプレートのCSSを直接編集するのではなく、追加したCSSに設定を加えていきます。

  • ヘッダのmarginとpaddingの調整

    ソーシャルアイコンが上方向に妙にpaddingを取っているのを消す&ロゴ画像によっては上にピッタリ張り付いてしまうので、marginを取る設定。

    #jsn-header {
      margin: 2em auto 0.5em auto;
    }
    
    #jsn-headerright {
     padding : 0;
    }
  • 記事コンテナのpaddingの調整

    記事が表示されるコンテナに、padding-right: 20pxが付いてるので、無くす… んですが、これがどういう意図でつけてるのかわからないので、問題おきたら戻したほうがいいかもしれません。

    #jsn-maincontent {
      padding: 0 !important;
    }
  • 記事中のmarginとpaddingの調整

    記事の中身が大分寸詰まりに見えるので、調整。ついでに、リストのpaddingが消されているので、そこも元に戻す感じで。

    #jsn-mainbody p,
    #jsn-mainbody pre,
    #jsn-mainbody blockquote,
    #jsn-mainbody form, 
    #jsn-mainbody dl, 
    #jsn-mainbody ul, 
    #jsn-mainbody ol, 
    #jsn-mainbody fieldset, 
    #jsn-mainbody address, 
    #jsn-mainbody table {
    	margin: 1em;
    }
    
    #jsn-mainbody dl, 
    #jsn-mainbody ul, 
    #jsn-mainbody ol {
    	padding: 0 1em;
    }

    #jsn-mainbodyを抜いて指定すると、メニューのスタイルがおかしくなるので、記事のコンテナを指定。

  • 見出しの調整

    見出しも詰まって見えるので、上方向に余裕を。

    #jsn-mainbody h3,
    #jsn-mainbody h4,
    #jsn-mainbody h5,
    #jsn-mainbody h6 {
      margin: 2em 0 0.5em 0;
    }
     

    見出しのレベルは、記事タイトルが2なので、3以下を指定。

  • font-familyの設定

    bodyあたりに自分でフォントの設定をしても、テンプレートの設定で上書きされてしまうため、その設定を上書きする必要があります。

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    #jsn-gotoplink,
    .page-header,
    .subheading-category,
    .componentheading,
    .contentheading,
    h3.jsn-moduletitle,
    ul.menu-treemenu li a,
    ul.menu-sidemenu li a,
    #jsn-menu a,
    #jsn-menu span {
      font-family: Meiryo, メイリオ !important;
     }

    こんな感じで。この設定自体どこにあるんだというと、

    • templates/jsn_solid_pro/css/styles/custom.css

    ここに入っています。

メインメニューでテキスト区切りを使う場合の修正

メニュークラスサフィックスで「menu-mainmenu menu-iconmenu menu-richmenu」を設定するわけですが、メニューアイテムの種類を「テキスト区切り」に指定すると、表示がズレます。

これは、メニューの解説を出す・出さないでまた表示が変わるので、注意を。メニューの解説とは、この画像の部分です。

まず、以下のファイルを開きます。

  • /jsn_solid_pro/html/mod_menu/default_separator.php

の30行目あたりの、

?><a href="javascript: void(0)" class="jsn-nodescription">

この部分を、

if ($item->note) {
	echo '<a href="javascript: void(0)">';
} else {
	echo '<a href="javascript: void(0)" class="jsn-nodescription">';
}
?>

とします。更に、38行目あたりの、

echo '<span class="jsn-menudescription">'.$item->anchor_title.'</span>';

を、

echo '<span class="jsn-menudescription">'.$item->note.'</span>';

に直します。

この、メニューの解説は、本来はメニューアイテムの「リンクのタイトル属性(Link Title Attribute)」の内容を表示するのですが、セパレーターにはこの項目自体が無いので、この例では代わりに「メモ(Note)」の内容を表示させています。

ログインフォームの表示変更

「パスワードを忘れましたか?」などの表示を消したい場合、

  • /jsn_solid_pro/html/mod_login/default.php

このファイルの中身をいじればOK。

Joomla!記事一覧

Template by JoomlaShine