スポンサーリンク

CSSの知識無しでWordPressの見出しのデザイン変更やっとできた…(iPhoneだけで全部やる)

この記事は約4分で読めます。

【重要】WordPressの見出しタグh1は1回しか使っちゃいけない?
↑重要なのでh1タグは使わないようにしてください。暇があれば上記記事一読もお願いします。

見出しデザインのコードを取得

CSSとか全然詳しくないので1年前に奮闘して挫折して以来、諦めていましたが、ようやく変更できました。

なかなか痒いところに手が届く記事が見つからなくて苦労しました…

CSSの知識はほぼ要りません。ネットにあるコードを拾ってくることでデザイン変更します。(現状の僕にはそれが限界…)

あと、iPhoneだけで完結させます。諸事情によりPC持ってないので。

まずはどこかからコード拾ってきてください、ここがオススメです(CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68)

そして申し訳ないのですが、

h2 {なんとかかんとか}

みたいな形式のコードでしか実現できてませんのですみません。

好きなデザインをコピーしてきてください。

追加CSSにコードを追加

どこにペーストすればいいかというと、

↑WordPressにログインして左の項目の「外観」→「CSS編集」をクリック。

見出しデザインCSS(.entry-content h2)

↑この真ん中の欄(左に1、2、3…と番号が書いてある右の欄)にペーストします。(初期状態だと空欄です)

んで、ペーストした「h2 {なんとかかんとか}」を「.entry-content h2 {なんとかかんとか}」に変更します。

つまり、前に「.entry-content」を付与します。

ここでもし、「h2 {なんとかかんとか}」のままで終わらせてしまうと、ブログのタイトルや記事のタイトルにまでデザインが反映されてしまいます

なので「.entry-content」を記載して、記事内の見出しだけに限定させる必要があります。

ちなみに画像にあるとおり、「/*なんとかかんとか*/」と記入すれば、プログラムに影響を及ぼさないコメントを書くことができます。

あとから「これなんのためのコードだっけ?」とならないようコメントを書いておくことをオススメします。

これ全部iPhoneでやったんですが、この欄に記入するのがめちゃくちゃ難しくて、思うようにカーソルが動かないし選択も難しくて苦戦します。できるならここはPCから入力する方がいいのかもですね。(PC使わなくてもメモ帳アプリかなんかで記入してからコピペするといいのかもしれません。特に恐ろしく入力しづらいのがコメント入力です。これほんとやばいです。これこそ他で書いてコピペすべきです)

実際に変更されてるか確認

ここまでしてブログを見に行ってみると、

こんなふうに、見出しのデザインが変更されてると思います。

今回は「h2」の見出しについてだけ変更したので、他の見出しも個別に変更する必要はあります。

あ、そういえば僕がめちゃくちゃつまずいたのが、「そもそも見出しってどうやって設定するの??」っていうすんげえ初歩的なところだったのですが、一応説明しとくと、

ブログ作成画面のこのバーの「H」のアイコンでひとまとまりの文章見出しとして設定できます。

「見出し」ってちゃんと書いてるのにわからなかったのは、「目次」は知ってても「見出し」という言葉がわからなかったからです…^^;

見出しコマンドは文字サイズの変更だと思ってました…(;^ω^)

デザインを自分で変更してみる

コピペだけだとオリジナリティに欠けるので、せめて色くらいは変更してみようと思います。

見出し色変更

僕のデザインの例で言うと、この黄色の下線を引いた箇所が、色を意味しております。

ネットで「カラー コード」とでも検索すればHTMLカラーコード一覧表が出てくるので、そこから選んで、#114514みたいな6桁の16進数をコピペすれば色を変えられます。(実際やってみてください)

あと、数値の部分も変えたら色々変わるのでしょうが、そこは省きます。

おわりに

この追加CSSという項目に入力することで、見出しに限らず、タイトルとか背景色とか、ブログのいろんな部分を、根本的なCSSを変更することなく、後付け的に改造することができます。

なので、根っこからCSSを変更してバグってどうしようもなくなるみたいなことを防げるので、初心者はここをいじっとけみたいな感じですかね。

まぁ主にデザインは選んだテーマで決まるので、気に入ったテーマをまず選んで、細かい部分をCSSをいじくることで色々やっちゃったらいいんじゃないすかね。

