カテゴリー: 未分類

ウェブシュフでは、創設以来、similar postsプラグインを使って、投稿の後ろに関連記事リストを表示してきました。先日ふと思い立って、これをサムネイルつきリストにカスタマイズしたのでメモ。 (さらに…)

スマホでTwentyTwelveを閲覧している場合、デフォルトではmenuボタンを押すことでmenuがプルダウン表示されます。これを、menuボタンを押すことで予めページ下部に作っておいたメニューリストに飛んでいくように改造しました。

サイドバーにカスタムメニュー作成

管理画面で「外観」→「メニュー」と進んで「+」タブをクリックしてカスタムメニューを作成します。これについては以下のページがよくまとまっています。
[img-link url=”http://www.koikikukan.com/archives/2012/02/16-015555.php” title=”WordPress カスタムメニューの使い方（その1：基本）: 小粋空間”]
最後まで読んで、カスタムメニューをサイドバーに表示させるところまでやってください。するとスマホで閲覧時にページ下部にカスタムメニューが表示されるようになります。

デフォルトのmenuボタンを撤去

次に、classとしてmenu-toggleがあてられている以下のようなデフォルトのボタンをheader.phpから削除します。

<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

サイドバーのメニューへのページ内リンクを作る

次に、先ほど作ったカスタムメニューを実際に表示させてHTMLソースを見ます。

すると、カスタムメニューを囲むaside要素にidがつけられています。ウェブシュフの場合こんな感じになりました。

<aside id="nav_menu-3" class="widget widget_nav_menu">
<h3 class="widget-title">カテゴリー</h3>
<div class="menu-sidebar-container">
<ul id="menu-sidebar" class="menu">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
</aside>

aside要素のidを確認したら、先ほどボタンを撤去した跡地に、カスタムメニューへのページ内リンクを作ります。ウェブシュフは以下のようなリンクを作りました。

<a class="menu-mobile" href="#nav_menu-3">Menu</a>

これで、「Menu」というアンカーテキストで、カスタムメニューの場所まですっ飛んでいく、ページ内リンクが出来ました。

ページ内リンクにスタイルをあててボタン化する

このままでは、見た目はMenuというただのリンクテキストです。

そこで、styleをあてていきます。このリンクは、main-navigationというclassが当てられたボックスの中の、menu-mobileというclassが当てられたa要素なので、

.main-navigation a.menu-mobile

に対して、スタイルをあてていきます。スタイルはお好みにカスタマイズすればいいのですが、ウェブシュフは以下のようにしてみました。

.main-navigation a.menu-mobile{
    display: block;
    text-decoration:none;
    padding: 7px 10px;
    padding: 0.5rem 0.714285714rem;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.7142857;
    font-weight: bold;
    color: #ffffff;
    background-color: #000000;
    background-repeat: repeat-x;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    -khtml-border-radius:7px;
    border-radius:7px;
    -moz-border-radius:0.5rem;
    -webkit-border-radius:0.5rem;
    -khtml-border-radius:0.5rem;
    border-radius:0.5rem;
    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}

これを、style.cssの/* Navigation Menu */のところに書き込めば、冒頭の画像のようにポチっと押すとメニューリストまですっ飛んでいくようなボタンが出来ます。

しかし、このままだとスマホ以外の画面の幅が広いデバイスでも、MENUボタンが表示されてしまうので、/* Minimum width of 600 pixels. */のところに、以下のような記述を入れます。

.main-navigation a.menu-mobile{
display:none;
}

これで完成。

先日友人のサイトの制作を手伝ったときに、カスタム投稿タイプを設定しました。個人でブログサイトを運営している上ではほとんど使わない感じですが、商業向けのサイトをワードプレスで構築するにはとても便利です。その導入方法の備忘録です。 (さらに…)

久しぶりにyoutube動画を途中から再生する設定で埋め込もうとしたら、やり方を忘れていました。自分のためにメモを残します。 (さらに…)

Twenty Twelveのループ内では、get_template_partとget_post_formatを組み合わせた、get_template_part( ‘content’, get_post_format() );がcontent.phpを呼び出すようになっています。最初はよくわからなかったのでそのメカニズムをメモ。 (さらに…)

ある程度カスタマイズが進んできたので、全体のバランスを考えて、フォントサイズを調整してみました。 (さらに…)

以前から、ページ上部のグレー部分を削除やページの余白を削るなど余白調整関係の記事は以前にも書きました。
しかし、再調整することになったのでメモ。なお、上記2記事を踏まえたうえでないとよくわからん内容になっている可能性が高いのでご注意を。 (さらに…)

Twenty Twelveのカスタマイズを始めてから、ヘッダーは色々といじくってきました。今回は、デバイスの幅が広がるにつれて1カラム→2カラム→3カラムとレスポンシブな表示をするヘッダーにしてみました。 (さらに…)

スマホ閲覧時のmenuは色が付いてカラフルになっているのに、PC閲覧時のメニューバーはデフォルトのままにしていたウェブシュフです。スマホでもPCでも同様の色彩が再現されるよう、CSSをいじってみました。 (さらに…)

ワードプレスのfeedでは、デフォルトでは、各記事のtitle要素に記事タイトルしか含まれません。しかしそれだと情報不足になる場合もあるので、feedのテンプレートをカスタマイズする方法を調べてまとめてみました。 (さらに…)