これでトップページの説明文の追加は完了ですが、このままではページャーの2ページ目、3ページ目をクリックした時に、記事一覧の上に同じように説明文が表示されてしまいます。 STINGER8の記事一覧のサムネイルサイズは、デフォルトだと150pxの画像を100px四方の正方形に縮小して表示しています。スマホでの閲覧のことを考えれば、この仕様のほうがスマートで一見よさそうですが、画像の中心以外が大きく削られてしまうのはちょっと残念です。 }, PC表示の文字サイズをデフォルトよりも小さくしたかったので、子テーマのCSSの「PCサイズ」のところに以下の記述を追加しました。, .entry-content p { どうすればいいでしょうか?, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, ( twitter:@hidarinohi )ヒダリ、アイカワラズミーなどのバンドで主にギター、ボーカル、作曲を担当。             

         , 「STINGER8」にも十分なウィジェットエリアが付いてますが、それ以外にも希望の場所にウィジェットが追加できるようにしたい場合がありますね。, そんなときは以下のようにしますが、例としてヘッダー部分にウィジェットを表示するためのエリアを作る場合を考えて見ましょう。, if(function_exists('register_sidebar')) {             

, 記事の下に表示される関連記事を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「single.php」ファイルに、以下の黄字の部分を追加しました。, );          }, ブログタイトルとブログ内容の文字位置を少し右に寄せたかったので、子テーマのCSSの「PCサイズ」のところに以下の記述を追加しました。, header .sitename a { ということで今回はその辺の言い訳ついでに、新サイトについて紹介をします。 $defaults = array(             投稿日:     background-image: url(images/header.png);     );         )     

    'depth'           => 1, Copyright© ヒダリのヒ , 2020 All Rights Reserved Powered by STINGER. 最初は夫婦の交換日記     

, , 'before_widget' => '
', 'before_title'  => '

