カスタムメニューで作成した、サイドバーのデザインにつきまして

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など カスタムメニューで作成した、サイドバーのデザインにつきまして

このトピックには5件の返信が含まれ、2人の参加者がいます。5 日、 15 時間前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #56840 返信

    torui

    いつもお世話になっております。
    サイドバーについての質問です。

    「カスタムメニュー」を使い、任意の記事を選んでサイドバーを作ったのですが、デザインの変更がうまくいきませんでした。
    下記のサイトの「新着記事」ようなデザインにすることは可能でしょうか?
    サムネイル画像を出して,記事の間にラインを入れたいと思っておりますが、いろいろ試したのですがうまく反映されませんでした。
    http://technical.live-on.net/archives/2924

    下記のサイトの「音楽力の泉」のところをカスタマイズしたいと思っております。
    http://composer-instruments.com/

    お手数ではございますが、よろしくお願いいたします。

  • #56846 返信

    かうたっく

    「カスタムメニュー」を使い、任意の記事を選んでサイドバーを作った

    別の方法ですが、ウィジェットを使ってサイドバーにHTMLを書いてはどうでしょうか。

    WordPress投稿画面で画像を置いて、その画像にリンク。配置なしに。投稿画面のテキストを見ると以下のようにimgタグをaタグで囲む感じです。

    <a href="#">
    <img class="***" src="画像のパス" alt="" width="数字" height="数字" />
    タイトル</a>

    アンカーテキストタイトル</a>そのタイトルの文字列はspanで囲む感じに。それをリストにするなどどうでしょうか。

    <ul>
    	<li>

    <a href="#">
    <img class="***" src="画像のパス" alt="" width="数字" height="数字" />
    <span>タイトル</span></a>

    </li>
    	<li>次のコード</li>
    </ul>

    さらにタイトル属性を付けても良さそうですよね。
    <a href="#" title="タイトル">
    <img class="***" src="画像のパス" title="タイトル" alt="" width="数字" height="数字" />

    CSSで修正が必要でしたら、属性を付け加えるなど
    ビフォー
    <span>タイトル</span></a>
    アフター
    class属性を付けてスタイルを付けたい場合。<span class="side-title">タイトル</span></a>

    そのコードをウィジェット:カスタムHTMLでサイドバーに置いてHTMLをコピペすると簡単に実装できそうです。文で書くとややこしいですけど…^^;

    実装はHTMLだけで書くとハードル低そうです。※あとはCSSで調整する必要もあるかも知れません。

    何となくですが、コピペできない時点で既にハードルが高そうですね(ヽ”ω`)ゲッソリ 笑^^;

  • #56848 返信
    わいひら
    わいひら
    キーマスター

    「カスタムメニュー」を用いてサムネイル表示するのは機能的に無理なのではないかと思います。
    やるのであれば、テキストウィジェットにソースコードを書いてCSSでスタイリングするしかないかと思います。

  • #56850 返信

    かうたっく

    メニューのHTMLを確認すると、固有のid="menu-item-***" class="menu-item-***"があります。それを指定してリンク前に画像を置いて環境に合わせてスタイルを決めるなど試しても良いかもしれません。

    #menu-side .menu-item-*** a:before {
      content: url(画像のパス);
      /*色々スタイル調整*/
    }

    それか背景に画像を指定してleftでno-repeatなど指定しても良さそうかもです。多分検索したら、何かヒットするかもしれません。

  • #56967 返信

    torui

    お返事ありがとうございます。
    なるほど、、、
    カスタムメニューでは画像を引っ張って来れないのですね。
    一度htmlで試してみますね!!

  • #56980 返信

    かうたっく

    朝、WordPress Popular Postsのヘルプを見てたんですけど、WordPress Popular Postsを導入している場合限定ですが、HTMLを書かなくても良さそうかと思います。

    任意のおすすめ記事を数個だけ表示したいとき。

    ・他の記事には使用しないタグ(投稿ータグ)を追加。『例:おすすめタグ』(タグのidは例としてpost_tag&tag_ID=201とする)。
    ・WordPress Popular Postsウジェットのタクソノミー欄をおすすめタグidを追加:『201』。
    ・投稿設定欄:アイキャッチ画像を表示にチェック
    ・サイズを手動で指定 任意の幅・高さを指定

    順番は人気記事順になりますが、HTML・CSSは書かなくて済むから簡単で楽そうです。

返信先: カスタムメニューで作成した、サイドバーのデザインにつきまして
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)