stinger8 記事一覧 カスタマイズ 4
by
on 15/11/2020
at 12:20 pm
Copyright© ヒダリのヒ , 2019 All Rights Reserved. array( 最初は夫婦の交換日記
}
width: 240px; /* サイドバー部分の幅 */ ----------------------------------------------------*/ つい最近stinger7から新しくstinger8にテーマを変更したこともあり、そのあたりを見直すいい機会かと404エラーページと検索結果ページをカスタマイズしてみました。 ----------------------------------------------------*/ @media only screen and (min-width: 600px) { 記事一覧に「続きを読む」ボタンを作る ノンカスタマイズした画面. 'container_class' => 'footermenubox clearfix ', height: 180px; /* 画像の高さと同じ */ ----------------------------------------------------*/
$GLOBALS['stdata60'] = 'yes'; kanren dt ----------------------------------------------------*/ 2018年4月1日から新サイトをオープンしようと息巻いていましたが、僕の体力不足でリリースが難しくなってしまいました。
/*media Queries PCサイズ(960px以上) 'description' => 'ヘッダーに表示されるコンテンツエリアです。', Copyright© ヒダリのヒ , 2020 All Rights Reserved Powered by STINGER. @media only screen and (max-width: 959px) { のアイキャッチサムネイルの部分。, サムネイル画像が幅100pxと150pxのものしか用意されていないので幅200pxのものも書き足します。, これでいけたと思ったのですが、各記事ページの記事下の関連記事一覧もサムネイル画像が大きくなってしまいました。 , 「STINGER8」にも十分なウィジェットエリアが付いてますが、それ以外にも希望の場所にウィジェットが追加できるようにしたい場合がありますね。, そんなときは以下のようにしますが、例としてヘッダー部分にウィジェットを表示するためのエリアを作る場合を考えて見ましょう。, if(function_exists('register_sidebar')) { STINGER8の記事一覧のサムネイルサイズは、デフォルトだと150pxの画像を100px四方の正方形に縮小して表示しています。スマホでの閲覧のことを考えれば、この仕様のほうがスマートで一見よさそうですが、画像の中心以外が大きく削られてしまうのはちょっと残念です。 font-size: 14px; /* 文字サイズ */ 詳しくはこちら→プロフィール. 子テーマでも設定しているのですが、!importantをしても反映されないのです。 STINGER8のデフォルトではトップページの記事一覧のサムネイル画像のサイズが幅100pxと小さいので幅200pxに変更したいと思います。 WordPressにログインしてダッシュボードの左側メニュー 外観→テーマの編集→スタイルシート (style.css) /*-- ここまで --*/ , 「is_home」と「is_front_page」の関数でトップページを判定して、「is_archive」の関数で月別・カテゴリページを判定して、それぞれのページでは非表示になるようにしたわけです。, サイドバーのタイトル(見出し)のデザインを変更するために、子テーマのCSSに以下の記述を追加しました。, p.menu_underh2 { Version: 20161115 ----------------------------------------------------*/ , サイドバーにデフォルトで表示される「最近のエントリ」は、トップ・月別・カテゴリページで表示されるのは意味無いかなと思いました。, それで、それぞれのページで非表示にするように、親テーマのディレクトリから子テーマのディレクトリにコピーした「sidebar.php」ファイルに、以下の黄字の2行を追加しました。,
', display: inline-block; )
'menu_class' => 'footermenust', 「よろしくお願いします!」. border: 1px solid #ccc; @media only screen and (max-width: 960x) { 子テーマはstyle.cssとheader.php、sidebar.phpおよびFunction.phpを編集しています。, 頂いたコメントの内容だけだと状況が分からないので何とも言えないのですが、CSSの他の部分で「!important」による意図しない設定がされてる可能性は無いでしょうか?, あるいは実際に設定は反映されているのに、ブラウザで見てみるとキャッシュのせいで反映されてないように見えるということがよくあります(私もコレで何時間も悩んだことがあります・・・)。, ブラウザのキャッシュをクリアするとか、「Ctrl+F5」などの(ブラウザによってショートカットキーは違いますが)スーパーリロードをして再確認してみてはいかがでしょうか。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, WordPressのテーマにSTINGERを使ってるんですが、そのファビコン設定やったら簡単過ぎて感動しました。ファビコン作成には、2つの便利サイトを利用させて頂いたんで、そのへんも参考にして頂ければ。, 新しくテーマをインストールして見た目の体裁を変更したら、次はプラグインで使い勝手等を改善しようかなと。ちょっと調べてみたんですが、とりあえず入れるべきプラグインは、以下の2つだけという結論になりました。他にも便利なプラグインはたくさん..., WordPressのテーマに「STINGER7」という素敵テーマを利用させて頂いてるんですが、このテーマのサイドバーに「NEW POST」という新規投稿の一覧を表示する機能が付いてまして。それがサイドバーの一番上に固定されてて、移動も..., WordPressが無事インストールできたんで、今度は見栄えをカッコ良くしたいなと。初心者にも優しくて、シンプルでクールなテーマはないかと探して、「STINGER」というのを見つけました。現時点の最新バージョンは、「STINGER7」..., WordPressのテーマSTINGER7の記事の文字サイズを変更する方法を調べてやってみたので、記事にしてみました。プラグインを使って、簡単な2つの手順でできましたので、ご参考になればと。, スーパーマーケットで見つけました、木村屋總本店「ジャンボむしケーキ 瀬戸内レモン」です。木村屋の「ジャンボむしケーキ」シリーズから、今月の新商品として発売になった品ですが。このシリーズで既に発売されたことのあるただの「レモン」とは違っ..., ドラッグストアで見つけました、「日清焼そばU.F.O.濃い濃いソースペースト付き チーズ焼そば」です。「日清焼そばU.F.O.」シリーズから、おととい発売になった新商品でして。カップ焼きソバ好きで、しかもチーズ好きの私としましては外せ..., スーパーマーケットで見つけました、ヤマザキの「薄皮メロンゼリー入りメロンクリームパン」です。私の好きなヤマザキの薄皮シリーズから今月の新商品として発売になった、メロンゼリー入りのメロンクリームが入ったパンでして。そういえば同じ薄皮シリ..., スーパーマーケットで見つけました、木村屋總本店「ジャンボむしケーキ 杏仁豆腐」です。木村屋の「ジャンボむしケーキ」シリーズから、今月の新商品として発売になった一品。パッケージにはパンダのイラストと共に「アジアンスイーツ」とありまして、..., スーパーマーケットで見つけました、サッポロ一番の「塩らーめん 濃厚タンメン タテビッグ」です。サッポロ一番のカップ麺の「タテビッグ」シリーズから、今週発売になった新商品ですよ。より強い刺激を求めがちな昨今では辛さが売りの「タンタンメン」..., 辛いっ!【カップ麺レビュー】明星「一平ちゃん夜店の焼そば カラムーチョホットチリ味」を食べた, コメディー?【映画レビュー】『教授のおかしな妄想殺人』あらすじ&感想(ネタバレ無し), 岩瀬 治務
}, 全体の幅を800pxにして、それに合うように記事部分とサイドバー部分の幅を調整しました。, それぞれの幅の値の合計が全体の幅よりも小さいのは、デフォルトで“padding”などの余白の指定がされているためです。, ブログタイトルの背景を画像にするために、まずは用意した背景画像(header.png)をサーバにアップロードします。, まずは、子テーマのディレクトリの中(ワードプレスのルートディレクトリ/wp-content/themes/stinger8-child)の中にある「images」ディレクトリへ、FTPで背景画像をアップロード。, #headbox { header, #headbox-bg { @media only screen and (min-width: 600px) and (max-width: 959px) { 'before_title' => '
', background: #330000; /*-- ここまで --*/ Version: 20161115
'container' => 'div', Theme Name: STINGER8 Child font-size: 16px !important; 投稿日: , 今回はヘッダ部分にウィジェットを追加できるようにしましたが、同様にすればフッタや記事の上下部分などに追加できるウィジェットエリアも作成できますね。, まだまだカスタマイズが必要なところがあるんですが、なかなか簡単にとはいかなくて、アレコレ試しながら調整していくことが必要なテーマですね。, せっかくブログをやるならついでに【チョット小遣い稼ぎ】アフィリエイトをやるのがおすすめ(お得な自己アフィリエイトも), こういうシンプルな細かいカスタマイズ方法を探してもなかなか見つからず、、、。助かりました。, Google検索より飛んできました。 の部分を以下のように変更しました。, これでいけるはず、と思ったのですがトップページを確認してみるとサムネイル画像が微妙にボヤケています。 margin-bottom: 1.2em; /* 段落間 */ 'before_widget' => '
', /*media Queries タブレットサイズ(600px~959px)のみで適応したいCSS -タブレットのみ このブログで使ってるWordPressの無料テーマの「STINGER Plus+」が、次のバージョンの準備のためとのことで公開終了してからしばらく経ってましたが。 ようやく先月の中頃に新バージョンの公開がされたとの情報を受けまして、早速見に行ったのですが・・・なんと予想外の事態になってまして。 2020 All Rights Reserved. } :osamiwa@o-kay.biz
} padding: 5px 10px 5px 10px; /*media Queries タブレット(600px)以上で適応したいCSS -タブレット・PC #side .st-aside { この記事に関してはかなり反省しています。 テーマ変更ついでにseo見直しを兼ねて. @media only screen and (min-width: 600px) { @import url('../stinger8/style.css'); 僕のサイトの記事一覧にある、記事の抜粋部分ですが、僕のブログは、最初の文章に「よろしければクリックをお願いします。... function.phpを変更する
} /*-- ここまで --*/ }, PC表示の記事タイトルが大きすぎるので、小さくするように子テーマのCSSの「PCサイズ」のところに、以下の記述を追加しました。, #content h1.entry-title {
, , 'before_widget' => '
Discussion ¬