', WordPressのテーマSTINGERで、ファビコン設定やったら簡単過ぎて感動した, WordPressのテーマSTINGER7でサイドバーの「NEW POST」を消す2通りのやり方, WordPressのテーマSTINGER7で記事の文字の大きさを変更する簡単な方法, 大長レモンの風味【パンレビュー】木村屋總本店「ジャンボむしケーキ 瀬戸内レモン」を食べた, 何か違う感?【カップ麺レビュー】「日清焼そばU.F.O.濃い濃いソースペースト付き チーズ焼そば」を食べた, 濃厚メロン【パンレビュー】ヤマザキ「薄皮メロンゼリー入りメロンクリームパン」を食べた, 杏仁霜の香り濃厚【パンレビュー】木村屋總本店「ジャンボむしケーキ 杏仁豆腐」を食べた, 豚骨テイスト【カップ麺レビュー】サッポロ一番「塩らーめん 濃厚タンメン タテビッグ」を食べた. Stinger8にしてからゆっくりではあるのですが、ブログのレイアウトを見直しています。, ヘッダーの画像をPhotoshopで修正して、ランダムに表示をさせてみたり記事一覧の間にGoogle Adsenseを設置したりとちょっとずつ一つずつ、できることから実施をしています。, 今回は僕のブログをトップページである記事一覧の見え方について、2つのカスタマイズをご紹介したいと思います。, Stinger8の記事一覧は以下のような見え方をしていますね。これだと、どこから記事の詳細に進んで行くのかわかりにくいと思いました。基本的にはタイトルをクリックすれば記事の詳細にに進むことができますが、サムネイルの画像をクリックしても記事の詳細に進むことができます。, タイトルクリックかサムネイルクリックのどちらも記事の詳細に進むことができるのですが、それがわかりやすく表示されているわけではないので、やはり親切にここをクリックすれば続きが読めるよというボタンはあった方がいいかと思いました。, リンクを張ったようになっていますね。これで、ここをクリックすれば記事の詳細に進むことができるようになりました。初心者はサイトを初めて見にこられた方もこれならば迷うことはないですね。, もう少しわかりやすくしたいので、ボタンにしました。昔はwebサイトでボタンというと、画像イメージにリンクを埋め込むというやり方がありましたが、今はCSSで枠線を入れたりしてボタン風にします。, その時の、ソースはgistで以下に表示をします。実はしょうもない話ですが、僕は少しつまづいてしまったところがあるので、その辺もご紹介します。, 今回CSSでボタンを右寄せするということと、枠線をつけるということをしましたが、そのCSSでちょっとの違いに気づかずになかなか先に進めないという現象に陥ってしまいました。その辺をお伝えしたいと思います。, 僕は、ボタンの右寄せのcssを記載するときに、クラスを「.readme_right a」と記載をしていて、一向にボタンが右寄せされないことに疑問をずっと感じていました。, でも、よく考えたら違います。クラスが「.readme_right a」と記載されているということは、readme_rightというセレクタのaタグの部分についてのみに適用されるという書き方なんでね。今回僕はreadme_rightというクラス全体に対して右寄せをしないといけないわけですから、クラスの書き方は「.readme_right」で十分ということになります。, ここで、ちょっとレイアウト上でなるところが出てしまいました。具体的には、タイトル名「FTR223を手放す。軽自動車届出済証を取得する」という記事の下ですが、記事タイトル下の抜粋文字の最後とサイトを見るボタンがより過ぎていてなんか違和感を感じます。, そもそも抜粋文字はそんなにたくさん文章がなくてもいいかなと思っていますので、文字数を減らして、抜粋部分とボタンに空きを作りたいと思いました。, 具体的には、functions.phpを編集します。もちろん子テーマを使用しましょう。, この数字の部分(デフォルトは100ですが、僕は直接親テーマを編集していました。その時は60文字)を編集すればOKです。僕は、40文字にしました。, あとは見た目で微調整でしょうか。本当は、このボタンの位置の微調整をすれば良いのでしょうが、僕にはまだそのスキルがありませんので、いずれ勉強してから対応をしようと思います。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 人事コンサル(5年)→自動車関係製造メーカー(5年)→メガファーマー(3年)→半導体関連メーカー(1年)で人事しています。, 三児の父親です。最近わざわざイクメンなんて言葉を使わないといけないのか疑問なんでもう使っていません。, 人事・総務のプロで3人の子供がいるウクレレ奏者のdaimacがいろんなことをするblog, WordpressのStinger8をカスタマイズ。Google Analyticsのコード挿入とgistでNoプラグインでソースコード表示。, Wordpressでpタグやbrタグが消える現象を解決する。(根本原因不明。とりあえず対策実施済), WordpressのStinger8で子テーマを作成。テーマ更新とカスタマイズが今までより捗る。. @media print, screen and (min-width: 960px) {     height: 180px;   /* 画像の高さと同じ */              font-size: 14px;        /* 文字サイズ */ /*-- ここまで --*/     padding: 5px 10px 5px 10px; このブログを始めてからブックマークレットにとってもお世話になっています。ブックマークレットという言葉を聞いたことがない方もいるかもしれないので、ちょっとここで確認     width: 800px;    /* 全体の幅 */ Version: 20161115 /*media Queries タブレットサイズ(600px以上) 子テーマは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.」シリーズから、おととい発売になった新商品でして。カップ焼きソバ好きで、しかもチーズ好きの私としましては外せ..., スーパーマーケットで見つけました、ヤマザキの「薄皮メロンゼリー入りメロンクリームパン」です。私の好きなヤマザキの薄皮シリーズから今月の新商品として発売になった、メロンゼリー入りのメロンクリームが入ったパンでして。そういえば同じ薄皮シリ..., スーパーマーケットで見つけました、木村屋總本店「ジャンボむしケーキ 杏仁豆腐」です。木村屋の「ジャンボむしケーキ」シリーズから、今月の新商品として発売になった一品。パッケージにはパンダのイラストと共に「アジアンスイーツ」とありまして、..., スーパーマーケットで見つけました、サッポロ一番の「塩らーめん 濃厚タンメン タテビッグ」です。サッポロ一番のカップ麺の「タテビッグ」シリーズから、今週発売になった新商品ですよ。より強い刺激を求めがちな昨今では辛さが売りの「タンタンメン」..., 辛いっ!【カップ麺レビュー】明星「一平ちゃん夜店の焼そば カラムーチョホットチリ味」を食べた, コメディー?【映画レビュー】『教授のおかしな妄想殺人』あらすじ&感想(ネタバレ無し), 岩瀬 治務 ヒダリでは4枚のアルバムを全国リリース。アイカワラズミーでは関西国際空港開港20周年公式ソングを制作しました。 2ページ目以降は記事一覧のみを表示させる. ありがたいことに、色々なカスタマイズ記事が多くの人に読んでもらえています。 その中で、 カスタマイズ方法を一覧にまとめないと探しにくいなぁ・・・ ということを感じてきました。 私が使用したテーマはStinger8とSANGOの2つ。 , サイドバーにデフォルトで表示される「最近のエントリ」は、トップ・月別・カテゴリページで表示されるのは意味無いかなと思いました。, それで、それぞれのページで非表示にするように、親テーマのディレクトリから子テーマのディレクトリにコピーした「sidebar.php」ファイルに、以下の黄字の2行を追加しました。, /*media Queries PCサイズ(960px以上)          .st-main { }, これによって、「ヘッダーウィジェット」という名前のウィジェットエリアが、管理画面に追加されます。, ここで赤字の「id」は、ウィジェットエリアをユニークに識別するための名前で、好きな名前をつけて構いませんが、アルファベット小文字を使いましょう。, 大文字を使うと、なぜかウィジェットが表示されないという不具合が発生するので要注意です。, 次に黄字の「name」と「description」は、管理画面に表示されるウィジェットエリアの名前と説明です。, そして青地の「before_widget」と「after_widget」は、ウィジェットが表示される際の前後に付加されるHTMLタグの指定です。, 後でCSSによって表示形式を指定しやすくするために、「id」と「class」を定義してますが、無くても構いませんよ。, ちなみにここでは、ウィジェット名にハイフンと数字が付けられる「%1$s」を定義して、「id」が自動でユニークになるようにしています。, 同様に「class」のほうは「widget %2$s」として、自動でウィジェット名などが定義されるようにしています。, この記述方法はリファレンスで推奨されているやり方ですが、自由に好きな名称をつけるなどの変更しても問題ありませんね。, そして緑字の「before_title」と「after_title」は、ウィジェットが表示される際の「タイトル」の前後に付加されるHTMLタグの指定になります。, やはり同様にして「class」の指定をしてますが、ここも自由に改変してオッケーですよ。, さて続いて、このウィジェットエリアにセットしたウィジェットが、実際にヘッダー部分に表示されるようにするための手順です。, まずは、親テーマの中にある「header.php」を子テーマのほうにコピーします。, そして表示させたい部分にコードを挿入しますが、今回は以下のように</header>タグの直前にしました。, } if ( isset($GLOBALS['stdata60']) && $GLOBALS['stdata60'] === 'yes' ) {, まず、記事の上に表示される投稿日と更新日を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「single.php」ファイルに、以下の黄字の2行を追加しました。, 次に、投稿日を「Fontawsome」のアイコンで表示するために、以下の青字の1行を追加しました。,

             }, header .descr {          僕のサイトの記事一覧にある、記事の抜粋部分ですが、僕のブログは、最初の文章に「よろしければクリックをお願いします。... function.phpを変更する             'before_widget' => '
', }     width: 800px;    /* 画像の幅と同じ */ @media only screen and (max-width: 960x) {                                  ',          @import url('../stinger8/style.css'); 子テーマでも設定しているのですが、!importantをしても反映されないのです。

カーコンビニ倶楽部 全塗装 料金 7, 英語 耳 曲 4, Ykk 面格子 外し方 16, クリスタ ぼかし ペン 6, 卒論 バイト 両立 4, 白髪 ショート 女優 5, 求人 土日休み 嘘 5, Bmw F20 内張り 外し方 7, 米粉 100%パン ホームベーカリー 5, Pcエンジン Mini 改造 32, イルルカ アスラゾーマ まねまね 12, Ff14 ミラプリ ララフェル 4, グロック18c ロングバレル ガス 5, 鳴門渦潮高校 野球部 2ちゃんねる 9, Dmr Bw690 Mp4 11, Pdf 注釈 印刷 4, Openttd 日本 マップ 6, あつ森 最初の服 パイナップル 6, 猫 近くにいる 理由 12, 卒論 背景 例 4, ゴアテック ス 靴 洗い方 14, ファミスタ クライマックス 2017 6, ギルティクラウン いのり 挿入歌 4, パク ヒョンシク 理想のタイプ 5, 面接 進学 では なく 就職に した 理由 21, レターパック 速達 どちらが早い 5, Laravel デプロイ Windows 4, 144mhz Gpアンテナ 自作 16, 水 比熱 理科 年表 4,

LEAVE A REPLY:

(this will not be shared)
(optional field)

No comments yet.