Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › カスタムメニューで作成した、サイドバーのデザインにつきまして
- このトピックには5件の返信、2人の参加者があり、最後に
かうたっくにより8年、 10ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年11月12日 9:34 PM #56840
torui
ゲストいつもお世話になっております。
サイドバーについての質問です。「カスタムメニュー」を使い、任意の記事を選んでサイドバーを作ったのですが、デザインの変更がうまくいきませんでした。
下記のサイトの「新着記事」ようなデザインにすることは可能でしょうか?
サムネイル画像を出して,記事の間にラインを入れたいと思っておりますが、いろいろ試したのですがうまく反映されませんでした。
http://technical.live-on.net/archives/2924下記のサイトの「音楽力の泉」のところをカスタマイズしたいと思っております。
http://composer-instruments.com/お手数ではございますが、よろしくお願いいたします。
-
2017年11月13日 6:36 PM #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で調整する必要もあるかも知れません。
何となくですが、コピペできない時点で既にハードルが高そうですね(ヽ”ω`)ゲッソリ 笑^^;
-
2017年11月13日 7:54 PM #56848
わいひらキーマスター「カスタムメニュー」を用いてサムネイル表示するのは機能的に無理なのではないかと思います。
やるのであれば、テキストウィジェットにソースコードを書いてCSSでスタイリングするしかないかと思います。 -
2017年11月14日 12:30 AM #56850
かうたっく
ゲストメニューのHTMLを確認すると、固有の
id="menu-item-***" class="menu-item-***"があります。それを指定してリンク前に画像を置いて環境に合わせてスタイルを決めるなど試しても良いかもしれません。#menu-side .menu-item-*** a:before { content: url(画像のパス); /*色々スタイル調整*/ }それか背景に画像を指定してleftでno-repeatなど指定しても良さそうかもです。多分検索したら、何かヒットするかもしれません。
-
2017年11月18日 2:47 AM #56967
torui
ゲストお返事ありがとうございます。
なるほど、、、
カスタムメニューでは画像を引っ張って来れないのですね。
一度htmlで試してみますね!! -
2017年11月18日 8:44 AM #56980
かうたっく
ゲスト朝、WordPress Popular Postsのヘルプを見てたんですけど、WordPress Popular Postsを導入している場合限定ですが、HTMLを書かなくても良さそうかと思います。
任意のおすすめ記事を数個だけ表示したいとき。
・他の記事には使用しないタグ(投稿ータグ)を追加。『例:おすすめタグ』(タグのidは例として
post_tag&tag_ID=201とする)。
・WordPress Popular Postsウジェットのタクソノミー欄をおすすめタグidを追加:『201』。
・投稿設定欄:アイキャッチ画像を表示にチェック
・サイズを手動で指定 任意の幅・高さを指定順番は人気記事順になりますが、HTML・CSSは書かなくて済むから簡単で楽そうです。
-
-
投稿者投稿
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。