カテゴリー: WEB & PC

BootStrapでcontainerの幅を変更する方法

レスポンシブWEBデザインを手軽に実現できるツールとして、BootStrapは大変助かってます。
あれだけ少ないコードの量で済むので、作業がとても楽なのです。
まぁ、ソース全体でみれば、bootstrapのライブラリ分があるので、サイトの重さ的には変わらないと思いますが。

さて、そこでデザインの話に行くわけですが、レスポンシブは基本可変グリッドを使うわけですけども、その際bootstrapでは、containerというクラスを使うと、ページの左右に余白を作ることができます。ただ、私としてはもう少し余白が欲しかったので、レスポンシブを維持したまま、PCビューの際は固定レイアウトのように、左右の余白を大きめに取れないかなと、色々調べてみたところ、container-fluidというクラスを使えば、要件が実現できることを知りました。

＜使い方＞

まず、現在「container」クラスを使っているところを、「container-fluid」に変更します。

そして、CSSで下記のように「container-fluid」を定義します。

.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 900px; //例えば
}

 

＜参考サイト＞

bootstrap – 固定レイアウトと可変レイアウト

以上、どうぞお試しあれ。

画像の下にできる隙間

スタイルシートを利用してデザインしていると、画像の下の方に妙な隙間ができることがある。
imgタグのmarginやpaddingを0にしても隙間が消えず、「なんじゃこりゃ」と思って色々探していると、どうやら「vertical-align」というものが悪さをしているようだ。いや、悪意はないんだろうけど。

この「vertical-align」というのは、行内における垂直方向に位置なんだそうだ。

たとえば「g」や「y」など、足が出るアルファベットが、ベースラインから足を突き出して表示するか、足までベースライン上に出すかを指定するものだ。

しかし、今回は画像のみで文字列は入力していないのだが、他に方法もないので、imgタグのスタイルに「vertical-align」を「bottom」にしてみた。

すると、隙間が消えた。
理由は不明だ。

Thunderbirdを立ち上げると、なぜか複数の画面が開く件

なぜこんな「隠れコマンド」みたいなものがあるのか理解に苦しむ。
確かに別ウィンドウで開いたことはあるが、何もその挙動を保存しなくてもいいんじゃないかと思う。

まぁ愚痴はこれくらいにして対処法と。。。
ちなみに今回対象となるバージョンは17.それ以前で複数画面が開きっぱなしになる不具合は記憶にない。

（１）不要な画面の「メニュー」→「閉じる」をクリック。

以上。
つまり、個別で開いたら、アプリ終了する前に都度閉じろということだ。しかもメニューから。

WordPressの管理バーで、不要な項目を削除する

覚書です。管理バー（画面上部に表示される黒帯部分）で、不要なものを片っ端から非表示にしていく方法です。
テーマのfunction.phpに記載します。

function mytheme_remove_item( $wp_admin_bar ) {
$wp_admin_bar->remove_node('updates'); // アップデート通知
$wp_admin_bar->remove_node('wp-logo'); // Wpロゴ
$wp_admin_bar->remove_node('comments'); // コメント
$wp_admin_bar->remove_node('site-name'); // サイトタイトル
$wp_admin_bar->remove_node('new-content'); // 新規投稿ボタン
$wp_admin_bar->remove_node('my-account');　// 右の部分全体を削除

//新規投稿ボタン内メニュー
$wp_admin_bar->remove_node('new-media'); // メディア
$wp_admin_bar->remove_node('new-link'); // リンク
$wp_admin_bar->remove_node('new-page'); // 個別ページ
$wp_admin_bar->remove_node('new-user'); // ユーザー

//管理バー右側のメニュー
$wp_admin_bar->remove_node('edit-profile'); // プロフィール編集
$wp_admin_bar->remove_node('user-info'); // ユーザー
$wp_admin_bar->remove_node('logout');　// ログアウトボタン
}
add_action( 'admin_bar_menu', 'mytheme_remove_item', 1000 );

 

【すばらしい！】寄稿者専用のダッシュボードを作成する

仕事で寄稿者専用のダッシュボードが必要になった。
管理用（adminやeditor向け）と何が違うかというと、

メニューは記事投稿、投稿一覧（もちろん自分の投稿のみ）、プロフィール編集のみ。

なので、できればダッシュボードそのものも使わせたくないが、
通常のページに投稿フォーム等を表示する能力が僕にはないもので、涙をのんでダッシュボードを利用する。

しかし、それでも必要ないメニューは消したいなと思ってネットをあさっていたら、下記のようなページを見つけた次第です。
もう、まさに自分が理想としていた内容だったので、早速利用させていただきました。

▽参考にしたページ
WordPress管理画面にオリジナルメニューを追加した時の手順メモ


（すいません。画像借りました。）

左メニューを丸ごと消して、必要なメニューのみ追加。
参考ページはリンクが4つだが、ソースやボタン素材を追加すればメニューも増える。

これで要件の1つは完了。

もう1つは操作後のリダイレクトページ。
これについては別記事に記録します。