facebook twitter hatena line email

「Cms/mediawiki/レスポンシブ化」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==mediawikiバージョン== 1.24.2 ==bootstrapのcssを追加== *skins/Vector/VectorTemplate.php $this->data['personal_urls'] = array_reverse( $this->data['per...」)
 
 
行2: 行2:
 
  1.24.2
 
  1.24.2
  
==bootstrapのcssを追加==
+
==twitter_bootstrapのcssを追加==
 
*skins/Vector/VectorTemplate.php
 
*skins/Vector/VectorTemplate.php
 
   $this->data['personal_urls'] =
 
   $this->data['personal_urls'] =
行9: 行9:
 
  // 追加start
 
  // 追加start
 
  $linkstr = <<<<nowiki />EOD
 
  $linkstr = <<<<nowiki />EOD
 +
<<nowiki />meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <<nowiki />link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 
  <<nowiki />link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 
  <<nowiki />link rel="stylesheet" type="text/css" media="screen" href="/skins/Vector/bootstrap_return.css" />
 
  <<nowiki />link rel="stylesheet" type="text/css" media="screen" href="/skins/Vector/bootstrap_return.css" />
行19: 行20:
 
     $this->html( 'headelement' );
 
     $this->html( 'headelement' );
  
 
+
==twitter_bootstrap.cssで崩れたデザインを戻すcssを追加==
 
*skins/Vector/bootstrap_return.css
 
*skins/Vector/bootstrap_return.css
 
  body {
 
  body {

2015年5月20日 (水) 08:15時点における最新版

mediawikiバージョン

1.24.2

twitter_bootstrapのcssを追加

  • skins/Vector/VectorTemplate.php
  $this->data['personal_urls'] =
    array_reverse( $this->data['personal_urls'] );
}
// 追加start
$linkstr = <<<EOD
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/skins/Vector/bootstrap_return.css" />
EOD;
$head = $this->get('headelement');
$head = str_replace("</head>", $linkstr."</head>", $head);
$this->set('headelement', $head);
// 追加end
   // Output HTML Page
   $this->html( 'headelement' );

twitter_bootstrap.cssで崩れたデザインを戻すcssを追加

  • skins/Vector/bootstrap_return.css
body {
 font: large sans-serif;
 background: #f9f9f9 0 0 no-repeat;
 color: black;
}
@media (max-width: 991px) {
 #mw-navigation h2 {
   font: x-large sans-serif;
   position: static;
   top: 0;
 }
 div#mw-panel {
   position: static;
   top: 0;
   padding-top: 1em;
   width: 10em;
   left: 0;
   font: x-large sans-serif;
 }
 #content {
   margin-top: 0;
   margin-left: 0;
 }
 #mw-page-base {
   height: 0;
 }
 #mw-head-base {
   margin-top: 0;
   margin-left: 0;
   height: 0;
 }
}


フッターは幅がでかいのでスマホ時に消す

footerをhidden-xs hidden-smで囲む

<div class="hidden-xs hidden-sm">
 <div id="footer" role="contentinfo"<?php $this->html( 'userlangattributes' ) ?>>
 略

ヘッダーのコンテンツ操作ボタンをスマホ時に消す

mw-headをhidden-xs hidden-smで囲む

   <div class="hidden-xs hidden-sm">
     <div id="mw-head">
       <?php $this->renderNavigation( 'PERSONAL' ); ?>
       <div id="left-navigation">
         <?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
       </div>
       <div id="right-navigation">
         <?php $this->renderNavigation( array( 'VIEWS', 'ACTIONS', 'SEARCH' ) ); ?>
       </div>
     </div>
   </div>

スマホ時のコンテンツフッターにページタイトルを追加

</div>
<!-- add -->
<div class="visible-xs-block visible-sm-block" align="center">
     <?php $this->get( 'title' ); ?>
</div>
<!-- /add -->
<div id="mw-panel">