今はブログタイトルや記事タイトルのデザインをどうすれば変更できるのかわからなくて調べてます(´・ω・`)

0
ブログランキング参加中です!クリックしてもらえるとありがたいです!
ブログランキング・にほんブログ村へにほんブログ村

コメント

  1. Jim より:

    Howdy, i read your blog occasionally and i own a similar one and i
    was just curious if you get a lot of spam responses?
    If so how do you prevent it, any plugin or anything you can recommend?
    I get so much lately it’s driving me insane so any assistance is
    very much appreciated. I’ve been surfing online more than 3 hours today, yet
    I never found any interesting article like yours. It is pretty worth enough
    for me. In my view, if all web owners and bloggers made good content as
    you did, the web will be a lot more useful than ever before.
    I couldn’t resist commenting. Exceptionally well written! http://foxnews.net

    0
  2. After exploring a few of the blog articles on your
    web site, I truly like your way of blogging. I saved as a favorite
    it to my bookmark website list and will be checking back soon. Please check out my website too and tell me
    your opinion.

    0
  3. Hello there! This article couldn’t be written much better!
    Reading through this post reminds me of my previous roommate!
    He continually kept preaching about this.
    I am going to forward this information to him. Pretty sure he’s going
    to have a great read. I appreciate you for sharing!

    0
  4. Man what a great article. I wish I had seen this earlier.
    Thanks for posting keep up the good work. http://howbadyouwannago.com

    0
  5. cafe rule より:

    My developer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using Movable-type on a
    number of websites for about a year and am nervous about switching to another platform.
    I have heard fantastic things about blogengine.net.
    Is there a way I can import all my wordpress posts into it?
    Any help would be really appreciated!

    0
  6. Great blog I wish I knew about this blog earlier. I would of helped. http://tgbn.org/__media__/js/netsoltrademark.php?d=mcrlogitech.com

    0
  7. Iron ThundeR より:

    Very good information. Lucky me I recently found your blog by accident (stumbleupon).

    I’ve saved it for later!

    0
  8. Having read this I thought it was rather
    informative. I appreciate you taking the time and energy to put this information together.
    I once again find myself spending way too much time both reading and commenting.
    But so what, it was still worthwhile!

    0
  9. Android Mod Apk より:

    I read this article fully concerning the difference of newest and earlier technologies, it’s
    amazing article.

    0
  10. Thanks for sharing your thoughts. I really appreciate your efforts and
    I will be waiting for your next post thank you once again.

    0
  11. I always used to read paragraph in news papers but now as I am
    a user of net thus from now I am using net for posts, thanks
    to web.

    0
  12. Hello. remarkable job. I did not expect this. This is a excellent story.
    Thanks!

    0
  13. Great beat ! I would like to apprentice whilst you amend
    your site, how can i subscribe for a blog website?

    The account helped me a applicable deal. I had been tiny bit acquainted of this your broadcast offered vibrant clear concept.

    0
  14. korea viet nam より:

    Great information. Lucky me I recently found your website by chance (stumbleupon).
    I’ve saved as a favorite for later!

    0
  15. Lou より:

    Hello there! I just want to offer you a huge thumbs up for your great information you have here on this post.

    I’ll be returning to your web site for more soon.

    0
  16. max thin lipo より:

    Hello there, I found your website by means of Google even as looking for a comparable matter, your web site came up,
    it appears to be like good. I’ve bookmarked it in my google bookmarks.

    0
  17. Very nice post. I just stumbled upon your weblog and wanted to
    say that I have truly enjoyed browsing your blog posts.
    After all I will be subscribing to your feed and I hope you write
    again very soon!

    0
    • wakame1001 より:

      Thank you. Please register because there is a subscription form in the sidebar or under the share button.

      0
  18. I am not sure where you are getting your information, but great topic.
    I needs to spend some time learning more or understanding more.
    Thanks for excellent information I was looking for this information for my
    mission.

    0
  19. medicine より:

    This website truly has all of the information and facts I needed about this
    subject and didn’t know who to ask.

    0
  20. medicine より:

    Hi it’s me, I am also visiting this website on a regular basis, this web page is in fact pleasant
    and the visitors are really sharing fastidious thoughts.

    0
  21. viagra より:

    What’s up i am kavin, its my first occasion to commenting anyplace, when i read this article i thought i could also create comment due to this brilliant post.

    0
  22. I am actually grateful to the owner of this site who has shared this great paragraph
    at here.

    0
  23. Wonderful beat ! I would like to apprentice even as you amend your site,
    how can i subscribe for a blog web site? The account helped me a applicable
    deal. I were tiny bit acquainted of this your broadcast provided vivid transparent concept.

    0
    • wakame1001 より:

      Thank you. There is a registration form on the sidebar or under the share button so please register.

      0
  24. Pkv Games より:

    Hello colleagues, how is everything, and what you want to say about this post, in my view its truly
    awesome designed for me.

    0
  25. I’m impressed, I have to admit. Seldom do I encounter a blog that’s equally
    educative and interesting, and let me tell you, you have hit the nail on the head.

    The issue is something too few folks are speaking intelligently about.

    I am very happy that I came across this during
    my search for something concerning this.

    0
  26. Camera Wifi より:

    Hi! Would you mind if I share your blog with my twitter group?
    There’s a lot of people that I think would really appreciate your content.

    Please let me know. Thank you

    0
  27. It’s enormous that you are getting thoughts from this article as well as from our discussion made at this time.

    0
  28. I am really grateful to the holder of this web site who has
    shared this wonderful article at at this place.

    0
  29. Checkout より:

    Spot on with this write-up, I seriously believe that this amazing site needs a lot more attention. I’ll probably be
    back again to read through more, thanks for the information!

    0
  30. I think the admin of this site is truly working hard for his web page,
    for the reason that here every material is quality based material.

    0
  31. Does your site have a contact page? I’m having trouble locating it but, I’d
    like to shoot you an e-mail. I’ve got some creative ideas for your blog you might be
    interested in hearing. Either way, great
    site and I look forward to seeing it grow over time.

    0
    • wakame1001 より:

      I am sorry for the late reply. As you said, my blog didn’t have a contact function. Therefore, I created a contact form in the sidebar. Please use it. I’m really thankful to you.

      0
  32. Ηi there! Would you mind if I share your blog wіth my twitter grouр?
    Thегe’s ɑ ⅼot of people that I think wouⅼd гeally ɑppreciate уօur content.
    Ρlease ⅼet me know. Thanks

    0
  33. Hey! I understand this is kind of off-topic but I needed to ask.
    Does operating a well-established website such as yours require a lot of work?
    I am brand new to running a blog but I do write in my diary everyday.
    I’d like to start a blog so I can easily share my experience and thoughts online.
    Please let me know if you have any kind of recommendations
    or tips for brand new aspiring bloggers. Thankyou!

    0
    • wakame1001 より:

      I think you can use WordPress just like I do. You can search the internet for the installation method.

      0
  34. What a material of un-ambiguity and preserveness of precious knowledge on the topic of unexpected feelings.

    0
  35. Great information. Lucky me I ran across your site by accident (stumbleupon).
    I’ve bookmarked it for later!

    0
  36. Ethel より:

    What?s up, I log on to your new stuff regularly.
    Your story-telling style is awesome, keep doing
    what you?re doing! https://nanoprotection.ca

    0
  37. We wish to thank you yet again for the stunning ideas you offered Jesse when preparing a post-graduate research and, most importantly, pertaining
    to providing all of the ideas in one blog post.
    If we had known of your website a year ago, we
    would have been kept from the unwanted measures we
    were choosing. Thank you very much.

    0
  38. Thank you for sharing with us, I conceive this website genuinely stands out :
    D.

    0
  39. Stacey より:

    Thanks for fantastic
    info I was looking for this information for my mission. https://www.forestube.com

    0
  40. Fae より:

    Hello, I enjoy reading all of your article.
    I like to write a little comment to support you. https://www.livrebonnenuit.com

    0
  41. Hello, Neat post. There is a problem with your site in internet explorer, could check this?
    IE still is the marketplace chief and a large portion of folks will leave out your great writing due to this problem.

    0
    • wakame1001 より:

      Hello, Thank you for your comment!
      Is that true? I checked it in IE, but I could not find any particular problem. What kind of problem is happening (was happening in the past)? I hope you’ll tell me.

      0
  42. Hi there just wanted to give you a quick heads up. The words in your content seem to
    be running off the screen in Chrome. I’m not sure if this is
    a formatting issue or something to do with internet browser
    compatibility but I figured I’d post to let you know. The design and style look great though!

    Hope you get the issue solved soon. Kudos

    0
  43. I am constantⅼy searching online fօr ideas that can hеlp me.
    Thank уou!

    0
  44. Levi より:

    I just wanted to give you a quick heads up! Aside from that, wonderful blog! https://www.ernest.ca

    0
  45. Verla より:

    What?s up, just wanted to tell you, I loved this post. It was practical.

    Keep on posting! https://exterminationchomedey.com

    0
  46. Nancy Fortier より:

    Thank you for publishing this awesome article. I’m a long time reader but I’ve
    never been compelled to leave a comment. I subscribed to your
    blog and shared this on my Facebook. Thanks again for a great post! https://bmserviceexclusif.com

    0
    • wakame1001 より:

      Thank you for sharing this article. I do not write many articles with this kind of content, so I think that it is different from the blog you want, but please read it if you like.

      0
  47. Good Essays より:

    Heya just wanted to give you a quick heads up and let you know
    a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different web browsers and both show the
    same results.

    0
    • wakame1001 より:

      Well, thank you for the info, but it’s displaying correctly in my browser, so I’m not sure why

      0
  48. If some one wants expert view about running a blog afterward
    i advise him/her to go to see this blog, Keep up the fastidious work.

    0
  49. Hello! Quick question that’s entirely off topic.
    Do you know how to make your site mobile friendly?

    My site looks weird when browsing from my iphone4. I’m trying to find a
    template or plugin that might be able to correct this problem.
    If you have any recommendations, please share. Appreciate it!

    0
  50. I like reading through an article that can make
    people think. Also, thank you for permitting me to comment!

    0
  51. Computers より:

    There is definately a lot to learn about this subject.
    I like all the points you made.

    0
  52. Asalqq.Net より:

    Awesome post.

    0
  53. Today, I went to the beach front with my children. I found a
    sea shell and gave it to my 4 year old daughter and said
    “You can hear the ocean if you put this to your ear.” She put the shell to
    her ear and screamed. There was a hermit crab inside
    and it pinched her ear. She never wants to go back! LoL I know this is totally off topic but I had to tell someone!

    0
  54. May I just say what a relief to discover somebody who truly knows
    what they’re talking about online. You certainly realize how to bring a problem to light and make it important.

    More and more people should check this out and understand
    this side of the story. I can’t believe you aren’t more popular since you
    most certainly have the gift.

    0
  55. My developer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the expenses.

    But he’s tryiong none the less. I’ve been using Movable-type on a variety of websites for about a year and am worried
    about switching to another platform. I have heard great things about blogengine.net.
    Is there a way I can import all my wordpress posts into it?
    Any help would be really appreciated!

    0
  56. Hi to every one, the contents present at this web site are genuinely amazing for people knowledge, well, keep up the
    nice work fellows.

    0
  57. camera ip wifi より:

    Wow, that’s what I was exploring for, what a stuff!

    existing here at this webpage, thanks admin of this web page.

    0
  58. I like it whenever people come together andd share
    thoughts.Great website, continue the good work!

    0
  59. 918Kiss より:

    You can select pay lines, adjust your bets, and spend using only your computer mouse button.

    0
    • wakame1001 より:

      I’m not sure what you mean, but this article is about “using only the iPhone”.

      0
  60. Hеllo therе, І discovered yօur web site ƅy wаʏ of
    Google аt the same time as lookіng for
    a similar topic, y᧐ur web site ցot here up, it ѕeems t᧐ Ьe gօod.
    I’ve bookmarked it іn mү google bookmarks.[X-N-E-W-L-I-N-S-P-I-N-X]Ꮋеllo there,
    just bеⅽome aware of youг weblog ѵia Google, аnd located
    tһat it іs reɑlly informative. I am going to be careful fⲟr brussels.

    I ᴡill appreciate in the event yоu continue
    tһis in future. Ꮮots of otheг folks wilⅼ be benefited from your writing.
    Cheers!

    0
  61. If you need to write an email or document in all caps on the Slot, simply tap the shift key twice to lock it. This is similar to how you would set the caps lock on any standard keyboard. You can then write your document in all caps easily without having to continuously tap the shift key over and over again.

    0
    • wakame1001 より:

      Thank you for the information that has nothing to do with this article. But it was helpful.

      0
  62. I will do my exclusive unique tactic to boost your website rankings.

    0
  63. I think this is one of the most important information for me.
    And i’m glad reading your article. But wanna remark on few general things, The site style is
    great, the articles is really excellent : D.

    Good job, cheers

    1+
    • わかめ(wakame) より:

      I am very pleased to hear that. Thank you very much. I had a hard time, so I’m glad I could share the information. As for the style of the site, I’m using an excellent blog theme called COCOON, so I haven’t edited it much. I aim to make the site easier to read.

      0
  64. Hiya, I am really glad I have found this information.
    Nowadays bloggers publish just about gossips and net and
    this is really annoying. A good web site with interesting content, this is what I need.
    Thanks for keeping this site, I will be visiting it.
    Do you do newsletters? Can’t find it.

    1+
    • wakame1001 より:

      Thank you for saying that. Articles that simply tell what people see and hear are not worth it. I will continue to do my best to create articles of high quality. Is a newsletter a new notification? Although it can be registered in the sidebar, I found it difficult to understand, so I placed it below the content. If you don’t mind, I would be happy if you could register.

      0
  65. Hi, just wanted to say, I loved this article. It was
    inspiring. Keep on posting!

    0
  66. Thanks for any other informative web site.
    The place else may just I get that type of information written in such an ideal method?
    I have a undertaking that I’m just now working on,
    and I’ve been on the look out for such info.

    1+
    • わかめ(wakame) より:

      I am sorry for the late reply.

      Thank you for saying that it is useful. Is that meant to write this content elsewhere? Of course it’s okay. If you like, I would appreciate it if you could include an article link.

      I’m really thankful to you.

      0
  67. Hello, just wanted to mention, I enjoyed this post. It was inspiring.
    Keep on posting!

    1+
タイトルとURLをコピーしました